问题修复

zengh

2021-07-07 7001de2b8cd0b94d22815b4df65cbeb47e1ee216

 pages/loging/loging.vue

@@ -1,30 +1,50 @@
<template>
   <view id="login" ref="login">
      <!-- <span style="position: absolute;top: 0;">user: {{$store.state.message.useName}}</span> -->
      <view class="main">
         <view class="topImg">
            <image class="Timg" src="../../static/users.png" mode=""></image>
   <view class="container">
      <u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" back-icon-name="arrow-leftward" title="登录"
         :background="{ background: '#fff' }" title-color="#000000">
         <view class="" slot="right">
            <image src="/static/images/login/c8.png" class="set-icon" mode="widthFix"></image>
         </view>
         <view class="titie">
            <span>群防群控APP</span>
      </u-navbar>

      <view class="content">
         <view class="top">
            <view class="titie">
               <span>群防群控APP</span>
            </view>
            <view class="cell">
               <view class="name">账号</view>
               <view class="input-box">
                  <input type="text" v-model="names" placeholder="请输入账号" class="ipt" placeholder-class="hold"
                     @blur="handleInputCheck" />
               </view>
            </view>
            <view class="cell">
               <view class="name">密码</view>
               <view class="input-box">
                  <input type="password" v-model="passwords" placeholder="请输入密码" class="ipt"
                     placeholder-class="hold" @blur="handleInputCheck" />
               </view>
            </view>
				
            <!-- <view class="agree">
               登录即代表同意
               <text class="a">《用户协议》</text>
               和
               <text class="a">《隐私政策》</text>
            </view> -->
            <button class="submit" @click="longing(names,passwords)" :disabled="disabled">登录</button>
            <view class="tip">未注册用户注册审核通过后才可登录</view>
            <navigator url="/pages/registerUser/registerUser" hover-class="none" class="change">注册 ></navigator>
         </view>
         <view class="name">
            <span>账号：</span>
            <input type="text" v-model="names" placeholder="请输入账号" />
         </view>
         <view class="password">
            <span>密码：</span>
            <input type="password" v-model="passwords" placeholder="请输入密码" />
         </view>
         <view class="loging">
            <button class="confirm bubble" @click="longing(names,passwords)" type="default">登录</button>
            <button class="zhuce" @click="zhuce" type="default">没有账号？点击注册</button>
         </view>
         <view class="msg">
            <span>{{msg}}</span>
            <icon :type="icons" :color="colors" size="20" />

         <!-- 社交账号登录 -->
         <view class="bottom">
            <view class="tag"></view>
            <!-- <view class="tsp">江西北邮信息通信技术有限公司</view> -->
         </view>
      </view>
      <!--  -->
   </view>
</template>

