qjd-user-uniapp/pages/index/login.vue

<template>
	<view class="container">
		<image class="authorize-bg" src="../../static/images/loginBg.jpg"></image>
		<image class="logo" src="../../static/images/loginLogo.png"></image>
		<view class="authorize-box">
			<!-- <button class="authorize-button" open-type="getUserInfo" @click="appLoginWx()">
				<view class="button-text">获取角色信息</view>
				<view class="iconfont iconshangchuan1"></view>
			</button>
			<view class="authorize-info">{{userNmae}}</view> -->
			<!-- <button class="authorize-button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				<view class="button-text">获取手机号</view>
				<view class="iconfont iconshangchuan1"></view>
			</button>
			<view class="authorize-info">{{wxPhoneData? '****************' : ''}}</view> -->
			<!-- <view class="authorize-login" @click="getUserInfo">登录</view> -->
			<button 
				class="authorize-login" 
				open-type="getUserInfo" 
				@getuserinfo="getUserinfoWechat" withCredentials="true" >
				登录
			</button>
			<view @click="showAgreement = true" class="agreement">点击登录视为同意<text class="underline">平台服务协议</text></view>
			<!-- <button 
				class="authorize-login" 
				open-type="getUserInfo" 
				@click="getUserinfoApp">
				登录
			</button> -->
		</view>
		{{tipxx}}
		<u-top-tips ref="uTips"></u-top-tips>
		<u-popup mode="center" :mask="true" :closeable="false" v-model="showAgreement">
			<view class="pop-content" :style="{width: windowWidth*0.8+'px',height: windowHeight*0.8+'px'}">
				<scroll-view scroll-y="true" class="scroll">
					<view v-html="html"></view>
				</scroll-view>
				<view class="confrim-btn">
					<u-button @click="showAgreement = false;">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	const html = `
<h4>用户服务协议</h4>
特别提示：         
欢迎您来到千家地！    
为使用千家地服务，您应当阅读并遵守《千家地用户服务协议》（以下简称“本协议”）。  请您在进一步操作之前仔细阅读、充分理解本协议的各个条款。您有权选择同意或不同意本协议，您点击“我已阅读并同意”按钮即视为您已阅  读并接受本协议的所有条款。
您完成注册程序或使用第三方账号登录千家地平台，使用千家地平台服务，即视为您已充分阅读、理解本协议，并自愿受本协议的约束。阅读本协议过程中，如果您不同意本协议或其中任何条款，请立即停止注册程序并停止使用千家地平台服务。         
本“特别提示”是本协议正文的组成部分。            
1. 定义    
    * 千家地平台：是指北京千家地商贸有限公司经营的电商平台，包括但不限于千家地网站、千家地客户端及千家地微信商城。    
    * 千家地：是指千家地平台的经营者，即北京千家地商贸有限公司。作为电子商务平  台经营者，千家地仅为第三方入驻商家（以下简称“商家”或“销售方”）与您达成交易提供网页空间、虚拟经营场所、交易规则等服务，千家地并非商家与您之间交易行为的参与方，不对商家及/或您的任何口头、书面陈述或承诺，发布的信息及交易行为的真实性、合法性、       准确性、及时性、有效性等作任何明示或暗示的保证。您完全理解并同意，千家地基于平台管理和保护消费者利益的需要，依据千家地与商家之间的约定及/或平台规则，督促商家履行其对您作出的承诺或赔付责任（赔付方式包括但不限于发放长期有效的无门槛现金券），       但这并不意味着千家地须承担与此相关的任何法律责任（包括但不限于连带责任、担保责任、补充责任等）。         
    * 千家地用户服务协议：即本协议，指您与千家地订立的旨在约定您登录、使用千家地平台，以及通过千家地平台下达订单、购买商品、支付货款、收取商品等整个网购过程中，您与千家地之间的权利、义务的书面合同。    
    * 千家地规则：包括所有千家地已经发布或将来可能发布、修订的各类规则、规范、  规则解读、实施细则、通知、公告等。
2. 协议范围及变更    
    * 协议范围。
千家地规则为本协议不可分割的一部分与协议正文具有同等法律效力。         
2.2. 协议变更。为给您提供更好的服务，千家地将根据业务变化，相应调整本协议。       千家地将按照法律规定对修订内容提前进行公示，修订后的协议一经实施，将完全替代修订前的协议。您应当及时关注和了解本协议的修订情况、公告、提示信息等，如果您不同意修订后协议，请您立即停止使用千家地平台，否则即视为您同意并完全接受修订后的协议。            
3. 用户账户
    * 行为能力。在注册千家地用户账户之前，您应当确认并承诺，您具备中华人民共和国法律规定的与您行为相适应的民事行为能力。    
    * 登录方式。您可以通过注册千家地用户账户或使用第三方账号（例如微博账号、微信  账号等）登录并使用千家地平台。    
    * 账户注册。注册千家地用户账户时，您应当提供真实、有效的信息（包括姓名、电子邮箱、联系电话、联系地址等）；同时，您应当保证上述信息的持续有效性，一旦信息发生变化，您应当及时进行更新；否则您应当承担因信息提供不真实、联系方式无效导致的相关不利后果及全部损失，且千家地保留终止向您提供服务的权利。    
    * 账户保管。您的账户由您自行设置并保管，千家地任何时候均不会主动要求您提供您的账户密码。因您保管账号、密码不当而造成的所有后果，将由您自行承担。凡经您的账号和密码成功登录使用千家地平台，即视为您的使用行为；您应当对您的账户进行的所有活动及后果负法律责任。您不得以任何形式擅自转让或授权他人使用您的账户，因您主动泄露、  出借账户信息或因您遭受他人攻击、诈骗等行为导致的损失及后果，千家地并不承担责任，您可以通过司法、行政等救济途径向侵权行为人追偿。            
4. 商品及/或服务的购买    
4.1. 订单信息的确认。当您在千家地平台购买商品或服务时，请您务必仔细确认所购商品的名称、价格、数量、型号、规格、尺寸或服务的时间、内容、限制性要求等重要事项，  并在下单时核实您的联系地址、电话、收货人等信息。如您填写的收货人非您本人，则该收货人的行为和意思表示产生的法律后果均由您承担。         
4.2. 交易秩序。您的购买行为应当基于真实的消费需求，不得实施恶意购买、恶意维权等扰乱千家地平台正常交易秩序的行为。基于维护千家地平台交易秩序及交易安全的需要，千家地发现上述情形时有权采取关闭相关交易订单，限制账户使用功能、中止或终止服务等措施而无需事先通知您。     
4.3. 合同的成立与生效。您通过千家地平台下达订单后，仅表示系统接收到了您下达的订单。只有您支付价款，您与销售方之间的买卖合同才成立；只有购买成功您与销售方之间的买卖合同才生效。         
4.4. 真实评价。您有权在千家地平台提供的评价系统中对您购买的商品或服务进行评价。您的所有评价行为应遵守法律法规及/或千家地规则的相关规定，评价内容应当客观真实，不应包含任何污言秽语、色情低俗、广告信息及法律法规与本协议列明的其他 禁止性信息；您不得以不正当方式帮助他人提升信用或利用评价权利对其他用户实施威胁、敲诈勒索。千家地可按照法律法规及/或千家地规则的相关规定对您发布的违规信息进行屏蔽等，并有权视情形对您采取身份验证、限制购买行为等处理措施。         
4.5. 商品信息。除另有明确说明外，千家地平台上销售的商品/服务的相关信息由商家自行制作、上传，千家地尽可能通过与商家签订合作协议及发布平台规则等方式约束商家提供准确、完整、可靠、有效、没有错误和误导性的商品描述。然而，您充分理解，千家地平台上存在海量信息，因为互联网技术及人力的局限性，千家地不能保证平台上所有商品的信息均准确、完整、可靠、有效、没有错误和没有误导性。除千家地有明显过错外，对于因商品信息导致的纠纷，千家地不承担任何责任。         
4.6. 异常订单的处理。千家地保留对单个商品的总出售数量进行限制、对单个订单的商品购买数量及同一IP地址对同类商品购买数量进行限制，并对异常订单、异常用户采取监控、限制等措施的权利。如千家地发现您通过千家地平台下达的订单存在违反法律规定或者本协议约定的异常情形的，千家地有权采取关闭相关交易订单、限制账户使用功能、中止或终止服务等措施而无需事先通知您。    
4.7. 违规行为的处理。如果您使用千家地平台时存在违反国家法律法规、本协议、侵害他人利益、千家地利益或社会公共利益、严重违背社会公德等情形，千家地有权采取屏蔽相关信息、中止或终止提供服务等处理措施。         
4.8. 法律责任。您理解并同意，因您违反本协议或千家地规则而产生的第三方索赔请求由您自行承担法律责任；由此导致千家地遭受损失的，您也应当一并赔偿。            
5. 费用    
5.1. 费用。除本协议另有约定外，千家地平台暂时为您提供免费服务，不向您收取任何费用。但千家地保留收费的权利，包括设置收费的软件功能，决定收费对象、收费时段或收费费率等。    
5.2. 收费规则。千家地在收费前，会通过本协议或千家地规则约定的通知方式给予提前通知，若您不同意千家地的收费规则，应当立即停止使用千家地平台；如果您继续使用千家地平台，则视为您接受相关收费规则，您应当遵照收费规则向千家地支付相应的费用。       
6. 所有权及知识产权
6.1. 平台的知识产权。千家地提供的服务中包含的任何编码、商标、服务标志、商号、图形、美术品、照片、肖像、文字内容、音频、视频、按钮图标以及计算机软件、标识、数码下载、数据汇编等都是千家地或其内容提供者的财产，受到中华人民共和国和国版权、商标权和其他财产所有权法律法规的保护。    
6.2. 对平台的授权。对于您在任何时间以任何形式向千家地提供或在千家地平台发表的信息或资料（包括但不限于文字、图片、视频、音频等）相关知识产权，您同意免费授予千家地及其关联公司获得全球排他的许可使用权利及再授权给其他第三方使用的权利。您同意千家地及其关联公司存储、使用、复制、修订、编辑、发布、展示、翻译、分发您的非个人信息或制作其派生作品，并以已知或日后开发的形式、媒体或技术将上述信息纳入其他作品内。       
7.  用户守则    
7.1 禁止行为。您不得进行任何侵犯千家地知识产权的行为，或者进行其他有损于千家地或其他用户合法权益的行为，包括但不限于：    
1) 删除或修改千家地平台上的版权信息；    
2) 对千家地平台及其中的相关信息擅自出租、出借、复制、修改、链接、转载、汇编、发表、出版、建立镜像站点，借助千家地平台发展与之有关的衍生产品、作品、服务、插件、外挂、兼容、互联等；    
3) 在千家地平台中内置各种插件程序或者其他的第三方程序，或者制作、发布、传播上述程序，而无论是否出于商业目的；    
4) 进行编译、反编译、反向工程或者以其他方式破解千家地平台的行为；    
5) 使用千家地平台外挂和/或利用千家地平台当中的BUG来获得不正当的利益；    
6) 利用劫持域名服务器等技术非法侵入、破坏千家地平台的服务器软件系统，或者修改、增加、删除、窃取、截留、替换千家地平台的客户端和/或服务器软件系统中的数据，或者非法挤占千家地平台的服务器空间，或者实施其他的使之超负荷运行的行为；    
7) 假冒千家地或商家在千家地平台当中发布任何诈骗或虚假信息；    
8) 利用千家地平台故意传播恶意程序或计算机病毒。    
7.2.  信息发布。您应当遵守国家有关法律法规，不得在千家地平台当中发表、转发或者传播含有下列内容的信息：    
1) 反对宪法所确定的基本原则的；    
2) 危害国家安全、泄露国家秘密、颠覆国家政权、破坏国家统一的；    
3) 损害国家荣誉和利益的；    
4) 煽动民族仇恨、民族歧视，破坏民族团结的；    
5) 破坏国家宗教政策，宣扬邪教和封建迷信的；    
6) 散布谣言，扰乱社会秩序，破坏社会稳定的；    
7) 散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；   
8) 侮辱或者诽谤他人，侵害他人合法权益的；    
9) 含有法律、行政法规禁止的其他内容的。    
7.3. 法律责任。您需要对您在千家地平台的言论及行为承担法律责任，若您违反国家法律法规的规定，千家地平台的系统记录有可能成为您违反法律法规的证据。       
8. 有限责任    
8.1. 纠纷处理。您理解并同意，千家地并非司法机构，仅能以普通或非专业人员的知识水平标准对各方提交的材料信息进行鉴别，若您与销售方之间发生纠纷并希望千家地介  入处理，千家地对交易纠纷的调处完全是基于您和/或商家的委托，千家地无法保证交易纠纷处理结果符合您和/或商家的期望，也不对交易纠纷调处结果及赔付决定承担任何责任。         
8.2. 外部影响。不论在何种情况下，千家地均不对由于网络连接故障，电脑、通讯或其他系统的故障，电力故障，计算机病毒，程序漏洞，罢工，劳动争议，暴乱，起义，骚乱，生产力或生产资料不足，火灾，洪水，风暴，爆炸，不可抗力，战争，政府行为，国际、国内法院的命令或第三方的不作为而造成的不能服务或延迟服务承担责任。    
8.3. 服务中断。除法律法规规定外，千家地有权单方面地中止或者终止千家地平台所提供的服务而无须提前通知您。您理解并同意，千家地需要定期或者不定期地对千家地平  台、设备进行维护或者检修，因此造成的千家地服务在合理时间内的中断，千家地无需为此承担任何责任，但千家地将尽可能事先通知您。       
9. 个人信息保护及授权    
9.1. 授权收集。您充分理解并同意千家地可能通过千家地平台在您自愿选择服务或提供信息的情况下收集您的个人信息，例如您的姓名、电子邮箱、地址、电话号码及其他身份信息等。我们有可能会保留一些用户的使用习惯信息，用于更好地了解和服务用户。这些数据将有利于我们开发出更符合用户需求的功能、信息和服务。    
9.2. 隐私政策。千家地非常重视您的个人信息保护，在您使用千家地提供的服务时，       您同意按照本协议及《千家地隐私政策》收集、存储、使用、披露和保护您的个人信息，该《千家地隐私政策》是本协议的一部分，与本协议具有同等法律效力。         
9.3. 技术的有限性。千家地将使用各种安全技术和程序防止您及其他用户个人信息的丢失、不当使用、未经授权阅览或披露。但您充分理解并同意：由于技术的限制以及可能存  在的各种恶意手段，在互联网行业，即便竭尽所能加强安全措施，也不可能始终保证信息百分之百的安全。            
10. 期限、解除和终止    
10.1. 期限。本协议自您确认同意之日起生效并长期有效。    
10.2. 账户的注销。您可以按照平台公示的方式要求注销账户，终止本协议。注销账户的条件在千家地平台公示。您知晓并理解以下情况：    
1) 注销账户后，您将放弃账户信息以及该账户在千家地的资产、虚拟权益等，且千家地无法为您恢复前述服务。这可能对您主张售后服务带来不便。    
2) 您注销账户后，您的个人信息在千家地前台将不可检索、访问。您知晓并理解，相关交易记录须在法律规定的期限内予以保存。    
10.3. 协议的终止。出现以下情况时，千家地可以本协议约定的方式通知您终止本协议：    
1) 您违反本协议约定，千家地依据违约条款终止本协议的；    
2) 您盗用他人账户、发布违禁信息、骗取他人财物、扰乱市场秩序、采取不正当手段谋利等行为，千家地依据千家地规则对您的账户予以查封的；    
3) 除上述情形外，因您多次违反千家地规则相关规定且情节严重，千家地依据千家地规则对您的账户予以查封的；    
4) 您的账户被千家地回收的；    
5) 其它应当终止服务的情况。    
10.4. 后续事项。协议终止或解除后续事项的处理    
1) 自本协议终止或解除之日起，千家地将关闭您在千家地平台的账户权限。    
2) 本协议终止或解除后，千家地有权保留您的注册信息及交易行为记录等数据，但千家地不承担在协议终止后向您或第三方提供任何数据信息的义务，也不就协议终止向您或任何第三方承担责任，但法律法规另有规定的除外。    
3) 本协议终止或解除后，千家地仍保留对您过往的违约行为追究责任的权利。       
11. 不可抗力
由于不可抗力事件导致一方不能及时履行或者不能履行该方在本协议下的任何义务  （付款义务除外）的，不构成违约。但是受不可抗力事件影响的一方应立即把不可抗力事件的性质和程度通知对方，并积极采取相应补救措施，以最大程度地减少和避免损失。       
12. 法律适用及管辖    
    * 法律适用。本协议之订立、生效、解释、修订、补充、终止、执行与争议解决均
适用中华人民共和国大陆地区法律；如法律无相关规定的，参照商业惯例及/或行业惯例。    
12.2.  约定管辖。对于因本协议而产生的或者与本协议有关的争议，双方均应努力通过友好协商的方式进行解决。协商不成的，任何一方均有权提起诉讼，且双方一致同意由千家地住所地人民法院管辖。            
13. 通知    
    * 有效地址。您在注册千家地平台账户时所填写的联系电话、电子邮箱地址、联系地址视为您的有效通知地址。若上述信息发生变更您应当及时进行更新，如果因您提供的联系方式不准确，或不及时告知变更后的联系方式，使相关通知（包括但不限于协议  变更、法律文书等）无法送达或未及时送达，由您自行承担可能产生的法律后果。    
13.2.  通知送达。千家地通过上述联系方式向您发出通知，其中以电子的方式发出的书面通知，包括但不限于在千家地平台公告，向您提供的联系电话发送手机短信，向您提供的电子邮箱发送电子邮件，向您的千家地用户账户发送系统消息以及站内信信息，  在发送成功后即视为送达；以纸质载体发出的书面通知，按照提供联系地址交邮后的第  五个自然日即视为送达。    
13.3. 法律文书的送达。对于与千家地平台有关的任何纠纷，您同意行政、公安、司法等有权机关可以通过手机短信、电子邮件、系统消息或站内信等方式向您送达法律文书，有权机关向上述联系方式发出法律文书即视为送达；若同时采取以上多种方式向您送达法律文书，送达时间以最先送达的为准。您同意上述送达方式适用于行政、仲裁、司法等法定程序全过程。       
14. 其他    
14.1. 条款的独立性。如果根据适用的法律认定本协议中的任何条款或者任何条款中的任何部分无效、违法或者不具有可执行性，这种无效、违法或者不具有可执行性不影响本协议中的任何其它条款或者这些条款中的任何其它部分的效力。    
14.2. 平台权利的保留。本协议未明示授权的其他权利仍由千家地保留，用户未经千家地书  面许可不得行使，且千家地未行使前述任何权利并不构成放弃权利。    
14.3. 条标的作用。本协议条款的标题仅作参考使用，不界定、影响或限制本协议条款的含义、描述及解释。    
`.split('\n').map(v=>v+'<br/>').join('\n')

	export default {
		data() {
			return {
				wxLoginData: null,
				wxPhoneData: null,
				userNmae: '',
				tipxx: '',
				showAgreement: false,
				html: html,
				windowWidth: 0,
				windowHeight: 0
			}
		},
		onReady() {
			// this.appLoginWx()
			uni.getSystemInfo({
				success: (res) => {
					this.windowWidth = res.windowWidth
					this.windowHeight = res.windowHeight
				}
			})
		},
		methods: {
			// getPhoneNumber(e) {
			// 	if (this.wxLoginData) {
			// 		let _that = this
			// 		uni.setStorage({
			// 			key: 'wxPhoneData',
			// 			data: {
			// 				encryptedData2: e.detail.encryptedData,
			// 				iv2: e.detail.iv,
			// 			}
			// 		})
			// 		this.wxPhoneData = uni.getStorageSync("wxPhoneData")
			// 	} else {
			// 		this.$refs.uTips.show({
			// 			title: '请先等待角色信息获取完成',
			// 			type: 'warning',
			// 		})
			// 	}
			// },
			getUserinfoWechat(data) {
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: (res2) => {
									let wxLoginData = {
										code: res2.code,
										encryptedData: data.detail.encryptedData,
										iv: data.detail.iv,
										rawData: data.detail.rawData,
										signature: data.detail.signature,
									}
									uni.setStorage({
										key: 'wxLoginData',
										data: wxLoginData
									})
									this.wxLoginData = wxLoginData
									this.getUserInfo()
								},
								fail: () => {
									console.log(33333, error)
									this.$refs.uTips.show({
										title: '微信登录授权失败',
										type: 'warning',
									})
								}
							})
						} else {
							this.$refs.uTips.show({
								title: '请先安装微信或升级版本',
								type: 'warning',
							})
						}
					}
				});
			},
			//  获取登录权限
			// getUserinfoApp() {
			// 	uni.getProvider({
			// 		service: 'oauth',
			// 		success: (res) => {
			// 			if (~res.provider.indexOf('weixin')) {
			// 				uni.login({
			// 					provider: 'weixin',
			// 					success: (res2) => {
			// 						uni.getUserInfo({
			// 							provider: 'weixin',
			// 							success: (info) => {
			// 								uni.setStorage({
			// 									key: 'wxLoginData',
			// 									data: {
			// 										code: res2.code,
			// 										encryptedData: info.encryptedData,
			// 										iv: info.iv,
			// 										rawData: info.rawData,
			// 										signature: info.signature,
			// 									}
			// 								})
			// 								this.wxLoginData = uni.getStorageSync("wxLoginData")
			// 								console.log(1111111,this.wxLoginData&&this.wxLoginData.rawData)
			// 								this.userNmae = JSON.parse(this.wxLoginData.rawData).nickName
			// 								this.getUserInfo()
			// 								// this.$refs.uTips.show({
			// 								// 	title: '获取角色信息成功',
			// 								// 	type: 'success',
			// 								// })
			// 							},
			// 							fail: (error) => {
			// 								console.log(2222, error)
			// 								this.$refs.uTips.show({
			// 									title: '微信登录授权失败',
			// 									type: 'warning',
			// 								})
			// 							}
			// 						})
			// 					},
			// 					fail: () => {
			// 						console.log(33333, error)
			// 						this.$refs.uTips.show({
			// 							title: '微信登录授权失败',
			// 							type: 'warning',
			// 						})
			// 					}
			// 				})
			// 			} else {
			// 				this.$refs.uTips.show({
			// 					title: '请先安装微信或升级版本',
			// 					type: 'warning',
			// 				})
			// 			}
			// 		}
			// 	});
			// },
			// 发请求获取个人数据
			getUserInfo() {
				NET.request(API.WxLogin, {
					...this.wxLoginData,
					// ...this.wxPhoneData,
				}, 'POST').then(res => {
					uni.setStorage({
						key: 'token',
						data: res.data.token
					})
					uni.setStorage({
						key: 'userData',
						data: {
							headImage: JSON.parse(this.wxLoginData.rawData).avatarUrl,
							userName: res.data.name,
							userId: res.data.userId,
						}
					})
					uni.switchTab({
						url: '/pages/index/index'
					})
				}).catch(error => {
					this.$refs.uTips.show({
						title: '微信登录授权失败',
						type: 'warning',
					})
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		position: absolute;

		.authorize-bg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}

		.logo {
			width: 90px;
			height: 90px;
			float: left;
			position: absolute;
			left: 50%;
			top: 20%;
			transform: translateX(-50%);
		}

		.authorize-box {
			width: 230px;
			float: left;
			position: absolute;
			left: 50%;
			top: 61.8%;
			transform: translateX(-50%);

			.authorize-button {
				width: 230px;
				height: 30px;
				float: left;
				padding: 0px;
				background-color: transparent;
				border: none;
				box-shadow: none;

				.button-text {
					height: 30px;
					float: left;
					line-height: 30px;
					font-size: 15px;
					font-family: PingFang SC;
					color: #FEFEFE;
					margin-right: 4px;
				}

				.iconfont {
					float: left;
					color: #FEFEFE;
					font-size: 28px;
					line-height: 30px;
				}
			}

			.authorize-button:after {
				border: none;
			}

			.authorize-info {
				width: 230px;
				height: 36px;
				float: left;
				margin-bottom: 30px;
				border-bottom: 1px solid #FFFFFF;
				font-size: 12px;
				font-family: PingFang SC;
				color: #FEFEFE;
				line-height: 36px;
			}

			.authorize-login {
				width: 220px;
				height: 36px;
				float: left;
				margin: 10px 5px;
				background: #FFFFFF;
				border-radius: 20px;
				font-size: 15px;
				font-family: PingFang SC;
				color: #56a83a;
				line-height: 36px;
				text-align: center;
			}
			.authorize-tip {
				width: 220px;
				height: 20px;
				float: left;
				margin: 10px 5px;
				font-size: 12px;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 20px;
				text-align: center;
			}
		}

		.agreement {
			margin-top: 12px;
			text-align: center;
			font-size: 12px;
			font-family: PingFang SC;
			color: #FEFEFE;
			.underline {
				text-decoration: underline;
			}
		}

		.pop-content {
			border-radius: 5px;
			padding: 12px;

			.scroll {
				height: calc( 100% - 40px - 16px );
			}

			.confrim-btn {
				padding: 8px;
			}
		}
	}
</style>