党建主题适配

components/layout/AiDvPanel/AiDvPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="AiDvPanel">
-    <component :is="border" :title="title" v-if="border">
+    <component :is="border" :title="title" v-if="border" :theme="theme">
       <template v-if="$slots.title" #title>
         <slot name="title"/>
       </template>
@@ -24,7 +24,11 @@ export default {
   components: { Border0, Border1, Border2, Border3, Border4, Border5, border6 },
   props: {
     title: {default: "请传入标题"},
-    border: {default: "border0"}
+    border: {default: "border0"},
+    theme: {
+      type: String,
+      default: '0'
+    }
   },
   mounted() {
   },

components/layout/AiDvPanel/borders/border6.vue

@@ -1,6 +1,9 @@
 <template>
-  <section class="border6">
-    <h2>{{ title }}</h2>
+  <section class="border6" :class="'border6-' + theme">
+    <div class="border6-title">
+      <img src="../asset/ic-badge.png" v-if="theme === '1'" />
+      <h2>{{ title }}</h2>
+    </div>
     <div class="slot">
       <slot/>
     </div>
@@ -10,9 +13,8 @@
 <script>
 export default {
   name: 'border6',
-  props: {
-    title: String
-  }
+
+  props: ['title', 'theme']
 }
 </script>
 
@@ -20,20 +22,33 @@ export default {
 .border6 {
   height: 100%;
 
-  h2 {
+  .border6-title {
+    display: flex;
     position: relative;
     height: 40px;
-    line-height: 26px;
+    // line-height: 26px;
     padding: 4px 0 0 22px;
-    color: #fff;
-    font-size: 22px;
-    font-weight: normal;
+    box-sizing: border-box;
     font-family: PingFangSC-Medium, PingFang SC;
     background-image: url(../asset/title6.png);
     background-position: bottom;
     background-size: 100% 7px;
     background-repeat: no-repeat;
 
+    h2 {
+      line-height: 1;
+      color: #fff;
+      font-size: 20px;
+      font-weight: normal;
+      letter-spacing: 1px;
+    }
+
+    img {
+      width: 28px;
+      height: 28px;
+      margin-right: 8px;
+    }
+
     &:after {
       position: absolute;
       top: 16px;
@@ -47,6 +62,15 @@ export default {
     }
   }
 
+  &.border6-1 .border6-title {
+    background-image: url(../asset/title-6-dj.png);
+    background-position: bottom;
+
+    &:after {
+      background: #FFA086;
+    }
+  }
+
   .slot {
     height: calc(100% - 40px);
     padding-top: 19px;

components/layout/AiDvSummary/AiDvSummary.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="AiSummary">
-    <component :is="type" :data="data" :keys="keys" :value="value" :summaryTitle="summaryTitle"></component>
+    <component :is="type" :theme="theme" :data="data" :keys="keys" :value="value" :summaryTitle="summaryTitle"></component>
   </div>
 </template>
 
@@ -65,6 +65,11 @@
       value: {
         type: String,
         default: 'value'
+      },
+
+      theme: {
+        type: String,
+        default: '0'
       }
     }
   }

components/layout/AiDvSummary/components/Summary12.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="summary12">
+  <div class="summary12" :class="'summary12-' + theme">
     <div class="summary12-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
       <h2>{{ item[keys] }}</h2>
       <p>{{ item[value] }}</p>
@@ -25,6 +25,11 @@
       value: {
         type: String,
         default: 'value'
+      },
+
+      theme: {
+        type: String,
+        default: '0'
       }
     },
 
@@ -72,5 +77,11 @@
         text-align: left;
       }
     }
+
+    &.summary12-1 .summary12-item {
+      p {
+        color: #FAD88E;
+      }
+    }
   }
 </style>

components/layout/AiDvSummary/components/Summary13.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="summary13">
+  <div class="summary13" :class="'summary13-' + theme">
     <div class="summary13-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
       <h2>{{ item[keys] }}：</h2>
       <p>{{ item[value] }}</p>
@@ -25,6 +25,11 @@
       value: {
         type: String,
         default: 'value'
+      },
+
+      theme: {
+        type: String,
+        default: '0'
       }
     },
 
@@ -98,5 +103,9 @@
         content: ' ';
       }
     }
+
+    &.summary13-1 {
+
+    }
   }
 </style>

components/layout/AiDvTable/AiDvTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="aiDvTable">
+  <div class="aiDvTable" :class="'aiDvTable-' + theme">
     <div class="header">
       <span
         v-for="(item, index) in header"
@@ -49,6 +49,11 @@
       stripe: {
         type: String,
         default: '1'
+      },
+
+      theme: {
+        type: String,
+        default: '0'
       }
     },
 
@@ -114,6 +119,26 @@
   .aiDvTable {
     height: 100%;
     overflow: hidden;
+
+    ::-webkit-scrollbar {
+      width: 5px;
+      height: 14px;
+    }
+
+    ::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      min-height: 20px;
+      background-clip: content-box;
+      box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
+    }
+
+    ::-webkit-scrollbar-track {
+      box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
+    }
+
     .header {
       display: flex;
       align-items: center;
@@ -196,5 +221,39 @@
         }
       }
     }
+
+    &.aiDvTable-1 {
+      ::-webkit-scrollbar {
+        width: 5px;
+        height: 14px;
+      }
+
+      ::-webkit-scrollbar-corner {
+        background: transparent;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        min-height: 20px;
+        background-clip: content-box;
+        box-shadow: 0 0 0 5px rgba(250, 181, 108, 0.5) inset;
+      }
+
+      ::-webkit-scrollbar-track {
+        box-shadow: 1px 1px 5px rgba(50, 181, 108, 0.5) inset;
+      }
+      .header {
+        background: #6e2d2a;
+      }
+
+      .body {
+        div {
+          i {
+            color: #FFA086;
+            background: url(./asset/rankbg-dj.png) no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+      }
+    }
   }
 </style>

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>