refactor(layout): 优化首页布局和样式

- 调整账户列表宽度,从 208px 改为 188px
- 修改底部弧形倒计时进度条的位置和大小
- 调整头部分割线的左右位置
- 优化详情页内容的样式,包括 padding、width 等属性
- 统一代码数字的样式,缩小尺寸以适应新布局
This commit is contained in:
deepfal 2025-08-18 14:10:45 +08:00
parent 2786542ffd
commit cff3c5b09f

View File

@ -9,7 +9,7 @@
<div class="header-divider"></div>
<!-- 账户列表 -->
<list class="totp-list" style="position: absolute; top: 70px; bottom: 70px; left: 2px; right: 2px; width: 208px;">
<list class="totp-list" style="position: absolute; top: 70px; bottom: 70px; left: 2px; right: 2px; width: 188px;">
<list-item class="totp-item" style="height: 115px; margin-bottom: 10px; background-color: #1a1a1a; border-radius: 15px; border: 1px solid #333; flex-direction: column; justify-content: space-between; padding: 8px;" type="account" for="{{totpList}}" onclick="showDetail($idx)">
<div style="flex-direction: column; width: 100%; margin-bottom: 8px;">
<text style="font-size: 24px; color: #fff; font-weight: bold; margin-bottom: 3px; text-align: left; width: 100%; line-height: 26px;">{{$item.name}}</text>
@ -30,7 +30,7 @@
<!-- 底部弧形倒计时进度条 -->
<div class="countdown-container" show="{{totpList.length > 0}}">
<!-- 弧形进度条 -->
<progress style="position: absolute; left: 0px; bottom: 10px; center-x: 106px; center-y: 0px; width: 212px; height: 100px; radius: 100px; start-angle: 240deg; total-angle: -120deg; stroke-width: 8px; background-color: rgba(255, 255, 255, 0.2); color: {{progressColor}};" percent="{{timeProgress}}" type="arc"></progress>
<progress style="position: absolute; bottom: 10px; center-x: 96px; center-y: 0px; width: 192px; height: 100px; radius: 96px; start-angle: 240deg; total-angle: -120deg; stroke-width: 8px; background-color: rgba(255, 255, 255, 0.2); color: {{progressColor}};" percent="{{timeProgress}}" type="arc"></progress>
<!-- 倒计时文字 -->
<text class="countdown-text" style="position: absolute; bottom: 35px; left: 0px; right: 0px; text-align: center; font-size: 20px; font-weight: bold; color: {{textColor}}; transition: color 500ms ease-out;">{{timeLeft}}秒</text>
</div>
@ -757,8 +757,8 @@ export default {
.header-divider {
position: absolute;
top: 55px;
left: 20px;
right: 20px;
left: 15px;
right: 15px;
height: 1px;
background: linear-gradient(to right, transparent, #333, transparent);
flex-shrink: 0;
@ -821,7 +821,7 @@ export default {
.detail-content {
flex: 1;
padding: 40px 20px 20px 20px;
padding: 40px 15px 20px 15px;
flex-direction: column;
align-items: center;
justify-content: center;
@ -847,12 +847,12 @@ export default {
align-items: center;
justify-content: center;
margin-bottom: 25px;
padding: 20px;
padding: 15px;
background-color: #1a1a1a;
border-radius: 12px;
border: 2px solid #333;
height: 120px;
width: 170px;
width: 150px;
}
.detail-code-row {
@ -863,30 +863,30 @@ export default {
}
.detail-code-digit {
width: 30px;
height: 50px;
width: 28px;
height: 45px;
margin: 0 1px;
justify-content: center;
align-items: center;
}
.detail-code-num {
font-size: 32px;
font-size: 28px;
color: #00ff88;
font-weight: bold;
font-family: monospace;
text-align: center;
line-height: 40px;
line-height: 35px;
}
.detail-code-single {
font-size: 32px;
font-size: 28px;
color: #00ff88;
font-weight: bold;
font-family: monospace;
letter-spacing: 3px;
text-align: center;
line-height: 40px;
line-height: 35px;
}
.detail-time {