feat: 整体页面优化，删除无用svg

2026-02-14 08:32:47 +08:00
parent daea00ca60
commit cbbe82ef63
59 changed files with 1265 additions and 342 deletions
@@ -864,3 +864,142 @@
  0% { transform: translateY(20rpx); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
 }
+
+/* Reward Modals - Enhanced */
+.reward-modal {
+    background: #fff;
+    width: 580rpx;
+    border-radius: 40rpx;
+    padding-top: 100rpx; /* Space for floating icon */
+    padding-bottom: 40rpx;
+    box-sizing: border-box;
+    position: relative;
+    overflow: visible; /* Allow floating elements */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 0 24rpx 64rpx rgba(0,0,0,0.2);
+}
+
+/* Background decorator inside modal (top curve) */
+.reward-modal::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 200rpx;
+    background: linear-gradient(180deg, #F5F5F5 0%, #FFFFFF 100%);
+    border-radius: 40rpx 40rpx 0 0;
+    z-index: 0;
+}
+
+/* Floating Icon Wrapper */
+.reward-floating-icon {
+    position: absolute;
+    top: -80rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 180rpx;
+    height: 180rpx;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 16rpx 32rpx rgba(0,0,0,0.15);
+    z-index: 2;
+    background: white; /* Fallback */
+}
+
+.level-icon-bg {
+    background: linear-gradient(135deg, #FFB74D, #EF6C00);
+    border: 8rpx solid #fff;
+}
+
+.badge-icon-bg {
+    background: linear-gradient(135deg, #64B5F6, #1565C0);
+    border: 8rpx solid #fff;
+}
+
+/* Actual Image/Icon */
+.reward-badge-img-large {
+    width: 140rpx;
+    height: 140rpx;
+    filter: drop-shadow(0 4rpx 8rpx rgba(0,0,0,0.2));
+}
+
+/* Content */
+.reward-content {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    padding: 0 48rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 20rpx;
+}
+
+.reward-title {
+    font-size: 44rpx;
+    font-weight: 900;
+    color: #263238;
+    margin-top: 20rpx;
+}
+
+/* Level Styles */
+.reward-level-tag {
+    background: #FFF3E0;
+    color: #EF6C00;
+    padding: 8rpx 24rpx;
+    border-radius: 32rpx;
+    font-size: 28rpx;
+    font-weight: 700;
+    border: 2rpx solid #FFE0B2;
+}
+
+/* Description Box */
+.reward-desc-box {
+    background: #FAFAFA;
+    border: 2rpx solid #F5F5F5;
+    border-radius: 20rpx;
+    padding: 24rpx;
+    width: 100%;
+    color: #546E7A;
+    font-size: 28rpx;
+    line-height: 1.6;
+    text-align: center;
+}
+
+/* Button */
+.reward-btn-container {
+    width: 100%;
+    padding: 0 48rpx;
+    margin-top: 40rpx;
+    position: relative;
+    z-index: 1;
+}
+
+/* Custom Button Style override */
+.reward-btn {
+    border-radius: 48rpx !important;
+    font-weight: 700 !important;
+    font-size: 32rpx !important;
+    height: 96rpx !important;
+    box-shadow: 0 12rpx 24rpx rgba(255, 152, 0, 0.3); /* Default orange shadow */
+}
+
+.btn-level {
+    background: linear-gradient(90deg, #FF9800, #F57C00) !important;
+    color: white !important;
+    box-shadow: 0 12rpx 24rpx rgba(245, 124, 0, 0.4) !important;
+    border: none !important;
+}
+
+.btn-badge {
+    background: linear-gradient(90deg, #42A5F5, #1976D2) !important;
+    color: white !important;
+    box-shadow: 0 12rpx 24rpx rgba(25, 118, 210, 0.4) !important;
+    border: none !important;
+}