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

24
src/components/PasswordStrength.vue
View File

@@ -19,17 +19,19 @@ const levelIndex = computed(() => (level.value === 'strong' ? 3 : level.value ==
</script>
<template>
<div v-if="password" class="pwd-strength">
<!-- 设计稿：强度条常驻显示（未输入时整条为空轨道 + 空强度文字），
占位高度固定 15（条行）+ 18（提示行），保证表单纵向节奏与设计稿一致 -->
<div class="pwd-strength">
<div class="pwd-strength__bars">
<span
v-for="i in 3"
:key="i"
class="pwd-strength__bar"
:class="{ 'is-on': i <= levelIndex, [`is-${level}`]: i <= levelIndex }"
:class="{ 'is-on': password && i <= levelIndex, [`is-${level}`]: password && i <= levelIndex }"
/>
</div>
<span class="pwd-strength__label" :class="`is-${level}`">密码强度：{{ levelText }}</span>
<p v-if="level === 'weak'" class="pwd-strength__tip">
<span class="pwd-strength__label" :class="`is-${level}`">{{ password ? `密码强度：${levelText}` : '' }}</span>
<p v-if="password && level === 'weak'" class="pwd-strength__tip">
密码等级过低，请重新输入（建议字母+数字+符号组合）
</p>
</div>
@@ -40,19 +42,23 @@ const levelIndex = computed(() => (level.value === 'strong' ? 3 : level.value ==
.pwd-strength {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: 15px auto;
column-gap: @spacing-sm;
row-gap: 9px;
row-gap: 3px;
align-items: center;
// 设计稿：密码框底 → 条行 → 提示行 → 下一标签，节奏 15/15/18
min-height: 33px;
box-sizing: border-box;
&__bars {
.flex(row, center);
gap: 8px;
}
// 设计稿轨道实取 #EDEFF2，条高 5 设计px ≈ 4px
// 设计稿轨道实取 #EDEFF2，条高 5
&__bar {
flex: 1;
height: 4px;
height: 5px;
border-radius: 2px;
background: @auth-track;
@@ -69,10 +75,11 @@ const levelIndex = computed(() => (level.value === 'strong' ? 3 : level.value ==
}
}
// 设计稿强度文字为 11 设计px 中性灰（「弱」实取 rgba(156,163,175)）
// 设计稿强度文字为 11px 中性灰（「弱」实取 rgba(156,163,175)）
&__label {
justify-self: end;
font-size: 11px;
line-height: 15px;
color: @text-color-disabled;
}
@@ -80,6 +87,7 @@ const levelIndex = computed(() => (level.value === 'strong' ? 3 : level.value ==
grid-column: 1 / -1;
margin: 0;
font-size: 11px;
line-height: 15px;
color: @danger-color;
}
}