diff --git a/vue/src/assets/styles/sidebar.scss b/vue/src/assets/styles/sidebar.scss
index be77b4e..8631472 100644
--- a/vue/src/assets/styles/sidebar.scss
+++ b/vue/src/assets/styles/sidebar.scss
@@ -1,3 +1,5 @@
+$iconSize: 17px;
+
 .sidebar-container {
     display: flex;
     flex-direction: column;
@@ -10,7 +12,7 @@
 
     //折叠设置
     &.collapse-sidebar {
-        width: 54px;
+        width: $iconSize + 20px * 2;
 
         .sidebar-item-content {
             display: none;
@@ -72,24 +74,8 @@
         }
     }
 
-    a {
-        display: inline-block;
-        width: 100%;
-        overflow: hidden;
-    }
-
-    .svg-icon {
-        margin-right: 16px;
-    }
-
-    .el-menu {
-        border: none;
-        height: 100%;
-        width: 100%;
-    }
-
     .is-active > .el-submenu__title {
-        color: #fff !important;
+        color: $--color-primary !important;
     }
 
     // menu hover
@@ -110,15 +96,22 @@
     }
 }
 
-.el-menu--vertical {
+.el-menu {
+    border: none;
+    height: 100%;
+    width: 100%;
+
     .svg-icon {
         margin-right: 16px;
+        width: $iconSize;
+        height: $iconSize;
     }
 
-    //侧边菜单折叠时弹出菜单的滚动条高度
-    /*.popover-menu__wrap {
-        max-height: 80vh;
-    }*/
+    a {
+        display: inline-block;
+        width: 100%;
+        overflow: hidden;
+    }
 
     .popover-menu__title {
         cursor: auto;
diff --git a/vue/src/components/OrgTree/index.vue b/vue/src/components/OrgTree/index.vue
index d3d768f..481189a 100644
--- a/vue/src/components/OrgTree/index.vue
+++ b/vue/src/components/OrgTree/index.vue
@@ -177,6 +177,4 @@
     }
 </script>
 
-<style lang="scss">
-    @import './tree';
-</style>
+<style lang="scss" src="./tree.scss"></style>
diff --git a/vue/src/components/Skeleton/index.vue b/vue/src/components/Skeleton/index.vue
index 4316696..f0ba183 100644
--- a/vue/src/components/Skeleton/index.vue
+++ b/vue/src/components/Skeleton/index.vue
@@ -44,6 +44,4 @@
     }
 </script>
 
-<style lang="sass">
-    @import "./QSkeleton.sass"
-</style>
+<style lang="sass" src="./QSkeleton.sass"></style>
diff --git a/vue/src/components/SvgIcon/index.vue b/vue/src/components/SvgIcon/index.vue
index 5f93400..9ccaa2f 100644
--- a/vue/src/components/SvgIcon/index.vue
+++ b/vue/src/components/SvgIcon/index.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :style="styleExternalIcon" class="svg-external-icon svg-icon" v-if="isExternal" v-on="$listeners"/>
-    <svg :class="className" aria-hidden="true" class="svg-icon" v-else v-on="$listeners">
+    <div v-if="isExternal" v-on="$listeners" class="svg-external-icon svg-icon" :style="styleExternalIcon"/>
+    <svg v-else v-on="$listeners" :class="className" class="svg-icon" aria-hidden="true">
         <use :href="iconName"/>
     </svg>
 </template>
@@ -41,7 +41,6 @@
     .svg-icon {
         width: 1em;
         height: 1em;
-        vertical-align: -0.15em;
         fill: currentColor;
         overflow: hidden;
     }
diff --git a/vue/src/views/app/register.vue b/vue/src/views/app/register.vue
index ab4fb51..8372790 100644
--- a/vue/src/views/app/register.vue
+++ b/vue/src/views/app/register.vue
@@ -109,5 +109,5 @@
 </script>
 
 <style lang="scss">
-    @import "src/assets/styles/login";
+    @import "~@/assets/styles/login";
 </style>
diff --git a/vue/src/views/index/components/PanelGroup/PanelGroupItem.vue b/vue/src/views/index/components/PanelGroup/PanelGroupItem.vue
index e9b2915..a1aeab7 100644
--- a/vue/src/views/index/components/PanelGroup/PanelGroupItem.vue
+++ b/vue/src/views/index/components/PanelGroup/PanelGroupItem.vue
@@ -3,8 +3,8 @@
             class="card-panel"
             type="flex"
             justify="space-between"
-            @mouseout.native="style='color:'+color"
-            @mouseover.native="style='background:'+color"
+            @mouseout.native="mouseout"
+            @mouseover.native="mouseover"
     >
         <div class="card-panel-icon-wrapper" :style="style">
             <svg-icon :icon="icon" class-name="card-panel-icon"/>
@@ -32,10 +32,16 @@
             return {
                 style: 'color:' + this.color
             }
+        },
+        methods: {
+            mouseout() {
+                this.style = 'color:' + this.color
+            },
+            mouseover() {
+                this.style = 'background:' + this.color
+            }
         }
     }
 </script>
 
