<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">
登 录
</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>