大屏组件

components/layout/AiDvSummary/components/Summary16.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="Summary16">
-    <div class="Summary16-item" v-for="(item, index) in data" :class="'Summary16-item' + (index + 1)" :key="index" v-if="index < 4">
+    <div class="Summary16-item" v-for="(item, index) in data" :class="'Summary16-item__' + theme" :key="index" v-if="index < 4">
       <h2>{{ item[keys] }}</h2>
       <p>{{ item[value] }}</p>
     </div>
@@ -25,6 +25,11 @@
       value: {
         type: String,
         default: 'value'
+      },
+
+      theme: {
+        type: String,
+        default: '0'
       }
     },
 
@@ -68,13 +73,33 @@
       background-size: 122px 80px;
       background-position: bottom;
 
+      &.Summary16-item__1 {
+        background: url(../asset/Summary16-dj.png) no-repeat;
+        background-position: center 14px;
+        background-size: 122px 80px;
+        background-position: bottom;
+
+        h2 {
+          color: #ffffff;
+          background: none;
+        }
+
+        p {
+          color: #ffffff;
+          font-weight: 700;
+          font-size: 44px;
+          background: linear-gradient(to bottom, #FFF3D5, #ED9B08);
+          -webkit-background-clip: text;
+          color: transparent;
+        }
+      }
+
       h2 {
         color: #ffffff;
         font-size: 18px;
         background: linear-gradient(to bottom, #ffff, #EBF9FF, #35BEFF);
         -webkit-background-clip: text;
         color: transparent;
-
       }
 
       p {