card组件优化，并添加插槽

src/components/layout/MenuCard.vue

@@ -12,7 +12,7 @@
     <!-- 头部 -->
     <div class="menuMainBox_top" v-if="type !== 'chart'">
       <!-- 头部左侧 -->
-      <div class="menuMainBox_top_left">
+      <div class="menuMainBox_top_left" :style="{ width: titleWidth ? titleWidth + '%' : '50%' }">
         <!-- 左侧箭头图标 -->
         <div class="menuMainBox_top_left_iconS"></div>
         <!-- 标题 -->
@@ -23,7 +23,7 @@
         <div class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE2"></div>
       </div>
       <!-- 头部右侧 -->
-      <div class="menuMainBox_top_right">
+      <div class="menuMainBox_top_right" :style="{ width: titleWidth ? 110 - titleWidth + '%' : '60%' }">
         <!-- 方块1 -->
         <div class="menuMainBox_top_right_d1"></div>
         <!-- 方块2 -->
@@ -37,7 +37,7 @@
       </div>
     </div>
     <!-- 折线 -->
-    <div class="menuMainBox_topBottom" v-if="type !== 'chart'">
+    <div class="menuMainBox_topBottom" v-if="type !== 'chart'" :style="{ left: titleWidth ? titleWidth - 40 + '%' : '10%' }">
       <!-- 圆球 -->
       <div></div>
     </div>
@@ -47,11 +47,15 @@
       </div>
     </div>
     <!-- 主题 -->
-    <div>
+    <div class="menuMainBox_main">
       <!-- 上部 -->
-      <div></div>
+      <div class="menuMainBox_main_top">
+        <slot name="top"></slot>
+      </div>
       <!-- 下部 -->
-      <div></div>
+      <div class="menuMainBox_main_bottom">
+        <slot name="bottom"></slot>
+      </div>
     </div>
   </div>
 </template>
@@ -70,24 +74,33 @@ export default {
    * boxWidth: 宽，默认为410px（非必填）
    * boxHeight: 高，默认为auto（非必填）
    * boxBackground: 背景色，默认为渐变蓝色（非必填）
+   * titleWidth: 标题宽度，默认为50（非必填）
    */
-  props: ["type", "title", "boxWidth", "boxHeight", "boxBackground"],
+  props: ["type", "title", "boxWidth", "boxHeight", "boxBackground", "titleWidth"],
   methods: {},
   watch: {}
 };
 </script>
 
 <style lang="less" scoped>
