< template >
< view class = "loginBack" >
< view class = "loginForm" >
< view class = "welcomeLogin" > 欢迎登录 < / view >
< view class = "tip" > 瑜伽汇 < / view >
<!-- 登录方式切换 Tabs -- >
< view class = "login-tabs" >
<!-- < view class = "tab-item" : class = "{ active: loginType === 'pwd' }" @ click = "loginType = 'pwd'" > -- >
<!-- 密码登录 -- >
<!-- < / view > -- >
< view class = "tab-item" : class = "{ active: loginType === 'sms' }" @ click = "loginType = 'sms'" >
短信登录
< / view >
< / view >
< view class = "formregion" >
< uni -forms :model ="form" ref = "uForm" >
<!-- 手机号 （ 共用 ） -- >
< uni -forms -item prop = "phonenumber" >
< uni -easyinput type = "number" placeholder = "请输入手机号码" v -model = " form.phonenumber " @blur ="zhhandleBlur"
: inputBorder = "false" : clearable = "false" : placeholderStyle = "placeholderStyle" / >
< / u n i - f o r m s - i t e m >
<!-- & lt ; ! & ndash ; 密码登录 ： 密码 + 图形验证码 & ndash ; & gt ; -- >
< block v-if ="loginType === 'pwd'" >
< uni -forms -item prop = "password" >
< uni -easyinput type = "password" placeholder = "请输入密码" v -model = " form.password " @blur ="mmhandleBlur"
maxlength = "12" : inputBorder = "false" : clearable = "false" : placeholderStyle = "placeholderStyle" / >
< / u n i - f o r m s - i t e m >
< uni -forms -item prop = "code" >
< uni -easyinput type = "text" placeholder = "请输入验证码" v -model .trim = " form.code " :inputBorder ="false"
: clearable = "false" : placeholderStyle = "placeholderStyle" / >
< image :src ="checkimg" class = "checkimg" mode = "scaleToFill" > < / image >
< view class = "codebtn" @click ="getcode" > 看 不 清 ? < / view >
< / u n i - f o r m s - i t e m >
< button type = "primary" class = "logincla" @click ="loginpwdDo" > 登 录 < / button >
< / block >
<!-- 短信登录 ： 短信验证码 -- >
< block v-if ="loginType === 'sms'" >
< uni -forms -item prop = "smsCode" >
<!-- 新增一层相对定位容器 ， 作为绝对定位按钮的参照物 -- >
< view class = "input-wrap" >
< uni -easyinput
type = "text"
placeholder = "请输入短信验证码"
v - model . trim = "form.smsCode"
: inputBorder = "false"
: clearable = "false"
: placeholderStyle = "placeholderStyle"
/ >
< view
class = "sms-code-btn"
@ click = "sendSmsCode"
: class = "{ disabled: smsCountdown > 0 }"
>
{ { smsCountdown > 0 ? smsCountdown + 's' : '获取验证码' } }
< / view >
< / view >
< / u n i - f o r m s - i t e m >
< button type = "primary" class = "logincla" @click ="loginSmsDo" > 登 录 < / button >
< / block >
< view v-if ="iflogin" class="loginno" > 登 录 中 .. < / view >
<!-- < view class = "regcon" >
< view class = "regtxtr" @click ="gotoregister" > 注 册 账 号 → < / view >
< / view > -- >
< view class = "xycon" >
< view class = "sitem" >
< view class = "selbtn" >
< uni -data -checkbox multiple v-model ="checkbox1" :localdata ="checkboxitem" > < / uni -data -checkbox >
< / view >
< view class = "conright" >
< text class = "sname" >
我已阅读并同意
< / text >
< text class = "adress" @click ="gotofw" >
《 用户服务协议 》
< / text >
< text class = "sname" >
与
< / text >
< text class = "adress" @click ="gotoys" >
《 隐私政策条款 》
< / text >
< / view >
< / view >
< / view >
< view class = "regcon" >
<!-- < view class = "regtxtr" @click ="gotoregister" > 注 册 账 号 → < / view > - - >
< / view >
< / u n i - f o r m s >
< / view >
< u -toast ref = "uToast" / >
< / view >
< / view >
< / template >
< script >
// #ifdef APP-PLUS
// const jpushModule = uni.requireNativePlugin('JG-JPush');
// #endif
import { myCache } from '../../utils/utils.js' ;
export default {
data ( ) {
return {
checkimg : require ( "@/static/image/check.jpg" ) ,
placeholderStyle : "font-size: 28rpx;color: #c3c4c6; text" ,
form : {
phonenumber : "" ,
password : "" ,
smsCode : "" , // 短信验证码
code : "" ,
uuid : "" ,
registerId : "" , // 设备id
position : "123.357586,41.862907" , // 默认拾取 三朵兰瑜伽默认坐标
} ,
iflogin : false ,
gcj02 : "1" ,
address : '' ,
longitude : '' , // 经度
latitude : '' , // 维度
checkbox1 : [ 1 ] ,
checkboxitem : [ {
text : '' ,
value : 1 ,
} ] ,
ifxy : false , // 是否选择协议
loginType : 'sms' ,
smsCountdown : 0 , // 短信验证码倒计时
smsTimer : null , // 定时器
}
} ,
onLoad ( ) {
this . getcheckImg ( ) ;
this . getsystemInfo ( ) ;
this . getPosition ( ) ;
} ,
methods : {
gotoregister ( ) {
// 注册账号
uni . navigateTo ( {
url : ` /pages/login/register `
} ) ;
} ,
gotopwd ( ) {
// 修改密码
uni . navigateTo ( {
url : ` /pages/user/pwdset `
} ) ;
} ,
// 获取定位
getPosition ( ) {
const _this = this ;
uni . getLocation ( {
type : 'gcj02' , //'gcj02','wgs84', // 返回的坐标类型，
geocode : true ,
success : function ( res ) {
console . log ( res ) ;
console . log ( '当前位置的经度：' + res . longitude ) ;
console . log ( '当前位置的纬度：' + res . latitude ) ;
_this . form . position = res . latitude + ',' + res . longitude ;
_this . $forceUpdate ( ) ;
} ,
fail : function ( err ) {
console . log ( '获取位置失败：' + err . errMsg ) ;
uni . showModal ( {
title : '提示' ,
content : '请在设置中开启定位服务，注册默认地址信息！' ,
showCancel : false ,
success : function ( res ) {
if ( res . confirm ) {
console . log ( '用户点击确定' ) ;
// #ifdef APP-PLUS
// 跳转到设置页面
plus . device . vendor = 'apple' ; // 如果是iOS系统
if ( plus . os . name == 'iOS' ) {
plus . runtime . openURL ( 'prefs:root=LOCATION_SERVICES' ) ;
} else {
plus . runtime . openURL ( 'package:' + plus . android . runtimeMainActivity ( ) ) ;
}
// #endif
}
}
} ) ;
_this . form . position = "123.357586,41.862907" ;
_this . $forceUpdate ( ) ;
}
} ) ;
} ,
// 获取设备信息
getsystemInfo ( ) {
const info = uni . getSystemInfoSync ( ) ;
const platform = info . platform ; // 手机安卓还是苹果
if ( info . platform === 'ios' ) {
// ios
console . log ( 'iOS 设备唯一标识:' , info . deviceId ) ;
}
else {
//安卓
console . log ( '设备信息ID:' , info . deviceId ) ;
}
this . form . registerId = info . deviceId ;
this . $forceUpdate ( ) ;
// const iosApp = info.platform;
console . log ( 'iOS 设备名称:' , info . model ) ;
console . log ( 'iOS 系统版本:' , info . system ) ;
console . log ( 'iOS 设备唯一标识:' , info . deviceId ) ;
console . log ( 'iOS 设备像素比:' , info . devicePixelRatio ) ;
console . log ( 'iOS 设备屏幕宽度:' , info . screenWidth ) ;
console . log ( 'iOS 设备屏幕高度:' , info . screenHeight ) ;
console . log ( 'iOS 设备方向:' , info . deviceOrientation ) ;
// uni.showModal({
// title: '提示',
// content: info.deviceId,
// success(res) {
// if (res.confirm) {
// console.log('用户点击了确定');
// } else if (res.cancel) {
// console.log('用户点击了取消');
// }
// }
// });
} ,
async getcheckImg ( ) {
// 验证图片信息
const { data : res } = await uni . $http . get ( '/captchaImage' ) ;
if ( res && res . img && res . uuid ) {
this . checkimg = 'data:image/png;base64,' + res . img ;
this . form . uuid = res . uuid ;
this . $forceUpdate ( ) ;
}
} ,
// 判断密码是否合规
mmhandleBlur ( e ) {
console . log ( e )
if ( e . detail . value && e . detail . value . length < 6 ) {
// if(e.detail.value&&!this.checkMM(e.detail.value)){
// '密码必须是由6-20位长度的字母、数字组成， ！
// '密码必须是8-20位字符至少包括大写字母、小写字母、数字、特殊符号中3种以上， ！
// this.$refs.uToast.show({
// title: "密码必须是6-20位字符至少包括英文、数字、特殊符号中2种以上， ！
// type: 'error',
// duration: 2000
// });
}
} ,
// 校验密码
checkMM ( mm ) {
// if (!(/^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,20}$/.test(mm))) {
// // if (!(/((^(?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,20}$)|(^(?=.*\d)(?=.*[A-Z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,20}$)|(^(?=.*\d)(?=.*[a-z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,20}$)|(^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\da-zA-Z_\W]{8,20}$))/.test(mm))) {
// return false;
// }
return true ;
} ,
// 判断手机号码是否合法
zhhandleBlur ( e ) {
console . log ( e )
// 判断手机号码是否合法
if ( ! this . $u . test . mobile ( e . detail . value ) ) {
this . $refs . uToast . show ( {
title : '手机号码输入错误，请核实！' ,
type : 'warning' ,
duration : 2000
} ) ;
}
} ,
async getcode ( ) {
uni . showLoading ( {
title : '验证码请求中...'
} ) ;
const { data : res } = await uni . $http . get ( '/captchaImage' ) ;
console . log ( res ) ;
if ( res && res . img && res . uuid ) {
this . checkimg = 'data:image/png;base64,' + res . img ;
this . form . uuid = res . uuid ;
this . $forceUpdate ( ) ;
}
else {
this . $refs . uToast . show ( {
title : "验证码请求失败！请重试！" ,
type : 'error' ,
duration : 2000
} ) ;
}
} ,
// 校验手机号码
checkPhone ( phone ) {
if ( ! ( /^1[3456789]\d{9}$/ . test ( phone ) ) ) {
return false ;
}
return true ;
} ,
//地图选择地址
chooseLocation ( ) {
var _this = this ;
uni . chooseLocation ( {
success : ( data ) => {
console . log ( data )
_this . gcj02 = "1" ;
var adrname = ( ( data . name === undefined || data . name === null ) ? '' : data . name ) ;
_this . address = ( ( data . address === undefined || data . address === null ) ? '' : data . address ) + adrname ;
_this . latitude = data . latitude ;
_this . longitude = data . longitude ;
_this . form . position = _this . latitude + ',' + _this . longitude ;
_this . $forceUpdate ( ) ;
} ,
fail : ( Error ) => {
_this . gcj02 = "1" ;
_this . address = "" ;
_this . latitude = "" ;
_this . longitude = "" ;
_this . form . position = "" ;
_this . $forceUpdate ( ) ;
}
} ) ;
} ,
login ( ) {
// 测试
// myCache('token', "12345678");
// myCache('user', {
// phonenumber:"测试人",
// userid:"1",
// userphone:"18900000001",
// avatar:"/static/image/girl.png"
// });
// this.$refs.uToast.show({
// title: '登录成功',
// type: 'success',
// isTab: true,
// duration: 2000,
// url: '/pages/index/index'
// });
// 正式
this . loginpwdDo ( ) ;
} ,
// 密码登录
async loginpwdDo ( ) {
// 是否阅读协议
if ( ! this . checkxy ( ) ) {
return false ;
}
// 手机号码 密码是否输入
if ( ! this . form . phonenumber ) {
this . $refs . uToast . show ( {
title : "请输入手机号码！" ,
type : 'warn' ,
duration : 2000
} ) ;
return false ;
}
if ( ! this . form . password ) {
this . $refs . uToast . show ( {
title : "请输入密码！" ,
type : 'warn' ,
duration : 2000
} ) ;
return false ;
}
if ( ! this . form . code ) {
this . $refs . uToast . show ( {
title : "请输入验证码！" ,
type : 'warn' ,
duration : 2000
} ) ;
return false ;
}
if ( uni . getStorageSync ( "register_id" ) ) {
this . form . registerId = uni . getStorageSync ( "register_id" ) ;
this . $forceUpdate ( ) ;
}
uni . setStorageSync ( 'iftoken' , "1" ) ;
uni . showLoading ( {
title : '正在登录...'
} ) ;
console . log ( "login--登录参数" , this . form )
const { data : res } = await uni . $http . post ( '/api/login' , this . form ) ;
if ( res && res . code == "200" ) {
uni . setStorageSync ( "loginindex" , "1" ) ;
uni . setStorageSync ( "token" , res . token ) ;
// 保存用户登录信息
this . getUserInfo ( ) ;
// 保护用户门店信息
this . loadshop ( ) ;
this . $refs . uToast . show ( {
title : '登录成功' ,
type : 'success' ,
isTab : true ,
duration : 2000 ,
url : '/pages/index/index'
} ) ;
}
else {
if ( res . msg == '验证码错误' ) {
// 重新获取验证码
this . getcode ( ) ;
}
// uni.setStorageSync('token', this.form.uuid);
this . $refs . uToast . show ( {
title : res . msg ? res . msg : "此账号登录失败！请重试！" ,
type : 'error' ,
duration : 2000
} ) ;
}
} ,
// 验证码登录
async getUserInfo ( ) {
var _this = this ;
const { data : res } = await uni . $http . get ( '/api/getInfo' ) ;
if ( res && res . appLoginUser ) {
var user = res . appLoginUser ;
myCache ( 'user' , {
userid : user . userId ,
nickName : user . nickName ,
username : user . userName ,
userphone : user . phoneNumber ,
signature : user . signature ,
avatar : user . avatar
} ) ;
myCache ( 'userInfo' , user ) ;
myCache ( 'phone' , user . phoneNumber ) ;
}
if ( res && res . visitStore ) {
var shop = res . visitStore ;
myCache ( 'shop' , shop ) ;
myCache ( 'myshop' , shop . storeName ) ;
myCache ( 'myshopid' , shop . id ) ;
// var shoplist=[shop]
// myCache('shoplist',shoplist);
}
getApp ( ) . $vm . init ( user . userId )
} ,
checkxy ( ) {
console . log ( this . checkbox1 ) ;
if ( this . checkbox1 . length > 0 && this . checkbox1 [ 0 ] ) {
return true ;
}
else {
uni . showModal ( {
title : '提示' ,
content : '请阅读并同意用户服务协议、隐私政策条款!' ,
cancelText : '取消' ,
confirmText : '确定' ,
success : ress => {
if ( ress . confirm ) {
}
}
} ) ;
return false ;
}
} ,
async loadshop ( ) {
// 获取门店
const { data : res } = await uni . $http . post ( '/api/index/getStores' ) ;
if ( res . data && res . data . length > 0 ) {
myCache ( 'shoplist' , res . data ) ;
}
else {
console . log ( "shoplist" )
var shop = myCache ( 'shop' ) ;
var shoplist = shop ? [ shop ] : [ ] ;
myCache ( 'shoplist' , shoplist ) ;
}
} ,
async getUserShopList ( ) {
var _this = this ;
const { data : res } = await uni . $http . get ( '/api/getStoreList' ) ;
console . log ( res ) ;
if ( res && res . appLoginUser ) {
var user = res . appLoginUser ;
myCache ( 'user' , {
userid : user . userId ,
nickName : user . nickName ,
username : user . userName ,
userphone : user . phoneNumber ,
avatar : user . avatar
} ) ;
myCache ( 'userInfo' , user ) ;
myCache ( 'phone' , user . phoneNumber ) ;
}
if ( res && res . visitStore ) {
var shop = res . visitStore ;
myCache ( 'shop' , shop ) ;
myCache ( 'myshop' , shop . storeName ) ;
myCache ( 'myshopid' , shop . id ) ;
var shoplist = [ shop ]
myCache ( 'shoplist' , shoplist ) ;
}
} ,
gotofw ( ) {
uni . navigateTo ( {
url : ` /pages/user/infofw `
} ) ;
} ,
gotoys ( ) {
uni . navigateTo ( {
url : ` /pages/user/infoys `
} ) ;
} ,
// ========== 短信验证码相关 ==========
/ * *
* 发送短信验证码
* /
async sendSmsCode ( ) {
// 1. 校验手机号
const phone = this . form . phonenumber ;
if ( ! this . $u . test . mobile ( phone ) ) {
this . $refs . uToast . show ( {
title : '请输入正确的手机号码' ,
type : 'warning' ,
duration : 2000
} ) ;
return ;
}
console . log ( 12 )
// 2. 防止重复点击（倒计时中）
if ( this . smsCountdown > 0 ) {
return ;
}
console . log ( 34 )
// 3. 调用发送接口
uni . showLoading ( {
title : '发送中...'
} ) ;
try {
console . log ( 56 )
const {
data : res
} = await uni . $http . post ( '/sms/sendCode' , {
phone : phone
} ) ;
console . log ( 78 )
uni . hideLoading ( ) ;
console . log ( 9 )
if ( res && res . code === 200 ) {
this . $refs . uToast . show ( {
title : '验证码已发送' ,
type : 'success' ,
duration : 2000
} ) ;
// 开始倒计时
this . startCountdown ( ) ;
} else {
this . $refs . uToast . show ( {
title : res . msg || '发送失败，请重试' ,
type : 'error' ,
duration : 2000
} ) ;
}
} catch ( e ) {
uni . hideLoading ( ) ;
this . $refs . uToast . show ( {
title : '发送失败，请检查网络' ,
type : 'error' ,
duration : 2000
} ) ;
}
} ,
/ * *
* 开始60秒倒计时
* /
startCountdown ( ) {
this . smsCountdown = 60 ;
if ( this . smsTimer ) {
clearInterval ( this . smsTimer ) ;
}
this . smsTimer = setInterval ( ( ) => {
this . smsCountdown -- ;
if ( this . smsCountdown <= 0 ) {
clearInterval ( this . smsTimer ) ;
this . smsTimer = null ;
}
} , 1000 ) ;
} ,
/ * *
* 短信验证码登录
* /
async loginSmsDo ( ) {
const phone = this . form . phonenumber ;
const smsCode = this . form . smsCode ;
// 是否阅读协议
if ( ! this . checkxy ( ) ) {
return false ;
}
if ( ! this . $u . test . mobile ( phone ) ) {
this . $refs . uToast . show ( {
title : '请输入正确的手机号码' ,
type : 'warning' ,
duration : 2000
} ) ;
return ;
}
if ( ! smsCode || smsCode . length !== 6 ) {
this . $refs . uToast . show ( {
title : '请输入6位短信验证码' ,
type : 'warning' ,
duration : 2000
} ) ;
return ;
}
if ( uni . getStorageSync ( "register_id" ) ) {
this . form . registerId = uni . getStorageSync ( "register_id" ) ;
}
uni . setStorageSync ( 'iftoken' , "1" ) ;
uni . showLoading ( {
title : '登录中...'
} ) ;
try {
const {
data : res
} = await uni . $http . post ( '/api/sms/login' , {
phonenumber : phone ,
smsCode : smsCode ,
registerId : this . form . registerId ,
position : this . form . position
} ) ;
if ( res && res . code === 200 ) {
uni . setStorageSync ( "loginindex" , "1" ) ;
uni . setStorageSync ( "token" , res . token ) ;
// 保存用户信息
this . getUserInfo ( ) ;
this . loadshop ( ) ;
this . $refs . uToast . show ( {
title : '登录成功' ,
type : 'success' ,
isTab : true ,
duration : 2000 ,
url : '/pages/index/index'
} ) ;
} else {
this . $refs . uToast . show ( {
title : res . msg || '登录失败，请重试' ,
type : 'error' ,
duration : 2000
} ) ;
}
} catch ( e ) {
uni . hideLoading ( ) ;
this . $refs . uToast . show ( {
title : '登录失败，请检查网络' ,
type : 'error' ,
duration : 2000
} ) ;
}
} ,
}
}
< / script >
< style >
< / style >
< style lang = "scss" scoped >
: : v - deep . u - checkbox _ _label {
color : # bdbfc1
}
: : v - deep . uni - easyinput _ _content - input {
width : 500 rpx ;
height : 80 rpx ;
background : # fff ;
box - shadow : 0 rpx 12 rpx 64 rpx 2 rpx rgba ( 137 , 150 , 95 , 0.3 ) ;
border - radius : 254 rpx 254 rpx 254 rpx 254 rpx ;
}
: : v - deep . uni - easyinput _ _content {
border - radius : 254 rpx 254 rpx 254 rpx 254 rpx ;
text - indent : 20 rpx ;
}
/* ====== 新增 Tabs 样式 ====== */
. login - tabs {
display : flex ;
justify - content : center ;
background : # fff ;
border - radius : 10 px 10 px 0 0 ;
padding : 10 rpx 0 0 0 ;
margin - top : 10 rpx ;
. tab - item {
flex : 1 ;
text - align : center ;
font - size : 30 rpx ;
padding : 20 rpx 0 ;
color : # 999 ;
border - bottom : 6 rpx solid transparent ;
transition : all 0.3 s ;
& . active {
color : # 00 a89b ;
border - bottom - color : # 00 a89b ;
font - weight : 600 ;
}
}
}
/* ====== 短信验证码按钮 ====== */
. sms - code - btn {
position : absolute ;
top : 12 rpx ; /* 与 codebtn 对齐 */
width : 180 rpx ;
right : 20 rpx ;
display : block ;
display : flex ; /* 改为 flex */
align - items : center ; /* 垂直居中 */
justify - content : center ; /* 水平居中 */
color : # 00 a89b ;
height : 60 rpx ;
line - height : 60 rpx ;
font - size : 26 rpx ;
padding : 0 20 rpx ;
background : # f0f0f0 ; /* 浅灰底，便于区分 */
border - radius : 30 rpx ;
/* 移除 transform，
& . disabled {
color : # 999 ;
background : # e8e8e8 ;
}
}
. lttxt {
font - size : 30 rpx ;
font - family : PingFang SC , PingFang SC ;
font - weight : 400 ;
color : # 333333 ;
line - height : 38 rpx ;
height : 45 rpx ;
margin : 30 rpx auto ;
text - align : center ;
}
. timetxt {
position : absolute ;
top : 20 rpx ;
right : 28 rpx ;
display : block ;
font - size : 36 rpx ;
color : # 00 a89b ;
line - height : 38 rpx ;
height : 45 rpx ;
margin - left : 50 rpx ;
}
. checkimg {
position : absolute ;
top : 8 rpx ;
right : 130 rpx ;
width : 160 rpx ;
height : 66 rpx ;
}
. codebtn {
position : absolute ;
top : 12 rpx ;
right : 20 rpx ;
display : block ;
color : # 00 a89b ;
height : 60 rpx ;
line - height : 60 rpx ;
font - size : 26 rpx ;
padding : 0 10 rpx ;
}
. regcon {
display : flex ;
flex - direction : row ;
align - items : center ;
justify - content : center ;
margin - top : 36 rpx ;
. regtxt {
color : # 00 a89b ;
font - size : 28 rpx ;
display : flex ;
align - items : center ;
}
. regtxtl {
color : # 00 a89b ;
width : 2 rpx ;
height : 26 rpx ;
font - size : 26 rpx ;
margin - left : 10 rpx ;
margin - right : 10 rpx ;
border - right : 1 rpx solid # 00 a89b ;
display : flex ;
align - items : center ;
}
. regtxtr {
color : # 00 a89b ;
height : 28 rpx ;
font - size : 28 rpx ;
display : flex ;
align - items : center ;
margin - right : 10 rpx ;
}
}
. loginno {
display : block ;
background - color : rgba ( 137 , 150 , 95 , 0.3 ) ;
width : 100 % ;
line - height : 2 ;
margin - top : 30 rpx ;
border - radius : 12 rpx ;
font - size : 30 rpx ;
text - align : center ;
box - sizing : border - box ;
}
. logincla {
display : block ;
font - family : $font - family ;
width : 100 % ;
line - height : 2 ;
}
. loginBack {
color : # fff ;
height : 100 vh ;
padding : 60 rpx 50 rpx 200 rpx 50 rpx ;
width : 100 % ;
overflow : hidden ;
background - size : 100 % 100 % ;
background - image : url ( '../../static/image/lgbg.jpg' ) ;
. inpuIcon {
width : 46 rpx ;
height : 46 rpx ;
margin - right : 30 rpx ;
}
. formregion {
width : 100 % ;
padding : 30 px 50 rpx 20 rpx ;
background - color : # fff ;
border - radius : 0 0 10 px 10 px ;
margin - top : 10 rpx ;
position : relative ;
display : block ;
overflow : hidden ;
. logo {
position : absolute ;
top : - 20 rpx ;
left : 0 ;
width : 100 % ;
display : flex ;
flex - direction : column ;
align - items : center ;
justify - content : center ;
}
. define {
width : 120 rpx ;
height : 120 rpx ;
}
}
}
. welcomeLogin {
font - size : 30 rpx ;
letter - spacing : 2 rpx ;
padding : 20 rpx 0 10 rpx ;
margin : 0 auto ;
width : 100 % ;
}
. tip {
font - weight : 600 ;
font - size : 42 rpx ;
letter - spacing : 4 rpx ;
padding : 0 0 40 rpx 0 ;
}
. xycon {
display : flex ;
align - items : center ;
justify - content : center ;
padding : 20 rpx 0 0 ;
width : 100 % ;
. sitem {
display : flex ;
flex - direction : row ;
. conright {
flex : 1 ;
margin : 10 rpx 0 ;
margin - left : - 36 rpx ;
}
. selbtn {
width : 80 rpx ;
display : flex ;
justify - content : center ;
align - items : center ;
margin - left : 10 rpx ;
}
. sname {
font - size : 24 rpx ;
font - weight : 400 ;
color : # 23262 F ;
line - height : 36 rpx ;
}
. adress {
font - size : 24 rpx ;
font - weight : 400 ;
color : # 00 a89b ;
line - height : 36 rpx ;
}
}
}
< / style >
