党建主题适配

components/layout/AiRanking/AiRanking.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="AiRanking">
+  <div class="AiRanking" :class="'AiRanking-' + theme">
     <div class="AiRanking-item" v-for="(item, index) in list" :key="index" :class="'AiRanking-item' + (index + 1)">
       <i>{{ index + 1 }}</i>
       <h2>{{ item.name }}</h2>
@@ -24,6 +24,11 @@
       data: {
         type: Array,
         default: () => []
+      },
+
+      theme: {
+        type: String,
+        default: '0'
       }
     },
 
@@ -162,5 +167,46 @@
         color: #fff;
       }
     }
+
+    &.AiRanking-1 {
+      .AiRanking-item {
+        background: url(./asset/ranking4-dj.png) no-repeat;
+        background-size: 100% 100%;
+
+        &.AiRanking-item1 {
+          background: url(./asset/ranking1-dj.png) no-repeat;
+          background-size: 100% 100%;
+        }
+
+        &.AiRanking-item2 {
+          background: url(./asset/ranking2-dj.png) no-repeat;
+          background-size: 100% 100%;
+        }
+
+        &.AiRanking-item3 {
+          background: url(./asset/ranking3-dj.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .AiRanking-item__rate {
+          position: relative;
+
+          .bar {
+            position: relative;
+            width: calc(100% - 6px);
+            height: 6px;
+            background: linear-gradient(90deg, #ffbb45ff 0%, #ff3e18ff 98%);
+
+            i {
+              border: 1px solid #AA9E93;
+            }
+
+            span {
+              background: #FAB56C;
+              box-shadow: 0 0 10px 0 #fab56c;
+            }
+          }
+        }
+      }
+    }
   }
 </style>