首页布局调整，条码生成页面完善

src/layout/components/Navbar.vue

 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger
+      id="hamburger-container"
+      :is-active="sidebar.opened"
+      class="hamburger-container"
+      @toggleClick="toggleSideBar"
+    />
 
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
+      <template v-if="device !== 'mobile'">
         <search id="header-search" class="right-menu-item" />
-
-        <el-tooltip content="项目文档" effect="dark" placement="bottom">
-          <Doc class="right-menu-item hover-effect" />
-        </el-tooltip>
-
         <el-tooltip content="全屏缩放" effect="dark" placement="bottom">
           <screenfull id="screenfull" class="right-menu-item hover-effect" />
         </el-tooltip>
@@ -19,12 +19,17 @@
         <el-tooltip content="布局设置" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
-
       </template>
 
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+      <el-dropdown
+        class="avatar-container right-menu-item hover-effect"
+        trigger="click"
+      >
         <div class="avatar-wrapper">
-          <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar">
+          <div class="userIcon">
+            <i class="el-icon-user-solid" />
+          </div>
+          <!-- <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar"> -->
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
@@ -53,7 +58,6 @@
 import { mapGetters } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
-import Doc from '@/components/Doc'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
@@ -65,8 +69,7 @@ export default {
     Hamburger,
     Screenfull,
     SizeSelect,
-    Search,
-    Doc
+    Search
   },
   data() {
     return {
@@ -75,12 +78,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'device',
-      'user',
-      'baseApi'
-    ]),
+    ...mapGetters(['sidebar', 'device', 'user', 'baseApi']),
     show: {
       get() {
         return this.$store.state.settings.showSettings
@@ -121,18 +119,18 @@ export default {
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
     }
   }
 
@@ -164,10 +162,10 @@ export default {
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.025);
         }
       }
     }
@@ -185,7 +183,9 @@ export default {
           height: 40px;
           border-radius: 10px;
         }
