perf:refine dashboard responsive

src/views/dashboard/admin/components/BoxCard.vue

@@ -69,43 +69,50 @@ export default {
 }
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>
-.box-card-header {
+.box-card-component {
-  position: relative;
+  .box-card-header {
-  height: 220px;
+    position: relative;
-  img {
+    height: 220px;
-    width: 100%;
+    img {
-    height: 100%;
+      width: 100%;
-    transition: all 0.2s linear;
+      height: 100%;
-    &:hover {
+      transition: all 0.2s linear;
-      transform: scale(1.1, 1.1);
+      &:hover {
-      filter: contrast(130%);
+        transform: scale(1.1, 1.1);
+        filter: contrast(130%);
+      }
+    }
+  }
+  .mallki-text {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    font-size: 20px;
+    font-weight: bold;
+  }
+  .panThumb {
+    z-index: 100;
+    height: 70px!important;
+    width: 70px!important;
+    position: absolute!important;
+    top: -45px;
+    left: 0px;
+    border: 5px solid #ffffff;
+    background-color: #fff;
+    margin: auto;
+    box-shadow: none!important;
+    /deep/ .pan-info {
+      box-shadow: none!important;
+    }
+  }
+  .progress-item {
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+  @media only screen and (max-width: 1510px){
+    .mallki-text{
+      display: none;
     }
   }
 }
-.mallki-text {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  font-size: 20px;
-  font-weight: bold;
-}
-.panThumb {
-  z-index: 100;
-  height: 70px!important;
-  width: 70px!important;
-  position: absolute!important;
-  top: -45px;
-  left: 0px;
-  border: 5px solid #ffffff;
-  background-color: #fff;
-  margin: auto;
-  box-shadow: none!important;
-  /deep/ .pan-info{
-    box-shadow: none!important;
-  }
-}
-.progress-item {
-  margin-bottom: 10px;
-  font-size: 14px;
-}
 </style>

src/views/dashboard/admin/components/PanelGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <el-row class="panel-group" :gutter="40">
-    <el-col :span="6">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class='card-panel' @click="handleSetLineChartData('newVisitis')">
         <div class="card-panel-icon-wrapper icon-people">
           <svg-icon icon-class="peoples" class-name="card-panel-icon" />
@@ -11,7 +11,7 @@
         </div>
       </div>
     </el-col>
-    <el-col :span="6">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('messages')">
         <div class="card-panel-icon-wrapper icon-message">
           <svg-icon icon-class="message" class-name="card-panel-icon" />
@@ -22,7 +22,7 @@
         </div>
       </div>
     </el-col>
-    <el-col :span="6">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('purchases')">
         <div class="card-panel-icon-wrapper icon-money">
           <svg-icon icon-class="money" class-name="card-panel-icon" />
@@ -33,7 +33,7 @@
         </div>
       </div>
     </el-col>
-    <el-col :span="6">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('shoppings')">
         <div class="card-panel-icon-wrapper icon-shoppingCard">
           <svg-icon icon-class="shoppingCard" class-name="card-panel-icon" />
@@ -64,7 +64,10 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 .panel-group {
-  margin-top: 20px;
+  margin-top: 18px;
+  .card-panel-col{
+    margin-bottom: 32px;
+  }
   .card-panel {
     height: 108px;
     cursor: pointer;
@@ -132,5 +135,4 @@ export default {
     }
   }
 }
-
 </style>

src/views/dashboard/admin/components/TodoList/index.scss

@@ -246,16 +246,12 @@
 		margin: 0;
 		padding: 0;
 		list-style: none;
-		position: absolute;
-		right: 0;
-		left: -20px;
 	}
 	.filters li {
 		display: inline;
 	}
 	.filters li a {
 		color: inherit;
-		margin: 3px;
 		font-size: 12px;
 		padding: 3px 7px;
 		text-decoration: none;

src/views/dashboard/admin/components/TransactionTable.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-table :data="list" style="width: 100%;padding-top: 15px;" >
+  <el-table :data="list" style="width: 100%;padding-top: 15px;">
-    <el-table-column label="Order_No">
+    <el-table-column label="Order_No" show-overflow-tooltip>
       <template slot-scope="scope">
         {{scope.row.order_no}}
       </template>
@@ -10,16 +10,11 @@
         ¥{{scope.row.price | toThousandslsFilter}}
       </template>
     </el-table-column>
-    <el-table-column label="Status"  width="100" align="center">
+    <el-table-column label="Status" width="100" align="center">
       <template slot-scope="scope">
-        <el-tag  :type="scope.row.status | statusFilter"> {{scope.row.status}}</el-tag>
+        <el-tag :type="scope.row.status | statusFilter"> {{scope.row.status}}</el-tag>
       </template>
     </el-table-column>
-    <!-- <el-table-column label="Username"  width="135" align="center">
-      <template slot-scope="scope">
-        {{scope.row.username}}
-      </template>
-    </el-table-column> -->
   </el-table>
 </template>
 

src/views/dashboard/admin/index.vue

@@ -4,36 +4,36 @@
 
     <panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group>
 
-    <el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
+    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
       <line-chart :chart-data="lineChartData"></line-chart>
     </el-row>
 
-    <el-row style="margin-top:30px;" :gutter="30">
+    <el-row :gutter="32">
-      <el-col :span="8">
+      <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
           <raddar-chart></raddar-chart>
         </div>
       </el-col>
-      <el-col :span="8">
+      <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
           <pie-chart></pie-chart>
         </div>
       </el-col>
-      <el-col :span="8">
+      <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
           <bar-chart></bar-chart>
         </div>
       </el-col>
     </el-row>
 
-    <el-row style="margin-top:30px;">
+    <el-row :gutter="8">
-      <el-col :span="12" style="padding-right:8px;">
+      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
         <transaction-table></transaction-table>
       </el-col>
-      <el-col :span="6">
+      <el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
-        <todo-list style="margin:0 8px;"></todo-list>
+        <todo-list></todo-list>
       </el-col>
-      <el-col :span="6">
+      <el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
         <box-card></box-card>
       </el-col>
     </el-row>
@@ -99,11 +99,12 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 .dashboard-editor-container {
-  padding: 30px;
+  padding: 32px;
   background-color: rgb(240, 242, 245);
   .chart-wrapper {
     background: #fff;
-    padding: 15px 15px 0;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
   }
 }
 </style>