zhangchao/cz-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat ui设计稿bug修复

Browse Source
This commit is contained in:
Ironsp
2026-10-01 10:53:13 +08:00
parent 9ab6253c81
commit 1601bdd82c
89 changed files with 4741 additions and 3652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
src/views/login/index.vue
View File

@@ -72,22 +72,33 @@ async function onGetCode(target: string): Promise<void> {
<template>
<div class="auth-page">
<!-- 设计稿：左侧品牌渐变面板 @(0,0) 784×1080，文案列 x257 -->
<aside class="auth-page__brand">
<div class="auth-page__brand-inner">
<p class="auth-page__logo">
虫子智造研发一体化平台
</p>
<p class="auth-page__slogan">
安全 · 高效 · 可控
</p>
<RouterLink class="auth-page__guest" to="/">
游客模式 →
</RouterLink>
</div>
<h1 class="auth-page__logo">
虫子智造研发<br>一体化平台
</h1>
<p class="auth-page__key">
chongzizhizaoyanfayitihuaPINGTAI
</p>
<p class="auth-page__slogan">
安全 · 高效 · 可控
</p>
</aside>
<RouterLink class="auth-page__guest" to="/">
游客模式
</RouterLink>
<!-- 设计稿：右侧表单区起点 x1022，表单列宽 693（标签）/680（控件） -->
<main class="auth-page__main">
<div class="auth-page__card">
<h2 class="auth-page__title">
欢迎登录
</h2>
<p class="auth-page__subtitle">
登录您的账号，开启高效之旅
</p>
<div class="auth-page__tabs">
<!-- 设计稿 Tab 顺序：手机验证码登录在前、账号密码登录在后 -->
<button
@@ -130,118 +141,52 @@ async function onGetCode(target: string): Promise<void> {
</div>
</template>
<style lang="less">
// 共用外壳 .auth-page 定义在 styles/common.less（登录/注册/找回密码三页共享）
</style>
<style lang="less" scoped>
// ===== 账号密码登录页专属（--auth-form-x/y 默认值即本页基准） =====
.auth-page {
position: relative;
display: flex;
min-height: 100vh;
// 设计稿：右侧表单区为纯白底，无卡片描边/阴影
background: @white;
&__brand {
// 设计稿：左侧品牌渐变面板约占 786/1920 ≈ 41%
flex: 0 0 41%;
.flex(row, flex-start, stretch);
background: linear-gradient(135deg, @auth-gradient-from 0%, @auth-gradient-to 100%);
color: @white;
}
&__brand-inner {
.flex(column, space-between, flex-start);
width: 100%;
// 设计稿：文字列起点 x=257 ≈ 面板宽 32.7%；主标距顶 ≈ 28%、标语底边距底 ≈ 30%
padding: 26vh 48px 30vh 32%;
}
&__logo {
font-size: 31px;
font-weight: 700;
letter-spacing: 2px;
line-height: 1.45;
// 设计稿文本框 432 设计px：定宽让 11 字在「虫子智造研发 / 一体化平台」处折行
max-width: 200px;
}
&__slogan {
font-size: 17px;
font-weight: 600;
letter-spacing: 8px;
}
// 设计稿：「游客模式」为右上角白底上的深色纯文本，无边框
&__guest {
position: absolute;
top: 18px;
right: 16px;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
color: @heading-color;
font-size: 11px;
text-decoration: none;
transition: color 0.2s;
&:hover {
background: transparent;
color: @primary-strong;
}
}
&__main {
flex: 1;
.flex(row, center, center);
padding: @spacing-xl;
}
&__card {
.flex(column, flex-start);
// 设计稿：表单列宽 688 设计px ≈ 530px，标题/Tab/输入/按钮纵向节奏 ≈ 41px
gap: 41px;
width: 100%;
max-width: 530px;
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
&__subtitle {
margin: 12px 0 0;
font-size: 13px; // 设计稿 13/400 #6B7280
font-weight: 400;
line-height: 17px;
color: #6b7280;
}
// 设计稿：Tab 行 @(1039,406)，两项间距 24（起 x1039 / x1163）
&__tabs {
// 设计稿：Tab 左对齐于表单列，仅激活项带 2px 蓝色下划线（无整行分隔线）
.flex(row, flex-start);
gap: @spacing-sm;
border-bottom: none;
.flex(row, flex-start, center);
gap: 24px;
margin: 26px 0 0 17px; // 406 − 363 = 43；x1039 − 1022 = 17
height: 25px;
}
&__tab {
padding: 0 0 4px;
padding: 0;
border: none;
border-bottom: 2px solid transparent;
background: transparent;
font-size: 11px;
color: @text-color;
font-size: 14px; // 设计稿 14/400 #4B5563 → 激活 14/600 #024FFF
font-weight: 400;
color: #4b5563;
cursor: pointer;
transition: all 0.2s;
transition: color 0.2s;
&.is-active {
border-bottom-color: @primary-strong;
color: @primary-strong;
font-weight: 600;
color: @primary-strong;
}
}
&__switch {
text-align: center;
font-size: 11px;
color: @text-color-secondary;
}
&__link {
color: @primary-strong;
&:hover {
color: @primary-hover;
}
align-self: center; // 设计稿：X 居中 @(1325,774)
margin: 53px 0 0; // 按钮底 721 → 774
font-size: 12px; // 设计稿 12/400 #6B7280
font-weight: 400;
line-height: 16px;
color: #6b7280;
}
}
</style>