From b4355b43994ffd5e9f0eae58378e1eb9bd5cbd27 Mon Sep 17 00:00:00 2001
From: 1319612909 <1319612909@qq.com>
Date: Tue, 10 Nov 2020 14:06:03 +0800
Subject: [PATCH] =?UTF-8?q?css=E6=95=B4=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/debug.log                                 |   1 +
 web/src/style/basics.scss                     |  12 +-
 web/src/style/main.scss                       | 711 +++++++++++-------
 web/src/view/dashboard/index.vue              |   2 +-
 .../example/simpleUploader/simpleUploader.vue |   2 +-
 5 files changed, 449 insertions(+), 279 deletions(-)
 create mode 100644 web/debug.log

diff --git a/web/debug.log b/web/debug.log
new file mode 100644
index 000000000..d55ae5573
--- /dev/null
+++ b/web/debug.log
@@ -0,0 +1 @@
+[1110/113210.377:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
diff --git a/web/src/style/basics.scss b/web/src/style/basics.scss
index 73719b9ff..1280dfeed 100644
--- a/web/src/style/basics.scss
+++ b/web/src/style/basics.scss
@@ -4,12 +4,20 @@ $icon-size:17px;
 $active-color:#1890ff;
 $bg-main:#f0f2f5;
 $border-color: #f4f4f4;
-
+$white-bg:#fff;
+$el-icon-small:30px;
+$el-icon-mini:24px;
 // aside
+$width-aside:220px; 
+$width-hideside-aside:54px;
+$width-mobile-aside:210px;
 $color-aside:rgba(255, 255, 255,.9);
 $icon-arrow-size-aside:12px;
 $width-submenu-aside:55px;
 $bg-aside:#191a23;
+$height-aside-tilte:64px;
+$height-aside-img:30px;
+$width-aside-img:30px;
 // header
 $height-header: 60px;
 // nav-scroll
@@ -22,3 +30,5 @@ $border-color-table:#ededed;
 $height-table-cell:45px;
 $color-table-tbody:#595959;
 $color-table-thead:#262626;
+// dashboard
+$height-car:68px;
diff --git a/web/src/style/main.scss b/web/src/style/main.scss
index ce9248d54..f7cd1eba8 100644
--- a/web/src/style/main.scss
+++ b/web/src/style/main.scss
@@ -8,6 +8,7 @@
  */
 
 @import '@/style/basics.scss';
+
 html {
     line-height: 1.15;
     /* 1 */
@@ -365,7 +366,7 @@ textarea {
    * 2. Change font properties to `inherit` in Safari.
    */
 
- ::-webkit-file-upload-button {
+::-webkit-file-upload-button {
     -webkit-appearance: button;
     /* 1 */
     font: inherit;
@@ -532,61 +533,171 @@ li {
     list-style-type: none;
 }
 
-// .el-table__body-wrapper {
-//     tr {
-//         td {
-//             .cell {
-//                 .el-button+.el-button {
-//                     margin-left: 0;
-//                 }
-//             }
-//         }
-//     }
-// }
-// navbar
-.aside {
-    .el-scrollbar {
-        .el-scrollbar__view {
-            .el-menu-vertical {
-                background-color: $bg-aside;
+// 瀵艰埅
+#app {
+    .el-container {
+        position: relative;
+        height: 100%;
+        width: 100%;
+    }
+
+    .el-container.mobile.openside {
+        position: fixed;
+        top: 0;
+    }
+
+    .el-aside {
+        -webkit-transition: width .2s;
+        transition: width .2s;
+        width: $width-aside;
+        background-color: $bg-aside;
+        height: 100%;
+        position: fixed;
+        font-size: 0;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1001;
+        overflow: hidden;
+
+        .el-menu {
+            border-right: none;
+        }
+        
+        .tilte {
+            min-height: $height-aside-tilte;
+            line-height: $height-aside-tilte;
+            background: $bg-aside;
+            text-align: center;
+
+            .logoimg {
+                width: $width-aside-img;
+                height: $height-aside-img;
+                vertical-align: middle;
+                background: #fff;
+                border-radius: 50%;
+                padding: 3px;
             }
-            .el-menu-item:hover i,
-            .el-menu-item:hover span {
+
+            .tit-text {
+                display: inline-block;
                 color: #fff;
+                font-weight: 600;
+                font-size: 20px;
+                vertical-align: middle;
+                padding-left: 10px;
             }
-            li {
-                background-color: $bg-aside;
-                ul {
-                    .el-menu-item {
-                        background-color: #000408;
-                        height: 44px;
-                        line-height: 44px;
-                    }
-                    .is-active {
-                        background-color: #1890ff;
-                    }
+        }
+
+    }
+
+    .aside {
+        .el-menu-vertical {
+            background-color: $bg-aside;
+        }
+        .el-submenu {
+            background-color: $bg-aside;
+            .el-menu {
+                .el-menu-item {
+                    background-color: #000408;
+                    height: 44px;
+                    line-height: 44px;
+                }
+                .is-active {    
+                    background-color: #1890ff;
                 }
             }
-            .el-submenu__title:hover {
-                background-color: $bg-aside;
-            }
-            .el-submenu__title:hover i,
-            .el-submenu__title:hover span {
-                color: #fff;
-            }
-            .el-menu--inline {
-                border-left: 5px solid #2c3b41;
-            }
+        }
+        .el-menu-item:focus, .el-menu-item:hover{
+            background-color: transparent;
+        }
+        .el-menu-item:hover i,
+        .el-menu-item:hover span {
+            color: #fff;
+        }
+
+        .el-submenu__title:hover {
+            background-color: $bg-aside;
+        }
+
+        .el-submenu__title:hover i,
+        .el-submenu__title:hover span {
+            color: #fff;
+        }
+        .el-menu--inline {
+            border-left: 5px solid #2c3b41;
+        }
+    }
+
+    .hideside {
+        .aside {
+            width: $width-hideside-aside;
+        }
+    }
+
+    .mobile.hideside {
+        .el-aside {
+            -webkit-transition-duration: .2s;
+            transition-duration: .2s;
+            -webkit-transform: translate3d(-210px, 0, 0);
+            transform: translate3d(-220px, 0, 0);
+        }
+    }
+
+    .mobile {
+        .el-aside {
+            -webkit-transition: -webkit-transform .28s;
+            transition: -webkit-transform .28s;
+            transition: transform .28s;
+            transition: transform .28s, -webkit-transform .28s;
+            width: $width-mobile-aside;
+        }
+    }
+
+
+
+    .main-cont.el-main {
+        min-height: 100%;
+        -webkit-transition: margin-left .28s;
+        transition: margin-left .28s;
+        margin-left: $width-aside;
+        position: relative;
+    }
+
+    .hideside {
+        .main-cont.el-main {
+            margin-left: 54px;
+        }
+    }
+
+    .mobile {
+        .main-cont.el-main {
+            margin-left: 0px;
+        }
+    }
+
+    .openside.mobile {
+        .shadowBg {
+            background: #000;
+            opacity: .3;
+            width: 100%;
+            top: 0;
+            height: 100%;
+            position: absolute;
+            z-index: 999;
+            left: 0;
         }
     }
 }
 
+
+
 //   layout
 .layout-cont {
     .main-cont {
         position: relative;
         &.el-main {
-            background-color: #ecf0f5;
+            background-color: $bg-main;
             padding: 0;
         }
     }
@@ -601,22 +712,102 @@ li {
         height: 30px;
         line-height: 30px;
     }
+
     .el-input__icon {
         line-height: 30px;
     }
 }
 
+.admin-box {
+    min-height: calc(100vh - 200px);
+    background-color: $white-bg;
+    padding: 15px;
+    margin: 115px 15px 20px;
+    border-radius: 2px;
+
+    .el-table--border {
+        border-radius: 4px;
+        margin-bottom: 15px;
+    }
+
+    .el-table {
+        thead {
+            color: $color-table-thead;
+        }
+
+        th {
+            padding: 5px 0;
+
+            .cell {
+                min-height: 34px;
+                line-height: 34px;
+            }
+        }
+
+        td {
+            padding: 8px 0;
+        }
+
+        td,
+        th.is-leaf {
+            border-bottom: 1px solid #e8e8e8;
+        }
+    }
+
+    .search-term {
+        border-left: none;
+        border-right: none;
+        padding: 0 5px;
+
+        .el-form-item {
+            margin-bottom: 10px;
+        }
+    }
+
+    .el-pagination {
+        padding: 20px 0 0 0;
+    }
+
+    .upload-demo,
+    .upload {
+        padding: 0;
+    }
+
+    .system {
+        padding: 0;
+    }
+
+    .el-form.el-form--inline {
+        .el-form-item:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .edit_container,
+    .edit {
+        padding: 0;
+    }
+}
+
+.admin-box:after,
+.admin-box:before {
+    content: "";
+    display: block;
+    clear: both;
+}
+
 .button-box {
-    background: #fff;
-    border: 1px solid #ebeef5;
-    border-bottom: none;
+    background: $white-bg;
+    border: none;
+    padding: 0 0 10px 0px;
 }
 
 .search-term {
-    background: #fff;
+    background: $white-bg;
     padding: 0 15px;
     border-left: 1px solid #ebeef5;
     border-right: 1px solid #ebeef5;
+
     .demo-form-inline {
         margin-bottom: 10px;
     }
@@ -635,7 +826,7 @@ li {
     .el-table__body {
         tr.el-table__row--striped {
             td {
-                background: #fff!important;
+                background: #fff !important;
             }
         }
     }
@@ -647,11 +838,13 @@ li {
 }
 
 .el-pagination {
+
     .btn-prev,
     .btn-next {
         border: 1px solid #ddd;
         border-radius: 4px;
     }
+
     .el-pager {
         li {
             color: #666;
@@ -661,11 +854,13 @@ li {
             border-radius: 4px;
         }
     }
-    padding: 20px 0!important;
+
+    padding: 20px 0 !important;
 }
 
 .el-row {
     padding: 10px 0;
+
     .el-col>label {
         line-height: 30px;
         text-align: right;
@@ -673,6 +868,7 @@ li {
         padding-right: 15px;
         display: inline-block;
     }
+
     .line {
         line-height: 30px;
         text-align: center;
@@ -681,16 +877,18 @@ li {
 
 // edit_container
 .edit_container {
-    background-color: #fff;
+    background-color: $white-bg;
     padding: 15px;
+
     .el-button {
         margin: 15px 0;
     }
 }
 
 .edit {
-    background-color: #fff;
+    background-color: $white-bg;
     padding: 15px;
+
     .el-button {
         margin: 15px 0;
     }
@@ -699,12 +897,14 @@ li {
 // upload-demo
 .upload-demo,
 .upload {
-    background-color: #fff;
+    background-color: $white-bg;
     padding: 15px;
+
     .el-upload-list__item-status-label {
         right: 0;
         left: 120px;
     }
+
     .el-upload__tip {
         margin: 10px 0;
     }
@@ -713,103 +913,13 @@ li {
 // system
 .system {
     padding: 15px;
+
     .el-input__inner {
         width: 80%;
     }
 }
 
-// 瀵艰埅
-#app {
-    .el-container {
-        position: relative;
-        height: 100%;
-        width: 100%;
-    }
-    .el-container.mobile.openside {
-        position: fixed;
-        top: 0;
-    }
-    .hideside {
-        .aside {
-            width: 54px!important;
-        }
-    }
-    .el-aside {
-        -webkit-transition: width .2s;
-        transition: width .2s;
-        width: 220px;
-        background-color: $bg-aside;
-        height: 100%;
-        position: fixed;
-        font-size: 0;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 1001;
-        overflow: hidden;
-    }
-    .mobile.hideside {
-        .el-aside {
-            // pointer-events: none;
-            -webkit-transition-duration: .2s;
-            transition-duration: .2s;
-            -webkit-transform: translate3d(-210px, 0, 0);
-            transform: translate3d(-220px, 0, 0);
-        }
-    }
-    .mobile {
-        .el-aside {
-            -webkit-transition: -webkit-transform .28s;
-            transition: -webkit-transform .28s;
-            transition: transform .28s;
-            transition: transform .28s, -webkit-transform .28s;
-            width: 210px!important
-        }
-    }
-    .el-container {
-        position: relative;
-        height: 100%;
-        width: 100%;
-        .el-aside {
-            // transition: none;
-            .aside {
-                background: #000;
-                .el-menu {
-                    border-right: none;
-                }
-            }
-        }
-    }
-    .main-cont.el-main {
-        min-height: 100%;
-        -webkit-transition: margin-left .28s;
-        transition: margin-left .28s;
-        margin-left: 220px;
-        position: relative;
-    }
-    .hideside {
-        .main-cont.el-main {
-            margin-left: 54px;
-        }
-    }
-    .mobile {
-        .main-cont.el-main {
-            margin-left: 0px;
-        }
-    }
-    .openside.mobile {
-        .shadowBg {
-            background: #000;
-            opacity: .3;
-            width: 100%;
-            top: 0;
-            height: 100%;
-            position: absolute;
-            z-index: 999;
-            left: 0;
-        }
-    }
-}
+
 
 // .el-menu .el-menu--inline {
 //     background: #2c3b41;
@@ -817,93 +927,111 @@ li {
 // .el-submenu .el-submenu {
 //     background-color: #000408 !important;
 // }
-.aside .el-scrollbar .el-scrollbar__view .el-submenu__title:hover {
-    background-color: $bg-aside !important;
-}
+// .aside .el-scrollbar .el-scrollbar__view .el-submenu__title:hover {
+//     background-color: $bg-aside !important;
+// }
 
-.el-menu--vertical {
-    .el-menu {
-        margin-left: -8px;
-        background-color: rgb(48, 65, 86);
-        .el-menu-item {
-            background-color: rgb(48, 65, 86);
-        }
-        .el-menu-item:focus,
-        .el-menu-item:hover {
-            background-color: #263445;
-            color: #fff;
-        }
-    }
-}
+// .el-menu--vertical {
+//     .el-menu {
+//         margin-left: -8px;
+//         background-color: rgb(48, 65, 86);
+
+//         .el-menu-item {
+//             background-color: rgb(48, 65, 86);
+//         }
+
+//         .el-menu-item:focus,
+//         .el-menu-item:hover {
+//             background-color: #263445;
+//             color: #fff;
+//         }
+//     }
+// }
 
 // 瀵艰埅*****
 // add 5.13
 .el-container {
-    .admin-box {
-        padding: 15px;
-        margin: 115px 15px 20px;
-        border-radius: 2px;
-        .button-box {
-            border: none;
-            padding: 0 0 10px 0px;
-        }
-        .el-table--border {
-            border-radius: 4px;
-            margin-bottom: 15px;
-        }
-        .el-table {
-            thead {
-                color: $color-table-thead;
-            }
-            th {
-                padding: 5px 0;
-                .cell {
-                    min-height: 34px;
-                    line-height: 34px;
-                }
-            }
-            td {
-                padding: 8px 0;
-            }
-            td,
-            th.is-leaf {
-                border-bottom: 1px solid #e8e8e8;
-            }
-        }
-        .search-term {
-            border-left: none;
-            border-right: none;
-            padding: 0 5px;
-            .el-form-item {
-                margin-bottom: 10px;
-            }
-        }
-        .el-pagination {
-            padding: 20px 0 0 0;
-        }
-        .upload-demo,
-        .upload {
-            padding: 0;
-        }
-        .system {
-            padding: 0;
-        }
-        .el-form.el-form--inline {
-            .el-form-item:last-child {
-                margin-bottom: 0;
-            }
-        }
-        .edit_container,
-        .edit {
-            padding: 0;
-        }
-    }
-    .admin-box:after,
-    .admin-box:before {
-        content: "";
-        display: block;
-        clear: both;
-    }
+    // .admin-box {
+    //     padding: 15px;
+    //     margin: 115px 15px 20px;
+    //     border-radius: 2px;
+
+    //     .button-box {
+    //         border: none;
+    //         padding: 0 0 10px 0px;
+    //     }
+
+    //     .el-table--border {
+    //         border-radius: 4px;
+    //         margin-bottom: 15px;
+    //     }
+
+    //     .el-table {
+    //         thead {
+    //             color: $color-table-thead;
+    //         }
+
+    //         th {
+    //             padding: 5px 0;
+
+    //             .cell {
+    //                 min-height: 34px;
+    //                 line-height: 34px;
+    //             }
+    //         }
+
+    //         td {
+    //             padding: 8px 0;
+    //         }
+
+    //         td,
+    //         th.is-leaf {
+    //             border-bottom: 1px solid #e8e8e8;
+    //         }
+    //     }
+
+    //     .search-term {
+    //         border-left: none;
+    //         border-right: none;
+    //         padding: 0 5px;
+
+    //         .el-form-item {
+    //             margin-bottom: 10px;
+    //         }
+    //     }
+
+    //     .el-pagination {
+    //         padding: 20px 0 0 0;
+    //     }
+
+    //     .upload-demo,
+    //     .upload {
+    //         padding: 0;
+    //     }
+
+    //     .system {
+    //         padding: 0;
+    //     }
+
+    //     .el-form.el-form--inline {
+    //         .el-form-item:last-child {
+    //             margin-bottom: 0;
+    //         }
+    //     }
+
+    //     .edit_container,
+    //     .edit {
+    //         padding: 0;
+    //     }
+    // }
+
+    // .admin-box:after,
+    // .admin-box:before {
+    //     content: "";
+    //     display: block;
+    //     clear: both;
+    // }
+
     .tips {
         margin-top: 10px;
         font-size: 14px;
@@ -913,6 +1041,7 @@ li {
 }
 
 .el-container.layout-cont {
+
     // .header-cont,
     // .breadcrumb {
     //     height: 40px !important;
@@ -920,11 +1049,13 @@ li {
     // }
     .main-cont.el-main {
         background-color: $bg-main;
+
         .menu-total {
             font-size: 22px;
             color: #838383;
             margin-top: 16px;
         }
+
         // background-color: #f0f2f5;
     }
 }
@@ -937,14 +1068,17 @@ li {
             padding: 0 6px;
             border-top: 1px solid $border-color;
             padding: 0;
+
             .el-tabs__header {
                 margin: 0px 0 0 0;
+
                 .el-tabs__item {
                     height: $height-nav-scroll;
                     height: $height-nav-scroll;
                     border: none;
                     border-left: 1px solid $border-color;
                 }
+
                 .el-tabs__item::before {
                     content: "";
                     width: 9px;
@@ -955,12 +1089,15 @@ li {
                     border-radius: 50%;
                     transition: background-color .2s;
                 }
+
                 .el-tabs__item.is-active::before {
                     background-color: #409eff;
                 }
+
                 .el-tabs__item.is-active {
                     background-color: rgba(64, 158, 255, .08);
                 }
+
                 .el-tabs__nav {
                     border: none;
                 }
@@ -973,6 +1110,7 @@ li {
     .el-button.el-button--text.el-button--small {
         position: relative;
     }
+
     // .el-button.el-button--text.el-button--small::after {
     //     content: '';
     //     position: absolute;
@@ -984,9 +1122,9 @@ li {
     // }
     .cell {
         button:last-child::after {
-            content: ''!important;
-            position: absolute!important;
-            width: 0px!important;
+            content: '' !important;
+            position: absolute !important;
+            width: 0px !important;
         }
     }
 }
@@ -1004,6 +1142,7 @@ li {
             border-right: 1.5px solid #ccc;
             margin-left: 6px;
         }
+
         .el-table__placeholder {
             width: 10px;
         }
@@ -1016,6 +1155,7 @@ li {
             border-right: 1.5px solid #ccc;
             margin-left: 6px;
         }
+
         .el-table__placeholder {
             width: 10px;
         }
@@ -1043,6 +1183,7 @@ li {
 
 $headerHigh: 52px;
 $mainHight: 100vh;
+
 .dropdown-group {
     min-width: 100px;
 }
@@ -1054,11 +1195,7 @@ $mainHight: 100vh;
     z-index: 999;
 }
 
-.admin-box {
-    min-height: calc(100vh - 200px);
-    background-color: rgb(255, 255, 255);
-    margin-top: 100px;
-}
+
 
 .el-scrollbar__wrap {
     padding-bottom: 17px;
@@ -1071,16 +1208,19 @@ $mainHight: 100vh;
         text-align: center;
         vertical-align: middle;
         margin-right: 40px;
+
         img {
             vertical-align: middle;
             border: 1px solid #ccc;
             border-radius: 6px;
         }
     }
+
     .header-cont {
         height: $height-header;
         background: #fff;
     }
+
     .main-cont {
         .breadcrumb {
             height: $height-header;
@@ -1089,17 +1229,21 @@ $mainHight: 100vh;
             background-color: #fff;
             padding: 0 24px;
         }
+
         .fl-right {
             // height: $height-header;
             // line-height: $height-header;
         }
+
         &.el-main {
             overflow: auto;
             background: #fff;
         }
+
         height: $mainHight !important;
         overflow: visible;
         position: relative;
+
         .menu-total {
             float: left;
             margin-top: 10px;
@@ -1108,44 +1252,56 @@ $mainHight: 100vh;
             line-height: 30px;
             font-size: 30px;
         }
+
         .aside {
             overflow: auto;
+
             // background: #fff;
             &::-webkit-scrollbar {
                 display: none;
             }
         }
+
         .el-menu-vertical {
             height: calc(100vh - 64px) !important;
             visibility: auto;
+
             &:not(.el-menu--collapse) {
                 width: 220px;
             }
         }
+
         .el-menu--collapse {
             width: 54px;
+
             li {
+
                 .el-tooltip,
                 .el-submenu__title {
                     padding: 0px 15px !important;
                 }
             }
         }
+
         &::-webkit-scrollbar {
             display: none;
         }
+
         &.main-left {
             width: auto !important;
         }
+
         &.main-right {
             .admin-title {
                 float: left;
                 font-size: 16px;
                 vertical-align: middle;
                 margin-left: 20px;
+
                 img {
                     vertical-align: middle;
                 }
+
                 &.collapse {
                     width: 53px;
                 }
@@ -1154,29 +1310,6 @@ $mainHight: 100vh;
     }
 }
 
-.tilte {
-    min-height: 64px;
-    line-height: 64px;
-    background: $bg-aside;
-    text-align: center;
-    .logoimg {
-        width: 30px;
-        height: 30px;
-        vertical-align: middle;
-        background: #fff;
-        border-radius: 50%;
-        padding: 3px;
-    }
-    .tit-text {
-        display: inline-block;
-        color: #fff;
-        font-weight: 600;
-        font-size: 20px;
-        vertical-align: middle;
-        padding-left: 10px;
-    }
-}
-
 .screenfull {
     display: inline-block;
 }
@@ -1193,13 +1326,16 @@ $mainHight: 100vh;
     height: 60px;
     width: 120px;
     text-align: center;
+
     .el-input__inner {
         border: none;
         border-bottom: 1px solid #606266;
     }
+
     .el-dropdown-link {
         cursor: pointer;
     }
+
     .search-icon {
         font-size: $icon-size;
         margin-right: 14px;
@@ -1208,6 +1344,7 @@ $mainHight: 100vh;
         box-sizing: border-box;
         color: #606266;
     }
+
     .dropdown-group {
         min-width: 100px;
     }
@@ -1230,71 +1367,84 @@ $mainHight: 100vh;
     height: 60px;
 }
 
+// dashboard
 .card {
-    background-color: #fff;
+    background-color: $white-bg;
     padding: 20px;
     border-radius: 4px;
     overflow: hidden;
+
     .car-left {
-        height: 68px;
+        height: $height-car;
         width: 70%;
         float: left;
     }
+
     .car-right {
-        height: 68px;
+        height: $height-car;
         width: 29%;
         float: left;
+
         .flow,
         .user-number,
         .feedback {
-            width: 24px;
-            height: 24px;
+            width: $el-icon-mini;
+            height: $el-icon-mini;
             display: inline-block;
             border-radius: 50%;
-            line-height: 24px;
+            line-height: $el-icon-mini;
             text-align: center;
             font-size: 13px;
             margin-right: 5px;
         }
+
         .flow {
             background-color: #fff7e8;
             border-color: #feefd0;
             color: #faad14;
         }
+
         .user-number {
             background-color: #ecf5ff;
             border-color: #d9ecff;
             color: #409eff;
         }
+
         .feedback {
             background-color: #eef9e8;
             border-color: #dcf3d1;
             color: #52c41a;
         }
+
         .car-item {
             text-align: right;
+
             b {
                 display: block;
             }
         }
     }
+
     .card-img {
-        width: 68px;
-        height: 68px;
+        width: $height-car;
+        height: $height-car;
         display: inline-block;
         float: left;
         overflow: hidden;
+
         img {
             width: 100%;
             height: 100%;
             border-radius: 50%;
         }
     }
+
     .text {
-        height: 68px;
+        height: $height-car;
         margin-left: 10px;
         float: left;
         margin-top: 14px;
+
         h4 {
             font-size: 20px;
             color: #262626;
@@ -1303,44 +1453,53 @@ $mainHight: 100vh;
             word-break: break-all;
             text-overflow: ellipsis;
         }
+
         .tips-text {
             color: #8c8c8c;
             margin-top: 8px;
+            .el-icon{
+                margin-right: 8px;
+                display:inline-block;
+            }
         }
     }
 }
 
 .shadow {
     margin: 5px 0;
+
     .grid-content {
-        background-color: #fff;
+        background-color: $white-bg;
         border-radius: 4px;
         text-align: center;
         padding: 10px 0;
         cursor: pointer;
+
         .el-icon {
-            width: 30px;
-            height: 30px;
-            font-size: 30px;
+            width: $el-icon-small;
+            height: $el-icon-small;
+            font-size: $el-icon-small;
             margin-bottom: 8px;
         }
     }
-}::-webkit-scrollbar-track-piece{
-     background-color: #f8f8f8;
- }
+}
 
-::-webkit-scrollbar{
+::-webkit-scrollbar-track-piece {
+    background-color: #f8f8f8;
+}
+
+::-webkit-scrollbar {
     width: 9px;
     height: 9px;
 }
 
-::-webkit-scrollbar-thumb{
+::-webkit-scrollbar-thumb {
     background-color: #dddddd;
-    background-clip:padding-box;
+    background-clip: padding-box;
     min-height: 28px;
     border-radius: 4px;
 }
 
-::-webkit-scrollbar-thumb:hover{
+::-webkit-scrollbar-thumb:hover {
     background-color: #bbb;
 }
diff --git a/web/src/view/dashboard/index.vue b/web/src/view/dashboard/index.vue
index 01b49ec17..3f93b575c 100644
--- a/web/src/view/dashboard/index.vue
+++ b/web/src/view/dashboard/index.vue
@@ -6,7 +6,7 @@
                     <span class="card-img"> <img :src="userInfo.headerImg"  alt="" > </span>   
                     <div class="text"><h4>鏃╁畨锛岀鐞嗗憳锛� 璇峰紑濮嬫偍涓�澶╃殑宸ヤ綔鍚э紒</h4>
                         <p class="tips-text">
-                            <i class="el-icon-sunny"></i>
+                            <i class="el-icon-sunny el-icon"></i>
                             <span>浠婃棩鏅达紝0鈩� - 10鈩冿紝澶╂皵瀵掑喎锛屾敞鎰忔坊鍔犺。鐗┿��</span>
                         </p>
                     </div>
diff --git a/web/src/view/example/simpleUploader/simpleUploader.vue b/web/src/view/example/simpleUploader/simpleUploader.vue
index 79ceea485..dcfb916df 100644
--- a/web/src/view/example/simpleUploader/simpleUploader.vue
+++ b/web/src/view/example/simpleUploader/simpleUploader.vue
@@ -147,7 +147,7 @@ export default {
 .uploader-example {
   width: 880px;
   padding: 15px;
-  margin: 40px auto 0;
+  margin: 115px 15px 20px;
   font-size: 12px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
 }