修改首页

src/layout/components/AppMain.vue

@@ -24,7 +24,7 @@ export default {
   width: 100%;
   position: relative;
   overflow: hidden;
-  background: #f7f7f7;
+  background: #F2F6FA;
 }
 .fixed-header + .app-main {
   padding-top: 50px;

src/styles/sidebar.scss

@@ -89,6 +89,11 @@
         background-color: $subMenuHover !important;
       }
     }
+
+    & .nest-menu .is-active{
+      background-color: $subMenuActiveBg !important;
+      border-right: 3px solid $subMenuActiveTag;
+    }
   }
 
   .hideSidebar {

src/styles/variables.scss

@@ -7,6 +7,8 @@ $menuBg:#ffffff;
 $menuHover:#DFECFF;
 
 $subMenuBg:#ffffff;
+$subMenuActiveBg:#DFECFF;
+$subMenuActiveTag:#183ECD;
 $subMenuHover:#DFECFF;
 $sideBarWidth: 210px;
 

src/views/dashboard/components/HomeCard.vue

@@ -4,11 +4,18 @@
       <span class="fs22" :style="{ color: `${color}`}">{{ title }}</span>
       <span class="today" :style="{ color: `${color}`,borderColor:`${todayColor}`}">今日</span>
     </div>
-    <div class="nums" :style="{ color: `${color}`}">{{ cardData.nums }}</div>
+    <div class="middle">
+      <img class="middle_icon" :src="`${iconurl}`" />
+      <span class="nums" :style="{ color: `${color}`}">{{ cardData.nums }}</span>
+    </div>
+    
+    <div class="line"></div>
     <div class="footer">
       <div class="item">
-        <div class="precent">
+        <span>
           周环比
+        </span>
+        <div class="precent">
           <span
             class="precent"
             :class="{
@@ -18,8 +25,8 @@
           >
             {{ cardData.precent || 0 }}%
           </span>
-          <span v-if="cardData.precent > 0" class="triangle up"></span>
-          <span v-if="cardData.precent < 0" class="triangle down"></span>
+          <span v-if="cardData.precent > 0" class="arrow triangle up"></span>
+          <span v-if="cardData.precent < 0" class="arrow triangle down"></span>
         </div>
       </div>
       <div class="item">
@@ -61,6 +68,10 @@ export default {
       type: String,
       default: null
     },
+    iconurl: {
+      type: String,
+      default: null
+    },
     backgroundColor: {
       type: String,
       default: null
@@ -78,51 +89,81 @@ export default {
 
 <style lang="scss">
 .homeCardComponent{
-  padding: 15px;
+  padding-top: 30px;
+  padding-bottom: 20px;
   display: inline-flex;
   flex-direction: column;
   min-width: 200px;
   min-height: 200px;
-  border-radius: 16px;
+  border-radius: 10px;
+  background-color: #FFF;
   .top{
-    font-size: 22px;
-    margin: 12px 0 12px 12px;
+    font-size: 16px;
     display: flex;
+    margin-left: 20px;
+    margin-right: 20px;
     justify-content: space-between;
     align-items: center;
+    .fs22{
+      font-size: 16px;
+      color:#475262;
+    }
     .today{
-      font-size: 14px;
-      padding: 8px 16px;
+      padding: 3px 5px;
       border: 1px solid;
       border-radius: 4px;
+      line-height: 15px;
     }
   }
-  .nums{
-    margin: 8px;
-    font-size: 48px;
+  .middle{
+    line-height: 56px;
+    margin-top: 25px;
+    margin-bottom: 25px;
+    margin-left: 20px;
+    margin-right: 20px;
+    height: 56px;
+    
+    .middle_icon{
+      width: 56px;
+      height: 56px;
+    }
+    .nums{
+      margin-left: 8px;
+      margin-right: 8px;
+      margin-top: auto;
+      margin-bottom: auto;
+      position: absolute;
+      font-size: 36px;
+      font-weight:bold;
+    }
+  }
+  .line{
+    height: 1px;
+    background-color: rgba(83, 83, 83, 0.1);
+
   }
   .footer{
-    height: 115px;
-    font-size: 16px;
-    padding: 12px 0;
+    height: 57px;
+    font-size: 14px;
+    margin-left: 20px;
+    margin-right: 20px;
+    color: #828C9A;
     border-radius: 8px;
-    background-color: rgba($color: #FFF, $alpha: .8);
-    box-shadow: 0px 10px 20px 1px rgba(27, 85, 175, 0.05000000074505806);
     display: flex;
-    flex-direction: column;
-    justify-content: space-around;
+    justify-content: space-between;
+    align-items: center;
     .item{
-      margin: 0 12px;
       // line-height: 40px;
       display: flex;
-      justify-content: space-between;
-      align-items: center;
-      color: #333;
+      flex-flow: column;
+      justify-content: center;
+      align-items: flex-start;
       // opacity: .5;
       .precent{
         $red: #D04A41;
         $green: #427A0A;
-        span{
+        margin-top: 3px;
+        .arrow{
           margin-left: 18px;
           // opacity: 1;
         }

src/views/dashboard/index.vue

@@ -7,50 +7,52 @@
         :card-data="item"
         :title="item.title"
         :color="item.color"
+        :iconurl="item.iconurl"
         :background-color="item.background"
         :today-color="item.todayColor"
         class="cardbox"
       />
     </div>
+    <div class="data_count_label">数据统计</div>
     <div class="chartContainer">
-      <h2>当日订单金额</h2>
+      <div>当日订单金额</div>
       <div ref="chartMoney" class="chartMoney"></div>
-      <h2>数据统计</h2>
-      <div class="chartCard">
-        <div class="dailyCard">
-          <div class="cardContainer">
-            <MiniCard
-              :title="'当日订单数'"
-              :precent="'日同比'"
-              :nums="orderData.dayNum"
-              :precent-data="orderData.dayPrecent"
-            />
-            <MiniCard
-              :title="'当月订单数'"
-              :precent="'月同比'"
-              :nums="orderData.mounthNum"
-              :precent-data="orderData.mounthPrecent"
-            />
-          </div>
-          <div ref="orderTotal" class="chart"></div>
+    </div>
+   
+    <div class="chartCard">
+      <div class="dailyCard">
+        <div class="cardContainer">
+          <MiniCard
+            :title="'当日订单数'"
+            :precent="'日同比'"
+            :nums="orderData.dayNum"
+            :precent-data="orderData.dayPrecent"
+          />
+          <MiniCard
+            :title="'当月订单数'"
+            :precent="'月同比'"
+            :nums="orderData.mounthNum"
+            :precent-data="orderData.mounthPrecent"
+          />
         </div>
-        <div class="dailyCard">
-          <div class="cardContainer">
-            <MiniCard
-              :title="'当日支付人数'"
-              :precent="'日同比'"
-              :nums="payData.dayNum"
-              :precent-data="payData.dayPrecent"
-            />
-            <MiniCard
-              :title="'当月支付人数'"
-              :precent="'月同比'"
-              :nums="payData.mounthNum"
-              :precent-data="payData.mounthPrecent"
-            />
-          </div>
-          <div ref="orderPeople" class="chart"></div>
+        <div ref="orderTotal" class="chart"></div>
+      </div>
+      <div class="dailyCard">
+        <div class="cardContainer">
+          <MiniCard
+            :title="'当日支付人数'"
+            :precent="'日同比'"
+            :nums="payData.dayNum"
+            :precent-data="payData.dayPrecent"
+          />
+          <MiniCard
+            :title="'当月支付人数'"
+            :precent="'月同比'"
+            :nums="payData.mounthNum"
+            :precent-data="payData.mounthPrecent"
+          />
         </div>
+        <div ref="orderPeople" class="chart"></div>
       </div>
     </div>
   </div>
@@ -86,44 +88,48 @@ export default {
     return {
       cardList: [
         {
-          title: '新增用户',
-          color: '#1B55AF',
-          background: '#F4F7FB',
-          todayColor: '#C9D7EC',
+          title: '浏览量',
+          color: '#475262',
+          iconurl: require('../../assets/images/new_browse.png'),
+          background: '#FFFFFF',
+          todayColor: '#D7CDF9',
           nums: '',
           precent: '',
           lastNums: '',
-          value: 1
+          value: 4
         },
         {
-          title: '新增店铺',
-          color: '#F45F20',
-          background: '#FEF7F4',
-          todayColor: '#FCD9CA',
+          title: '访客量',
+          color: '#475262',
+          iconurl: require('../../assets/images/new_visitor.png'),
+          background: '#FFFFFF',
+          todayColor: '#CFDDC0',
           nums: '',
           precent: '',
           lastNums: '',
-          value: 2
+          value: 3
         },
         {
-          title: '访客',
-          color: '#427A0A',
-          background: '#F2F6EE',
-          todayColor: '#CFDDC0',
+          title: '新增店铺',
+          color: '#475262',
+          iconurl: require('../../assets/images/new_shop.png'),
+          background: '#FFFFFF',
+          todayColor: '#FCD9CA',
           nums: '',
           precent: '',
           lastNums: '',
-          value: 3
+          value: 2
         },
         {
-          title: '浏览量',
-          color: '#623CE7',
-          background: '#F4F1FD',
-          todayColor: '#D7CDF9',
+          title: '新增用户',
+          color: '#475262',
+          iconurl: require('../../assets/images/new_user.png'),
+          background: '#FFFFFF',
+          todayColor: '#C9D7EC',
           nums: '',
           precent: '',
           lastNums: '',
-          value: 4
+          value: 1
         }
       ],
       chart: [
@@ -251,8 +257,7 @@ export default {
 .dashboardPage{
   width: 100%;
   .top{
-    padding: 28px 10px;
-    background-color: #FFF;
+    padding: 24px 10px;
     display: flex;
     justify-content: space-between;
     .cardbox{
@@ -261,32 +266,57 @@ export default {
       flex: 1;
     }
   }
+  .data_count_label{
+    font-size: 20px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #121F31;
+    margin: 0px 20px;
+  }
+
   .chartContainer{
     margin: 20px;
     padding: 20px;
+    border-radius: 10px;
     background-color: #FFF;
-    h2{
-      margin: 12px 0;
-      font-weight: bold;
-    }
+    font-size: 16px;
+    color:#475262;
     .chartMoney{
       width: 100%;
       height: 400px;
     }
-    .chartCard{
-      min-height: 300px;
-      display: flex;
-      .dailyCard{
-        flex: 1;
-        padding: 12px 20px;
-        .cardContainer{
-          display: flex;
-        }
-        .chart{
-          min-height: 300px;
-        }
+  }
+
+  .chartCard{
+    margin: 0px 12px 12px 12px;
+    font-size: 16px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #404F64;
+    min-height: 300px;
+    display: flex;
+    .dailyCard{
+      flex: 1;
+      padding: 28px 20px;
+      margin: 8px;
+      border-radius: 10px;
+      background-color: #FFF;
+      .cardContainer{
+        display: flex;
+      }
+     
+      .chart{
+        min-height: 300px;
       }
     }
   }
+  .miniCardComponents{
+          .title{
+            font-size: 16px !important;
+            font-family: PingFang SC !important;
+            font-weight: 400 !important;
+            color: #404F64 !important;
+          }
+        }
 }
 </style>