feat: 重新设计登录页面UI，新增相关图片资源并更新登录逻辑。
This commit is contained in:
Wei_佳
parent
97ce7c5ccc
commit
8b17d74359
@ -5,5 +5,5 @@ VITE_PUBLIC_PATH = '/'
|
||||
VITE_USE_PROXY = true
|
||||
|
||||
# base api
|
||||
VITE_BASE_API = 'http://139.224.70.152:9990/api/v1'
|
||||
# VITE_BASE_API = 'http://127.0.0.1:9999/api/v1'
|
||||
# VITE_BASE_API = 'http://139.224.70.152:9990/api/v1'
|
||||
VITE_BASE_API = 'http://127.0.0.1:9999/api/v1'
|
||||
|
||||
BIN
web1/src/assets/img/icon_checkbox.png
Normal file
BIN
web1/src/assets/img/icon_checkbox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 417 B |
BIN
web1/src/assets/img/icon_code.png
Normal file
BIN
web1/src/assets/img/icon_code.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 768 B |
BIN
web1/src/assets/img/icon_user.png
Normal file
BIN
web1/src/assets/img/icon_user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 404 B |
BIN
web1/src/assets/img/login_bg_full.png
Normal file
BIN
web1/src/assets/img/login_bg_full.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
web1/src/assets/img/login_box_left.png
Normal file
BIN
web1/src/assets/img/login_box_left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
BIN
web1/src/assets/img/login_btn_bg.png
Normal file
BIN
web1/src/assets/img/login_btn_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
web1/src/assets/img/login_title.png
Normal file
BIN
web1/src/assets/img/login_title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@ -1,107 +1,125 @@
|
||||
<template>
|
||||
<AppPage :show-footer="true" bg-cover :style="{ backgroundImage: `url(${bgImg})` }">
|
||||
<div
|
||||
style="transform: translateY(25px)"
|
||||
class="m-auto max-w-1500 min-w-750 f-c-c rounded-12 bg-white bg-opacity-80"
|
||||
dark:bg-dark
|
||||
>
|
||||
<div w-750 px-20 style="height: 480px; padding-top: 50px; text-align: center;">
|
||||
<img style="width: 371px; height: 60px; margin: auto;" src="@/assets/images/logo.png" alt="">
|
||||
<div mt-50 style="text-align: center; font-size: 48px; color: #303133; line-height: 48px; font-weight: 600; ">
|
||||
非遗IP价值评估系统
|
||||
<div class="page flex-col">
|
||||
<div class="section_1 flex-col" :style="{ backgroundImage: `url(${loginBgFull})` }">
|
||||
<div class="box_1 flex-row">
|
||||
<div class="section_2 flex-col">
|
||||
<div class="group_1 flex-col" :style="{ backgroundImage: `url(${loginBoxLeft})` }"></div>
|
||||
</div>
|
||||
<div style="text-align: center; margin-top: 16px; color: #606266;">
|
||||
基于深度学习算法的智能评估系统，为您的知识产权和非物质文化遗产提供专业的价值评估服务
|
||||
</div>
|
||||
<div mt-30>
|
||||
<n-input
|
||||
v-model:value="loginInfo.phone"
|
||||
style="display: inline-block; width: 260px; height: 42px; text-align: left; line-height: 42px;"
|
||||
placeholder="请输入手机号"
|
||||
:maxlength="11"
|
||||
@keypress.enter="handleLogin"
|
||||
>
|
||||
<template #prefix>
|
||||
<img style="width: 18px; height: 18px; margin-right: 8px;" src="@/assets/images/phone.png" alt="">
|
||||
</template>
|
||||
</n-input>
|
||||
|
||||
<n-button
|
||||
w-126
|
||||
h-42
|
||||
rounded-5
|
||||
type="primary"
|
||||
style="background: linear-gradient( 93deg, #880C22 0%, #A30113 100%); margin-left: 20px; font-size: 16px; border: none !important;"
|
||||
@click="handleLogin"
|
||||
>
|
||||
立即登录
|
||||
<img style="width: 18px; height: 18px; margin-left: 2px;" src="@/assets/images/go.png" alt="">
|
||||
</n-button>
|
||||
</div>
|
||||
|
||||
<div mt-20 style="display: flex; justify-content: center; align-items: center;">
|
||||
<n-input
|
||||
v-model:value="loginInfo.verifyCode"
|
||||
style="width: 260px; height: 42px;"
|
||||
placeholder="验证码"
|
||||
:maxlength="6"
|
||||
@keypress.enter="handleLogin"
|
||||
<div class="section_3 flex-col">
|
||||
<img
|
||||
class="image_1"
|
||||
referrerpolicy="no-referrer"
|
||||
:src="loginTitleImg"
|
||||
/>
|
||||
<n-button
|
||||
style="width: 126px; height: 42px; margin-left: 12px; font-size: 14px;"
|
||||
:disabled="countdown > 0"
|
||||
@click="handleSendCode"
|
||||
<div class="block_1 flex-row">
|
||||
<div class="image-text_1 flex-row">
|
||||
<img
|
||||
class="thumbnail_1"
|
||||
referrerpolicy="no-referrer"
|
||||
:src="iconUserImg"
|
||||
/>
|
||||
<input
|
||||
v-model="loginInfo.phone"
|
||||
class="input-reset text-group_1"
|
||||
placeholder="请输入账号"
|
||||
type="text"
|
||||
@keypress.enter="handleLogin"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block_2 flex-row justify-between">
|
||||
<div class="section_4 flex-row">
|
||||
<div class="image-text_2 flex-row">
|
||||
<img
|
||||
class="thumbnail_2"
|
||||
referrerpolicy="no-referrer"
|
||||
:src="iconCodeImg"
|
||||
/>
|
||||
<input
|
||||
v-model="loginInfo.verifyCode"
|
||||
class="input-reset text-group_2"
|
||||
placeholder="请输入验证码"
|
||||
type="text"
|
||||
@keypress.enter="handleLogin"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="text-wrapper_1 flex-col cursor-pointer"
|
||||
@click="handleSendCode"
|
||||
:class="{ 'disabled': countdown > 0 }"
|
||||
>
|
||||
<span class="text_1">{{ countdown > 0 ? `${countdown}s` : '获取验证码' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block_3 flex-row justify-between">
|
||||
<div class="image-text_3 flex-row cursor-pointer" @click="isAgreed = !isAgreed">
|
||||
<img
|
||||
class="thumbnail_3"
|
||||
referrerpolicy="no-referrer"
|
||||
:src="iconCheckboxImg"
|
||||
:style="{ opacity: isAgreed ? 1 : 0.5, filter: isAgreed ? 'none' : 'grayscale(100%)' }"
|
||||
/>
|
||||
<span class="text-group_3" style="margin-left: 5px;">阅读并同意</span>
|
||||
</div>
|
||||
<span class="text_2 cursor-pointer">《用户协议》</span>
|
||||
</div>
|
||||
<div
|
||||
class="text-wrapper_2 flex-col cursor-pointer"
|
||||
@click="handleLogin"
|
||||
:style="{ backgroundImage: `url(${loginBtnBg})` }"
|
||||
>
|
||||
{{ countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
|
||||
</n-button>
|
||||
<span class="text_3">立即登录</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppPage>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { lStorage, setToken } from '@/utils'
|
||||
import bgImg from '@/assets/images/login_bg.png'
|
||||
import { ref, onBeforeUnmount } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { setToken } from '@/utils'
|
||||
import api from '@/api'
|
||||
import { addDynamicRoutes } from '@/router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
// Images
|
||||
import loginTitleImg from '@/assets/img/login_title.png'
|
||||
import iconUserImg from '@/assets/img/icon_user.png'
|
||||
import iconCodeImg from '@/assets/img/icon_code.png'
|
||||
import iconCheckboxImg from '@/assets/img/icon_checkbox.png'
|
||||
import loginBgFull from '@/assets/img/login_bg_full.png'
|
||||
import loginBoxLeft from '@/assets/img/login_box_left.png'
|
||||
import loginBtnBg from '@/assets/img/login_btn_bg.png'
|
||||
|
||||
const router = useRouter()
|
||||
const { query } = useRoute()
|
||||
const { t } = useI18n({ useScope: 'global' })
|
||||
|
||||
const loginInfo = ref({
|
||||
phone: '',
|
||||
verifyCode: '',
|
||||
})
|
||||
|
||||
const isAgreed = ref(false)
|
||||
const countdown = ref(0)
|
||||
let countdownTimer = null
|
||||
|
||||
initLoginInfo()
|
||||
|
||||
function initLoginInfo() {
|
||||
if(localStorage.getItem('phone')){
|
||||
loginInfo.value.phone = localStorage.getItem('phone')
|
||||
}
|
||||
// const localLoginInfo = lStorage.get('loginInfo')
|
||||
// if (localLoginInfo) {
|
||||
// loginInfo.value.phone = localLoginInfo.phone || ''
|
||||
// loginInfo.value.password = localLoginInfo.password || ''
|
||||
// }
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
// 验证手机号格式
|
||||
// Initialize login info
|
||||
if(localStorage.getItem('phone')){
|
||||
loginInfo.value.phone = localStorage.getItem('phone')
|
||||
}
|
||||
|
||||
// Validate phone
|
||||
function validatePhone(phone) {
|
||||
const phoneReg = /^1[3-9]\d{9}$/
|
||||
return phoneReg.test(phone)
|
||||
}
|
||||
|
||||
// 发送验证码
|
||||
// Send verification code
|
||||
async function handleSendCode() {
|
||||
if (countdown.value > 0) return
|
||||
|
||||
const { phone } = loginInfo.value
|
||||
|
||||
if (!phone) {
|
||||
@ -118,7 +136,7 @@ async function handleSendCode() {
|
||||
await api.sendVerifyCode({ phone })
|
||||
$message.success('验证码已发送')
|
||||
|
||||
// 开始倒计时
|
||||
// Start countdown
|
||||
countdown.value = 60
|
||||
countdownTimer = setInterval(() => {
|
||||
countdown.value--
|
||||
@ -128,11 +146,11 @@ async function handleSendCode() {
|
||||
}
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
// error is handled by interceptor usually, but we can catch specific ones if needed
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
// 登录
|
||||
// Login
|
||||
async function handleLogin() {
|
||||
const { phone, verifyCode } = loginInfo.value
|
||||
|
||||
@ -150,9 +168,9 @@ async function handleLogin() {
|
||||
$message.warning('请输入验证码')
|
||||
return
|
||||
}
|
||||
|
||||
if (verifyCode.length < 4) {
|
||||
$message.warning('请输入完整的验证码')
|
||||
|
||||
if (!isAgreed.value) {
|
||||
$message.warning('请阅读并同意用户协议')
|
||||
return
|
||||
}
|
||||
|
||||
@ -181,7 +199,6 @@ async function handleLogin() {
|
||||
}
|
||||
}
|
||||
|
||||
// 组件卸载时清除定时器
|
||||
onBeforeUnmount(() => {
|
||||
if (countdownTimer) {
|
||||
clearInterval(countdownTimer)
|
||||
@ -189,3 +206,293 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Utility Classes */
|
||||
.flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input-reset {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Page Styles */
|
||||
.page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #f0f2f5; /* Fallback */
|
||||
}
|
||||
|
||||
.section_1 {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.box_1 {
|
||||
box-shadow: 0px 2px 30px 0px rgba(225, 206, 206, 0.22);
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
width: 900px;
|
||||
height: 500px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section_2 {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 0px 100px 0px 0px;
|
||||
height: 500px;
|
||||
width: 400px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.group_1 {
|
||||
/* Matches reference: width 841px, margin-left -270px inside a 400px container */
|
||||
width: 841px;
|
||||
height: 500px;
|
||||
margin-left: -270px;
|
||||
background-repeat: no-repeat;
|
||||
/* Ensure the image covers this specific area if needed, or default */
|
||||
}
|
||||
|
||||
.section_3 {
|
||||
width: 331px;
|
||||
height: 298px;
|
||||
margin: 101px 85px 0 84px;
|
||||
}
|
||||
|
||||
.image_1 {
|
||||
width: 260px;
|
||||
height: 42px;
|
||||
margin-left: 1px;
|
||||
/* Removed object-fit: contain to match reference behavior */
|
||||
}
|
||||
|
||||
.block_1 {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
width: 330px;
|
||||
height: 42px;
|
||||
border: 1px solid rgba(229, 229, 229, 1);
|
||||
margin: 50px 0 0 1px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-text_1 {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
margin: 0 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.thumbnail_1 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.text-group_1 {
|
||||
color: rgba(48, 49, 51, 1);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba-PuHuiTi-R, sans-serif;
|
||||
font-weight: normal;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.text-group_1::placeholder {
|
||||
color: rgba(189, 189, 189, 1);
|
||||
}
|
||||
|
||||
.block_2 {
|
||||
width: 330px;
|
||||
height: 42px;
|
||||
margin: 20px 0 0 1px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section_4 {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
width: 191px;
|
||||
height: 42px;
|
||||
border: 1px solid rgba(229, 229, 229, 1);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-text_2 {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
margin: 0 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.thumbnail_2 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.text-group_2 {
|
||||
color: rgba(48, 49, 51, 1);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba-PuHuiTi-R, sans-serif;
|
||||
font-weight: normal;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.text-group_2::placeholder {
|
||||
color: rgba(189, 189, 189, 1);
|
||||
}
|
||||
|
||||
.text-wrapper_1 {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
height: 42px;
|
||||
border: 1px solid rgba(229, 229, 229, 1);
|
||||
width: 131px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.text-wrapper_1:hover:not(.disabled) {
|
||||
border-color: rgba(163, 1, 19, 1);
|
||||
background-color: rgba(163, 1, 19, 0.05);
|
||||
}
|
||||
|
||||
.text-wrapper_1:active:not(.disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.text_1 {
|
||||
color: rgba(48, 49, 51, 1);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba-PuHuiTi-R, sans-serif;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.text-wrapper_1:hover:not(.disabled) .text_1 {
|
||||
color: rgba(163, 1, 19, 1);
|
||||
}
|
||||
|
||||
.block_3 {
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
margin-top: 36px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-text_3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.image-text_3:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.thumbnail_3 {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.text-group_3 {
|
||||
color: rgba(136, 136, 136, 1);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.32px;
|
||||
font-family: Alibaba-PuHuiTi-R, sans-serif;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.text_2 {
|
||||
color: rgba(163, 1, 19, 1);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.32px;
|
||||
font-family: Alibaba-PuHuiTi-M, sans-serif;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 12px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text_2:hover {
|
||||
text-decoration: underline;
|
||||
color: rgba(180, 1, 21, 1);
|
||||
}
|
||||
|
||||
.text-wrapper_2 {
|
||||
height: 42px;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 330px;
|
||||
margin: 10px 0 0 1px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-wrapper_2:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(163, 1, 19, 0.3);
|
||||
}
|
||||
|
||||
.text-wrapper_2:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 6px rgba(163, 1, 19, 0.2);
|
||||
}
|
||||
|
||||
.text_3 {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 18px;
|
||||
font-family: Alibaba-PuHuiTi-M, sans-serif;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.text-wrapper_2:hover .text_3 {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user