Compare commits

...

2 Commits

Author SHA1 Message Date
21661b8e3a feat(index): 添加后退按键自定义处理逻辑
- 在首页组件中添加 onBackPress 方法
- 当详情页显示时,按后退键关闭详情页
- 否则,执行默认后退行为(退出应用)
2025-08-18 15:17:25 +08:00
cff3c5b09f refactor(layout): 优化首页布局和样式
- 调整账户列表宽度,从 208px 改为 188px
- 修改底部弧形倒计时进度条的位置和大小
- 调整头部分割线的左右位置
- 优化详情页内容的样式,包括 padding、width 等属性
- 统一代码数字的样式,缩小尺寸以适应新布局
2025-08-18 14:10:45 +08:00

View File

@ -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>
@ -716,6 +716,17 @@ export default {
vibrator.vibrate({ vibrator.vibrate({
mode: 'short' mode: 'short'
}) })
},
onBackPress() {
console.log('触发onBackPress')
// 如果详情页打开,则关闭详情页返回列表
if (this.showDetailPage) {
this.hideDetail()
return true // 自己处理,不执行系统默认返回
}
// 否则执行系统默认返回行为(退出应用)
return false
} }
} }
@ -757,8 +768,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 +832,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 +858,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 +874,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 {