feat:登录页调整

张含笑

2025-11-06 efff05ec8eed184e8a7882d1e7afa7abe23de99d

 src/pages/login/index.vue

@@ -1,210 +1,225 @@
<!-- 登录页 -->
<template>
  <view class="login-form-wrap">
    <image class="logo" :src="logoSvg"/>
    <div class="title">掌控智飞</div>
    <div class="user-name">
      <image :src="usernameSvg"/>
      <input
        v-model="loginForm.username"
        placeholder="请输入用户名"
      />
   <view class="login-form-wrap">
      <image class="logo" :src="logoSvg" />
      <div class="title">掌控智飞</div>
      <div class="user-name">
         <image :src="usernameSvg" />
         <input v-model="loginForm.username" placeholder="请输入用户名" />

    </div>
    <div class="pass-word">
      <image :src="passwordSvg"/>
      <input
        v-model="loginForm.password"
        type="password"
        placeholder="请输入密码"
      />
    </div>
      </div>
      <div class="pass-word">
         <image :src="passwordSvg" />
         <input v-model="loginForm.password" type="password" placeholder="请输入密码" />
      </div>

    <button class="login-btn" :style="[inputStyle]" @tap="submit">
      登录
    </button>
      <button class="login-btn" :style="[inputStyle]" @tap="submit">
         登录
      </button>

    <image class="lowerRightCorner" :src="droneSvg"/>
  </view>
      <image class="lowerRightCorner" :src="droneSvg" />
   </view>
</template>

<script setup>
import md5 from "js-md5";
import {loginByUsername} from "@/api/user/index.js";
import {useUserStore} from "@/store/index.js";
import droneSvg from '@/static/images/login/droneSvg.svg'
import usernameSvg from '@/static/images/login/username.svg'
import passwordSvg from '@/static/images/login/password.svg'
import logoSvg from '@/static/images/login/logo.svg'
import {HOME_PATH, LOGIN_PATH, removeQueryString} from "@/router";
   import md5 from "js-md5";
   import {
      loginByUsername
   } from "@/api/user/index.js";
   import {
      useUserStore
   } from "@/store/index.js";
   import droneSvg from '@/static/images/login/droneSvg.svg'
   import usernameSvg from '@/static/images/login/username.svg'
   import passwordSvg from '@/static/images/login/password.svg'
   import logoSvg from '@/static/images/login/logo.svg'
   import {
      HOME_PATH,
      LOGIN_PATH,
      removeQueryString
   } from "@/router";

const userStore = useUserStore();
const loginForm = ref({
  username: "",
  password: "",
});
const inputStyle = computed(() => {
  const style = {};
  if (loginForm.value.username && loginForm.value.password) {
    style.color = "#fff";
    style.backgroundColor = '#1D6FE9';
  }
  return style;
});
let redirect = HOME_PATH;
   const userStore = useUserStore();
   const loginForm = ref({
      username: "zhx",
      password: "123456",
   });
   const inputStyle = computed(() => {
      const style = {};
      if (loginForm.value.username && loginForm.value.password) {
         style.color = "#fff";
         style.backgroundColor = '#1D6FE9';
      }
      return style;
   });
   let redirect = HOME_PATH;

async function submit() {
  let userInfo = {
    tenantId: "000000",
    deptId: "",
    roleId: "",
    username: loginForm.value.username,
    password: loginForm.value.password,
    type: "account",
    code: "",
    key: "",
  };
  loginByUsername(
    userInfo.tenantId,
    userInfo.deptId,
    userInfo.roleId,
    userInfo.username,
    md5(userInfo.password),
    userInfo.type,
    userInfo.key,
    userInfo.code
  ).then((res) => {
    userStore.setUserInfo(res.data);
    uni.reLaunch({
      url: "/pages/user/index",
    });
  });
}
   async function submit() {
      let userInfo = {
         tenantId: "000000",
         deptId: "",
         roleId: "",
         username: loginForm.value.username,
         password: loginForm.value.password,
         type: "account",
         code: "",
         key: "",
      };
      try {
         const res = await loginByUsername(
            userInfo.tenantId,
            userInfo.deptId,
            userInfo.roleId,
            userInfo.username,
            md5(userInfo.password),
            userInfo.type,
            userInfo.key,
            userInfo.code
         );
         userStore.setUserInfo(res.data);
         uni.reLaunch({
            url: "/pages/user/index",
         });
      } catch (error) {
         uni.showToast({
            title: error.data.error_description,
            icon: "none",
            duration: 2000
         });

onLoad((options) => {
  if (options.redirect && removeQueryString(options.redirect) !== LOGIN_PATH) {
    redirect = decodeURIComponent(options.redirect);
  }
});
      }
   }

   onLoad((options) => {
      if (options.redirect && removeQueryString(options.redirect) !== LOGIN_PATH) {
         redirect = decodeURIComponent(options.redirect);
      }
   });
