refactor(layout): 优化首页布局和样式
- 调整账户列表宽度,从 208px 改为 188px - 修改底部弧形倒计时进度条的位置和大小 - 调整头部分割线的左右位置 - 优化详情页内容的样式,包括 padding、width 等属性 - 统一代码数字的样式,缩小尺寸以适应新布局
This commit is contained in:
parent
2786542ffd
commit
cff3c5b09f
@ -9,7 +9,7 @@
|
|||||||
<div class="header-divider"></div>
|
<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)">
|
<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;">
|
<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>
|
<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}}">
|
<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>
|
<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>
|
</div>
|
||||||
@ -757,8 +757,8 @@ export default {
|
|||||||
.header-divider {
|
.header-divider {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 55px;
|
top: 55px;
|
||||||
left: 20px;
|
left: 15px;
|
||||||
right: 20px;
|
right: 15px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: linear-gradient(to right, transparent, #333, transparent);
|
background: linear-gradient(to right, transparent, #333, transparent);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@ -821,7 +821,7 @@ export default {
|
|||||||
|
|
||||||
.detail-content {
|
.detail-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 40px 20px 20px 20px;
|
padding: 40px 15px 20px 15px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -847,12 +847,12 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
padding: 20px;
|
padding: 15px;
|
||||||
background-color: #1a1a1a;
|
background-color: #1a1a1a;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
border: 2px solid #333;
|
border: 2px solid #333;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
width: 170px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-code-row {
|
.detail-code-row {
|
||||||
@ -863,30 +863,30 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.detail-code-digit {
|
.detail-code-digit {
|
||||||
width: 30px;
|
width: 28px;
|
||||||
height: 50px;
|
height: 45px;
|
||||||
margin: 0 1px;
|
margin: 0 1px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-code-num {
|
.detail-code-num {
|
||||||
font-size: 32px;
|
font-size: 28px;
|
||||||
color: #00ff88;
|
color: #00ff88;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 40px;
|
line-height: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-code-single {
|
.detail-code-single {
|
||||||
font-size: 32px;
|
font-size: 28px;
|
||||||
color: #00ff88;
|
color: #00ff88;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 40px;
|
line-height: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-time {
|
.detail-time {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user