From efff05ec8eed184e8a7882d1e7afa7abe23de99d Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Thu, 06 Nov 2025 11:39:21 +0800
Subject: [PATCH] feat:登录页调整
---
src/pages/login/index.vue | 375 +++++++++++++++++++++++++++-------------------------
1 files changed, 195 insertions(+), 180 deletions(-)
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 929fbde..e621b66 100644
--- a/src/pages/login/index.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3