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

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

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

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

@@ -0,0 +1,26 @@
+Component({
+  properties: {
+    /** Banner 主题色 */
+    theme: {
+      type: String,
+      value: 'blue',
+    },
+    /** Banner 标题 */
+    title: {
+      type: String,
+      value: '',
+    },
+    /** 指标列表 [{label, value}] */
+    metrics: {
+      type: Array,
+      value: [],
+    },
+  },
+
+  methods: {
+    /** 背景图加载失败时降级为纯渐变色（CSS 已处理） */
+    onBgError() {
+      // 背景图加载失败，CSS 渐变色自动降级，无需额外处理
+    },
+  },
+})

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

@@ -0,0 +1,12 @@
+<view class="banner banner--{{theme}}">
+  <view class="banner-bg"></view>
+  <view class="banner-overlay">
+    <text class="banner-title">{{title}}</text>
+    <view class="banner-metrics">
+      <view class="metric-item" wx:for="{{metrics}}" wx:key="label">
+        <text class="metric-value">{{item.value}}</text>
+        <text class="metric-label">{{item.label}}</text>
+      </view>
+    </view>
+  </view>
+</view>

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;
+}