66 lines
5.7 KiB
Plaintext
66 lines
5.7 KiB
Plaintext
.page { min-height: 100vh; background: #000; padding-bottom: 200rpx; }
|
|
.nav-placeholder { width: 100%; }
|
|
.header { padding: 0 32rpx 32rpx; }
|
|
.header-content { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32rpx; padding-top: 24rpx; }
|
|
.logo-section { display: flex; align-items: center; gap: 16rpx; }
|
|
.logo-icon { width: 80rpx; height: 80rpx; border-radius: 20rpx; background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 8rpx 24rpx rgba(0,206,209,0.3); }
|
|
.logo-text { color: #fff; font-size: 36rpx; font-weight: 700; }
|
|
.logo-info { display: flex; flex-direction: column; }
|
|
.logo-title { font-size: 36rpx; font-weight: 700; }
|
|
.text-white { color: #fff; }
|
|
.brand-color { color: #00CED1; }
|
|
.logo-subtitle { font-size: 22rpx; color: rgba(255,255,255,0.4); margin-top: 4rpx; }
|
|
.chapter-badge { font-size: 22rpx; color: #00CED1; background: rgba(0,206,209,0.1); padding: 8rpx 16rpx; border-radius: 32rpx; }
|
|
.search-bar { display: flex; align-items: center; gap: 24rpx; padding: 24rpx 32rpx; background: #1c1c1e; border-radius: 24rpx; border: 2rpx solid rgba(255,255,255,0.05); }
|
|
.search-icon { font-size: 32rpx; opacity: 0.6; }
|
|
.search-placeholder { font-size: 28rpx; color: rgba(255,255,255,0.4); }
|
|
.main-content { padding: 0 32rpx; box-sizing: border-box; }
|
|
.banner-card { position: relative; padding: 40rpx; border-radius: 32rpx; overflow: hidden; background: linear-gradient(135deg, #0d3331 0%, #1a1a2e 50%, #16213e 100%); margin-bottom: 24rpx; }
|
|
.banner-glow { position: absolute; top: 0; right: 0; width: 256rpx; height: 256rpx; background: #00CED1; border-radius: 50%; filter: blur(120rpx); opacity: 0.2; }
|
|
.banner-tag { display: inline-block; padding: 8rpx 16rpx; background: #00CED1; color: #000; font-size: 22rpx; font-weight: 500; border-radius: 8rpx; margin-bottom: 24rpx; }
|
|
.banner-title { font-size: 36rpx; font-weight: 700; color: #fff; margin-bottom: 16rpx; padding-right: 64rpx; }
|
|
.banner-part { font-size: 28rpx; color: rgba(255,255,255,0.6); margin-bottom: 24rpx; }
|
|
.banner-action { display: flex; align-items: center; gap: 8rpx; }
|
|
.banner-action-text { font-size: 28rpx; color: #00CED1; font-weight: 500; }
|
|
.card { background: #1c1c1e; border-radius: 32rpx; padding: 32rpx; border: 2rpx solid rgba(255,255,255,0.05); margin-bottom: 24rpx; }
|
|
.progress-card { margin-bottom: 24rpx; }
|
|
.progress-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24rpx; }
|
|
.progress-title { font-size: 28rpx; color: #fff; font-weight: 500; }
|
|
.progress-count { font-size: 22rpx; color: rgba(255,255,255,0.4); }
|
|
.progress-bar-bg { width: 100%; height: 16rpx; background: #2c2c2e; border-radius: 8rpx; overflow: hidden; margin-bottom: 24rpx; }
|
|
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, #00CED1 0%, #20B2AA 100%); border-radius: 8rpx; }
|
|
.progress-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24rpx; }
|
|
.stat-item { text-align: center; }
|
|
.stat-value { font-size: 36rpx; font-weight: 700; color: #fff; display: block; }
|
|
.stat-label { font-size: 22rpx; color: rgba(255,255,255,0.4); }
|
|
.section { margin-bottom: 24rpx; }
|
|
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24rpx; }
|
|
.section-title { font-size: 32rpx; font-weight: 600; color: #fff; }
|
|
.section-more { display: flex; align-items: center; gap: 8rpx; }
|
|
.more-text { font-size: 24rpx; color: #00CED1; }
|
|
.featured-list { display: flex; flex-direction: column; gap: 24rpx; }
|
|
.featured-item { display: flex; align-items: flex-start; justify-content: space-between; padding: 32rpx; background: #1c1c1e; border-radius: 24rpx; border: 2rpx solid rgba(255,255,255,0.05); }
|
|
.featured-content { flex: 1; }
|
|
.featured-meta { display: flex; align-items: center; gap: 16rpx; margin-bottom: 16rpx; }
|
|
.featured-id { font-size: 24rpx; font-weight: 500; }
|
|
.tag { font-size: 22rpx; padding: 6rpx 16rpx; border-radius: 8rpx; }
|
|
.tag-free { background: rgba(0,206,209,0.1); color: #00CED1; }
|
|
.tag-pink { background: rgba(233,30,99,0.1); color: #E91E63; }
|
|
.tag-purple { background: rgba(123,97,255,0.1); color: #7B61FF; }
|
|
.featured-title { font-size: 28rpx; color: #fff; font-weight: 500; display: block; margin-bottom: 8rpx; }
|
|
.featured-part { font-size: 22rpx; color: rgba(255,255,255,0.4); }
|
|
.featured-arrow { font-size: 32rpx; color: rgba(255,255,255,0.3); }
|
|
.parts-list { display: flex; flex-direction: column; gap: 24rpx; }
|
|
.part-item { display: flex; align-items: center; gap: 24rpx; padding: 32rpx; background: #1c1c1e; border-radius: 24rpx; border: 2rpx solid rgba(255,255,255,0.05); }
|
|
.part-icon { width: 80rpx; height: 80rpx; border-radius: 16rpx; background: linear-gradient(135deg, rgba(0,206,209,0.2) 0%, rgba(32,178,170,0.1) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
.part-number { font-size: 28rpx; font-weight: 700; color: #00CED1; }
|
|
.part-info { flex: 1; min-width: 0; }
|
|
.part-title { font-size: 28rpx; color: #fff; font-weight: 500; display: block; margin-bottom: 4rpx; }
|
|
.part-subtitle { font-size: 22rpx; color: rgba(255,255,255,0.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.part-arrow { font-size: 32rpx; color: rgba(255,255,255,0.3); }
|
|
.preface-card { display: flex; align-items: center; justify-content: space-between; padding: 32rpx; border-radius: 24rpx; background: linear-gradient(90deg, rgba(0,206,209,0.1) 0%, transparent 100%); border: 2rpx solid rgba(0,206,209,0.2); margin-bottom: 24rpx; }
|
|
.preface-content { flex: 1; }
|
|
.preface-title { font-size: 28rpx; color: #fff; font-weight: 500; display: block; margin-bottom: 8rpx; }
|
|
.preface-desc { font-size: 24rpx; color: rgba(255,255,255,0.6); }
|
|
.bottom-space { height: 40rpx; }
|