左侧栏及首页布局更改

src/assets/styles/sidebar.scss

@@ -1,223 +1,185 @@
 #app {
-
-  .main-container {
-    min-height: 100%;
-    transition: margin-left .28s;
-    margin-left: $sideBarWidth;
-    position: relative;
-  }
-
-  .sidebar-container {
-    -webkit-transition: width .28s;
-    transition: width 0.28s;
-    width: $sideBarWidth !important;
-    background-color: $menuBg;
-    height: 100%;
-    position: fixed;
-    font-size: 0px;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1001;
-    overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
-
-    // reset element-ui css
-    .horizontal-collapse-transition {
-      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
-    }
-
-    .scrollbar-wrapper {
-      overflow-x: hidden !important;
-    }
-
-    .el-scrollbar__bar.is-vertical {
-      right: 0px;
-    }
-
-    .el-scrollbar {
-      height: 100%;
-    }
-
-    &.has-logo {
-      .el-scrollbar {
-        height: calc(100% - 50px);
-      }
-    }
-
-    .is-horizontal {
-      display: none;
-    }
-
-    a {
-      display: inline-block;
-      width: 100%;
-      overflow: hidden;
-    }
-
-    .svg-icon {
-      margin-right: 16px;
-    }
-
-    .el-menu {
-      border: none;
-      height: 100%;
-      width: 100% !important;
-    }
-
-    .el-menu-item, .el-submenu__title {
-      overflow: hidden !important;
-      text-overflow: ellipsis !important;
-      white-space: nowrap !important;
-    }
-
-    // menu hover
-    .submenu-title-noDropdown,
-    .el-submenu__title {
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
-      }
-    }
-
-    & .theme-dark .is-active > .el-submenu__title {
-      color: $subMenuActiveText !important;
-    }
-
-    & .nest-menu .el-submenu>.el-submenu__title,
-    & .el-submenu .el-menu-item {
-      min-width: $sideBarWidth !important;
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
-      }
-    }
-
-    & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
-    & .theme-dark .el-submenu .el-menu-item {
-      background-color: $subMenuBg !important;
-
-      &:hover {
-        background-color: $subMenuHover !important;
-      }
-    }
-  }
-
-  .hideSidebar {
-    .sidebar-container {
-      width: 54px !important;
-    }
-
     .main-container {
-      margin-left: 54px;
+        min-height: 100%;
+        transition: margin-left .28s;
+        margin-left: $sideBarWidth;
+        position: relative;
     }
-
-    .submenu-title-noDropdown {
-      padding: 0 !important;
-      position: relative;
-
-      .el-tooltip {
-        padding: 0 !important;
-
-        .svg-icon {
-          margin-left: 20px;
+    .sidebar-container {
+        -webkit-transition: width .28s;
+        transition: width 0.28s;
+        width: $sideBarWidth !important;
+        background-color: $menuBg;
+        height: 100%;
+        position: fixed;
+        font-size: 0px;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1001;
+        overflow: hidden;
+        -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
+        box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
+        // reset element-ui css
+        .horizontal-collapse-transition {
+            transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+        }
+        .scrollbar-wrapper {
+            overflow-x: hidden !important;
+        }
+        .el-scrollbar__bar.is-vertical {
+            right: 0px;
+        }
+        .el-scrollbar {
+            height: 100%;
+        }
+        &.has-logo {
+            .el-scrollbar {
+                height: calc(100% - 50px);
+            }
+        }
+        .is-horizontal {
+            display: none;
+        }
+        a {
+            display: inline-block;
+            width: 100%;
+            overflow: hidden;
         }
-      }
-    }
-
-    .el-submenu {
-      overflow: hidden;
-
-      &>.el-submenu__title {
-        padding: 0 !important;
-
         .svg-icon {
-          margin-left: 20px;
+            margin-right: 16px;
+        }
+        .el-menu {
+            border: none;
+            height: 100%;
+            width: 100% !important;
+        }
+        .el-menu-item,
+        .el-submenu__title {
+            overflow: hidden !important;
+            text-overflow: ellipsis !important;
+            white-space: nowrap !important;
+        }
+        // menu hover
+        .submenu-title-noDropdown,
+        .el-submenu__title {
+            &:hover {
+                background-color: #004BAD !important;
+            }
+        }
+        & .theme-dark .is-active>.el-submenu__title {
+            color: $subMenuActiveText !important;
+        }
+        & .nest-menu .el-submenu>.el-submenu__title,
+        & .el-submenu .el-menu-item {
+            min-width: $sideBarWidth !important;
+            &:hover {
+                background-color: rgba(0, 0, 0, 0.06) !important;
+            }
+        }
+        & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
+        & .theme-dark .el-submenu .el-menu-item {
+            background-color: $subMenuBg !important;
+            &:hover {
+                background-color: $subMenuHover !important;
+            }
         }
-
-      }
     }
-
-    .el-menu--collapse {
-      .el-submenu {
-        &>.el-submenu__title {
-          &>span {
-            height: 0;
-            width: 0;
+    .hideSidebar {
+        .sidebar-container {
+            width: 54px !important;
+        }
+        .main-container {
+            margin-left: 54px;
+        }
+        .submenu-title-noDropdown {
+            padding: 0 !important;
+            position: relative;
+            .el-tooltip {
+                padding: 0 !important;
+                .svg-icon {
+                    margin-left: 20px;
+                }
+            }
+        }
+        .el-submenu {
             overflow: hidden;
-            visibility: hidden;
-            display: inline-block;
-          }
+            &>.el-submenu__title {
+                padding: 0 !important;
+                .svg-icon {
+                    margin-left: 20px;
+                }
+            }
+        }
+        .el-menu--collapse {
+            .el-submenu {
+                &>.el-submenu__title {
+                    &>span {
+                        height: 0;
+                        width: 0;
+                        overflow: hidden;
+                        visibility: hidden;
+                        display: inline-block;
+                    }
+                }
+            }
         }
-      }
     }
-  }
-
-  .el-menu--collapse .el-menu .el-submenu {
-    min-width: $sideBarWidth !important;
-  }
-
-  // mobile responsive
-  .mobile {
-    .main-container {
-      margin-left: 0px;
+    .el-menu--collapse .el-menu .el-submenu {
+        min-width: $sideBarWidth !important;
     }
-
-    .sidebar-container {
-      transition: transform .28s;
-      width: $sideBarWidth !important;
-    }
-
-    &.hideSidebar {
-      .sidebar-container {
-        pointer-events: none;
-        transition-duration: 0.3s;
-        transform: translate3d(-$sideBarWidth, 0, 0);
-      }
+    // mobile responsive
+    .mobile {
+        .main-container {
+            margin-left: 0px;
+        }
+        .sidebar-container {
+            transition: transform .28s;
+            width: $sideBarWidth !important;
+        }
+        &.hideSidebar {
+            .sidebar-container {
+                pointer-events: none;
+                transition-duration: 0.3s;
+                transform: translate3d(-$sideBarWidth, 0, 0);
+            }
+        }
     }
-  }
-
-  .withoutAnimation {
-
-    .main-container,
-    .sidebar-container {
-      transition: none;
+    .withoutAnimation {
+        .main-container,
+        .sidebar-container {
+            transition: none;
+        }
     }
-  }
 }
 
 // when menu collapsed
 .el-menu--vertical {
-  &>.el-menu {
-    .svg-icon {
-      margin-right: 16px;
-    }
-  }
-
-  .nest-menu .el-submenu>.el-submenu__title,
-  .el-menu-item {
-    &:hover {
-      // you can use $subMenuHover
-      background-color: rgba(0, 0, 0, 0.06) !important;
-    }
-  }
-
-  // the scroll bar appears when the subMenu is too long
-  >.el-menu--popup {
-    max-height: 100vh;
-    overflow-y: auto;
-
-    &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
+    &>.el-menu {
+        .svg-icon {
+            margin-right: 16px;
+        }
     }
-
-    &::-webkit-scrollbar {
-      width: 6px;
+    .nest-menu .el-submenu>.el-submenu__title,
+    .el-menu-item {
+        &:hover {
+            // you can use $subMenuHover
+            background-color: rgba(0, 0, 0, 0.06) !important;
+        }
     }
-
-    &::-webkit-scrollbar-thumb {
-      background: #99a9bf;
-      border-radius: 20px;
+    // the scroll bar appears when the subMenu is too long
+    >.el-menu--popup {
+        max-height: 100vh;
+        overflow-y: auto;
+        &::-webkit-scrollbar-track-piece {
+            background: #d3dce6;
+        }
+        &::-webkit-scrollbar {
+            width: 6px;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: #99a9bf;
+            border-radius: 20px;
+        }
     }
-  }
-}
+}

src/assets/styles/variables.scss

@@ -7,38 +7,32 @@ $green: #30B08F;
 $tiffany: #4AB7BD;
 $yellow:#FEC171;
 $panGreen: #30B08F;
-
 // sidebar
-$menuText:#bfcbd9;
-$menuActiveText:#409EFF;
+$menuText:#F8F8F8;
+$menuActiveText:#F8F8F8;
 $subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
-
-$menuBg:#304156;
-$menuHover:#263445;
-$sidebarTitle: #ffffff;
-
-$menuLightBg:#ffffff;
+$menuBg:#1F1E2E;
+$menuHover:#fff;
+$sidebarTitle: #ccc;
+$menuLightBg:#ccc;
 $menuLightHover:#f0f1f5;
 $sidebarLightTitle: #001529;
-
-$subMenuBg:#1f2d3d;
-$subMenuHover:#001528;
-
+$subMenuBg:#161523;
+$subMenuHover:#004BAD;
 $sideBarWidth: 200px;
-
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
-  menuText: $menuText;
-  menuActiveText: $menuActiveText;
-  subMenuActiveText: $subMenuActiveText;
-  menuBg: $menuBg;
-  menuHover: $menuHover;
-  menuLightBg: $menuLightBg;
-  menuLightHover: $menuLightHover;
-  subMenuBg: $subMenuBg;
-  subMenuHover: $subMenuHover;
-  sideBarWidth: $sideBarWidth;
-  sidebarTitle: $sidebarTitle;
-  sidebarLightTitle: $sidebarLightTitle
-}
+    menuText: $menuText;
+    menuActiveText: $menuActiveText;
+    subMenuActiveText: $subMenuActiveText;
+    menuBg: $menuBg;
+    menuHover: $menuHover;
+    menuLightBg: $menuLightBg;
+    menuLightHover: $menuLightHover;
+    subMenuBg: $subMenuBg;
+    subMenuHover: $subMenuHover;
+    sideBarWidth: $sideBarWidth;
+    sidebarTitle: $sidebarTitle;
+    sidebarLightTitle: $sidebarLightTitle
+}

src/directive/dialog/drag.js

@@ -1,6 +1,6 @@
 /**
  * v-dialogDrag 弹窗拖拽
- * Copyright (c) 2019 yongtian
+ * Copyright (c) 2019 
  */
 
 export default {

src/layout/components/Sidebar/Logo.vue

@@ -1,11 +1,16 @@
 <template>
-  <div
+  <!-- <div
     class="sidebar-logo-container"
     :class="{ collapse: collapse }"
     :style="{
       backgroundColor:
         sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg,
     }"
+  > -->
+  <div
+    class="sidebar-logo-container"
+    :class="{ collapse: collapse }"
+    :style="{ backgroundColor:'#fff'}"
   >
     <transition name="sidebarLogoFade">
       <router-link
@@ -67,9 +72,9 @@ export default {
 .sidebar-logo-container {
   position: relative;
   width: 100%;
-  height: 90px;
-  line-height: 90px;
-  background: #2b2f3a;
+  height: 70px;
+  line-height: 70px;
+  background: #fff !important;
   text-align: center;
   overflow: hidden;
 
@@ -78,8 +83,8 @@ export default {
     width: 100%;
 
     & .sidebar-logo {
-      width: 125px;
-      height: 62px;
+      width: 117px;
+      height: 45px;
       vertical-align: middle;
       margin-right: 12px;
     }

src/layout/components/Sidebar/SidebarItem.vue

@@ -94,3 +94,16 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+// .item2:last-child{
+//     padding-bottom:60px !important
+// }
+.router-link-active:active,.router-link-active:hover,.item2:hover{
+    background-color: #004BAD !important;
+    color:#fff !important;
+}
+#app .sidebar-container,.sidebar-container,.sidebar-logo-container{
+    background-color: #1F1E2E;
+}
+
+</style>

src/layout/components/Sidebar/index.vue

@@ -12,7 +12,7 @@
                 :collapse-transition="false"
                 mode="vertical"
             >
-                <sidebar-item
+                <sidebar-item class="item2"
                     v-for="(route, index) in sidebarRouters"
                     :key="route.path  + index"
                     :item="route"
@@ -55,3 +55,4 @@ export default {
     }
 };
 </script>
+

src/main.js

@@ -30,6 +30,9 @@ import ImageUpload from "@/components/ImageUpload"
 import DictTag from '@/components/DictTag'
 // 头部标签组件
 import VueMeta from 'vue-meta'
+// echarts
+import echarts from 'echarts'
+
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -42,6 +45,7 @@ Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
 Vue.prototype.downloadBlob = downloadBlob
 Vue.prototype.handleTree = handleTree
+Vue.prototype.$echarts = echarts
 
 Vue.prototype.msgSuccess = function(msg) {
     this.$message({ showClose: true, message: msg, type: "success" });

src/router/index.js

@@ -26,8 +26,7 @@ import Layout from '@/layout'
  */
 
 // 公共路由
-export const constantRoutes = [
-    {
+export const constantRoutes = [{
         path: '/redirect',
         component: Layout,
         hidden: true,
@@ -197,8 +196,9 @@ export const constantRoutes = [
 ]
 
 export default new Router({
-    mode: 'history', // 去掉url中的#
+    // mode: 'history', // 去掉url中的#
+    mode: 'hash',
     base: '/vuedx',
     scrollBehavior: () => ({ y: 0 }),
     routes: constantRoutes
-})
+})

src/views/components/icons/index.vue

@@ -31,7 +31,7 @@
           </el-tooltip>
         </div>
       </el-tab-pane>
-    </el-tabs>
+    </el-tabs>111
   </div>
 </template>
 

src/views/index.vue

@@ -1,25 +1,486 @@
 <template>
   <div class="app-container home">
-    
+    <div id="main">
+      <div class="card_left">
+        <el-card class="box-card card1 ">
+          <div class="title">
+            <span>用户概括</span>
+          </div>
+          <div class="contain">
+            <i class="el-icon-s-custom"></i>
+            <div class="num">999,999</div>
+            <div class="num_txt">已注册人数</div>
+          </div>
+          <div id="user" style="width: 100%;height:374px;margin-left:-20%"></div>
+        </el-card>
+        <el-card class="box-card card2">
+          <div class="title">
+            <span>消费数据统计</span>
+          </div>
+          <div class="contain">
+            <div class="day">
+              <div class="rmb_icon">¥</div>
+              <div class="right">
+                <div class="num_txt">当天支付金额</div>
+                <div class="num"><span>10,000</span> 元</div>
+              </div>
+            </div>
+            <div class="now">
+              <div class="rmb_icon">¥</div>
+              <div class="right">
+                <div class="num_txt">当前账户余额总额</div>
+                <div class="num"><span>50,000,000</span> 元</div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </div>
+      
+      
+      <div class="card_right">
+        <el-card class="box-card card3">
+          <div class="title">
+            <span>充值行为分析</span>
+          </div>
+          <div class="contain">
+            <div class="top">
+              <div class="day_sum">
+                  <div class="num_txt">今日充值总金额</div>
+                  <div class="num"><span>10,000</span> 元</div>
+              </div>
+              <div class="day_count">
+                  <div class="num_txt">今日充值次数</div>
+                  <div class="num"><span>200</span> 次</div>
+              </div>
+              <div class="day_count">
+                  <div class="num_txt">今日平均充值金额</div>
+                  <div class="num"><span>200</span> 元</div>
+              </div>
+            </div>
+            <div class="middle">
+              <div id="pay_type" style="width: 500px;height:150px"></div>
+              <div id="channel" style="width: 500px;height:150px"></div>
+              
+            </div>
+            <div class="title" style="width:100%">
+              <span>充值行为分析</span>
+            </div>
+            <div class="data">
+              <el-dropdown @command="handleMonth" class="data_type">
+                <span class="el-dropdown-link">
+                  {{month}}<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="1">1月</el-dropdown-item>
+                  <el-dropdown-item command="2">2月</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+              <el-dropdown @command="handleYear" class="data_type">
+                <span class="el-dropdown-link">
+                  {{year}}<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="2021">2021年</el-dropdown-item>
+                  <el-dropdown-item command="2022">2022年</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <div class="bottom" >
+              <div id="statistics" style="width: 800px;height:200px"></div>
+            </div>
+            
+          </div>
+          
+        </el-card>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+
+
 export default {
   name: "index",
   data() {
     return {
       // 版本号
+      month:"月",
+      year:"年"
+      
     };
   },
-  methods: {
+  mounted() {
+   this.drawLine();
   },
-};
+  methods: {
+    handleMonth(month) {
+      this.month = month + "月"
+    },
+    handleYear(year) {
+      console.log(1)
+      this.year = year + "年"
+    },
+    drawLine(){
+	    // 基于准备好的dom，初始化echarts实例
+      let user = this.$echarts.init(document.getElementById('user'))
+      let pay_type = this.$echarts.init(document.getElementById('pay_type'))
+      let channel = this.$echarts.init(document.getElementById('channel'))
+      let statistics = this.$echarts.init(document.getElementById('statistics'))
+      
+      // 指定图表的配置项和数据
+      var option1 = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          top: '15%',
+          left: 'left',
+          left: '80%'
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '16',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 1048, name: '东信员工' },
+              { value: 735, name: '合作伙伴' },
+              { value: 580, name: '租客' },
+              { value: 1048, name: '东信员工1' },
+              { value: 735, name: '合作伙伴1' },
+              { value: 580, name: '租客1' },
+              { value: 1048, name: '东信员工2' },
+              { value: 735, name: '合作伙伴2' },
+              { value: 580, name: '租客2' },
+      
+            ]
+          }
+        ]
+      };
+      var option2 = {
+        title: {
+          text: '支付方式'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          top: '15%',
+          left: 'left',
+          left: '80%'
+          
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '12',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 1048, name: '支付宝' },
+              { value: 735, name: '微信' },
+              { value: 73, name: '现金' },
+            ]
+          }
+        ]
+      };
+      var option3 = {
+        title: {
+          text: '充值渠道'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          top: '15%',
+          left: 'left',
+          left: '80%'
+          
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '12',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 1048, name: '餐厅' },
+              { value: 735, name: '活动中心' },
+              { value: 73, name: '游泳馆' },
+            ]
+          }
+        ]
+      };
+      var option4 = {
+        title: {
+          text: '充值总额'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          // data: ['Email']
+        },
+        grid: {
+          // left: '3%',
+          // right: '4%',
+          // bottom: '3%',
+          containLabel: false
+        },
+        // toolbox: {
+        //   feature: {
+        //     saveAsImage: {}
+        //   }
+        // },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['1日','2日','3日','4日','5日','6日','7日','8日','9日','10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','30日']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            // name: 'Email',
+            type: 'line',
+            stack: 'Total',
+            data: [120, 134, 90, 230, 210,120, 132, 10100, 134, 90,120, 134, 90, 230, 210,120, 132, 10100, 134, 90,120, 134, 90, 230, 210,120, 132, 10100, 134, 90]
+          },
+          
+        ]
+      };
+
+      user.setOption(option1);
+      pay_type.setOption(option2);
+      channel.setOption(option3);
+      statistics.setOption(option4);
+    },
+  }
+}
 </script>
 
 <style scoped lang="scss">