-
+        .userIcon {
+          height: 40px;
+        }
         .el-icon-caret-bottom {
           cursor: pointer;
           position: absolute;

src/views/components/QrCodeDemo.vue

@@ -25,7 +25,7 @@
       </el-select>
     </div>
     <div class="body-container">
-      <div class="cardOne" style="margin-top:40px; margin-left:40px ">
+      <div class="cardOne" style="margin-top:30px; margin-left:-10px ">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <el-button

src/views/dashboard/Information.vue

+<template>
+  <el-row :gutter="32" class="Information">
+    <el-col :span="12">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span><i class="el-icon-s-order" /> 我的待办</span>
+        </div>
+        <div>
+          <el-card shadow="hover" class="textList">
+            入库上架---A100---C100---2022-04-18 15:11:29
+          </el-card>
+          <el-card shadow="hover" class="textList">
+            库存转移---TEST-003---2022-04-18 15:11:29
+          </el-card>
+          <el-card shadow="hover" class="textList">
+            拣货出库---TEST-003---2022-04-18 15:11:29
+          </el-card>
+        </div>
+      </el-card>
+    </el-col>
+    <el-col :span="12">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span><i class="el-icon-message-solid" /> 系统消息</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text"
+            >操作按钮</el-button
+          > -->
+        </div>
+        <div>
+          <el-card shadow="hover" class="textList">
+            拣货出库---1000000008---2022-04-18 15:11:29
+          </el-card>
+          <el-card shadow="hover" class="textList">
+            拣货出库---1000000007---2022-04-18 15:11:29
+          </el-card>
+          <el-card shadow="hover" class="textList">
+            拣货出库---1000000004---2022-04-18 15:11:29
+          </el-card>
+          <!-- <el-card shadow="hover" class="textList">
+            鼠标悬浮时显示
+          </el-card> -->
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.text {
+  font-size: 14px;
+}
+
+.item {
+  margin-bottom: 18px;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+.clearfix:after {
+  clear: both;
+}
+
+.box-card {
+  border-radius: 10px;
+  width: 520px;
+  padding: 0px 0px 15px 0px;
+}
+.textList {
+  background-color: rgba(240, 248, 255, 0.562);
+  border-radius: 10px;
+  margin: 10px 0px;
+  padding: 5px 5px 5px 5px;
+}
+</style>

src/views/dashboard/PanelGroup.vue

@@ -9,7 +9,12 @@
           <div class="card-panel-text">
             在线用户
           </div>
-          <count-to :start-val="0" :end-val="200" :duration="2600" class="card-panel-num" />
+          <count-to
+            :start-val="0"
+            :end-val="200"
+            :duration="2600"
+            class="card-panel-num"
+          />
         </div>
       </div>
     </el-col>
@@ -22,7 +27,12 @@
           <div class="card-panel-text">
             消息通知
           </div>
-          <count-to :start-val="0" :end-val="12000" :duration="3000" class="card-panel-num" />
+          <count-to
+            :start-val="0"
+            :end-val="12000"
+            :duration="3000"
+            class="card-panel-num"
+          />
         </div>
       </div>
     </el-col>
@@ -35,7 +45,12 @@
           <div class="card-panel-text">
             待收货订单
           </div>
-          <count-to :start-val="0" :end-val="20" :duration="3200" class="card-panel-num" />
+          <count-to
+            :start-val="0"
+            :end-val="20"
+            :duration="3200"
+            class="card-panel-num"
+          />
         </div>
       </div>
     </el-col>
@@ -48,7 +63,12 @@
           <div class="card-panel-text">
             待拣货订单
           </div>
-          <count-to :start-val="0" :end-val="80" :duration="3600" class="card-panel-num" />
+          <count-to
+            :start-val="0"
+            :end-val="80"
+            :duration="3600"
+            class="card-panel-num"
+          />
         </div>
       </div>
     </el-col>
@@ -86,8 +106,8 @@ export default {
     overflow: hidden;
     color: #666;
     background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
+    border-color: rgba(0, 0, 0, 0.05);
 
     &:hover {
       .card-panel-icon-wrapper {
@@ -107,7 +127,7 @@ export default {
       }
 
       .icon-shopping {
-        background: #34bfa3
+        background: #34bfa3;
       }
     }
 
@@ -124,7 +144,7 @@ export default {
     }
 
     .icon-shopping {
-      color: #34bfa3
+      color: #34bfa3;
     }
 
     .card-panel-icon-wrapper {
@@ -160,7 +180,7 @@ export default {
   }
 }
 
-@media (max-width:550px) {
+@media (max-width: 550px) {
   .card-panel-description {
     display: none;
   }

src/views/home.vue

 <template>
   <div class="dashboard-container">
     <div class="dashboard-editor-container">
-      <github-corner class="github-corner" />
+      <el-row>
+        <div class="firLine">
+          <panel-group @handleSetLineChartData="handleSetLineChartData" />
+        </div>
+      </el-row>
 
-      <panel-group @handleSetLineChartData="handleSetLineChartData" />
+      <el-row style="padding:16px 16px 0;margin-bottom:32px;">
+        <div class="secLine">
+          <Information />
+        </div>
+      </el-row>
 
       <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
         <line-chart :chart-data="lineChartData" />
       </el-row>
-      <el-row :gutter="32">
-        <el-col :xs="24" :sm="24" :lg="8">
-          <div class="chart-wrapper">
-            <radar-chart />
-          </div>
-        </el-col>
-        <el-col :xs="24" :sm="24" :lg="8">
-          <div class="chart-wrapper">
-            <pie-chart />
-          </div>
-        </el-col>
-        <el-col :xs="24" :sm="24" :lg="8">
-          <div class="chart-wrapper">
-            <bar-chart />
-          </div>
-        </el-col>
-      </el-row>
     </div>
   </div>
 </template>
 
 <script>
-import GithubCorner from '@/components/GithubCorner'
+// import GithubCorner from '@/components/GithubCorner'
 import PanelGroup from './dashboard/PanelGroup'
 import LineChart from './dashboard/LineChart'
-import RadarChart from '@/components/Echarts/RadarChart'
-import PieChart from '@/components/Echarts/PieChart'
-import BarChart from '@/components/Echarts/BarChart'
+import Information from './dashboard/Information'
 
 const lineChartData = {
   newVisitis: {
@@ -59,12 +48,10 @@ const lineChartData = {
 export default {
   name: 'Dashboard',
   components: {
-    GithubCorner,
+    // GithubCorner,
     PanelGroup,
     LineChart,
-    RadarChart,
-    PieChart,
-    BarChart
+    Information
   },
   data() {
     return {
@@ -80,28 +67,31 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .dashboard-editor-container {
-    padding: 32px;
-    background-color: rgb(240, 242, 245);
-    position: relative;
+.dashboard-editor-container {
+  padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
 
-    .github-corner {
-      position: absolute;
-      top: 0;
-      border: 0;
-      right: 0;
-    }
+  .github-corner {
+    position: absolute;
+    top: 0;
+    border: 0;
+    right: 0;
+  }
 
-    .chart-wrapper {
-      background: #fff;
-      padding: 16px 16px 0;
-      margin-bottom: 32px;
-    }
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+  }
+  .firLine {
+    height: 80px;
   }
+}
 
-  @media (max-width:1024px) {
-    .chart-wrapper {
-      padding: 8px;
-    }
+@media (max-width: 1024px) {
+  .chart-wrapper {
+    padding: 8px;
   }
+}
 </style>