提交

马宇豪

2024-08-29 893ff90c6e21fa3a5241a8ae9b33836037cd5912

 pages/index/index.vue

@@ -4,12 +4,12 @@
    <view class="main">
      <view class="header">
        <view class="titleFirst">
          你好~<br/>欢迎来到安全教育在线平台</view>
          你好~<br/>欢迎来到安全教育平台</view>
      </view>
      <view>
        <u-form :model="form" ref="uForm" class="form" >
          <u-form-item style="width: 75%;"><u-input v-model="form.username" :class="{'isFocused': userFocused}" placeholder="请输入用户名" @focus="focusUser"/></u-form-item>
          <u-form-item style="margin-top: 10px;width: 75%;" ><u-input v-model="form.password" :class="{'isFocused': codeFocused}" :type="codeType" placeholder="请输入密码"  @focus="focusCode">
          <u-form-item style="width: 80%;"><u-input v-model="form.username" :class="{'isFocused': userFocused}" placeholder="请输入用户名" @focus="focusUser"/></u-form-item>
          <u-form-item style="margin-top: 10px;width: 80%;" ><u-input v-model="form.password" :class="{'isFocused': codeFocused}" :type="codeType" placeholder="请输入密码"  @focus="focusCode">
            <template slot="suffix">
              <u-icon v-show="codeType == 'password'" name="eye" color="#999" size="20" @click="viewCode"></u-icon>
              <u-icon v-show="codeType == 'text'" name="eye-off" color="#999" size="20" @click="viewCode"></u-icon>
@@ -21,7 +21,7 @@
                 </u-checkbox-group>
                  <text style="color: lightblue;">忘记密码</text>
          </view> -->
          <u-form-item style="margin-top: 10px;width: 75%;">
          <u-form-item style="margin-top: 10px;width: 80%;">
            <u-button class="loginBtn" :loading="isLogining" style="width: 100%;height: 56px;border-radius: 28px" @click="Login" type="primary">登录</u-button>
          </u-form-item>
          <!--            <view style="color: white;margin-top: 150px;">技术支持：技术保障部</view>-->
@@ -85,13 +85,27 @@
         }
      },
      onLoad() {
         this.connect()
         // this.connect()
      },
      methods: {
      base64Encode(str) {
        return btoa(unescape(encodeURIComponent(str)));
      },
         Login(){
        if(this.form.username == ''){
          uni.showToast({
            title: '请输入用户名',
            duration: 1000
          })
          return
        }
        if(this.form.password == ''){
          uni.showToast({
            title: '请输入密码',
            duration: 1000
          })
          return
        }
            this.isLogining = true;
        // this.form.password = this.base64Encode(this.form.password)
        const {username,password,code,uuid} = this.form
@@ -136,12 +150,10 @@
                     icon: "none",
                     title: res.message
                  });
                  this.form.username = '';
                  this.form.password = '';
                  this.isLogining = false;
               }
            }).catch(err=>{
          this.form.username = '';
          this.form.password = '';
               this.isLogining = false;
            })
@@ -220,8 +232,8 @@
}

.titleFirst{
  width: 75%;
   font-size: 40rpx;
  width: 80%;
   font-size: 44rpx;
  line-height: 1.5;
  font-weight: bold;
  letter-spacing: 2px;
@@ -251,7 +263,7 @@
  transition: box-shadow .1s ease !important;

  &:active{
    box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 12px rgba(0, 0, 0, 0.1),inset 0 3px 6px rgba(50, 50, 50, .05) !important;
    box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1),0px 3px 6px rgba(0, 0, 0, 0.1) inset !important;
  }
}

@@ -259,7 +271,7 @@
  background: #fff;
  border-width: 1.5px !important;
  border-color: #e6e6e6 !important;
  box-shadow: 0px -6px 10px rgba(255, 255, 255, 0), 0px 4px 12px rgba(0, 0, 0, 0),inset 0 3px 6px rgba(50, 50, 50, .05) !important;
  box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1),0px 3px 6px rgba(0, 0, 0, 0.1) inset !important;
}

.loginPsw{
@@ -274,6 +286,7 @@
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  background-image: linear-gradient(#41a2ff,#0f7ff9);
  transition: box-shadow .15s ease !important;
  font-size: 30rpx;
}

.loginBtn:active{