feat ui设计稿
This commit is contained in:
Ironsp
@@ -82,35 +82,36 @@ const advantages = [
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 设计 19（关于我们）：区块标题 14 设计px w700、正文 13 设计px 灰、平铺无卡片底
|
||||
.about-panel {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-base;
|
||||
gap: @spacing-lg;
|
||||
|
||||
&__section {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-sm;
|
||||
padding: @spacing-lg @spacing-xl;
|
||||
border-radius: @radius-lg;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 600;
|
||||
font-size: 11px; // 设计 14 → 11
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
color: @text-color;
|
||||
line-height: 1.8;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
// 设计 19：优势项为「标题 + 描述」同排平铺，标题亦为灰色加粗
|
||||
&__advantages {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: @spacing-base;
|
||||
grid-template-columns: 1fr;
|
||||
gap: @spacing-sm;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -118,21 +119,22 @@ const advantages = [
|
||||
}
|
||||
|
||||
&__advantage {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-xs;
|
||||
padding: @spacing-base;
|
||||
border-radius: @radius-base;
|
||||
background: @bg-color-light;
|
||||
.flex(row, flex-start);
|
||||
gap: @spacing-sm;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&__advantage-title {
|
||||
font-size: @font-size-base;
|
||||
font-weight: 600;
|
||||
color: @primary-color;
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&__advantage-desc {
|
||||
font-size: @font-size-sm;
|
||||
font-size: 11px;
|
||||
color: @text-color;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
@@ -142,18 +144,19 @@ const advantages = [
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
color: @text-color;
|
||||
|
||||
span {
|
||||
color: @text-color-secondary;
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: @primary-color;
|
||||
color: @text-color;
|
||||
|
||||
&:hover {
|
||||
color: @primary-strong;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -123,28 +123,47 @@ function onSave(): void {
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 与个人中心其它弹窗同规格（设计 22~27）：白卡 700px、蓝条标题、白底描边输入、等宽双按钮
|
||||
.address-dialog {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
.flex(row, center);
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
background: transparent;
|
||||
overflow-y: auto;
|
||||
|
||||
&__panel {
|
||||
width: 480px;
|
||||
width: 700px;
|
||||
max-width: calc(100vw - 32px);
|
||||
padding: @spacing-lg;
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow-y: auto;
|
||||
padding: @spacing-base;
|
||||
border-radius: @radius-lg;
|
||||
background: @white;
|
||||
box-shadow: @shadow-lg;
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-base;
|
||||
.scrollbar();
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
line-height: 20px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 3px;
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
border-radius: 2px;
|
||||
background: @primary-strong;
|
||||
}
|
||||
}
|
||||
|
||||
&__field {
|
||||
@@ -154,41 +173,77 @@ function onSave(): void {
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&__input,
|
||||
&__textarea {
|
||||
width: 100%;
|
||||
padding: 0 @spacing-base;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-base;
|
||||
background: @bg-color-light;
|
||||
font-size: @font-size-base;
|
||||
padding: 0 12px;
|
||||
border: 1px solid @profile-input-border;
|
||||
border-radius: @profile-radius;
|
||||
background: @white;
|
||||
font-size: 11px;
|
||||
color: @text-color;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
border-color: @primary-color;
|
||||
border-color: @primary-strong;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: @heading-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
height: 40px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&__textarea {
|
||||
padding: @spacing-sm @spacing-base;
|
||||
padding: 8px 12px;
|
||||
line-height: 1.6;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
.flex(row, flex-end);
|
||||
.flex(row, flex-start);
|
||||
gap: @spacing-sm;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-button {
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: @profile-radius;
|
||||
}
|
||||
|
||||
.app-button--primary {
|
||||
border-color: @primary-strong;
|
||||
background: @primary-strong;
|
||||
|
||||
&:hover {
|
||||
border-color: darken(@primary-strong, 6%);
|
||||
background: darken(@primary-strong, 6%);
|
||||
}
|
||||
}
|
||||
|
||||
.app-button--default {
|
||||
border: none;
|
||||
background: @profile-quiet-btn;
|
||||
color: @text-color;
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
background: darken(@profile-quiet-btn, 4%);
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -132,7 +132,7 @@ function onSubmit(): void {
|
||||
|
||||
<label v-if="!isIdentity" class="bind-dialog__agree">
|
||||
<input v-model="agree" type="checkbox">
|
||||
<span>我已阅读并同意《用户协议》和《隐私政策》</span>
|
||||
<span>我已阅读并同意<em>《用户协议》</em>和<em>《隐私政策》</em></span>
|
||||
</label>
|
||||
|
||||
<div class="bind-dialog__footer">
|
||||
@@ -149,35 +149,68 @@ function onSubmit(): void {
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 设计 23~27（绑定/换绑/身份验证弹窗）：与修改密码弹窗同规格 —— 白卡 700px、蓝条标题、
|
||||
// 白底描边输入、底部等宽双按钮；设计稿无蒙层压暗，遮罩透明。
|
||||
.bind-dialog {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
.flex(row, center);
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
background: transparent;
|
||||
overflow-y: auto;
|
||||
|
||||
&__panel {
|
||||
width: 440px;
|
||||
width: 700px; // 设计 900 × 0.77
|
||||
max-width: calc(100vw - 32px);
|
||||
padding: @spacing-lg;
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow-y: auto;
|
||||
padding: @spacing-base;
|
||||
border-radius: @radius-lg;
|
||||
background: @white;
|
||||
box-shadow: @shadow-lg;
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-base;
|
||||
.scrollbar();
|
||||
}
|
||||
|
||||
// 设计 22~26：蓝条 + 标题 15 设计px w700 深灰
|
||||
&__title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
line-height: 20px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 3px;
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
border-radius: 2px;
|
||||
background: @primary-strong;
|
||||
}
|
||||
}
|
||||
|
||||
// 设计 23：身份验证标题为纯蓝字 14 设计px（无蓝条）
|
||||
&__title:has(+ .bind-dialog__desc) {
|
||||
padding-left: 0;
|
||||
font-size: 11px;
|
||||
color: @primary-strong;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 设计 23：说明为纯灰字（非底色块）
|
||||
&__desc {
|
||||
padding: @spacing-sm @spacing-base;
|
||||
border-radius: @radius-base;
|
||||
background: @bg-color-light;
|
||||
font-size: @font-size-sm;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: @text-color-secondary;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -188,42 +221,85 @@ function onSubmit(): void {
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 @spacing-base;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-base;
|
||||
background: @bg-color-light;
|
||||
font-size: @font-size-base;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid @profile-input-border;
|
||||
border-radius: @profile-radius;
|
||||
background: @white;
|
||||
font-size: 11px;
|
||||
color: @text-color;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
border-color: @primary-color;
|
||||
border-color: @primary-strong;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: @heading-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__agree {
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-sm;
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color;
|
||||
font-size: 11px;
|
||||
color: @text-color-secondary;
|
||||
cursor: pointer;
|
||||
|
||||
input {
|
||||
accent-color: @primary-color;
|
||||
accent-color: @primary-strong;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
color: @primary-strong;
|
||||
}
|
||||
}
|
||||
|
||||
// 设计 24/25/26：底部等宽双按钮，次级 #EEF0F3、主色 #024FFF
|
||||
&__footer {
|
||||
.flex(row, flex-end);
|
||||
.flex(row, flex-start);
|
||||
gap: @spacing-sm;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-button {
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: @profile-radius;
|
||||
}
|
||||
|
||||
.app-button--primary {
|
||||
border-color: @primary-strong;
|
||||
background: @primary-strong;
|
||||
|
||||
&:hover {
|
||||
border-color: darken(@primary-strong, 6%);
|
||||
background: darken(@primary-strong, 6%);
|
||||
}
|
||||
}
|
||||
|
||||
.app-button--default {
|
||||
border: none;
|
||||
background: @profile-quiet-btn;
|
||||
color: @text-color;
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
background: darken(@profile-quiet-btn, 4%);
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -103,7 +103,7 @@ function onSubmit(): void {
|
||||
|
||||
<label class="change-pwd-dialog__agree">
|
||||
<input v-model="agree" type="checkbox">
|
||||
<span>我已阅读并同意《用户协议》和《隐私政策》</span>
|
||||
<span>我已阅读并同意<em>《用户协议》</em>和<em>《隐私政策》</em></span>
|
||||
</label>
|
||||
|
||||
<div class="change-pwd-dialog__footer">
|
||||
@@ -120,28 +120,49 @@ function onSubmit(): void {
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 设计 22（修改密码弹窗）：白卡 900×~540 设计px、蓝条标题、白底描边输入 40 设计px、
|
||||
// 整行蓝色主按钮；设计稿无蒙层压暗（页面原样可见），故遮罩透明。
|
||||
.change-pwd-dialog {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
.flex(row, center);
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
background: transparent;
|
||||
overflow-y: auto;
|
||||
|
||||
&__panel {
|
||||
width: 440px;
|
||||
width: 700px; // 设计 900 × 0.77
|
||||
max-width: calc(100vw - 32px);
|
||||
padding: @spacing-lg;
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow-y: auto;
|
||||
padding: @spacing-base;
|
||||
border-radius: @radius-lg;
|
||||
background: @white;
|
||||
box-shadow: @shadow-lg;
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-base;
|
||||
.scrollbar();
|
||||
}
|
||||
|
||||
// 设计 22：蓝条（#024FFF 4×20 设计px）+ 标题 15 设计px w700
|
||||
&__title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
line-height: 20px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 3px;
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
border-radius: 2px;
|
||||
background: @primary-strong;
|
||||
}
|
||||
}
|
||||
|
||||
&__field {
|
||||
@@ -150,28 +171,37 @@ function onSubmit(): void {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 设计 22：标签 13 设计px w500 深灰
|
||||
&__label {
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
// 设计 22：白底、#DDE1E7 描边、40 设计px ≈ 32px 高、13 设计px 字
|
||||
&__input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 @spacing-base;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-base;
|
||||
background: @bg-color-light;
|
||||
font-size: @font-size-base;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid @profile-input-border;
|
||||
border-radius: @profile-radius;
|
||||
background: @white;
|
||||
font-size: 11px;
|
||||
color: @text-color;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
border-color: @primary-color;
|
||||
border-color: @primary-strong;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&:read-only {
|
||||
color: @text-color-secondary;
|
||||
color: @text-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
@@ -179,19 +209,55 @@ function onSubmit(): void {
|
||||
&__agree {
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-sm;
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color;
|
||||
font-size: 11px;
|
||||
color: @text-color-secondary;
|
||||
cursor: pointer;
|
||||
|
||||
input {
|
||||
accent-color: @primary-color;
|
||||
accent-color: @primary-strong;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
color: @primary-strong;
|
||||
}
|
||||
}
|
||||
|
||||
// 设计 24：底部两枚等宽整行按钮 —— 次级 #EEF0F3 灰底、主色 #024FFF
|
||||
&__footer {
|
||||
.flex(row, flex-end);
|
||||
.flex(row, flex-start);
|
||||
gap: @spacing-sm;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-button {
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: @profile-radius;
|
||||
}
|
||||
|
||||
.app-button--primary {
|
||||
border-color: @primary-strong;
|
||||
background: @primary-strong;
|
||||
|
||||
&:hover {
|
||||
border-color: darken(@primary-strong, 6%);
|
||||
background: darken(@primary-strong, 6%);
|
||||
}
|
||||
}
|
||||
|
||||
.app-button--default {
|
||||
border: none;
|
||||
background: @profile-quiet-btn;
|
||||
color: @text-color;
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
background: darken(@profile-quiet-btn, 4%);
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -114,13 +114,14 @@ function onReset(): void {
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 设计 18（意见反馈表单）：表单直接铺在白面板上（无内嵌卡）、标签 13 设计px w500、
|
||||
// 白底 #DDE1E7 描边输入、计数灰字、附件区白底描边
|
||||
.feedback-form {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-base;
|
||||
padding: @spacing-lg @spacing-xl;
|
||||
border-radius: @radius-lg;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
&__field {
|
||||
.flex(column, flex-start);
|
||||
@@ -129,7 +130,8 @@ function onReset(): void {
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
@@ -138,52 +140,51 @@ function onReset(): void {
|
||||
color: @danger-color;
|
||||
}
|
||||
|
||||
&__input {
|
||||
&__input,
|
||||
&__textarea {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 @spacing-base;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-base;
|
||||
background: @bg-color-light;
|
||||
font-size: @font-size-base;
|
||||
padding: 0 12px;
|
||||
border: 1px solid @profile-input-border;
|
||||
border-radius: @profile-radius;
|
||||
background: @white;
|
||||
font-size: 11px;
|
||||
color: @text-color;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
border-color: @primary-color;
|
||||
border-color: @primary-strong;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: @heading-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
height: 32px; // 设计 40 × 0.77
|
||||
}
|
||||
|
||||
&__textarea {
|
||||
width: 100%;
|
||||
padding: @spacing-sm @spacing-base;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-base;
|
||||
background: @bg-color-light;
|
||||
font-size: @font-size-base;
|
||||
padding: 8px 12px;
|
||||
line-height: 1.6;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
resize: vertical;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
border-color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 设计 18：字数统计 11 设计px 灰字
|
||||
&__counter {
|
||||
align-self: flex-end;
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-disabled;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&__tip {
|
||||
padding: @spacing-sm @spacing-base;
|
||||
border-radius: @radius-base;
|
||||
border-radius: @profile-radius;
|
||||
background: @primary-light;
|
||||
color: @primary-color;
|
||||
font-size: @font-size-sm;
|
||||
color: @primary-strong;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -191,5 +192,40 @@ function onReset(): void {
|
||||
.flex(row, flex-start);
|
||||
gap: @spacing-sm;
|
||||
}
|
||||
|
||||
// 附件区：设计 18 白底 + #DDE1E7 描边
|
||||
:deep(.upload-area) {
|
||||
min-height: 56px;
|
||||
border: 1px solid @profile-input-border;
|
||||
background: @white;
|
||||
|
||||
&:hover,
|
||||
&.is-dragging {
|
||||
background: @bg-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.upload-area__hint) {
|
||||
color: @text-color-disabled;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.app-button {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
border-radius: @profile-radius;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.app-button--primary {
|
||||
border-color: @primary-strong;
|
||||
background: @primary-strong;
|
||||
|
||||
&:hover {
|
||||
border-color: darken(@primary-strong, 6%);
|
||||
background: darken(@primary-strong, 6%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -42,26 +42,25 @@ defineProps<Props>()
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 设计 16（帮助中心 FAQ）：分类标题居中 14 设计px w700、Q 加粗深灰、A 13 设计px 灰，
|
||||
// 无卡片底色/描边，平铺在面板上
|
||||
.help-faq {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-base;
|
||||
|
||||
&__group {
|
||||
border-radius: @radius-lg;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&__summary {
|
||||
.flex(row, flex-start, center);
|
||||
padding: @spacing-base @spacing-xl;
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 600;
|
||||
.flex(row, center, center);
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
font-size: 11px; // 设计 14 → 11
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
transition: background 0.2s;
|
||||
user-select: none;
|
||||
|
||||
&::-webkit-details-marker {
|
||||
@@ -69,52 +68,46 @@ defineProps<Props>()
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '▾';
|
||||
margin-left: auto;
|
||||
font-size: @font-size-base;
|
||||
color: @text-color-secondary;
|
||||
transition: transform 0.2s;
|
||||
content: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: @bg-color-light;
|
||||
background: transparent;
|
||||
color: @primary-strong;
|
||||
}
|
||||
}
|
||||
|
||||
&__group[open] > .help-faq__summary::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&__list {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-base;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
padding: 0 @spacing-xl @spacing-lg;
|
||||
padding: @spacing-sm 0 0;
|
||||
list-style: none;
|
||||
border-top: 1px solid @border-color;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&__item {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-xs;
|
||||
padding-top: @spacing-base;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&__q {
|
||||
font-size: @font-size-base;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&__a {
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
color: @text-color;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
padding: @spacing-xxl 0;
|
||||
text-align: center;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -22,42 +22,65 @@ const WORK_TIME = '工作日 8:00-12:00 14:00-18:00'
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 设计 14（专属客服热线）：面板内整行浅蓝卡（#D6E4FB）、蓝色圆形图标、
|
||||
// 标题 19 设计px w700、号码 24 设计px 蓝色 w700、时间 12 设计px 灰
|
||||
.hotline-panel {
|
||||
.flex(row, center);
|
||||
padding: @spacing-xxl 0;
|
||||
.flex(row, flex-start);
|
||||
padding: 0;
|
||||
|
||||
&__card {
|
||||
.flex(column, center);
|
||||
gap: @spacing-base;
|
||||
width: 480px;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas:
|
||||
'icon title'
|
||||
'icon number'
|
||||
'icon time';
|
||||
column-gap: @spacing-base;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: @spacing-xxl @spacing-xl;
|
||||
border-radius: @radius-lg;
|
||||
background: @white;
|
||||
box-shadow: @shadow-lg;
|
||||
text-align: center;
|
||||
padding: @spacing-lg;
|
||||
border-radius: @radius-base;
|
||||
background: @profile-hotline-bg;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 设计 14 实取：#024FFF 蓝色圆底（直径约 64 设计px）
|
||||
&__icon {
|
||||
font-size: @font-size-xxl * 2;
|
||||
.flex(row, center);
|
||||
grid-area: icon;
|
||||
flex-shrink: 0;
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
margin: 0;
|
||||
border-radius: @radius-round;
|
||||
background: @primary-strong;
|
||||
font-size: @font-size-lg;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: @font-size-xl;
|
||||
font-weight: 600;
|
||||
grid-area: title;
|
||||
align-self: end;
|
||||
font-size: 15px; // 设计 19 → 15
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&__number {
|
||||
font-size: @font-size-xxl + @spacing-sm;
|
||||
grid-area: number;
|
||||
font-size: 18px; // 设计 24 → 18
|
||||
font-weight: 700;
|
||||
color: @primary-color;
|
||||
line-height: 1.2;
|
||||
color: @primary-strong;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
&__time {
|
||||
font-size: @font-size-base;
|
||||
grid-area: time;
|
||||
align-self: start;
|
||||
color: @text-color-secondary;
|
||||
font-size: 11px; // 设计 12 → 11
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -22,11 +22,11 @@ const menus: MenuItem[] = [
|
||||
<ul class="profile-sider__menu">
|
||||
<li v-for="item in menus" :key="item.to">
|
||||
<RouterLink :to="item.to" class="profile-sider__item">
|
||||
<span class="profile-sider__icon">{{ item.icon }}</span>
|
||||
<span class="profile-sider__label">{{ item.label }}</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="profile-sider__footer">
|
||||
<RouterLink
|
||||
to="/profile/hotline"
|
||||
@@ -47,50 +47,50 @@ const menus: MenuItem[] = [
|
||||
|
||||
&__menu {
|
||||
.flex(column, flex-start);
|
||||
gap: 2px;
|
||||
gap: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// 设计 14/28：纯文字菜单，选中项浅蓝底 + 蓝色加粗，行距 36 × 0.77 ≈ 28
|
||||
&__item {
|
||||
.flex(row, flex-start);
|
||||
gap: @spacing-sm;
|
||||
height: 44px;
|
||||
padding: 0 @spacing-base;
|
||||
border-radius: @radius-base;
|
||||
.flex(row, flex-start, center);
|
||||
height: 28px;
|
||||
padding: 0 @spacing-sm;
|
||||
border-radius: @profile-radius;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: @primary-light;
|
||||
color: @primary-color;
|
||||
color: @primary-strong;
|
||||
}
|
||||
|
||||
&.router-link-active {
|
||||
background: @primary-light;
|
||||
color: @primary-color;
|
||||
background: @profile-nav-active-bg;
|
||||
color: @primary-strong;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: @font-size-lg;
|
||||
line-height: 1;
|
||||
&__label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
padding: @spacing-base;
|
||||
border-top: 1px solid @border-color;
|
||||
text-align: center;
|
||||
padding: @spacing-sm @spacing-sm 0;
|
||||
border-top: 1px solid @project-divider;
|
||||
}
|
||||
|
||||
&__hotline {
|
||||
font-size: @font-size-sm;
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
color: @text-color-secondary;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
color: @primary-strong;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -50,63 +50,68 @@ function save(): void {
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 设计 14：左列紫渐变用户卡（渐变实取 #5459E8 → #D2BDF3），内容居中
|
||||
.profile-user-card {
|
||||
.flex(row, flex-start);
|
||||
gap: @spacing-base;
|
||||
padding: @spacing-lg @spacing-xl;
|
||||
.flex(column, center);
|
||||
gap: @spacing-xs; // 设计 14：头像与文字块间距约 4px
|
||||
padding: @spacing-base @spacing-sm; // 设计：上 20 / 下 25 设计px ≈ 16
|
||||
border-radius: @radius-lg;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
background: linear-gradient(170deg, @profile-user-from 0%, @profile-user-to 100%);
|
||||
|
||||
&__avatar {
|
||||
.flex(row, center);
|
||||
flex-shrink: 0;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
width: 42px; // 设计 54 × 0.77
|
||||
height: 42px;
|
||||
border-radius: @radius-round;
|
||||
background: linear-gradient(135deg, @primary-color, @primary-hover);
|
||||
background: @profile-user-avatar;
|
||||
color: @white;
|
||||
font-size: @font-size-xxl;
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__info {
|
||||
.flex(column, flex-start);
|
||||
.flex(column, center);
|
||||
gap: @spacing-xs;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// 卡内为深色底：名称/号码一律白字（设计 14 实取 #FFFFFF）
|
||||
&__name {
|
||||
width: 240px;
|
||||
height: 34px;
|
||||
padding: 0 @spacing-sm;
|
||||
width: 100%;
|
||||
height: 16px; // 设计 19 × 0.77
|
||||
padding: 0 @spacing-xs;
|
||||
border: 1px solid transparent;
|
||||
border-radius: @radius-base;
|
||||
border-radius: @profile-radius;
|
||||
background: transparent;
|
||||
font-size: @font-size-xl;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: @heading-color;
|
||||
color: @white;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: @border-color;
|
||||
border-color: fade(@white, 55%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: @primary-color;
|
||||
background: @bg-color-light;
|
||||
border-color: @white;
|
||||
background: fade(@white, 12%);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
font-size: @font-size-lg;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: @text-color-disabled;
|
||||
color: fade(@white, 75%);
|
||||
}
|
||||
}
|
||||
|
||||
&__phone {
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -59,13 +59,14 @@ const STATUS_VARIANTS: Record<QualificationStatus, 'success' | 'warning' | 'dang
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 设计 17（资质列表行）：白卡灰描边、字段标签灰/值深 w600、状态为纯文字、白底描边操作按钮
|
||||
.qual-card {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-sm;
|
||||
padding: @spacing-base;
|
||||
border-radius: @radius-lg;
|
||||
border: 1px solid @profile-card-border;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
|
||||
&__head {
|
||||
.flex(row, space-between, flex-start);
|
||||
@@ -73,7 +74,7 @@ const STATUS_VARIANTS: Record<QualificationStatus, 'success' | 'warning' | 'dang
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: @font-size-lg;
|
||||
font-size: 11px; // 设计 13 → 11
|
||||
font-weight: 600;
|
||||
color: @heading-color;
|
||||
.multi-ellipsis(2);
|
||||
@@ -83,42 +84,77 @@ const STATUS_VARIANTS: Record<QualificationStatus, 'success' | 'warning' | 'dang
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-xs;
|
||||
list-style: none;
|
||||
font-size: @font-size-base;
|
||||
color: @text-color;
|
||||
font-size: 11px;
|
||||
color: @heading-color;
|
||||
|
||||
li {
|
||||
.ellipsis();
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
span {
|
||||
color: @text-color-secondary;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
.flex(row, center);
|
||||
gap: @spacing-base;
|
||||
gap: @spacing-sm;
|
||||
margin-top: auto;
|
||||
padding-top: @spacing-sm;
|
||||
border-top: 1px solid @border-color;
|
||||
border-top: 1px solid @profile-card-border;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 设计 17：操作按钮 = 白底灰描边、12 设计px w500 灰字
|
||||
&__btn {
|
||||
font-size: @font-size-base;
|
||||
color: @primary-color;
|
||||
transition: opacity 0.2s;
|
||||
height: 24px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid @profile-line;
|
||||
border-radius: @profile-radius;
|
||||
background: @white;
|
||||
color: @text-color;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.75;
|
||||
border-color: @primary-strong;
|
||||
color: @primary-strong;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&--danger {
|
||||
color: @danger-color;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: @warning-color;
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 设计 17：状态为纯文字（已认证/审核中深灰、未通过红），无底色胶囊
|
||||
.qual-card .status-tag {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
font-size: 12px; // 设计 15 → 12
|
||||
font-weight: 700;
|
||||
|
||||
&--success {
|
||||
background: transparent;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
background: transparent;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background: transparent;
|
||||
color: @danger-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -184,20 +184,21 @@ function onSave(): void {
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 与个人中心其它弹窗同规格（设计 22~27）：白卡 700px、蓝条标题、白底描边输入、等宽双按钮
|
||||
.qual-dialog {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
.flex(row, center);
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
background: transparent;
|
||||
overflow-y: auto;
|
||||
|
||||
&__panel {
|
||||
width: 520px;
|
||||
width: 700px;
|
||||
max-width: calc(100vw - 32px);
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow-y: auto;
|
||||
padding: @spacing-lg;
|
||||
padding: @spacing-base;
|
||||
border-radius: @radius-lg;
|
||||
background: @white;
|
||||
box-shadow: @shadow-lg;
|
||||
@@ -207,9 +208,23 @@ function onSave(): void {
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
line-height: 20px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 3px;
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
border-radius: 2px;
|
||||
background: @primary-strong;
|
||||
}
|
||||
}
|
||||
|
||||
&__field {
|
||||
@@ -219,25 +234,30 @@ function onSave(): void {
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 @spacing-base;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-base;
|
||||
background: @bg-color-light;
|
||||
font-size: @font-size-base;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid @profile-input-border;
|
||||
border-radius: @profile-radius;
|
||||
background: @white;
|
||||
font-size: 11px;
|
||||
color: @text-color;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
border-color: @primary-color;
|
||||
border-color: @primary-strong;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: @heading-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -248,17 +268,47 @@ function onSave(): void {
|
||||
|
||||
&__sep {
|
||||
flex-shrink: 0;
|
||||
font-size: @font-size-sm;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&__hint {
|
||||
font-size: @font-size-sm;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
.flex(row, flex-end);
|
||||
.flex(row, flex-start);
|
||||
gap: @spacing-sm;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-button {
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: @profile-radius;
|
||||
}
|
||||
|
||||
.app-button--primary {
|
||||
border-color: @primary-strong;
|
||||
background: @primary-strong;
|
||||
|
||||
&:hover {
|
||||
border-color: darken(@primary-strong, 6%);
|
||||
background: darken(@primary-strong, 6%);
|
||||
}
|
||||
}
|
||||
|
||||
.app-button--default {
|
||||
border: none;
|
||||
background: @profile-quiet-btn;
|
||||
color: @text-color;
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
background: darken(@profile-quiet-btn, 4%);
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -42,13 +42,14 @@ const risks = [
|
||||
<div class="security-panel">
|
||||
<!-- 修改密码 -->
|
||||
<section class="security-panel__row">
|
||||
<span class="security-panel__icon security-panel__icon--pwd" aria-hidden="true" />
|
||||
<div class="security-panel__main">
|
||||
<h3 class="security-panel__title">
|
||||
修改密码
|
||||
</h3>
|
||||
<p class="security-panel__status">
|
||||
<span class="security-panel__badge security-panel__badge--ok">已设置</span>
|
||||
<span class="security-panel__note text-secondary">上次修改：{{ profile?.passwordModifiedAt }}</span>
|
||||
<span class="security-panel__note">上次修改：{{ profile?.passwordModifiedAt }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<AppButton type="default" @click="emit('changePassword')">
|
||||
@@ -58,6 +59,7 @@ const risks = [
|
||||
|
||||
<!-- 绑定手机 -->
|
||||
<section class="security-panel__row">
|
||||
<span class="security-panel__icon security-panel__icon--phone" aria-hidden="true" />
|
||||
<div class="security-panel__main">
|
||||
<h3 class="security-panel__title">
|
||||
绑定手机
|
||||
@@ -65,7 +67,7 @@ const risks = [
|
||||
<p class="security-panel__status">
|
||||
<span class="security-panel__badge security-panel__badge--ok">已绑定 {{ profile?.phone }}</span>
|
||||
</p>
|
||||
<p class="security-panel__note text-secondary">
|
||||
<p class="security-panel__note">
|
||||
注：换绑新手机号之后，可以用新的手机号及当前密码登录
|
||||
</p>
|
||||
</div>
|
||||
@@ -76,6 +78,7 @@ const risks = [
|
||||
|
||||
<!-- 绑定邮箱 -->
|
||||
<section class="security-panel__row">
|
||||
<span class="security-panel__icon security-panel__icon--email" aria-hidden="true" />
|
||||
<div class="security-panel__main">
|
||||
<h3 class="security-panel__title">
|
||||
绑定邮箱
|
||||
@@ -115,7 +118,7 @@ const risks = [
|
||||
</h3>
|
||||
|
||||
<div class="security-panel__block">
|
||||
<h4 class="security-panel__block-title">
|
||||
<h4 class="security-panel__block-title security-panel__block-title--ok">
|
||||
注销条件
|
||||
</h4>
|
||||
<ul class="security-panel__checks">
|
||||
@@ -126,7 +129,7 @@ const risks = [
|
||||
</div>
|
||||
|
||||
<div class="security-panel__block">
|
||||
<h4 class="security-panel__block-title">
|
||||
<h4 class="security-panel__block-title security-panel__block-title--risk">
|
||||
注销风险提示
|
||||
</h4>
|
||||
<ol class="security-panel__risks">
|
||||
@@ -138,7 +141,7 @@ const risks = [
|
||||
|
||||
<label class="security-panel__agree">
|
||||
<input v-model="agree" type="checkbox">
|
||||
<span>已阅读并同意《账号注销协议》</span>
|
||||
<span>已阅读并同意<em>《账号注销协议》</em></span>
|
||||
</label>
|
||||
|
||||
<AppButton
|
||||
@@ -154,25 +157,47 @@ const risks = [
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 设计 28：白卡行 + 浅灰描边、图标块 44×44 设计px、标题 14 设计px w600、副文 11 设计px
|
||||
.security-panel {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-base;
|
||||
|
||||
&__row {
|
||||
.flex(row, space-between, flex-start);
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-base;
|
||||
padding: @spacing-lg @spacing-xl;
|
||||
border-radius: @radius-lg;
|
||||
padding: @spacing-base;
|
||||
border: 1px solid @profile-card-border;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
}
|
||||
|
||||
// 设计 28 实取图标块底色：#C7D2FE / #FDEBEB / #FEE2E2
|
||||
&__icon {
|
||||
flex-shrink: 0;
|
||||
width: 34px; // 设计 44 × 0.77
|
||||
height: 34px;
|
||||
border-radius: @radius-base;
|
||||
|
||||
&--pwd {
|
||||
background: @profile-icon-pwd;
|
||||
}
|
||||
|
||||
&--phone {
|
||||
background: @profile-icon-phone;
|
||||
}
|
||||
|
||||
&--email {
|
||||
background: @profile-icon-email;
|
||||
}
|
||||
}
|
||||
|
||||
&__main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: @font-size-lg;
|
||||
font-size: 11px; // 设计 14 → 10.8，取可读下限 11
|
||||
font-weight: 600;
|
||||
color: @heading-color;
|
||||
}
|
||||
@@ -181,26 +206,29 @@ const risks = [
|
||||
.flex(row, flex-start, center);
|
||||
flex-wrap: wrap;
|
||||
gap: @spacing-sm;
|
||||
margin-top: @spacing-sm;
|
||||
font-size: @font-size-base;
|
||||
margin-top: @spacing-xs;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
// 设计 28：已设置/已绑定 = 浅绿底绿字胶囊，未绑定 = 纯灰字
|
||||
&__badge {
|
||||
padding: 2px @spacing-sm;
|
||||
padding: 2px 8px;
|
||||
border-radius: @radius-sm;
|
||||
background: @bg-color;
|
||||
background: transparent;
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-sm;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
|
||||
&--ok {
|
||||
background: fade(@success-color, 12%);
|
||||
background: @tag-success-bg;
|
||||
color: @success-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__note {
|
||||
margin-top: @spacing-xs;
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-disabled;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -210,18 +238,48 @@ const risks = [
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 行内操作按钮：白底灰描边小按钮（设计 20/17 操作按钮同规格）
|
||||
.app-button {
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid @profile-line;
|
||||
border-radius: @profile-radius;
|
||||
background: @white;
|
||||
color: @text-color;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: @primary-strong;
|
||||
color: @primary-strong;
|
||||
background: @white;
|
||||
}
|
||||
}
|
||||
|
||||
.app-button--text {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
color: @text-color;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
color: @primary-strong;
|
||||
}
|
||||
}
|
||||
|
||||
&__danger {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-base;
|
||||
padding: @spacing-lg @spacing-xl;
|
||||
border: 1px solid fade(@danger-color, 35%);
|
||||
border-radius: @radius-lg;
|
||||
padding: @spacing-lg;
|
||||
border: 1px solid @profile-card-border;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
}
|
||||
|
||||
&__danger-title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 600;
|
||||
font-size: 12px; // 设计 15 → 12
|
||||
font-weight: 700;
|
||||
color: @danger-color;
|
||||
}
|
||||
|
||||
@@ -230,10 +288,18 @@ const risks = [
|
||||
gap: @spacing-sm;
|
||||
}
|
||||
|
||||
// 设计 29：注销条件标题绿、注销风险提示标题红
|
||||
&__block-title {
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: @heading-color;
|
||||
|
||||
&--ok {
|
||||
color: @success-color;
|
||||
}
|
||||
|
||||
&--risk {
|
||||
color: @danger-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__checks {
|
||||
@@ -243,7 +309,7 @@ const risks = [
|
||||
}
|
||||
|
||||
&__check {
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
@@ -255,10 +321,10 @@ const risks = [
|
||||
|
||||
&__risks {
|
||||
margin: 0;
|
||||
padding-left: @spacing-lg;
|
||||
padding-left: @spacing-base;
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-xs;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
color: @text-color;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@@ -266,25 +332,40 @@ const risks = [
|
||||
&__agree {
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-sm;
|
||||
font-size: @font-size-base;
|
||||
color: @text-color;
|
||||
font-size: 11px;
|
||||
color: @text-color-secondary;
|
||||
cursor: pointer;
|
||||
|
||||
input {
|
||||
accent-color: @danger-color;
|
||||
accent-color: @primary-strong;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
color: @primary-strong;
|
||||
}
|
||||
}
|
||||
|
||||
// AppButton 根元素可被父级 scoped 命中：danger 描边按钮
|
||||
// 注销账号：白底灰描边整行按钮（设计 28 实取文字 #9CA3AF、15 设计px）
|
||||
&__delete-btn {
|
||||
border-color: @danger-color !important;
|
||||
color: @danger-color !important;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
border: 1px solid @profile-line !important;
|
||||
background: @white !important;
|
||||
color: @text-color-disabled !important;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: fade(@danger-color, 8%) !important;
|
||||
border-color: @danger-color !important;
|
||||
background: @white !important;
|
||||
color: @danger-color !important;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 1;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user