Feat:前端登录页面
This commit is contained in:
1 parent
f93716c023
commit
55be4ad741
18 files changed
+1849
-457
No files matched your search
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"mcp__Framelink_Figma_MCP__get_figma_data",
|
||||
"Bash(npm run dev:*)"
|
||||
],
|
||||
"deny": []
|
||||
}
|
||||
}
|
||||
+1
-1
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.5, maximum-scale=3.0" />
|
||||
<title>Vite + Vue3.0 + TS项目模板</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Generated
+1247
-150
File diff suppressed because it is too large.
Load diff
@@ -22,8 +22,6 @@
|
||||
"devDependencies": {
|
||||
"@types/node": "^18.16.16",
|
||||
"@vitejs/plugin-vue": "^4.1.0",
|
||||
"amfe-flexible": "^2.2.1",
|
||||
"postcss-pxtorem": "^6.0.0",
|
||||
"terser": "^5.43.1",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^4.3.0",
|
||||
|
||||
@@ -1,10 +1,15 @@
|
||||
<template>
|
||||
<!-- 路由出口 -->
|
||||
<router-view></router-view>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
console.log(import.meta.env.VITE_API_BASE_URL)
|
||||
// 根组件,只负责渲染路由视图
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
<style>
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 249 KiB |
@@ -0,0 +1,17 @@
|
||||
/* 全局样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
$primary-color: #42b983;
|
||||
|
||||
body {
|
||||
font-family: Arial;
|
||||
color: $primary-color;
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
<!--
|
||||
* @Author: 13895237362 2205451508@qq.com
|
||||
* @Date: 2025-07-29 09:37:26
|
||||
* @LastEditors: 13895237362 2205451508@qq.com
|
||||
* @LastEditTime: 2025-07-29 11:19:01
|
||||
* @FilePath: /vue-demo3.0/src/components/layout/footer.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<!--
|
||||
* @author: 马国胜
|
||||
* @since: 2023-04-23
|
||||
* footer.vue
|
||||
-->
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { onBeforeMount, onMounted } from "vue";
|
||||
onBeforeMount(() => {
|
||||
//console.log('2.组件挂载页面之前执行----onBeforeMount')
|
||||
});
|
||||
onMounted(() => {
|
||||
//console.log('3.-组件挂载到页面之后执行-------onMounted')
|
||||
});
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.text {
|
||||
color: $primary-color;
|
||||
}
|
||||
</style>
|
||||
@@ -1,23 +0,0 @@
|
||||
<!--
|
||||
* @author: 马国胜
|
||||
* @since: 2023-04-23
|
||||
* header.vue
|
||||
-->
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { onBeforeMount, onMounted } from "vue";
|
||||
onBeforeMount(() => {
|
||||
//console.log('2.组件挂载页面之前执行----onBeforeMount')
|
||||
});
|
||||
onMounted(() => {
|
||||
//console.log('3.-组件挂载到页面之后执行-------onMounted')
|
||||
});
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.text {
|
||||
color: $primary-color;
|
||||
}
|
||||
</style>
|
||||
+2
-15
@@ -1,26 +1,13 @@
|
||||
/*
|
||||
* @Author: 13895237362 2205451508@qq.com
|
||||
* @Date: 2025-07-29 09:37:26
|
||||
* @LastEditors: 13895237362 2205451508@qq.com
|
||||
* @LastEditTime: 2025-07-29 15:16:39
|
||||
* @FilePath: /vue-demo3.0/src/main.ts
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
import ElementPlus from 'element-plus' //ui框架
|
||||
import 'element-plus/dist/index.css'
|
||||
|
||||
import 'amfe-flexible' // 自适应分辨率与屏幕
|
||||
// 全局样式重置
|
||||
import './assets/styles/global.css'
|
||||
|
||||
import i18n from './i18n' // 国际化
|
||||
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(router)
|
||||
app.use(ElementPlus)
|
||||
app.use(i18n)
|
||||
app.mount('#app')
|
||||
|
||||
@@ -1,32 +1,43 @@
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
|
||||
|
||||
// 路由类型:RouteRecordRaw
|
||||
// 路由配置
|
||||
const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: "/",
|
||||
component: () => import("@/view/Home.vue"),
|
||||
meta: { title: '首页' }
|
||||
redirect: "/login"
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
component: () => import("@/view/login.vue"),
|
||||
meta: { title: '登录' }
|
||||
component: () => import("@/views/Login.vue"),
|
||||
meta: { title: "登录" }
|
||||
},
|
||||
{
|
||||
path: "/register",
|
||||
component: () => import("@/view/register.vue"),
|
||||
meta: { title: '注册' }
|
||||
},
|
||||
path: "/dashboard",
|
||||
component: () => import("@/views/Dashboard.vue"),
|
||||
meta: { title: "仪表板", requiresAuth: true }
|
||||
}
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
// 路由模式
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
router.beforeEach(async(to) => {
|
||||
document.title = typeof(to.meta.title) === "string" ? to.meta.title : ""
|
||||
})
|
||||
// 路由守卫
|
||||
router.beforeEach((to, from, next) => {
|
||||
// 设置页面标题
|
||||
document.title = typeof(to.meta.title) === "string" ? to.meta.title : "授权管理平台";
|
||||
|
||||
// 检查是否需要认证
|
||||
if (to.meta.requiresAuth) {
|
||||
const token = localStorage.getItem("token");
|
||||
if (!token) {
|
||||
next("/login");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
next();
|
||||
});
|
||||
|
||||
export default router;
|
||||
@@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<!-- 切换路由 -->
|
||||
<router-link to="/login">登录</router-link>
|
||||
<router-link to="/register">注册</router-link>
|
||||
<!-- 测试路径别名配置 -->
|
||||
<img src="@assets/image/1.jpg" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
console.log('测试生产环境移出console')
|
||||
console.log(import.meta.env)
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,166 +0,0 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<h2>{{ t('login.title') }}</h2>
|
||||
<form @submit.prevent="handleLogin">
|
||||
<div class="form-group">
|
||||
<label for="username">{{ t('login.username') }}</label>
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
type="text"
|
||||
:placeholder="t('login.usernamePlaceholder')"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">{{ t('login.password') }}</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
:placeholder="t('login.passwordPlaceholder')"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group remember-row">
|
||||
<input
|
||||
id="remember"
|
||||
v-model="rememberMe"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label for="remember">{{ t('login.remember') }}</label>
|
||||
</div>
|
||||
<button type="submit">{{ t('login.submit') }}</button>
|
||||
</form>
|
||||
<p
|
||||
v-if="errorMsg"
|
||||
class="error"
|
||||
>{{ errorMsg }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
// 登录表单数据
|
||||
const username = ref("");
|
||||
const password = ref("");
|
||||
const rememberMe = ref(false);
|
||||
const errorMsg = ref("");
|
||||
|
||||
onMounted(() => {
|
||||
// 记住密码功能
|
||||
const saved = localStorage.getItem("loginInfo");
|
||||
if (saved) {
|
||||
const info = JSON.parse(saved);
|
||||
username.value = info.username || "";
|
||||
password.value = info.password || "";
|
||||
rememberMe.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
function handleLogin() {
|
||||
// 基本验证
|
||||
if (!username.value || !password.value) {
|
||||
errorMsg.value = t("login.error.required");
|
||||
return;
|
||||
}
|
||||
|
||||
// 模拟登录逻辑
|
||||
if (username.value === "admin" && password.value === "123456") {
|
||||
errorMsg.value = "";
|
||||
if (rememberMe.value) {
|
||||
localStorage.setItem(
|
||||
"loginInfo",
|
||||
JSON.stringify({
|
||||
username: username.value,
|
||||
password: password.value,
|
||||
})
|
||||
);
|
||||
} else {
|
||||
localStorage.removeItem("loginInfo");
|
||||
}
|
||||
// 这里可以添加登录成功后的跳转逻辑
|
||||
router.push("/");
|
||||
} else {
|
||||
errorMsg.value = t("login.error.invalid");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
max-width: 350px;
|
||||
margin: 60px auto;
|
||||
padding: 32px 24px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 24px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
width: 100%;
|
||||
margin-bottom: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.remember-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.remember-row input[type="checkbox"] {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 6px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: #42b983;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
button[type="submit"]:hover {
|
||||
background: #369870;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #e74c3c;
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<div>我是注册组件</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<h1>欢迎来到授权管理平台</h1>
|
||||
<p>您已成功登录!</p>
|
||||
<button @click="logout" class="logout-btn">退出登录</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function logout() {
|
||||
localStorage.removeItem("token");
|
||||
router.push("/login");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dashboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
padding: 10px 20px;
|
||||
background: #2E69F7;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background: #1557E5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,486 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<!-- 背景层 -->
|
||||
<div class="background-layer"></div>
|
||||
|
||||
<!-- Logo -->
|
||||
<div class="logo-section">
|
||||
<div class="logo-icon">
|
||||
<div class="logo-shape-1"></div>
|
||||
<div class="logo-shape-2"></div>
|
||||
</div>
|
||||
<span class="logo-text">Cedar-V</span>
|
||||
</div>
|
||||
|
||||
<!-- 登录区域 -->
|
||||
<div class="login-section">
|
||||
<div class="login-container">
|
||||
<h1 class="title">授权管理平台</h1>
|
||||
<p class="subtitle">登录您的账户</p>
|
||||
|
||||
<form @submit.prevent="handleLogin" class="login-form">
|
||||
<!-- 用户名输入框 -->
|
||||
<div class="form-group">
|
||||
<div class="input-container active">
|
||||
<div class="input-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="7" r="5" stroke="#AABCE6" stroke-width="1.5"/>
|
||||
<path d="M3 20c0-5.523 4.477-10 9-10s9 4.477 9 10" stroke="#AABCE6" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<input
|
||||
v-model="username"
|
||||
type="text"
|
||||
placeholder="kuikuiya 1020666"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 密码输入框 -->
|
||||
<div class="form-group">
|
||||
<div class="input-container">
|
||||
<div class="input-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M3.1 11h17.84v9a2 2 0 0 1-2 2H5.1a2 2 0 0 1-2-2v-9Z" fill="#AABCE6"/>
|
||||
<circle cx="12" cy="16" r="1" fill="#FFFFFF"/>
|
||||
<path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="#AABCE6" stroke-width="1.5" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<input
|
||||
v-model="password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 记住密码和忘记密码 -->
|
||||
<div class="form-options">
|
||||
<div class="remember-password">
|
||||
<div class="checkbox-container" @click="toggleRemember">
|
||||
<div class="checkbox" :class="{ checked: rememberMe }">
|
||||
<svg v-if="rememberMe" width="10" height="10" viewBox="0 0 10 10" fill="none">
|
||||
<path d="M8.5 2.5L3.5 7.5L1.5 5.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="remember-text">记住密码</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="forgot-password">
|
||||
<a href="#" @click.prevent="handleForgotPassword">忘记密码?</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<button type="submit" class="login-button">
|
||||
开始使用
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div v-if="errorMsg" class="error-message">{{ errorMsg }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const username = ref("");
|
||||
const password = ref("");
|
||||
const rememberMe = ref(false);
|
||||
const errorMsg = ref("");
|
||||
|
||||
function toggleRemember() {
|
||||
rememberMe.value = !rememberMe.value;
|
||||
}
|
||||
|
||||
function handleForgotPassword() {
|
||||
alert("忘记密码功能暂未实现");
|
||||
}
|
||||
|
||||
function handleLogin() {
|
||||
if (!username.value || !password.value) {
|
||||
errorMsg.value = "请输入用户名和密码";
|
||||
return;
|
||||
}
|
||||
|
||||
if (username.value === "admin" && password.value === "123456") {
|
||||
errorMsg.value = "";
|
||||
|
||||
localStorage.setItem("token", "mock-jwt-token-12345");
|
||||
|
||||
if (rememberMe.value) {
|
||||
localStorage.setItem(
|
||||
"loginInfo",
|
||||
JSON.stringify({
|
||||
username: username.value,
|
||||
password: password.value,
|
||||
})
|
||||
);
|
||||
} else {
|
||||
localStorage.removeItem("loginInfo");
|
||||
}
|
||||
|
||||
router.push("/dashboard");
|
||||
} else {
|
||||
errorMsg.value = "用户名或密码错误";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-page {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 背景层 */
|
||||
.background-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('@/assets/images/login-background.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Logo区域 */
|
||||
.logo-section {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
position: relative;
|
||||
width: 54px;
|
||||
height: 53px;
|
||||
}
|
||||
|
||||
.logo-shape-1 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 39px;
|
||||
height: 53px;
|
||||
background: #019C7C;
|
||||
clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.logo-shape-2 {
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
right: 0;
|
||||
width: 22px;
|
||||
height: 26px;
|
||||
background: #146B59;
|
||||
clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-family: 'Swis721 BlkCn BT', Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 1.2;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* 登录区域 */
|
||||
.login-section {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 828px;
|
||||
height: 100vh;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
backdrop-filter: blur(40px);
|
||||
box-shadow: -6px 0px 30px 0px rgba(63, 139, 255, 0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 50;
|
||||
padding: 40px 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 581px;
|
||||
max-width: 581px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 0 29px 0;
|
||||
font-family: 'Source Han Sans CN', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 44px;
|
||||
line-height: 1.5;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0 0 72px 0;
|
||||
font-family: 'Source Han Sans CN', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 1.5;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 62px;
|
||||
border: 1px solid #9CA7C7;
|
||||
border-radius: 8px;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.input-container.active {
|
||||
border-color: #2E69F7;
|
||||
}
|
||||
|
||||
.input-container:focus-within {
|
||||
border-color: #2E69F7;
|
||||
box-shadow: 0 0 0 2px rgba(46, 105, 247, 0.1);
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-family: 'Source Han Sans CN', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: #999999;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 记住密码和忘记密码 */
|
||||
.form-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 96px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.remember-password {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 2px;
|
||||
background: #4B7FF9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.checkbox:not(.checked) {
|
||||
background: transparent;
|
||||
border: 1px solid #9CA7C7;
|
||||
}
|
||||
|
||||
.remember-text {
|
||||
font-family: 'Alibaba PuHuiTi 2.0', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.forgot-password a {
|
||||
font-family: 'Alibaba PuHuiTi 2.0', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
color: #999999;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.forgot-password a:hover {
|
||||
color: #2E69F7;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
width: 100%;
|
||||
height: 62px;
|
||||
background: #2E69F7;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-family: 'Source Han Sans CN', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
letter-spacing: 0.15em;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-button:hover {
|
||||
background: #1557E5;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 20px rgba(46, 105, 247, 0.3);
|
||||
}
|
||||
|
||||
.login-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #fee;
|
||||
border: 1px solid #f99;
|
||||
border-radius: 8px;
|
||||
color: #d33;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 1024px) {
|
||||
.login-section {
|
||||
width: 100vw;
|
||||
right: 0;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.background-layer {
|
||||
filter: blur(2px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.login-section {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 18px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.form-options {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
height: 55px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.login-section {
|
||||
width: 100vw;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+1
-25
@@ -2,14 +2,11 @@ import { ConfigEnv, UserConfig, defineConfig, loadEnv } from 'vite'
|
||||
import viteCompression from 'vite-plugin-compression'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import path from 'path'
|
||||
import postCssPxToRem from "postcss-pxtorem" // px转rem插件
|
||||
import { visualizer } from 'rollup-plugin-visualizer' // 打包分析插件
|
||||
// import eslintPlugin from 'vite-plugin-eslint' // 如需ESLint支持可解注
|
||||
|
||||
// 获取当前时间戳,用于构建输出的文件名
|
||||
const Timestamp = new Date().getTime();
|
||||
|
||||
|
||||
// 路径解析辅助函数
|
||||
function _resolve(dir: string) {
|
||||
return path.resolve(__dirname, dir);
|
||||
@@ -29,15 +26,13 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
|
||||
plugins: [
|
||||
// Vue插件
|
||||
vue(),
|
||||
// 如需ESLint支持可启用以下插件
|
||||
// eslintPlugin(),
|
||||
|
||||
// Gzip压缩插件(仅生产环境启用)
|
||||
viteCompression({
|
||||
verbose: true, // 显示压缩日志
|
||||
disable: !isProd, // 非生产环境禁用
|
||||
deleteOriginFile: false, // 不删除源文件
|
||||
threshold: 10240, // 文件大于10KB才压缩
|
||||
threshold: 10240, // 文件大小10KB才压缩
|
||||
algorithm: 'gzip', // 压缩算法
|
||||
ext: '.gz', // 压缩文件扩展名
|
||||
}),
|
||||
@@ -59,7 +54,6 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
|
||||
changeOrigin: true, // 修改请求头中的origin为目标URL
|
||||
rewrite: path => path.replace(/^\/test/, "") // 路径重写
|
||||
},
|
||||
// 可以继续添加其他代理规则
|
||||
}
|
||||
},
|
||||
|
||||
@@ -105,24 +99,6 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
|
||||
}
|
||||
},
|
||||
|
||||
// CSS相关配置
|
||||
css: {
|
||||
preprocessorOptions: { // 预处理器配置
|
||||
scss: {
|
||||
// 全局注入scss变量文件
|
||||
additionalData: `@import "@assets/styles/variables.scss";`
|
||||
}
|
||||
},
|
||||
postcss: { // PostCSS插件
|
||||
plugins: [
|
||||
postCssPxToRem({ // px转rem插件配置
|
||||
rootValue: 192, // 设计稿宽度/10(假设设计稿1920px)
|
||||
propList: ["*", "!border"], // 转换所有属性,除了border
|
||||
})
|
||||
]
|
||||
},
|
||||
},
|
||||
|
||||
// JSON文件处理配置
|
||||
json: {
|
||||
stringify: false
|
||||
|
||||
Reference in new issue
Block a user