69 lines
2.9 KiB
Plaintext
69 lines
2.9 KiB
Plaintext
.page { min-height: 100vh; background: var(--bg-grad); padding-bottom: 180rpx; }
|
|
.hero { width: 100%; height: 520rpx; background: var(--surface-2); position: relative; }
|
|
.hero__img { width: 100%; height: 100%; display: block; }
|
|
.hero__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 120rpx; }
|
|
.hero__gif { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
|
|
|
|
.name { font-size: 48rpx; font-weight: 700; color: var(--text); letter-spacing: 1rpx; }
|
|
|
|
.metas { display: flex; flex-wrap: wrap; gap: 14rpx; margin-top: 24rpx; }
|
|
.meta {
|
|
background: var(--surface); border: 1rpx solid var(--line);
|
|
border-radius: var(--radius-sm); padding: 16rpx 22rpx;
|
|
min-width: calc((100% - 42rpx) / 4);
|
|
}
|
|
.meta__k { font-size: 20rpx; color: var(--text-3); }
|
|
.meta__v { font-size: 26rpx; color: var(--text); margin-top: 6rpx; font-weight: 600; }
|
|
|
|
.block { margin-top: 36rpx; }
|
|
.block__h { margin-bottom: 16rpx; }
|
|
.chips { display: flex; flex-wrap: wrap; gap: 12rpx; }
|
|
|
|
.steps { display: flex; flex-direction: column; gap: 18rpx; }
|
|
.step { display: flex; gap: 20rpx; align-items: flex-start; }
|
|
.step__n {
|
|
flex: 0 0 auto; width: 48rpx; height: 48rpx; border-radius: 999rpx;
|
|
background: var(--gold-soft); color: var(--gold); border: 1rpx solid var(--gold-line);
|
|
display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 26rpx;
|
|
}
|
|
.step__t { flex: 1; font-size: 28rpx; color: var(--text); line-height: 1.5; padding-top: 6rpx; }
|
|
|
|
.tips {
|
|
font-size: 28rpx; color: var(--text-2); line-height: 1.6;
|
|
background: var(--surface); border: 1rpx solid var(--line);
|
|
border-radius: var(--radius-sm); padding: 24rpx;
|
|
}
|
|
|
|
.hscroll { white-space: nowrap; margin-top: 12rpx; }
|
|
.hscroll__item { display: inline-block; width: 300rpx; margin-right: 20rpx; vertical-align: top; }
|
|
|
|
.addbar {
|
|
position: fixed; left: 0; right: 0; bottom: 0;
|
|
padding: 20rpx 32rpx;
|
|
background: rgba(14,17,16,0.92);
|
|
backdrop-filter: blur(12px);
|
|
border-top: 1rpx solid var(--line);
|
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
}
|
|
.cta {
|
|
display: flex; align-items: center; justify-content: center;
|
|
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
|
|
color: #0E1110; font-weight: 700; font-size: 32rpx;
|
|
border-radius: 999rpx; padding: 26rpx;
|
|
}
|
|
|
|
.empty-page { min-height: 100vh; background: var(--bg-grad); }
|
|
.topbar { height: 88rpx; display: flex; align-items: center; padding: 0 24rpx; }
|
|
.topbar__back { font-size: 56rpx; color: var(--gold); width: 60rpx; line-height: 1; }
|
|
.empty { color: var(--text-3); font-size: 28rpx; text-align: center; padding: 120rpx 0; }
|
|
|
|
.favbtn {
|
|
position: fixed; right: 28rpx; z-index: 60;
|
|
width: 72rpx; height: 72rpx; border-radius: 999rpx;
|
|
background: rgba(14,17,16,0.55);
|
|
backdrop-filter: blur(8px);
|
|
border: 1rpx solid var(--gold-line);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 44rpx; color: var(--gold-2); line-height: 1;
|
|
}
|