158 lines
4.7 KiB
Vue
158 lines
4.7 KiB
Vue
<template>
|
||
<view class="login_page ">
|
||
<view class="iconfont icon-shouye" @click="toIndex()" style="height: 25px;position: absolute;top: 60px;width: 30px;"></view>
|
||
<view class="login_top">
|
||
<view class="login_logo">
|
||
<image src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/loginLogo.png" class="demupng"></image>
|
||
</view>
|
||
<view class="name">
|
||
自动化MES管理系统
|
||
</view>
|
||
</view>
|
||
<view class="login_centre">
|
||
<view class="login_switch text_color_black font14">
|
||
<view :class="['login_name', tab==1?'font_bold':'']" @click="changeTab(1)">
|
||
账号登录
|
||
</view>
|
||
<view :class="['login_name', tab==2?'font_bold':'']" @click="changeTab(2)">
|
||
手机号登录
|
||
</view>
|
||
</view>
|
||
<view class="font12 text_color_black" v-if="tab==1">
|
||
<view class="login_input">
|
||
<input placeholder="请输入账号" v-model="accountValue"/>
|
||
</view>
|
||
<view class="login_input">
|
||
<input password type="text" v-model="passValue" placeholder="请输入密码" />
|
||
</view>
|
||
</view>
|
||
<view class="font12 text_color_black" v-if="tab==2">
|
||
<view class="login_input">
|
||
<input placeholder="请输入手机号"/>
|
||
</view>
|
||
<view class="flex_layout">
|
||
<input class="login_input login_code" placeholder="请输入验证码"/>
|
||
<view class="getCaptcha">{{codename}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="" v-if="tab==1" style="color: #C4C4C4;font-size: 12px;padding-top: 14px;">
|
||
记住密码
|
||
</view>
|
||
<view class="loginbut" @click="login()">
|
||
登录
|
||
</view>
|
||
<button class="persontc " type="default" open-type="getPhoneNumber" @getphonenumber="getPhone">
|
||
<view class="" style="color: #009688;text-align: center;font-size: 13px;">
|
||
手机号快捷登录
|
||
</view>
|
||
</button>
|
||
<!-- <button class="persontc" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
||
<view class="" style="color: #009688;text-align: center;font-size: 13px;">
|
||
手机号快捷登录
|
||
</view>
|
||
</button> -->
|
||
</view>
|
||
<view class="login_below">
|
||
<view class="">
|
||
|
||
</view>
|
||
<view class="">
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
codename:'获取验证码',
|
||
tab:1,
|
||
accountValue:'long',
|
||
passValue:'123456',
|
||
}
|
||
},
|
||
methods: {
|
||
//切换登录方式
|
||
changeTab(tab){
|
||
this.$set(this,"tab",tab);
|
||
},
|
||
toIndex(){
|
||
uni.reLaunch({
|
||
url:'/pages/index/index'
|
||
});
|
||
},
|
||
login(){
|
||
this.$api.postFuncLoading('/user.login',{login_name:this.accountValue,password:this.passValue}).then(res=>{
|
||
let obj = new Object();
|
||
obj.mes_user_name=res.data.user.name;
|
||
obj.mes_token=res.data.token;
|
||
this.$wf.setLoginData(obj)
|
||
|
||
uni.switchTab({
|
||
url:'/pages/index/index'
|
||
})
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.login_page{
|
||
padding: 0 32px;
|
||
background: url('https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/background.png') no-repeat;
|
||
background-position: center;
|
||
background-size: cover;
|
||
height: 100vh;
|
||
}
|
||
.login_top{padding-top: 160px;padding-bottom: 32px;}
|
||
.login_top .name{letter-spacing: 1.2px;background: linear-gradient(to right, #fff, rgba(255,255,255,0.1));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.login_logo{display: flex;align-items: center;margin-bottom: 17px;}
|
||
.demupng{width: 117px;height: 43px;}
|
||
.login_centre{border-radius: 16px;background: #FFF;padding: 20px 24px 40px;}
|
||
.login_switch{display: flex;}
|
||
.login_name{flex: 1;text-align: center;
|
||
padding-bottom: 5px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.login_name:focus {
|
||
outline: none; /* 去除默认的外边框效果 */
|
||
border-width: 3px; /* 当元素被点击或者获得焦点时，将边框宽度修改为3像素 */
|
||
}
|
||
.font_bold{
|
||
position: relative;
|
||
}
|
||
.font_bold::after{
|
||
content: '';
|
||
position: absolute;
|
||
left: calc(50% - 15px);
|
||
bottom: -4px;
|
||
z-index: 10;
|
||
width: 30px;
|
||
border-bottom: 3px solid #009688;
|
||
}
|
||
.login_input{border-radius: 21.5px;background: #F3F5F9;margin-top: 12px;padding: 9px 15px;font-size: 14px;}
|
||
.getCaptcha{border-radius: 21.5px;background: #009688;height: auto;color: white;display: flex;align-items: center;width: 40%;justify-content: center;}
|
||
.flex_layout{display: flex;margin-top: 12px;}
|
||
.login_code{margin-top: unset;width:60%;margin-right: 12px;}
|
||
.loginbut{background: #009688;text-align: center;margin-top: 40px;margin-bottom: 18px;padding: 9px;border-radius: 66rpx;}
|
||
.persontc{
|
||
border: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
outline: none;
|
||
border-radius: 0;
|
||
background: none!important;
|
||
line-height: normal;
|
||
}
|
||
.persontc::after {
|
||
border: none;
|
||
}
|
||
|
||
</style>
|