<template>
	<view class="content">
		<view class="top_img">

			<image class="logo" src="/static/login/图层 1.png"></image>
			<image class="logo_car" src="/static/login/y.png"></image>
			<view class="top_title">
				SIGN IN
			</view>
			<view class="top_login">
				欢迎登录,
			</view>
			<view class="top_Firstaid">
				院前急救
			</view>
		</view>
		<view class="con_rectangle">
			<view class="con_view">

			</view>
			<view class="con_phone">
				<view class="phone_ico">
					<image src="../../static/login/矩形 4.png" mode=""></image>
					<text class="phone_line">|</text>
					<input class="uni-input" focus placeholder="请输入手机号码" v-model="user_plone" />
				</view>
			</view>
			<view class="line">

			</view>
			<view class="con_password">
				<view class="phone_ico">
					<image src="../../static/login/矩形 4.png" mode=""></image>
					<text class="phone_line">|</text>
					<input class="uni-input" placeholder="请输入密码" :password="showPassword" v-model="user_password" />
					<text class="uni-icon" :class="[showPassword ? 'uni-eye-active' : '']"
						@click="changePassword">查看</text>

				</view>
			</view>
			<view class="btn">
				<view class="log_in" @click="tap_login">
					登&nbsp;录
				</view>

			</view>
			<view class="login_agreement">
				登录代表你已经同意<text>《用户协议》</text>和<text>《隐私权政策》</text>
			</view>

		</view>
		<!-- 登录成功弹出层 -->
		<view class="popup">
			<uni-popup ref="popup" type="center" :animation="false" :mask-click="false">

				<image class="popup_img" src="../../static/login/图层 2.png" mode="">

				</image>
				<view class="popup_ok" :style="popup_title=='认证失败'?'color:red':''">
					{{popup_title}}
				</view>
				<button type="default" class="popup_btn" style="background-color:#5581FF; color: #fff;" @click="btn_ok">确定</button>
			</uni-popup>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				showPassword: true,
				popup_title: "",
				// 用户手机号
				user_plone: '',
				//用户密码
				user_password: '',
				//提示标题
				popup_title:'',

			}
		},
		onLoad() {

		},
		methods: {
			// 查看密码
			changePassword() {
				this.showPassword = !this.showPassword;

			},
			//点击登录
			tap_login() {
				if (this.user_plone !== '' && this.user_password !== '') {
					//设置提示标题
					this.popup_title='认证完成'
					this.$refs.popup.open('center')
					
				}else{
					//设置提示标题
					this.popup_title='认证失败'
					this.$refs.popup.open('center')
				}
			},
			//认证成功时登录
			btn_ok(){
				if(this.popup_title=='认证完成'){
					//跳转
					uni.navigateTo({
					  url: '/pages/accredit/accredit'
					});
					this.$refs.popup.close()
					this.user_plone=''
					this.user_password=''
					
				}else{
					//弹窗关闭
					this.$refs.popup.close()
				}
			}
		}
	}
</script>

<style>
	.content {
		width: 750rpx;
		height: 1334rpx;
		position: relative;

	}

	.top_img {
		width: 750rpx;
		height: 600rpx;

	}

	.logo_car {
		position: absolute;
		left: 303rpx;
		top: 134rpx;
		width: 447rpx;
		height: 333rpx;
		z-index: 10;
	}

	.top_title {
		width: 100rpx;
		height: 21rpx;
		position: absolute;
		top: 166rpx;
		left: 52rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: left;
		font-style: normal;
		text-transform: none;
		color: #80A5EE;
	}

	.top_login {
		width: 275rpx;
		height: 68rpx;
		position: absolute;
		left: 51rpx;
		top: 221rpx;
		font-weight: 400;
		font-size: 63rpx;
		color: #FFFFFF;
	}

	.top_Firstaid {
		position: absolute;
		top: 306rpx;
		left: 51rpx;
		width: 220rpx;
		height: 52rpx;
		font-size: 55rpx;
		color: #FFFFFF;
		text-align: left;
	}

	.logo {
		height: 600rpx;
		width: 750rpx;

	}

	.con_rectangle {
		width: 726rpx;
		height: 581rpx;
		position: absolute;
		left: 13rpx;
		top: 391rpx;
		background-color: #FFFFFF;
		border-radius: 31rpx 31rpx 31rpx 31rpx;
	}

	.con_view {
		width: 726rpx;
		height: 120rpx;

	}

	.con_phone {
		width: 567rpx;
		height: 90rpx;
		padding-left: 88rpx;
		display: flex;
		align-items: center;

	}

	.line {
		width: 547rpx;
		height: 1rpx;
		position: absolute;
		left: 88rpx;
		background: #848484;

	}

	.con_password {
		width: 567rpx;
		height: 100rpx;
		padding-left: 88rpx;
		display: flex;
		align-items: center;
		position: relative;

	}

	.phone_ico {
		display: flex;
		align-items: center;
	}

	.phone_ico image {
		width: 24rpx;
		height: 34rpx;
		vertical-align: middle;
	}

	.phone_line {
		width: 1rpx;
		height: 18rpx;
		opacity: 0.22;
		padding-left: 21rpx;
		padding-bottom: 7rpx;
		padding-top: 9rpx;
	}

	.uni-input {
		padding-left: 30rpx;
		width: 185rpx;
		height: 24rpx;
		padding-top: 9rpx;
	}

	.uni-icon {
		width: 33rpx;
		height: 23rpx;
		opacity: 0.75;
		position: absolute;
		right: 91rpx;
		line-height: 23rpx;
	}

	.btn {
		width: 567rpx;
		height: 104rpx;
		/* background: radial-gradient(NaN% 0% at 0% 0%, #446FE0 0%, #5581FF 100%); */
		box-shadow: 6rpx 0rpx 10rpx 0rpx #1579FD;
		background-color: #1579FD;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		margin-left: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.log_in {
		width: 77rpx;
		height: 34rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.login_agreement {
		width: 450rpx;
		height: 20rpx;
		margin-left: 136rpx;
		margin-top: 30rpx;
		font-weight: 400;
		font-size: 18rpx;
		color: #666666;
		line-height: 20rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;

	}

	.login_agreement text {
		color: #F34141;
	}

	/* 登录成功的弹出层 */
	.popup {}

	.popup_img {
		width: 361rpx;
		height: 381rpx;
		position: relative;
	}

	.popup_ok {
		position: absolute;
		top: 45%;
		left: 30%;
		font-size: 31rpx;
		color: #333333;
		line-height: 31rpx;
		width: 124rpx;
		height: 30rpx;
	}

	.popup_btn {
		position: absolute;
		width: 237rpx;
		height: 63rpx;
		background: #5581FF;
		border-radius: 31rpx 31rpx 31rpx 31rpx;
		top: 70%;
		left: 15%;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 63rpx;
	}
</style>