-.home {
+  .text {
+    font-size: 14px;
+  }
+  .item {
+    margin-bottom: 18px;
+  }
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+  .box-card {
+    margin-top:10px;
+  }
+  #main{
+    .box-card{
+      .title{
+        text-align: left;
+        span{
+          font-size: 16px;
+          font-weight: 700;;
+          padding-bottom:2px;
+          border-bottom:1px solid #ccc !important;
+        }
+      }
+    }
+    .card_left{
+      width:40%;
+      float: left;
+      .card1{
+        .contain{
+          margin:30px auto 0;
+          text-align: center;
+          &>div{
+            display: inline-block;
+          }
+          .el-icon-s-custom{
+            font-size:30px;
+          }
+          .num{
+            font-size: 30px;
+            font-weight: 700;
+            margin:0 16px;
+          }
+          .num_txt{
+            font-size: 12px;
+            color:#ccc;
+            
+          }
+        }
+      }
+      .card2{
+        .contain{
+          margin:30px auto 0;
+          text-align: left;
+          &>div>div{
+            display: inline-block;
+          }
+          &>div:nth-child(2){
+            margin:80px auto 40px;
+          }
+          .rmb_icon{
+            font-size:40px;
+            font-weight: 700;
+            margin:0 10% 0 15%;
+            vertical-align: middle;
+          }
+          .right{
+            vertical-align: middle;
+            width:40%;
+            text-align: right;
+            .num_txt{
+              font-size: 12px;
+              color:#ccc !important;
+              text-align: right;
+              margin-right:14px;
+            }
+            .num{
+              font-size: 12px;
+              margin-top:5px;
+              color:#ccc;
+              span{
+                font-size: 30px;
+                font-weight: 700;
+                color:#000;
+              }
+            }
+            
+          }
+          
+        }
+      }
+    }
+    .card_right{
+      float:left;
+      width:60%;
+      .card3{
+        width:100%;
+        margin-left:10px;
+        .title{
+          width:85%;
+          margin:0 auto;
+        }
+        .contain{
+          width:85%;
+          margin:30px auto 0;
+          text-align: left;
+          .top{
+            display: flex;
+            div{
+              flex:3;
+              text-align: center;
+              .num_txt{
+                font-size: 12px;
+                color:#ccc !important;
+                text-align: center;
+              }
+              .num{
+                font-size: 12px;
+                margin-top:5px;
+                color:#ccc;
+                span{
+                  font-size: 30px;
+                  font-weight: 700;
+                  color:#000;
+                }
+              }
+            }
+            
+          }
+          .middle{
+            div{
+              margin-top:40px;
+            }
+          }
+          .bottom{
+            margin-top:40px;
+          }
+          .data{
+            width:100%;
+            text-align: right;
+            margin-left:-100px;
+            .data_type{
+              margin:20px 0 0 20px;
+              padding:0 15px;
+              border:1px solid #000;
+            }
+
+          }
+          
+        }
+      }
+    }
+    
+  }
   
-}
 </style>
 

src/views/recharge/channel/index.vue

@@ -303,3 +303,7 @@ export default {
   }
 };
 </script>
+<style lang="scss" scoped>
+// .el-button--primary{color:#50B300;border:1px solid #50B300;background: #fff;}
+// .el-button--primary:hover{color:#fff;border:1px solid #50B300;background: #50B300;}
+</style>

vue.config.js

@@ -33,8 +33,8 @@ module.exports = {
         proxy: {
             // detail: https://cli.vuejs.org/config/#devserver-proxy
             [process.env.VUE_APP_BASE_API]: {
-                target: 'https://wx.ewoogi.com/dxapi/',
-                // target: `http://172.16.120.104:8085`,
+                // target: 'https://wx.ewoogi.com/dxapi/',
+                target: `http://172.16.120.104:8085`,
                 changeOrigin: true,
                 pathRewrite: {
                     ['^' + process.env.VUE_APP_BASE_API]: ''