@@ -37,7 +57,8 @@
            names: '',
            passwords: '',
            msg: '',
            colors: '#123456'
            colors: '#123456',
            disabled: true
         }
      },
      computed: {
@@ -74,6 +95,7 @@
            if (this.msg == "格式正确") {
               this.icons = 'success';
               this.colors = '#4ac503';
               this.disabled = false
            } else {
               this.icons = 'warn';
               this.colors = '#d53c00';
@@ -88,7 +110,16 @@
            if (this.msg == "格式正确") {
               uni.showNavigationBarLoading();
               this.$store.dispatch('loging', data)
            }else{
               uni.showToast({
                  title: '格式错误，请重试',
                  icon:'none',
                  duration: 2000
               });
            }
         },
         handleInputCheck() {
            //this.disabled = false
         },
         zhuce(){
            uni.navigateTo({
@@ -128,140 +159,208 @@
</script>

<style lang="scss">
   page {
      background-image: linear-gradient(to right, #07d4f3, #6099f3) //页面背景颜色
   .titie{
      display: block;
      width: 281rpx;
      height: auto;
      margin: 0 auto 120rpx;
      span {
         font-weight: 600;
         font-size: 6vw;
         color: #14b9c8;
      }
   }

   #login {
      width: 100%;
      height: 157vw;
   .container {
      min-height: 100vh;
      overflow: hidden;
	
      .set-icon {
         vertical-align: middle;
         width: 41rpx;
         height: auto;
         margin-right: 35rpx;
      }
   }
	
   .content {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      justify-content: center;

      .main {
         border-radius: 5vw;
         border: 1px solid #fff;
         width: 80vw;
         height: 100vw;
         background-image: linear-gradient(to right, #f3f3f3, #f3f3f3);
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;

         .loging {
            width: 65vw;
            height: 13vw;
            margin: 1vw 0;
	
      height: 90vh;
      width: 100%;
	
      .top {
         width: 100%;
      }
	
      .logo {
         display: block;
         width: 281rpx;
         height: auto;
         margin: 0 auto 120rpx;
      }
	
      .cell {
         width: 100%;
         padding: 0 85rpx;
         box-sizing: border-box;
         margin-top: 36rpx;
	
         .name {
            font-size: 22rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #3e4a59;
            line-height: 30rpx;
            opacity: 0.72;
         }

         .topImg,
         .titie,
         .name,
         .password,

         .msg {
            width: 65vw;
            height: 13vw;
            // border: 1px solid #00ff7f;
	
         .input-box {
            padding: 30rpx 0;
            border-bottom: 2rpx solid #f6f6f6;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 1vw 0;
         }

         .topImg {
            .Timg {
               width: 13vw;
               height: 13vw;
	
            .code {
               font-size: 22rpx;
               font-family: Source Han Sans CN;
               font-weight: 400;
               color: #0d0d0d;
               line-height: 30rpx;
	
               text {
                  color: #14b9c8;
               }
            }
         }

         .titie {
            span {
               font-weight: 600;
               font-size: 6vw;
	
            .ipt {
               flex: 1;
               // height: 24rpx;
               font-size: 24rpx;
            }
         }

         .name,
         .password {
            border-bottom: 1px solid rgba($color: #b9b9b9, $alpha: .7);
            margin-bottom: 0;
            margin-bottom: 0;

            span {
               display: inline-block;
               width: 15vw;
            }

            input {
               width: 40vw;
            }
         }

         .msg {
            font-size: 3vw;
            width: 65vw;
            height: 6vw;
            display: flex;
            align-items: center;
            justify-content: center;
            // border: 1px solid #00ff7f;

            span,
            icon {
               margin: 0 1vw;
	
            .hold {
               font-size: 26rpx;
               font-family: Source Han Sans CN;
               font-weight: 400;
               color: #3e4a59;
               line-height: 30px;
               opacity: 0.45;
            }
         }
      }
   }

   /* 按钮 */
   .confirm {
      width: 325rpx;
      height: 80rpx;
      background-color: #07c160;
      border-radius: 6rpx;
      font-size: 30rpx;
      color: #fff;
      line-height: 80rpx;
      text-align: center;

   }

   .bubble {
      position: relative;
      overflow: hidden;
   }

   .bubble:after {
      content: "44444";
      background-color: #5c9899;
      position: absolute;
      width: 750rpx;
      height: 750rpx;
      left: calc(50% - 375rpx);
      top: calc(50% - 375rpx);
      opacity: 0;
      margin: auto;
      border-radius: 50%;
      transform: scale(1);
      transition: all 0.5s ease-in-out;
   }

   .bubble:active:after {
      transform: scale(0);
      opacity: 1;
      transition: 0s;
   }

   .zhuce {
      position: relative;
      font-size: 0.2rem;
      width: 10rem;
      top: 1rem;
      border: 1px solid transparent;
	
      .agree {
         margin: 27rpx 95rpx 0;
         font-size: 22rpx;
         font-family: Adobe Heiti Std;
         font-weight: normal;
         color: #cacaca;
         line-height: 34rpx;
	
         .a {
            color: #000000;
         }
      }
	
      .submit {
         margin: 60rpx 90rpx 0;
         border: none;
         width: 572rpx;
         height: 86rpx;
         line-height: 86rpx;
         box-sizing: border-box;
         border-radius: 15rpx;
         background-color: #14b9c8;
         color: #ffffff;
	
         &::after {
            content: none;
         }
	
         &::before {
            content: none;
         }
	
         &[disabled='true'] {
            background: #e4e4e4;
            font-size: 36rpx;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #ffffff;
         }
      }
	
      .tip {
         margin-top: 30rpx;
         text-align: center;
         font-size: 22rpx;
         font-family: Adobe Heiti Std;
         font-weight: normal;
         color: #cacaca;
         line-height: 34rpx;
      }
      .tsp {
         margin-top: 30rpx;
         text-align: center;
         font-size: 28rpx;
         font-family: Adobe Heiti Std;
         font-weight: normal;
         color: #a8a8a8;
         line-height: 34rpx;
      }
	
      .change {
         margin-top: 20rpx;
         text-align: center;
         font-size: 22rpx;
         font-family: Adobe Heiti Std;
         font-weight: normal;
         color: #14b9c8;
         line-height: 34rpx;
      }
	
      .tag {
         display: flex;
         justify-content: center;
         align-items: center;
         font-size: 22rpx;
         font-family: Adobe Heiti Std;
         font-weight: normal;
         color: #9f9f9f;
         line-height: 34rpx;
	
         &::before {
            content: '';
            display: block;
            width: 160rpx;
            height: 1px;
            background: #d8d8d8;
            opacity: 0.86;
         }
	
         &::after {
            content: '';
            display: block;
            width: 160rpx;
            height: 1px;
            background: #d8d8d8;
            opacity: 0.86;
         }
      }
	
      .chat-arr {
         margin-top: 50rpx;
         display: flex;
         align-items: center;
         justify-content: space-between;
	
         .icon {
            width: 73rpx;
            height: 73rpx;
         }
      }
   }
</style>