+@borderColor: #00aaff;
+@borderColor32: #00aaff32;
+@borderColor64: #00aaff64;
+@topTitleBgLeft: #00244d;
+@topTitleMinLeft: #002f56;
+@lightColor: #74ffff;
 .menuMainBox {
   position: relative;
   margin: 5px 0;
+  min-height: 60px;
   border: 2px solid transparent;
-  border-image: --webkit-linear-gradient(to top, #00aaff, transparent) 1;
-  border-image: --moz-linear-gradient(to top, #00aaff, transparent) 1;
-  border-image: linear-gradient(to top, #00aaff, transparent) 1;
-  background-image: --webkit-linear-gradient(to top, #002f56, #0a1026);
-  background-image: --moz-linear-gradient(to top, #002f56, #0a1026);
-  background-image: linear-gradient(to top, #002f56, #0a1026);
+  border-image: --webkit-linear-gradient(to top, @borderColor, transparent) 1;
+  border-image: --moz-linear-gradient(to top, @borderColor, transparent) 1;
+  border-image: linear-gradient(to top, @borderColor, transparent) 1;
+  background-image: --webkit-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
+  background-image: --moz-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
+  background-image: linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
+  opacity: 0.85;
   //   type !== chart
   &_top {
     position: relative;
@@ -98,24 +111,23 @@ export default {
     flex-wrap: nowrap;
     align-content: center;
     overflow: hidden;
-    background-color: #002f56;
+    background-color: @topTitleMinLeft;
     &_left {
       position: relative;
       display: flex;
       align-items: center;
       flex-wrap: nowrap;
       align-content: center;
-      width: 50%;
       height: 100%;
-      background-image: --webkit-linear-gradient(to left, #002f56, #00aaff, #002f56);
-      background-image: --moz-linear-gradient(to left, #002f56, #00aaff, #002f56);
-      background-image: linear-gradient(to left, #002f56, #00aaff, #002f56);
-      border-bottom: 2px solid #00aaff;
+      background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+      background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+      background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+      border-bottom: 2px solid @borderColor;
       &_iconS {
         margin: 10px;
         width: 20px;
         height: 20px;
-        background-image: linear-gradient(to top, #00447c, #17c6d7);
+        background-image: linear-gradient(to top, #0071b2, #1deef5);
         clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%, 0 0);
       }
       &_title {
@@ -129,7 +141,7 @@ export default {
         margin-left: 10px;
         width: 15px;
         height: 30px;
-        background-image: linear-gradient(to bottom, transparent, transparent, #17c6d7);
+        background-image: linear-gradient(to bottom, transparent, transparent, #00a6c0);
         transform: skew(-45deg);
       }
       &_iconE1 {
@@ -142,28 +154,27 @@ export default {
     &_right {
       position: absolute;
       right: -10%;
-      width: 60%;
       height: 100%;
-      border-top: 2px solid #00aaff;
-      border-left: 2px solid #00aaff;
+      border-top: 2px solid @borderColor;
+      border-left: 2px solid @borderColor;
       transform: skew(-45deg);
-      background-color: #0a1026;
-      border-image: --webkit-linear-gradient(to right, #00aaff, transparent) 1;
-      border-image: --moz-linear-gradient(to right, #00aaff, transparent) 1;
-      border-image: linear-gradient(to right, #00aaff, transparent) 1;
+      background-color: @topTitleBgLeft;
+      border-image: --webkit-linear-gradient(to right, @borderColor, transparent) 1;
+      border-image: --moz-linear-gradient(to right, @borderColor, transparent) 1;
+      border-image: linear-gradient(to right, @borderColor, transparent) 1;
       &_d1 {
         position: absolute;
         left: 10px;
         width: 50px;
         height: 20px;
-        background-color: #00aaff64;
+        background-color: @borderColor64;
       }
       &_d2 {
         position: absolute;
         left: 70px;
         width: 80px;
         height: 10px;
-        background-color: #00aaff32;
+        background-color: @borderColor32;
       }
     }
     &_topRight {
@@ -174,7 +185,7 @@ export default {
       div:nth-child(1) {
         width: 5px;
         height: 2px;
-        background-color: #00aaff;
+        background-color: @borderColor;
       }
       div:nth-child(2) {
         margin: 0 1px;
@@ -185,22 +196,21 @@ export default {
       div:nth-child(3) {
         width: 5px;
         height: 2px;
-        background-color: #00aaff;
+        background-color: @borderColor;
       }
     }
   }
   &_topBottom {
     position: absolute;
     top: 20px;
-    left: 10%;
     width: 38%;
     height: 20px;
-    border-bottom: 2px solid #00aaff;
-    border-right: 2px solid #00aaff;
+    border-bottom: 2px solid @borderColor;
+    border-right: 2px solid @borderColor;
     transform: skew(-45deg);
-    border-image: --webkit-linear-gradient(to left, #00aaff, transparent) 1;
-    border-image: --moz-linear-gradient(to left, #00aaff, transparent) 1;
-    border-image: linear-gradient(to left, #00aaff, transparent) 1;
+    border-image: --webkit-linear-gradient(to left, @borderColor, transparent) 1;
+    border-image: --moz-linear-gradient(to left, @borderColor, transparent) 1;
+    border-image: linear-gradient(to left, @borderColor, transparent) 1;
     div {
       position: absolute;
       top: -2px;
@@ -208,7 +218,7 @@ export default {
       width: 4px;
       height: 4px;
       border-radius: 4px;
-      background-color: #00aaff;
+      background-color: @borderColor;
       transform: skew(45deg);
     }
   }
@@ -222,9 +232,9 @@ export default {
     flex-wrap: nowrap;
     justify-content: center;
     align-content: center;
-    background-image: --webkit-linear-gradient(to left, #002f56, #00aaff, #002f56);
-    background-image: --moz-linear-gradient(to left, #002f56, #00aaff, #002f56);
-    background-image: linear-gradient(to left, #002f56, #00aaff, #002f56);
+    background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+    background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+    background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
     &_title {
       font-size: 18px;
       font-family: PingFang SC;
@@ -233,5 +243,13 @@ export default {
       line-height: 60px;
     }
   }
+// 卡片主题
+  &_main{
+    margin: 10px;
+    &_top{
+    }
+    &_bottom{
+    }
+  }
 }
 </style>

src/views/HomeView.vue

@@ -4,7 +4,10 @@
     <Header @navSelect="navSelect"></Header>
     <!-- 左侧菜单列 -->
     <div id="leftMenus">
-      <MenuCard :type="menus.left[0].type" :title="menus.left[0].title" :boxHeight="menus.left[0].height"></MenuCard>
+      <MenuCard :type="menus.left[0].type" :title="menus.left[0].title" :boxHeight="menus.left[0].height">
+        <template slot="top">主题上部插槽</template>
+        <template slot="bottom">主题下部插槽</template>
+      </MenuCard>
       <MenuCard :type="menus.left[1].type" :title="menus.left[1].title" :boxHeight="menus.left[1].height"></MenuCard>
       <MenuCard :type="menus.left[2].type" :title="menus.left[2].title" :boxHeight="menus.left[2].height"></MenuCard>
     </div>
@@ -22,9 +25,9 @@
     </div>
     <!-- 右侧菜单列 -->
     <div id="rightMenus">
-      <MenuCard :type="menus.right[0].type" :title="menus.right[0].title" :boxHeight="menus.right[0].height"></MenuCard>
-      <MenuCard :type="menus.right[1].type" :title="menus.right[1].title" :boxHeight="menus.right[1].height"></MenuCard>
-      <MenuCard :type="menus.right[2].type" :title="menus.right[2].title" :boxHeight="menus.right[2].height"></MenuCard>
+      <MenuCard :type="menus.right[0].type" :titleWidth="menus.right[0].titleWidth" :title="menus.right[0].title" :boxHeight="menus.right[0].height"></MenuCard>
+      <MenuCard :type="menus.right[1].type" :titleWidth="menus.right[1].titleWidth" :title="menus.right[1].title" :boxHeight="menus.right[1].height"></MenuCard>
+      <MenuCard :type="menus.right[2].type" :titleWidth="menus.right[2].titleWidth" :title="menus.right[2].title" :boxHeight="menus.right[2].height"></MenuCard>
     </div>
   </div>
 </template>
@@ -45,15 +48,15 @@ export default {
       activeIndex: 1,
       menus: {
         left: [
-          { type: "menu", title: "土地资源", height: "380" },
-          { type: "menu", title: "水资源", height: "300" },
-          { type: "menu", title: "林地资源", height: "280" }
+          { type: "menu", title: "土地资源" },
+          { type: "menu", title: "水资源" },
+          { type: "menu", title: "林地资源" }
         ],
         main: [{ type: "chart", title: "浦东新区自然资源分布TOP10", width: "360", height: "370" ,background : "rgba(0,39,77,0.6)"}],
         right: [
-          { type: "menu", title: "资金投入情况", height: "380" },
-          { type: "menu", title: "资源环境项目", height: "300" },
-          { type: "menu", title: "历年频发问题TOP5", height: "280" }
+          { type: "menu", title: "资金投入情况",titleWidth:62 },
+          { type: "menu", title: "资源环境项目",titleWidth:62 },
+          { type: "menu", title: "历年频发问题TOP5",titleWidth:82 }
         ]
       }
     };