样式细节调整

web/src/components/customPic/index.vue

@@ -1,8 +1,8 @@
 <template>
   <span class="headerAvatar">
     <template v-if="picType === 'avatar'">
-      <el-avatar v-if="userInfo.headerImg" :size="30" :src="avatar" />
-      <el-avatar v-else :size="30" :src="require('@/assets/noBody.png')" />
+      <el-avatar v-if="userInfo.headerImg" :size="24" :src="avatar" />
+      <el-avatar v-else :size="24" :src="require('@/assets/noBody.png')" />
     </template>
     <template v-if="picType === 'img'">
       <img v-if="userInfo.headerImg" :src="avatar" class="avatar">
@@ -66,6 +66,7 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    margin-right: 8px;
 }
 .file{
     width: 80px;

web/src/style/basics.scss

@@ -1,6 +1,6 @@
 // basice
 $font-size: 14px;
-$icon-size:17px;
+$icon-size:18px;
 $active-color:#1890ff;
 $bg-main:#f0f2f5;
 $border-color: #f4f4f4;
@@ -11,7 +11,7 @@ $el-icon-mini:24px;
 $width-aside:220px;
 $width-hideside-aside:54px;
 $width-mobile-aside:210px;
-$color-aside:rgba(255, 255, 255,.9);
+$color-aside:rgba(255, 255, 255, .9);
 $icon-arrow-size-aside:12px;
 $width-submenu-aside:55px;
 $bg-aside:#191a23;

web/src/style/main.scss

@@ -776,13 +776,13 @@ li {
         .el-input__suffix {
             margin-top: -3px;
         }
-        &.is-disabled{
+        &.is-disabled {
             .el-input__suffix {
                 margin-top: 0px;
             }
         }
     }
-    .el-cascader{
+    .el-cascader {
         .el-input {
             .el-input__suffix {
                 margin-top: 0px;
@@ -984,8 +984,8 @@ li {
         background-color: $bg-main;
         .menu-total {
             cursor: pointer;
-            font-size: 22px;
-            color: #838383;
+            font-size: 24px;
+            color: #000000;
             margin-top: 16px;
         }
         // background-color: #f0f2f5;
@@ -1112,11 +1112,9 @@ $mainHight: 100vh;
 
 .layout-cont {
     .right-box {
-        height: $height-header;
-        line-height: $height-header;
-        text-align: center;
-        vertical-align: middle;
-        margin-right: 10px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
         img {
             vertical-align: middle;
             border: 1px solid #ccc;
@@ -1133,8 +1131,19 @@ $mainHight: 100vh;
             height: $height-header;
             line-height: $height-header;
             display: inline-block;
-            background-color: #fff;
             padding: 0;
+            margin-left: 46px;
+            font-size: 16px;
+            .el-breadcrumb__item {
+                .el-breadcrumb__inner {
+                    color: rgba($color: #000000, $alpha: 0.45);
+                }
+            }
+            .el-breadcrumb__item:nth-last-child(1) {
+                .el-breadcrumb__inner {
+                    color: rgba($color: #000000, $alpha: 0.65);
+                }
+            }
         }
         &.el-main {
             overflow: auto;
@@ -1199,10 +1208,6 @@ $mainHight: 100vh;
     }
 }
 
-.screenfull {
-    display: inline-block;
-}
-
 .header-avatar {
     display: flex;
     justify-content: center;
@@ -1210,10 +1215,8 @@ $mainHight: 100vh;
 }
 
 .search-component {
-    display: inline-block;
+    display: inline-flex;
     overflow: hidden;
-    height: 60px;
-    width: 120px;
     text-align: center;
     .el-input__inner {
         border: none;
@@ -1224,27 +1227,31 @@ $mainHight: 100vh;
     }
     .search-icon {
         font-size: $icon-size;
-        margin-right: 14px;
         display: inline-block;
         vertical-align: middle;
         box-sizing: border-box;
-        color: #606266;
+        color: rgba($color: #000000, $alpha: 0.65);
     }
     .dropdown-group {
         min-width: 100px;
     }
+    .user-box {
+        cursor: pointer;
+        margin-right: 24px;
+        color: rgba($color: #000000, $alpha: 0.65);
+    }
 }
 
 .transition-box {
     overflow: hidden;
     width: 120px;
+    margin-right: 32px;
     text-align: center;
 }
 
 .screenfull {
     overflow: hidden;
-    width: 40px;
-    text-align: center;
+    color: rgba($color: #000000, $alpha: 0.65);
 }
 
 .el-dropdown {
@@ -1419,6 +1426,13 @@ $mainHight: 100vh;
     background-color: #fff;
     border-radius: 2px;
     margin-bottom: 12px;
+    .el-form {
+        .el-form-item+.el-form-item {
+            .el-form-item__label {
+                padding-left: 28px;
+            }
+        }
+    }
 }
 
 .gva-table-box {
@@ -1430,38 +1444,38 @@ $mainHight: 100vh;
 .gva-pagination {
     display: flex;
     justify-content: flex-end;
-    .el-pagination__editor{
-        .el-input__inner{
+    .el-pagination__editor {
+        .el-input__inner {
             height: 32px;
         }
     }
-    .el-pagination__total{
-          line-height: 32px !important;
+    .el-pagination__total {
+        line-height: 32px !important;
     }
-    .btn-prev{
-        padding-right:6px;
+    .btn-prev {
+        padding-right: 6px;
         display: inline-flex;
         justify-content: center;
         align-items: center;
         width: 32px;
         height: 32px;
     }
-    .number{
+    .number {
         display: inline-flex;
         justify-content: center;
         align-items: center;
         width: 32px;
         height: 32px;
     }
-    .btn-quicknext{
+    .btn-quicknext {
         display: inline-flex;
         justify-content: center;
         align-items: center;
         width: 32px;
         height: 32px;
     }
-    .btn-next{
-        padding-left:6px;
+    .btn-next {
+        padding-left: 6px;
         width: 32px;
         height: 32px;
         display: inline-flex;
@@ -1473,20 +1487,18 @@ $mainHight: 100vh;
         border-radius: 2px;
         color: #ffffff !important;
     }
-    .el-pager li.active+li{
+    .el-pager li.active+li {
         border-left: 1px solid #ddd !important;
     }
-    .el-pagination__sizes{
-        .el-input{
+    .el-pagination__sizes {
+        .el-input {
             .el-input__suffix {
                 margin-top: 2px;
             }
         }
     }
-    .el-pagination__jump{
-        .el-pagination__editor{
-
-        }
+    .el-pagination__jump {
+        .el-pagination__editor {}
     }
 }
 
@@ -1504,29 +1516,29 @@ $mainHight: 100vh;
 
 .el-dialog {
     padding: 12px;
-    .el-dialog__body{
+    .el-dialog__body {
         padding: 12px 6px;
     }
-    .el-dialog__header{
-        .el-dialog__title{
+    .el-dialog__header {
+        .el-dialog__title {
             font-size: 14px;
             font-weight: 500;
         }
         padding: 2px 20px 12px 20px;
         border-bottom: 1px solid #E4E4E4;
     }
-    .el-dialog__headerbtn{
-        top:16px;
+    .el-dialog__headerbtn {
+        top: 16px;
     }
-    .el-dialog__footer{
+    .el-dialog__footer {
         margin-top: -12px;
         padding: 0 0 16px 0;
-        .dialog-footer{
-            .el-button{
+        .dialog-footer {
+            .el-button {
                 padding-left: 24px;
                 padding-right: 24px;
             }
-            .el-button+.el-button{
+            .el-button+.el-button {
                 margin-left: 30px;
             }
         }

web/src/style/mobile.scss

@@ -1,89 +1,77 @@
-
 @import '@/style/basics.scss';
-@media screen and (min-width: 320px)and (max-width: 750px){
-        .el-header{
-            padding: 0 $padding-xs;
-        }
-        .layout-cont {
-            .main-cont{
-                .breadcrumb{
-                    padding: 0 $padding-xs;
-                }
+@media screen and (min-width: 320px)and (max-width: 750px) {
+    .el-header {
+        padding: 0 $padding-xs;
+    }
+    .layout-cont {
+        .main-cont {
+            .breadcrumb {
+                padding: 0 $padding-xs;
             }
         }
-        .layout-cont{
-            .right-box{
-                margin-right: $margin-xs;
-            }
+    }
+    .layout-cont {
+        .right-box {
+            margin-right: $margin-xs;
         }
-        .search-component{
-            width: 30px;
+    }
+    .el-main {
+        .admin-box {
+            margin-left: 0;
+            margin-right: 0;
         }
-        .screenfull{
-            width: 26px;
-            text-align: center;
+        .big.admin-box {
+            padding: 0;
         }
-        .el-main{
-            .admin-box{
-                margin-left: 0;
-                margin-right: 0;
-            }
-            .big.admin-box{
-                padding: 0;
-            }
-            .big {
-                .bottom {
-                    .chart-player{
-                        height: auto!important;
-                        margin-bottom: 15px;
-                    }
-                    .todoapp{
-                        background-color: #fff;
-                        padding-bottom: 10px;
-                    }
+        .big {
+            .bottom {
+                .chart-player {
+                    height: auto!important;
+                    margin-bottom: 15px;
+                }
+                .todoapp {
+                    background-color: #fff;
+                    padding-bottom: 10px;
                 }
             }
         }
-
-        .card .car-left,
-        .card .car-right{
+    }
+    .card .car-left,
+    .card .car-right {
+        width: 100%;
+        height: 100%;
+    }
+    .card {
+        padding-left: $padding-xs;
+        padding-right: $padding-xs;
+    }
+    .card {
+        .text {
             width: 100%;
-            height: 100%;
-        }
-        .card{
-            padding-left: $padding-xs;
-            padding-right: $padding-xs;
-
-        }
-        .card {
-            .text{
-                width: 100%;
-                h4{
-                    white-space: break-spaces;
-                }
+            h4 {
+                white-space: break-spaces;
             }
         }
-        .shadow{
-            margin-left: 4px;
-            margin-right: 4px;
-            .grid-content{
-                margin-bottom: 10px;
-                padding: 0;
-            }
+    }
+    .shadow {
+        margin-left: 4px;
+        margin-right: 4px;
+        .grid-content {
+            margin-bottom: 10px;
+            padding: 0;
         }
-        .el-dialog{
-            width: 90%;
+    }
+    .el-dialog {
+        width: 90%;
+    }
+    .el-transfer {
+        .el-transfer-panel {
+            width: 40%;
+            display: inline-block;
         }
-        .el-transfer{
-            .el-transfer-panel{
-                width: 40%;
-                display: inline-block;
-            }
-            .el-transfer__buttons{
-                padding: 0 5px;
-                display: inline-block;
-            }
-
+        .el-transfer__buttons {
+            padding: 0 5px;
+            display: inline-block;
         }
-
+    }
 }

web/src/view/dashboard/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="page">
     <div class="gva-card-box">
-      <div class="gva-card dashbord1">
-        <div class="dashbord1-left">
-          <div class="dashbord1-left-title">早安，管理员，请开始一天的工作吧</div>
-          <div class="dashbord1-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
-          <div class="dashbord1-left-rows">
-            <el-row :gutter="20">
+      <div class="gva-card gva-top-card">
+        <div class="gva-top-card-left">
+          <div class="gva-top-card-left-title">早安，管理员，请开始一天的工作吧</div>
+          <div class="gva-top-card-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
+          <div class="gva-top-card-left-rows">
+            <el-row>
               <el-col :span="8" :xs="24" :sm="8">
                 <div class="flex-center">
                   <i class="el-icon-sort icon" />今日流量 (1231231)
@@ -24,30 +24,26 @@
               </el-col>
             </el-row>
           </div>
-        </div>
-        <img src="@/assets/dashbord.png" class="dashbord1-right" alt>
-      </div>
-    </div>
-    <div class="gva-card-box">
-      <div class="gva-card dashbord2">
-        <div>
-          <div class="dashbord2-item">
-            使用教学：
-            <a
-              style="color:#409EFF"
-              target="view_window"
-              href="https://www.bilibili.com/video/BV1Rg411u7xH/"
-            >https://www.bilibili.com/video/BV1Rg411u7xH</a>
-          </div>
-          <div class="dashbord2-item">
-            插件仓库：
-            <a
-              style="color:#409EFF"
-              target="view_window"
-              href="https://github.com/flipped-aurora/gva-plugins"
-            >https://github.com/flipped-aurora/gva-plugins</a>
+          <div>
+            <div class="gva-top-card-left-item">
+              使用教学：
+              <a
+                style="color:#409EFF"
+                target="view_window"
+                href="https://www.bilibili.com/video/BV1Rg411u7xH/"
+              >https://www.bilibili.com/video/BV1Rg411u7xH</a>
+            </div>
+            <div class="gva-top-card-left-item">
+              插件仓库：
+              <a
+                style="color:#409EFF"
+                target="view_window"
+                href="https://github.com/flipped-aurora/gva-plugins"
+              >https://github.com/flipped-aurora/gva-plugins</a>
+            </div>
           </div>
         </div>
+        <img src="@/assets/dashbord.png" class="gva-top-card-right" alt>
       </div>
     </div>
     <div class="gva-card-box">
@@ -183,8 +179,8 @@ export default {
         overflow: hidden;
         box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.03);
     }
-    .dashbord1 {
-        height: 196px;
+    .gva-top-card {
+        height: 260px;
         @include flex-center;
         justify-content: space-between;
         color: #777;
@@ -192,7 +188,6 @@ export default {
           height: 100%;
           display: flex;
           flex-direction: column;
-          justify-content: space-between;
             &-title {
                 font-size: 22px;
                 color: #343844;
@@ -200,13 +195,21 @@ export default {
             &-dot {
                 font-size: 14px;
                 color: #6B7687;
+                margin-top: 24px;
             }
             &-rows {
                 // margin-top: 15px;
+                margin-top: 18px;
                 color: #6B7687;
                 width: 600px;
                 align-items: center;
             }
+            &-item{
+              +.gva-top-card-left-item{
+                margin-top: 24px;
+              }
+              margin-top: 14px;
+            }
         }
         &-right {
             height: 600px;
@@ -222,16 +225,6 @@ export default {
           padding-bottom: 20px;
           border-bottom: 1px solid #e8e8e8;
         }
-    .dashbord2 {
-        @include flex-center;
-        justify-content: flex-start;
-        &-item {
-            &+.dashbord2-item{
-              margin-top:24px;
-            }
-            line-height: 25px;
-        }
-    }
     .quick-entrance-title {
         height: 30px;
         font-size: 22px;
@@ -284,7 +277,7 @@ export default {
 @media (max-width: 750px) {
     .gva-card {
         padding: 20px 10px !important;
-        .dashbord1 {
+        .gva-top-card {
             height: auto;
             &-left {
                 &-title {
@@ -299,7 +292,7 @@ export default {
                 display: none;
             }
         }
-        .dashbord2 {
+        .gva-middle-card {
             &-item {
                 line-height: 20px;
             }

web/src/view/layout/index.vue

@@ -21,14 +21,14 @@
               <el-col>
                 <el-header class="header-cont">
                   <el-row class="pd-0">
-                    <el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1">
+                    <el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1" style="z-index:100">
                       <div class="menu-total" @click="totalCollapse">
                         <i v-if="isCollapse" class="el-icon-s-unfold" />
                         <i v-else class="el-icon-s-fold" />
                       </div>
                     </el-col>
-                    <el-col :xs="10" :lg="14" :md="14" :sm="9" :xl="14">
-                      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
+                    <el-col :xs="10" :lg="14" :md="14" :sm="9" :xl="14" :pull="1">
+                      <el-breadcrumb class="breadcrumb">
                         <el-breadcrumb-item
                           v-for="item in matched.slice(1,matched.length)"
                           :key="item.path"
@@ -36,7 +36,7 @@
                       </el-breadcrumb>
                     </el-col>
                     <el-col :xs="12" :lg="9" :md="9" :sm="14" :xl="9">
-                      <div class="fl-right right-box">
+                      <div class="right-box">
                         <Search />
                         <Screenfull class="screenfull" :style="{cursor:'pointer'}" />
                         <el-dropdown>

web/src/view/layout/screenfull/index.vue

@@ -1,38 +1,11 @@
 <template>
   <div @click="click">
-    <!-- <svg
-            t="1508738709248"
-            class="screenfull-svg"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2069"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            width="32"
-            height="32"
-            v-if="isShow"
-           >
-                <path
-                    d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
-                    p-id="2070"/>
-                <path
-                    d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
-                    p-id="2071"/>
-                <path
-                    d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
-                    p-id="2072"/>
-                <path
-                    d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
-                    p-id="2073"/>
-        </svg> -->
     <svg
       v-if="isShow"
       t="1590133227479"
       class="screenfull-svg"
       viewBox="0 0 1024 1024"
       version="1.1"
-      width="20"
-      height="20"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path id="svg_1" d="m928.512,959.744a32,32 0 0 1 -32,-32l0,-256a32,32 0 0 1 64,0l0,256a32,32 0 0 1 -32,32z" />
@@ -63,8 +36,6 @@
       xmlns="http://www.w3.org/2000/svg"
       p-id="1862"
       xmlns:xlink="http://www.w3.org/1999/xlink"
-      width="20"
-      height="20"
     >
       <path d="M928.512 959.744a32 32 0 0 1-32-32v-256a32 32 0 0 1 64 0v256a32 32 0 0 1-32 32z" fill="" p-id="1863" />
       <path
@@ -135,13 +106,13 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .screenfull-svg {
-  width: 17px;
-  height: 17px;
+  width: 16px;
+  height: 16px;
   cursor: pointer;
-  fill: #606266;
   vertical-align: middle;
-  margin-right: 15px;
+  margin-right: 32px;
+  fill: rgba(0, 0, 0, 0.45);
 }
 </style>

web/src/view/layout/search/search.vue

@@ -20,13 +20,16 @@
       </div>
     </transition>
     <div
-      :style="{display:'inline-block',float:'right',width:'31px',textAlign:'left',fontSize:'16px',paddingTop:'2px'}"
+      v-if="btnShow"
       class="user-box"
     >
-      <i :style="{cursor:'pointer',paddingLeft:'1px'}" class="el-icon-refresh reload" :class="[reload ? 'reloading' : '']" @click="handleReload" />
+      <i class="el-icon-refresh reload" :class="[reload ? 'reloading' : '']" @click="handleReload" />
     </div>
-    <div :style="{display:'inline-block',float:'right'}" class="user-box">
-      <i :style="{cursor:'pointer'}" class="el-icon-search search-icon" @click="showSearch()" />
+    <div
+      v-if="btnShow"
+      class="user-box"
+    >
+      <i class="el-icon-search search-icon" @click="showSearch()" />
     </div>
   </div>
 </template>
@@ -41,6 +44,7 @@ export default {
     return {
       value: '',
       show: false,
+      btnShow: true,
       reload: false
     }
   },
@@ -55,8 +59,12 @@ export default {
     },
     hiddenSearch() {
       this.show = false
+      setTimeout(() => {
+        this.btnShow = true
+      }, 500)
     },
     showSearch() {
+      this.btnShow = false
       this.show = true
       this.$nextTick(() => {
         this.$refs['search-input'].focus()
@@ -74,10 +82,7 @@ export default {
 </script>
 <style scoped lang="scss">
 .reload{
-  font-size: 17px;
-  &:hover{
-    transform: scale(1.02)
-  }
+  font-size: 18px;
 }
 
 .reloading{