|
|
@@ -1,6 +1,57 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
|
|
|
+ <view class="main">
|
|
|
+
|
|
|
+ <view class="logo">
|
|
|
+ <img src="../../assets/img/logo.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="name">
|
|
|
+ 食堂管理系统
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="login">
|
|
|
+ <view class="login-box">
|
|
|
+
|
|
|
+ <view :class="['tel',telHighlight==true?'highlight':'']" >
|
|
|
+ <view class="icon" >
|
|
|
+ <u-icon name="account-fill" size="40" ></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="line">
|
|
|
+ </view>
|
|
|
+ <view class="tips">
|
|
|
+ <u-input v-model="phone" @focus="handleTelFocus" @blur="handleTelBlur" class="telInput" type="number" placeholder="请输入手机号" />
|
|
|
+ <!-- <view class="clear" v-if="this.telHighlight==true">
|
|
|
+ <img src="../../assets/img/riFill-close-circle-fill@1x.png" alt="">
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view :class="['pwd',pwdHighlight==true?'highlight':'']" >
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="chat-fill" size="40"></u-icon>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="line">
|
|
|
+ </view>
|
|
|
+ <view class="tips">
|
|
|
+ <view class="input">
|
|
|
+ <u-input :type="type" :password-icon="passwordIcon" @focus="handlePwdFocus" @blur="handlePwdBlur" placeholder="请输入密码" />
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="btn">
|
|
|
+ <button>登录</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -8,15 +59,171 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ show:true,
|
|
|
+ telHighlight:false,
|
|
|
+ pwdHighlight:false,
|
|
|
+ type: 'password',
|
|
|
+ passwordIcon: true,
|
|
|
+ phone:'',
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ // 帐号框聚焦失焦
|
|
|
+ handleTelFocus(){
|
|
|
+ this.telHighlight=true
|
|
|
+ },
|
|
|
+ handleTelBlur(){
|
|
|
+ this.telHighlight=false
|
|
|
+ },
|
|
|
+ // 密码框聚焦失焦
|
|
|
+ handlePwdFocus(){
|
|
|
+ this.pwdHighlight=true
|
|
|
+ },
|
|
|
+ handlePwdBlur(){
|
|
|
+ this.pwdHighlight=false
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page {
|
|
|
+ background: url("../../assets/img/bgc.png");
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .main {
|
|
|
+ width: 100%;
|
|
|
+ padding-top:240rpx;
|
|
|
+ position: relative;
|
|
|
+ .close{
|
|
|
+ position: absolute;
|
|
|
+ top: 24rpx;
|
|
|
+ left: 24rpx;
|
|
|
+ }
|
|
|
+ .logo {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 40rDDpx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ font-family: 'SemiBold';
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-box {
|
|
|
+ margin-top: 160rpx;
|
|
|
+
|
|
|
+ .tel {
|
|
|
+ /deep/.u-input {
|
|
|
+ width: 450rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pwd{
|
|
|
+ /deep/.u-input {
|
|
|
+ width: 450rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .clear{
|
|
|
+ img{
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .line{
|
|
|
+ width: 2rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background-color: #C1CCDF;
|
|
|
+ position: absolute;
|
|
|
+ top: 20rpx;
|
|
|
+ left: 70rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tel,
|
|
|
+ .pwd {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ width: 74.4%;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ color: rgba(183, 172, 172, 1);
|
|
|
+ margin: auto;
|
|
|
+ margin-bottom: 36rpx;
|
|
|
+ border: 1px solid rgba(193, 204, 223, 1);
|
|
|
+ border-radius: 8px;
|
|
|
+ /deep/.u-input__input{
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ width: 14%;
|
|
|
+ text-align: center;
|
|
|
+ color: #B0B8C8;
|
|
|
+ img {
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .tips {
|
|
|
+
|
|
|
+ text-indent: 16rpx;
|
|
|
+ padding-right: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ /deep/uni-input {
|
|
|
+ height: 80rpx !important;
|
|
|
+ line-height: 80rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input {
|
|
|
+ width: 60%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.uicon-eye-fill,/deep/.uicon-eye{
|
|
|
+ color: rgba(0, 90, 217, 1) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 高亮
|
|
|
+ .highlight {
|
|
|
+ border: 1px solid rgba(31, 74, 153, 1);
|
|
|
+ box-shadow: 0px 0px 8rpx 0px rgba(0, 90, 217, 50);
|
|
|
+ /deep/.u-input__input{
|
|
|
+ color: rgba(0, 90, 217, 1);
|
|
|
+ }
|
|
|
+ .icon{
|
|
|
+ color: #1F4A99;
|
|
|
+ }
|
|
|
+ .line{
|
|
|
+ background-color: #005AD9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
+ .btn{
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 120rpx;
|
|
|
+
|
|
|
+ uni-button{
|
|
|
+ margin:0 96rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(31, 74, 153, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
