97 lines
3.0 KiB
Vue
97 lines
3.0 KiB
Vue
<template>
|
|
<view class="login_page ">
|
|
<view class="login_top">
|
|
<view class="login_logo">
|
|
<image src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/meslogo.png" class="logopng"></image>
|
|
<image src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/demu.png" class="demupng"></image>
|
|
</view>
|
|
<view class="">
|
|
自动化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="请输入账号" />
|
|
</view>
|
|
<view class="login_input">
|
|
<input password type="text" 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: 11px; padding-top: 14px;">
|
|
记住密码
|
|
</view>
|
|
<view class="loginbut">
|
|
登录
|
|
</view>
|
|
<view class="" style="color: #009688;text-align: center;font-size: 13px;">
|
|
手机号一键登录
|
|
</view>
|
|
</view>
|
|
<view class="login_below">
|
|
<view class="">
|
|
|
|
</view>
|
|
<view class="">
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
codename:'获取验证码',
|
|
tab:1,
|
|
}
|
|
},
|
|
methods: {
|
|
//切换登录方式
|
|
changeTab(tab){
|
|
this.$set(this,"tab",tab);
|
|
},
|
|
}
|
|
}
|
|
</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 center;
|
|
background-size: cover;
|
|
height: 100vh;
|
|
}
|
|
.login_top{padding-top: 160px;padding-bottom: 32px;}
|
|
.login_logo{display: flex;align-items: center;margin-bottom: 17px;}
|
|
.logopng{width: 53px;height: 44px;}
|
|
.demupng{width: 60px;height: 36px;}
|
|
.login_centre{border-radius: 16px;background: #FFF;padding: 20px 24px 40px;}
|
|
.login_switch{display: flex;}
|
|
.login_name{flex: 1;text-align: center;}
|
|
.login_input{border-radius: 21.5px;background: #F3F5F9;margin-top: 12px;padding: 5px 15px;}
|
|
.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: 60px;margin-bottom: 18px;padding: 9px;border-radius: 66rpx;}
|
|
</style>
|