feat: login rest

2026-02-12 09:26:39 +08:00
parent e97fd30fa3
commit 5553e2711a
115 changed files with 4090 additions and 3499 deletions
@@ -0,0 +1,179 @@
+page {
+    background: #F4F6F0;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.level-detail-page {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.header-card {
+    background: linear-gradient(135deg, #2c3e50, #4ca1af);
+    padding: 60rpx 40rpx;
+    color: white;
+    text-align: center;
+    border-radius: 0 0 40rpx 40rpx;
+    box-shadow: 0 10rpx 30rpx rgba(44, 62, 80, 0.2);
+    margin-bottom: 40rpx;
+    flex-shrink: 0;
+}
+
+.header-title {
+    font-size: 28rpx;
+    opacity: 0.8;
+    margin-bottom: 12rpx;
+}
+
+.header-value {
+    font-size: 64rpx;
+    font-weight: 800;
+}
+
+.timeline-scroll {
+    flex: 1;
+    overflow-y: auto;
+}
+
+.timeline {
+    padding: 0 40rpx;
+}
+
+.timeline-item {
+    display: flex;
+    position: relative;
+    min-height: 140rpx;
+}
+
+.timeline-left {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 60rpx;
+    margin-right: 20rpx;
+}
+
+.dot-line-top, .dot-line-bottom {
+    width: 4rpx;
+    background: #E0E0E0;
+    flex: 1;
+}
+
+.timeline-item:first-child .dot-line-top {
+    visibility: hidden;
+}
+
+.timeline-item:last-child .dot-line-bottom {
+    visibility: hidden;
+}
+
+.status-dot {
+    width: 40rpx;
+    height: 40rpx;
+    border-radius: 50%;
+    background: #E0E0E0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 8rpx 0;
+    z-index: 1;
+    flex-shrink: 0;
+}
+
+.timeline-item.active .status-dot {
+    background: #4CAF50;
+    box-shadow: 0 0 0 6rpx rgba(76, 175, 80, 0.2);
+}
+
+/* Logic for lines:
+   The top line of THIS item should be green if THIS item is active.
+   Wait, if item 2 is active, item 1 is also active.
+   Line connecting 1 and 2 is bottom of 1 and top of 2.
+   If 2 is active, top of 2 is green.
+   If 1 is active, bottom of 1 is green?
+   Easier: make lines background #E0E0E0.
+   Use a pseudo element or simply rely on active class.
+*/
+
+.timeline-item.active .dot-line-top {
+    background: #4CAF50;
+}
+
+/* If next item is active, make this item's bottom line green */
+/* CSS cannot select based on next sibling easily without :has */
+/* So just color top line of active item green. Bottom line stays gray? No. */
+/* Just color all lines of active items green, EXCEPT the line connecting active to inactive. */
+/* For simplicity, let's keep lines gray or improve logic. */
+/* If I color .timeline-item.active .dot-line-bottom green, then if next is NOT active, it looks weird. */
+/* Correct way: .timeline-item.active .dot-line-top is Green. */
+
+.timeline-content {
+    flex: 1;
+    padding-bottom: 40rpx;
+}
+
+.level-card {
+    background: white;
+    border-radius: 20rpx;
+    padding: 24rpx;
+    border: 2rpx solid transparent;
+    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.02);
+}
+
+.level-card.current {
+    border-color: #4CAF50;
+    background: #F1F8E9;
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16rpx;
+}
+
+.card-lv {
+    background: #eceff1;
+    color: #546e7a;
+    font-size: 20rpx;
+    padding: 4rpx 12rpx;
+    border-radius: 8rpx;
+    font-weight: 700;
+    margin-right: 16rpx;
+}
+
+.timeline-item.active .card-lv {
+    background: #4CAF50;
+    color: white;
+}
+
+.card-title {
+    font-size: 30rpx;
+    font-weight: 700;
+    color: #333;
+}
+
+.flex-spacer {
+    flex: 1;
+}
+
+.card-sun {
+    font-size: 24rpx;
+    color: #999;
+    font-weight: 600;
+}
+
+.card-perks {
+    font-size: 26rpx;
+    color: #666;
+    line-height: 1.4;
+    padding-top: 16rpx;
+    border-top: 2rpx dashed #eee;
+}
+
+.level-card.current .card-perks {
+    border-top-color: rgba(76, 175, 80, 0.2);
+    color: #388E3C;
+}