feat: 登陆页面

罗广辉

2025-10-24 189b927facaf324f1be4bb22d503d770317b23b2

 src/pages/login/index.vue

@@ -1,32 +1,38 @@
<!-- 登录页 -->
<template>
  <view>
    <view class="login-form-wrap">
      <view class="title"> 掌控智飞</view>
  <view class="login-form-wrap">
    <img style="margin-top: 180rpx" src="@/static/images/login/logo.svg" alt=""/>
    <div class="title">掌控智飞</div>
    <div style="padding: 0 60rpx">
      <input
        v-model="loginForm.username"
        class="u-border-bottom"
        placeholder="请输入用户名"
      />
      <input
        style="margin-top: 10rpx"
        v-model="loginForm.password"
        class="u-border-bottom"
        type="password"
        placeholder="请输入密码"
      />
      <button class="login-btn" :style="[inputStyle]" @tap="submit">
        登录
        <text class="i-mdi-login" />
      </button>
    </view>
    </div>

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

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

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

const userStore = useUserStore();
const loginForm = ref({
  username: "",
@@ -36,7 +42,7 @@
  const style = {};
  if (loginForm.value.username && loginForm.value.password) {
    style.color = "#fff";
    style.backgroundColor = uni.$u.color.warning;
    style.backgroundColor = '#1D6FE9';
  }
  return style;
});
@@ -79,10 +85,33 @@

<style lang="scss" scoped>
.login-form-wrap {
  @apply mt-80rpx mx-auto mb-0 w-600rpx;
  position: relative;
  text-align: center;
  height: 100%;
  width: 100%;

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

  .title {
    @apply mb-100rpx text-60rpx text-left font-500;
    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-top: 32rpx;
    margin-bottom: 100rpx;
  }

  input {
@@ -96,9 +125,13 @@
  }

  .login-btn {
    @apply flex items-center justify-center py-12rpx px-0 text-30rpx bg-#fdf3d0 border-none;

    color: $u-tips-color;
    @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;

    &::after {
      @apply border-none;