<template>
|
<view class="main">
|
<!-- 设置按钮 -->
|
<uni-icons type="gear" size="30" color="#b1b3b8" class="setting"></uni-icons>
|
<view class="left">
|
<!-- logo -->
|
<view class="logo-box">
|
<image src="../../static/img/logo.png" mode="aspectFit"></image>
|
</view>
|
</view>
|
<view class="right">
|
<view class="input-box">
|
<My-input class="my-input" titleIcon="person" title="账号" placeholder="请输入账号" inputType="text" optIcon="bottom" />
|
<My-input class="my-input" titleIcon="locked" title="密码" placeholder="请输入密码" inputType="password" optIcon="eye" optIconShow/>
|
<view class="rember-password">
|
<view class="text">记住密码</view>
|
<switch :checked='remberPassword' color="#FFCC33" style="zoom:.5" @change="remberChange"/>
|
</view>
|
</view>
|
<view class="button">
|
登录
|
</view>
|
</view>
|
<!-- 版本号 -->
|
<!-- #ifdef APP-PLUS -->
|
<view class="version">
|
当前版本:{{version}}
|
</view>
|
<!-- #endif -->
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
version: '',
|
remberPassword: true
|
}
|
},
|
mounted() {
|
uni.getSystemInfo({
|
success(res) {
|
// console.log(res);
|
}
|
})
|
// 手机端版本号
|
// #ifdef APP-PLUS
|
var that = this
|
plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
|
that.version = wgtinfo.version
|
});
|
// #endif
|
},
|
methods: {
|
remberChange() {
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.setting {
|
position: absolute;
|
top: 8px;
|
right: 8px;
|
border-radius: 10px;
|
box-shadow: inset 2px 2px 2px rgba(0,0,0,.3),
|
inset -2px -2px 2px rgba(255,255,255,.7),
|
-2px -2px 2px rgba(0,0,0,.4);
|
}
|
.main {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
background-color: #ECF0F1;
|
position: absolute;
|
}
|
.left {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.logo-box {
|
background-color: #ECF0F1;
|
border-radius: 15px;
|
box-shadow: inset 8px 8px 8px rgba(0,0,0,.3),
|
inset -8px -8px 8px rgba(255,255,255,.7),
|
-8px -8px 10px rgba(0,0,0,.4);
|
}
|
image {
|
height: 100%;
|
width: 100%;
|
}
|
.right {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
}
|
.input-box {
|
width: 100%;
|
}
|
.my-input {
|
width: 80%;
|
margin: 16px 10% 16px 10%;
|
}
|
.rember-password {
|
width: 78%;
|
margin: 0 11% 0 11%;
|
display: flex;
|
justify-content: space-between;
|
.text {
|
font-size: 12px;
|
color: #606266;
|
line-height: 1;
|
}
|
}
|
.button {
|
width: 40%;
|
margin: 0 auto;
|
height: 50px;
|
text-align: center;
|
line-height: 50px;
|
font-size: 20px;
|
background-color: #409EFF;
|
color: #ECF0F1;
|
border-radius: 7px;
|
box-shadow: inset 4px 4px 4px rgba(0,0,0,.3),
|
inset -4px -4px 4px rgba(255,255,255,.4),
|
-4px -4px 5px rgba(0,0,0,.4);
|
}
|
@media screen and (orientation: portrait) {
|
/* 竖屏 */
|
.main {
|
flex-direction: column;
|
}
|
.left {
|
height: 40%;
|
width: 100%;
|
}
|
.right {
|
height: 40%;
|
width: 100%;
|
}
|
.logo-box {
|
height: 60%;
|
width: 80%;
|
}
|
}
|
@media screen and (orientation: landscape) {
|
/* 横屏 */
|
.main {
|
display: flex;
|
}
|
.left {
|
height: 100%;
|
width: 50%;
|
}
|
.right {
|
height: 100%;
|
width: 50%;
|
}
|
.logo-box {
|
height: 60%;
|
width: 80%;
|
}
|
}
|
.version {
|
position: fixed;
|
width: 100%;
|
bottom: 0;
|
text-align: center;
|
font-size: 10px;
|
color: #909399;
|
}
|
</style>
|
