|
|
@@ -0,0 +1,145 @@ |
|
|
|
<template> |
|
|
|
<view style="height: 100%;"> |
|
|
|
<view class="logoBox"> |
|
|
|
<image src="/static/image/logo.png" mode="heightFix"></image> |
|
|
|
<view class="logoText"> |
|
|
|
AI监控预警分析平台 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="loginBox"> |
|
|
|
<view class="title"> |
|
|
|
账号登录 |
|
|
|
</view> |
|
|
|
<u--form labelPosition="left" :model="form" labelWidth="30rpx" :rules="rules" ref="uForm"> |
|
|
|
<u-form-item prop="name"> |
|
|
|
<u--input v-model="form.name" border="none" placeholder="请输入账号" |
|
|
|
:customStyle="{backgroundColor:'#F5F5F5',height:'98rpx',borderRadius:'20rpx',padding:'0rpx 30rpx'}"></u--input> |
|
|
|
</u-form-item> |
|
|
|
<u-form-item prop="pass"> |
|
|
|
<u--input v-model="form.pass" :type="passType" border="none" placeholder="请输入密码" |
|
|
|
:customStyle="{backgroundColor:'#F5F5F5',height:'98rpx',borderRadius:'20rpx',padding:'0rpx 30rpx'}"> |
|
|
|
<!-- <i slot="suffix" class="icon-style" :class="elIcon" autocomplete="auto" @click="flag = !flag" /> --> |
|
|
|
<view slot="suffix"> |
|
|
|
<u-icon v-show="passType=='text'" name="eye" color="#777777" size="38rpx" |
|
|
|
@click="passType='password'"></u-icon> |
|
|
|
<image v-show="passType=='password'" src="/static/image/eyeclose.png" |
|
|
|
style="width: 38rpx;height: 38rpx;margin-top: 12rpx;" @click="passType='text'"> |
|
|
|
</image> |
|
|
|
</view> |
|
|
|
</u--input> |
|
|
|
</u-form-item> |
|
|
|
<u-form-item> |
|
|
|
<u-button @click="login" :loading="isLoading" :disabled="isLoading" text="登录" :color="'#2388FF'" |
|
|
|
:customStyle="{height:'98rpx',borderRadius:'20rpx',marginTop:'60rpx'}"></u-button> |
|
|
|
</u-form-item> |
|
|
|
</u--form> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
form: { |
|
|
|
name: '', |
|
|
|
pass: '', |
|
|
|
}, |
|
|
|
passType: 'password', |
|
|
|
isLoading: false, |
|
|
|
rules: { |
|
|
|
name: [{ |
|
|
|
required: true, |
|
|
|
message: '请输入账号', |
|
|
|
trigger: ['blur', 'change'] |
|
|
|
}], |
|
|
|
pass: [{ |
|
|
|
required: true, |
|
|
|
message: '请输入密码', |
|
|
|
trigger: ['blur', 'change'] |
|
|
|
}, { |
|
|
|
validator: (rule, value, callback) => { |
|
|
|
if (value.length < 6) { |
|
|
|
callback(new Error('请输入正确的密码')); |
|
|
|
return |
|
|
|
} |
|
|
|
callback(); |
|
|
|
}, |
|
|
|
}] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
login() { |
|
|
|
this.$refs.uForm.validate(valid => { |
|
|
|
if (!valid) return |
|
|
|
this.isLoading = true |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
onReady() { |
|
|
|
//如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。 |
|
|
|
this.$refs.uForm.setRules(this.rules) |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
body, |
|
|
|
uni-page-body { |
|
|
|
background-color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
uni-page-body { |
|
|
|
background-image: url('/static/image/loginBg.png'); |
|
|
|
background-position: top; |
|
|
|
background-size: 100% auto; |
|
|
|
background-repeat: no-repeat; |
|
|
|
} |
|
|
|
|
|
|
|
input[type="password"]::-ms-reveal { |
|
|
|
display: none!important; |
|
|
|
} |
|
|
|
|
|
|
|
.logoBox { |
|
|
|
/* #ifdef H5*/ |
|
|
|
padding-top: 42rpx; |
|
|
|
/* #endif */ |
|
|
|
/* #ifndef H5*/ |
|
|
|
padding-top: 88rpx; |
|
|
|
/* #endif */ |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
uni-image { |
|
|
|
height: 80rpx; |
|
|
|
margin-top: 160rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.logoText { |
|
|
|
font-family: 'Alimama ShuHeiTi'; |
|
|
|
font-weight: 700; |
|
|
|
color: #333; |
|
|
|
margin-top: 24rpx; |
|
|
|
font-size: 40rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.loginBox { |
|
|
|
border-radius: 40rpx; |
|
|
|
background-color: #fff; |
|
|
|
height: calc(100% - 880rpx); |
|
|
|
margin-top: 46rpx; |
|
|
|
padding: 60rpx 60rpx 0 60rpx; |
|
|
|
|
|
|
|
.title { |
|
|
|
color: #333; |
|
|
|
font-size: 42rpx; |
|
|
|
margin-bottom: 30rpx; |
|
|
|
// font-weight: 700; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/.u-form-item__body{ |
|
|
|
padding: 15rpx 0; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |