微信小程序页面迁移校验之前 P5任务处理之前

apps/miniprogram - 副本/miniprogram/components/banner/banner.wxss

@@ -0,0 +1,66 @@
+.banner {
+  position: relative;
+  width: 100%;
+  height: 280rpx;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.banner-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* 主题渐变降级（背景图加载失败时） */
+.banner--blue { background: linear-gradient(135deg, #0052d9, #0080ff); }
+.banner--red { background: linear-gradient(135deg, #e34d59, #ff6b6b); }
+.banner--orange { background: linear-gradient(135deg, #ed7b2f, #ffaa44); }
+.banner--pink { background: linear-gradient(135deg, #d94da0, #ff6bcc); }
+.banner--teal { background: linear-gradient(135deg, #00a870, #00d68f); }
+.banner--coral { background: linear-gradient(135deg, #e06c5a, #ff8a7a); }
+.banner--dark-gold { background: linear-gradient(135deg, #8b6914, #c9a227); }
+
+.banner-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+}
+
+.banner-title {
+  font-size: var(--font-lg);
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 16rpx;
+}
+
+.banner-metrics {
+  display: flex;
+  gap: 40rpx;
+}
+
+.metric-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.metric-value {
+  font-size: var(--font-2xl);
+  font-weight: 700;
+  color: #ffffff;
+}
+
+.metric-label {
+  font-size: var(--font-xs);
+  color: rgba(255, 255, 255, 0.8);
+  margin-top: 4rpx;
+}