62 lines
3.7 KiB
Plaintext
62 lines
3.7 KiB
Plaintext
/* ===== 多狗选择 ===== */
|
|
.select-wrap { padding: 40rpx 32rpx; }
|
|
.select-title { font-size: 34rpx; font-weight: 600; text-align: center; }
|
|
.select-sub { font-size: 24rpx; color: var(--ink-2); text-align: center; margin-top: 8rpx; margin-bottom: 28rpx; }
|
|
.select-list { display: flex; flex-direction: column; gap: 20rpx; margin-bottom: 32rpx; }
|
|
.sel-row { display: flex; align-items: center; gap: 20rpx; padding: 22rpx; border: 2rpx solid transparent; }
|
|
.sel-row.on { border-color: var(--accent); }
|
|
.sel-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 40rpx; }
|
|
.sel-meta { flex: 1; }
|
|
.sel-name { font-size: 28rpx; font-weight: 600; }
|
|
.sel-breed { font-size: 22rpx; color: var(--ink-2); margin-top: 4rpx; }
|
|
.sel-days { margin-left: 8rpx; color: var(--success); }
|
|
.sel-check {
|
|
width: 44rpx; height: 44rpx; border-radius: 50%;
|
|
border: 2rpx solid var(--line-2); color: #fff;
|
|
display: flex; align-items: center; justify-content: center; font-size: 28rpx; line-height: 1;
|
|
}
|
|
.sel-row.on .sel-check { background: var(--accent); border-color: var(--accent); }
|
|
|
|
/* ===== 遛狗中 ===== */
|
|
.walk { min-height: 100vh; padding: 24rpx 32rpx calc(48rpx + env(safe-area-inset-bottom)); }
|
|
.status-pill { display: flex; align-items: center; gap: 10rpx; justify-content: center; font-size: 24rpx; font-weight: 600; color: var(--success); }
|
|
.status-pill.paused { color: var(--warn); }
|
|
.status-pill .dot { width: 16rpx; height: 16rpx; border-radius: 50%; background: currentColor; }
|
|
|
|
.map {
|
|
height: 260rpx; margin-top: 20rpx;
|
|
border-radius: var(--radius); background: var(--surface-2);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 24rpx; color: var(--ink-3);
|
|
}
|
|
|
|
.timer-block { text-align: center; padding: 36rpx 0 12rpx; }
|
|
.timer-label { font-size: 24rpx; color: var(--ink-2); }
|
|
.timer { font-size: 96rpx; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
|
|
|
|
.stat-grid { display: flex; gap: 20rpx; }
|
|
.stat { flex: 1; background: var(--surface-2); border-radius: var(--radius-sm); padding: 22rpx 0; text-align: center; }
|
|
.stat-v { font-size: 38rpx; font-weight: 600; }
|
|
.stat-u { font-size: 22rpx; color: var(--ink-2); }
|
|
.stat-k { font-size: 22rpx; color: var(--ink-2); margin-top: 4rpx; }
|
|
.degrade-tip { font-size: 21rpx; color: var(--ink-3); text-align: center; margin-top: 14rpx; }
|
|
|
|
.paused .timer-block, .paused .stat-grid { opacity: 0.45; }
|
|
|
|
.poop-row { display: flex; align-items: center; justify-content: space-between; padding: 28rpx 4rpx; margin-top: 8rpx; border-top: 1rpx solid var(--line); }
|
|
.poop-label { font-size: 26rpx; }
|
|
.toggle { width: 76rpx; height: 44rpx; border-radius: var(--radius-pill); background: var(--line-2); position: relative; transition: background .2s; }
|
|
.toggle.on { background: var(--success); }
|
|
.toggle .knob { position: absolute; top: 4rpx; left: 4rpx; width: 36rpx; height: 36rpx; border-radius: 50%; background: #fff; transition: transform .2s; }
|
|
.toggle.on .knob { transform: translateX(32rpx); }
|
|
|
|
.actions { display: flex; gap: 20rpx; margin-top: 16rpx; }
|
|
.active-dog { margin-top: 28rpx; padding-top: 20rpx; border-top: 1rpx solid var(--line); font-size: 24rpx; color: var(--ink-2); }
|
|
|
|
/* ===== 结束确认 ===== */
|
|
.mask { position: fixed; inset: 0; background: rgba(46,42,36,0.42); display: flex; align-items: center; justify-content: center; z-index: 50; }
|
|
.confirm { width: 520rpx; background: var(--surface); border-radius: 28rpx; padding: 44rpx 36rpx 32rpx; text-align: center; }
|
|
.confirm-title { font-size: 32rpx; font-weight: 600; }
|
|
.confirm-text { font-size: 26rpx; color: var(--ink-2); margin: 16rpx 0 32rpx; line-height: 1.6; }
|
|
.confirm-btns { display: flex; gap: 20rpx; }
|