提交

马宇豪

2024-08-21 4c99a6d9eab85b06ce3947ecf3da3af54307d05e

 pages/index/index.vue

@@ -1,6 +1,10 @@
<template>
   <view class="box">
    <image :src="loginTop" class="topImg" mode="widthFix"></image>
    <view class="topContainer">
      <image :src="loginTop" class="topImg" mode="widthFix"></image>
      <image :src="loginPic" class="topPic" mode="widthFix"></image>
    </view>

    <view class="main">
      <view class="header">
        <view class="titleFirst">
@@ -9,22 +13,21 @@
      <view>
        <u-form :model="form" ref="uForm" class="form" >
          <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>
            </template>
          </u-input></u-form-item>
          <!-- <view class="loginPsw">
                 <u-checkbox-group >
                <u-checkbox disabled="true"></u-checkbox><text style="color: #fff;">自动登录</text>
                 </u-checkbox-group>
                  <text style="color: lightblue;">忘记密码</text>
          </view> -->
          <u-form-item style="margin-top: 10px;width: 80%;" >
            <u-input v-show="isPwd" v-model="form.password" :class="{'isFocused': codeFocused}" :password="true" placeholder="请输入密码" @focus="focusCode">
              <template slot="suffix">
                <u-icon name="eye" color="#999" size="20" @click="isPwd = false"></u-icon>
              </template>
            </u-input>
            <u-input v-show="!isPwd" v-model="form.password" :class="{'isFocused': codeFocused}" :password="false" placeholder="请输入密码" @focus="focusCode">
              <template slot="suffix">
                <u-icon name="eye-off" color="#999" size="20" @click="isPwd = true"></u-icon>
              </template>
            </u-input>
          </u-form-item>
          <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>-->
        </u-form>
      </view>
    </view>
@@ -37,11 +40,13 @@
   import store from '@/store/index.js'
   import VUE_APP_BASE_URL from '../../common/constant.js'
   const jpushModule = uni.requireNativePlugin('JG-JPush')
  import loginTop from '../../static/loginTop1.png'
  import loginTop from '../../static/loginBg.png'
  import loginPic from '../../static/loginPic.png'
   export default {
      data() {
         return {
        loginTop: loginTop,
        loginPic: loginPic,
        userFocused: false,
        codeFocused: false,
            form: {
@@ -50,7 +55,7 @@
          code: '',
          uuid: ''
            },
        codeType: 'password',
        isPwd: true,
            type: '',
            //极光推送
            connectStatus: '未连接',
@@ -189,13 +194,6 @@
      focusCode(){
        this.codeFocused = true
        this.userFocused = false
      },
      viewCode(){
        if(this.codeType == 'password'){
          this.codeType = 'text'
        } else{
          this.codeType = 'password'
        }
      }
      }
   }
@@ -210,10 +208,31 @@
   flex-direction: column;
}

.topContainer {
  position: relative; /* 新增容器，并设置相对定位 */
  width: 100%;
}

.topImg{
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 5px rgba(21,148,232,.1))
  filter: drop-shadow(0 3px 8px rgba(21,148,232,.4));
}
.topPic{
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translate(-50%, -50%)
  }
  50% {
    transform: translate(-50%, calc(-50% + 15rpx))
  }
}

.main{