-<style lang="scss">
-    @import "./PanelGroupItem.scss";
-</style>
+<style lang="scss" src="./PanelGroupItem.scss"></style>
diff --git a/vue/src/views/index/components/PanelGroup/index.vue b/vue/src/views/index/components/PanelGroup/index.vue
index cf0e40f..472f14c 100644
--- a/vue/src/views/index/components/PanelGroup/index.vue
+++ b/vue/src/views/index/components/PanelGroup/index.vue
@@ -1,16 +1,7 @@
 <template>
     <el-row :gutter="40" class="panel-group">
-        <el-col :xs="12" :sm="12" :lg="6" @click.native="jump('/system/user')">
-            <panel-group-item icon="user" :color="variables.info" :value="data.online" text="在线用户"/>
-        </el-col>
-        <el-col :xs="12" :sm="12" :lg="6" @click.native="jump('/purchase/order')">
-            <panel-group-item icon="shopping" :color="variables.primary" :value="data.purchase" text="今日采购额"/>
-        </el-col>
-        <el-col :xs="12" :sm="12" :lg="6" @click.native="jump('/sell/order')">
-            <panel-group-item icon="sell" :color="variables.danger" :value="data.sell" text="今日销售额"/>
-        </el-col>
-        <el-col :xs="12" :sm="12" :lg="6">
-            <panel-group-item icon="money" :color="variables.success" :value="data.profit" text="今日毛利润"/>
+        <el-col v-for="i in list" :key="i.id" :xs="12" :sm="12" :lg="6">
+            <panel-group-item :ref="i.id" v-bind="i" @click.native="jump(i)"/>
         </el-col>
     </el-row>
 </template>
@@ -19,7 +10,7 @@
     import PanelGroupItem from './PanelGroupItem'
     import variables from '@/assets/styles/variables.scss'
     import {getFourBlock} from '@/api/statistic/index'
-    import {mergeObj} from "@/utils"
+    import {isEmpty, mergeObj} from "@/utils"
     import {auth} from "@/utils/auth"
 
     export default {
@@ -28,13 +19,19 @@
         data() {
             return {
                 loading: false,
-                variables,
-                data: {
-                    online: 0,
-                    purchase: 0,
-                    sell: 0,
-                    profit: 0
-                }
+                list: [
+                    {id: 'online', path: '/system/user', icon: 'user', color: variables.info, value: 0, text: '在线用户'},
+                    {
+                        id: 'purchase',
+                        path: '/purchase/order',
+                        icon: 'shopping',
+                        color: variables.primary,
+                        value: 0,
+                        text: '今日采购额'
+                    },
+                    {id: 'sell', path: '/sell/order', icon: 'sell', color: variables.danger, value: 0, text: '今日销售额'},
+                    {id: 'profit', icon: 'money', color: variables.info, value: 0, text: '今日毛利润'},
+                ]
             }
         },
         methods: {
@@ -42,11 +39,18 @@
                 if (this.loading) return
                 this.loading = true
                 getFourBlock()
-                    .then(data => mergeObj(this.data, data))
+                    .then(data => {
+                        this.list.forEach(i => {
+                            if (i.id in data) i.value = data[i.id]
+                        })
+                    })
                     .finally(() => this.loading = false)
             },
-            jump(path) {
-                auth(path) && this.$router.push(path)
+            jump({id, path}) {
+                if (!isEmpty(path) && auth(path)) {
+                    this.$router.push(path)
+                    this.$refs[id][0].mouseout()
+                }
             }
         },
         mounted() {