</script>

<style lang="scss" scoped>
.login-form-wrap {
  position: relative;
  text-align: center;
  height: 100%;
  width: 100%;
   .login-form-wrap {
      position: relative;
      text-align: center;
      height: 100%;
      width: 100%;

  .logo {
    width: 127px;
    height: 51px;
    margin: 0 auto;
    margin-top: 104px;
    margin-bottom: 16px;
  }
      .logo {
         width: 127px;
         height: 51px;
         margin: 0 auto;
         margin-top: 104px;
         margin-bottom: 16px;
      }

  .lowerRightCorner {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 425.61rpx;
    height: 316.46rpx;
  }
      .lowerRightCorner {
         position: absolute;
         right: 0;
         bottom: 0;
         width: 425.61rpx;
         height: 316.46rpx;
      }

  .title {
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 84rpx;
    line-height: 82rpx;
    letter-spacing: 1px;
    text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.18);
    text-align: center;
    font-style: normal;
    text-transform: none;
    color: #1452D3;
    text-align: center;
    margin-bottom: 168rpx;
  }
  .user-name,.pass-word {
    display: flex;
    //justify-content: center;
    align-items: center;
    margin-left: 62rpx;
    margin-right: 58rpx;
    height: 118rpx;
    border-bottom: 2rpx solid #E3E3E3;
    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 12rpx;
    }
    :deep(uni-input) {
      height: 40rpx;
      line-height: 40rpx;
      width: 80%;
      margin-top: 20rpx;
    }
    :deep(.uni-input-placeholder) {
      font-size: 32rpx;
      color: #E3E3E3;
      font-weight: 500;
    }
    //:deep(.uni-input-input) {
    //  top: 10px !important;
    //}
  }
  .pass-word {
  }
      .title {
         font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
         font-weight: 400;
         font-size: 84rpx;
         line-height: 82rpx;
         letter-spacing: 1px;
         text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.18);
         text-align: center;
         font-style: normal;
         text-transform: none;
         color: #1452D3;
         text-align: center;
         margin-bottom: 168rpx;
      }

  input {
    @apply pb-6rpx mb-10rpx text-left;
  }
      .user-name,
      .pass-word {
         display: flex;
         //justify-content: center;
         align-items: center;
         margin-left: 62rpx;
         margin-right: 58rpx;
         height: 118rpx;
         border-bottom: 2rpx solid #E3E3E3;

  .tips {
    @apply mt-8rpx mb-60rpx;
         image {
            width: 40rpx;
            height: 40rpx;
            margin-right: 12rpx;
         }

    color: $u-info;
  }
         :deep(uni-input) {
            height: 40rpx;
            line-height: 40rpx;
            width: 80%;
            margin-top: 20rpx;
         }

  .login-btn {
    z-index: 1;
    @apply flex items-center justify-center py-12rpx px-0 text-30rpx  border-none;
    background: #5a93e6;
    color: white;
    width: 590rpx;
    height: 76rpx;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    margin-top: 100rpx;
         :deep(.uni-input-placeholder) {
            font-size: 32rpx;
            color: #E3E3E3;
            font-weight: 500;
         }

    &::after {
      @apply border-none;
    }
  }
         //:deep(.uni-input-input) {
         //  top: 10px !important;
         //}
      }

  .alternative {
    @apply flex justify-between mt-30rpx;
      .pass-word {}

    color: $u-tips-color;
  }
}
      input {
         @apply pb-6rpx mb-10rpx text-left;
      }

.login-type-wrap {
  @apply flex justify-between pt-350rpx px-150rpx pb-150rpx;
      .tips {
         @apply mt-8rpx mb-60rpx;

  .item {
    @apply flex items-center flex-col text-28rpx;
         color: $u-info;
      }

    color: $u-content-color;
  }
}
      .login-btn {
         z-index: 1;
         @apply flex items-center justify-center py-12rpx px-0 text-30rpx border-none;
         background: #5a93e6;
         color: white;
         width: 590rpx;
         height: 76rpx;
         border-radius: 40rpx 40rpx 40rpx 40rpx;
         margin-top: 100rpx;

.hint {
  @apply px-40rpx py-20rpx text-24rpx;
         &::after {
            @apply border-none;
         }
      }

  color: $u-tips-color;
      .alternative {
         @apply flex justify-between mt-30rpx;

  .link {
    color: $u-warning;
  }
}
</style>
         color: $u-tips-color;
      }
   }

   .login-type-wrap {
      @apply flex justify-between pt-350rpx px-150rpx pb-150rpx;

      .item {
         @apply flex items-center flex-col text-28rpx;

         color: $u-content-color;
      }
   }

   .hint {
      @apply px-40rpx py-20rpx text-24rpx;

      color: $u-tips-color;

      .link {
         color: $u-warning;
      }
   }
</style>