深浅切换

src/main/vue/src/components/operation/RoomInfo.vue

@@ -178,6 +178,7 @@ export default {
     border-radius: 4px;
     // box-sizing: border-box;
     cursor: pointer;
+    box-sizing: border-box;
     .room-top {
         border-radius: 4px 4px 0 0;
         display: flex;
@@ -285,9 +286,9 @@ export default {
         // width: 110px;
         // height: 108px;
         // background: rgba(93, 125, 255, 0.3);
-        box-shadow: 0px 2px 6px 0px rgba(255, 255, 255, 0.4);
+        box-shadow: 0px 0px 4px 0px #ffffff;
         border-radius: 4px;
-        border: 2px solid #ffffff;
+        // border: 2px solid #ffffff;
     }
 
     &.active {

src/main/vue/src/components/roomStatus/StatItem.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="stat-item">
         <div class="content">
-            <div class="value">{{ value }}</div>
+            <div class="value" :class="{ value1: type === 'lanling' }">{{ value }}</div>
             <div class="label">{{ label }}</div>
         </div>
         <img :src="require(`../../assets/${icon}.png`)" class="icon" />
@@ -9,16 +9,18 @@
 </template>
 <script>
 export default {
-    props: ['icon', 'label', 'value']
+    props: ['icon', 'label', 'value', 'type']
 };
 </script>
 <style lang="less" scoped>
 .stat-item {
-    display: flex;
+    display: inline-flex;
     align-items: flex-start;
+    justify-content: space-between;
     padding: 20px 20px 0;
-    // height: 110px;
     position: relative;
+    width: 100%;
+    box-sizing: border-box;
     &::after {
         content: '';
         position: absolute;
@@ -52,6 +54,10 @@ export default {
             font-weight: bold;
             color: #2efff0;
             line-height: 30px;
+
+            &.value1 {
+                color: #8d85ff;
+            }
         }
         .label {
             // font-size: 12px;
@@ -70,17 +76,17 @@ export default {
 }
 </style>
 <style lang="less">
-@media screen and (max-width: 1400px) {
-    .stat-item {
-        //  width: 150px !important;
-        width: 187px;
-    }
-}
-@media screen and (min-width: 1400px) {
-    .stat-item {
-        // width: 200px !important;
-        flex-basis: 0;
-        flex-grow: 1;
-    }
-}
+// @media screen and (max-width: 1400px) {
+//     .stat-item {
+//         //  width: 150px !important;
+//         width: 187px;
+//     }
+// }
+// @media screen and (min-width: 1400px) {
+//     .stat-item {
+//         // width: 200px !important;
+//         flex-basis: 0;
+//         flex-grow: 1;
+//     }
+// }
 </style>

src/main/vue/src/styles/app.less

@@ -81,20 +81,17 @@ li {
         width: 200px;
     }
 }
-.list-view {
-    background: #080C27 !important;
-}
-.el-message-box{
+.el-message-box {
     background: #242744 !important;
     border: 0 !important;
 }
-.el-message-box__message{
+.el-message-box__message {
     .el-button {
         background: #242744 !important;
         border: 0 !important;
     }
 }
-.el-message-box__title{
+.el-message-box__title {
     color: #fff !important;
 }
 .filter-item {
@@ -115,84 +112,84 @@ li {
         border: 1px solid #ffffff;
     }
 }
-.el-tabs__content{
+.el-tabs__content {
     background: #242744 !important;
 }
 .el-tabs__header {
     background: #242744 !important;
 }
 .el-dialog__title {
-     color: #fff !important;
- }
-.el-dialog__header  {
-   background: #242744 !important;
-    span{
+    color: #fff !important;
+}
+.el-dialog__header {
+    background: #242744 !important;
+    span {
         color: #fff !important;
     }
 }
-.el-dialog{
+.el-dialog {
     border-radius: 10px !important;
 }
-.el-dialog__body{
-   background: #242744 !important;
+.el-dialog__body {
+    background: #242744 !important;
 }
-.el-dialog__footer{
-   background: #242744 !important;
+.el-dialog__footer {
+    background: #242744 !important;
 }
 .bed-info .noLive .active {
-     border: 1px solid #4dcc6f !important;
+    border: 1px solid #4dcc6f !important;
 }
-.el-switch.is-checked .el-switch__core{
+.el-switch.is-checked .el-switch__core {
     border: 1px solid #4dcc6f !important;
-    background-color:#4dcc6f !important;
+    background-color: #4dcc6f !important;
 }
-.el-radio__input.is-checked+.el-radio__label{
+.el-radio__input.is-checked + .el-radio__label {
     color: #4dcc6f !important;
 }
-.el-radio__input.is-checked .el-radio__inner{
+.el-radio__input.is-checked .el-radio__inner {
     border: 1px solid #4dcc6f !important;
-    background:#4dcc6f !important;
+    background: #4dcc6f !important;
 }
-.el-tree{
+.el-tree {
     background: #242744 !important;
     color: #fff !important;
 }
 .el-date-table td.start-date span,
-.el-date-table td.end-date span{
-    background-color:#4dcc6f !important;
+.el-date-table td.end-date span {
+    background-color: #4dcc6f !important;
 }
-.el-date-table td.today span{
+.el-date-table td.today span {
     color: #4dcc6f !important;
 }
-.el-range-editor.is-active{
+.el-range-editor.is-active {
     border-color: #4dcc6f !important;
 }
-.el-select .el-input.is-focus .el-input__inner{
+.el-select .el-input.is-focus .el-input__inner {
     border-color: #4dcc6f !important;
 }
-.el-select-dropdown__item.selected{
+.el-select-dropdown__item.selected {
     color: #4dcc6f !important;
 }
-.el-range-separator{
+.el-range-separator {
     color: #ffffff !important;
     // line-height: 29px !important;
 }
 .el-tree-node__content:hover {
-    background: #080C27 !important;
+    background: #080c27 !important;
 }
-.el-checkbox__input.is-checked+.el-checkbox__label{
+.el-checkbox__input.is-checked + .el-checkbox__label {
     color: #4dcc6f !important;
 }
-.el-checkbox__input.is-checked .el-checkbox__inner{
+.el-checkbox__input.is-checked .el-checkbox__inner {
     background: #4dcc6f !important;
     border: 1px solid #4dcc6f !important;
 }
-.el-checkbox__input.is-indeterminate .el-checkbox__inner{
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
     background: #4dcc6f !important;
     border: 1px solid #4dcc6f !important;
 }
-.el-tabs__nav-wrap .is-top{
-    &.is-active{
+.el-tabs__nav-wrap .is-top {
+    &.is-active {
         // background: #4dcc6f !important;
         color: #4dcc6f !important;
     }
@@ -200,59 +197,59 @@ li {
 .el-tabs__item:hover {
     color: #4dcc6f !important;
 }
-.el-form-item__content{
+.el-form-item__content {
     color: #fff;
 }
-.el-table tbody tr:hover>td {
-    background: #080C27 !important;
+.el-table tbody tr:hover > td {
+    background: #080c27 !important;
 }
-.el-table{
-    background: #242744 !important;
-    .el-table__header{
-        background: #242744 !important;
+.el-table {
+    background: #242744;
+    .el-table__header {
+        background: #242744;
     }
 }
-.el-table thead.is-group th{
+.el-table thead.is-group th {
     background: #242744 !important;
 }
-.sum-row{
+.sum-row {
     background: #242744 !important;
 }
-.el-textarea__inner{
+.el-textarea__inner {
     background-color: transparent !important;
     // background: rgba(255, 255, 255, 0.12) !important;
 }
-.el-input-number__decrease{
-     background-color: transparent !important;
+.el-input-number__decrease {
+    background-color: transparent !important;
     //  background: rgba(255, 255, 255, 0.12) !important;
 }
-.el-form-item__label{
+.el-form-item__label {
     color: #fff !important;
 }
-.el-input-number__increase{
-     background-color: transparent !important;
+.el-input-number__increase {
+    background-color: transparent !important;
     //  background: rgba(255, 255, 255, 0.12) !important;
 }
-.el-textarea .el-input__count{
+.el-textarea .el-input__count {
     background: #242744 !important;
 }
-.filter-btn{
+.filter-btn {
     min-width: 80px;
     height: 36px;
     background: rgba(57, 181, 74, 0.12) !important;
     border-radius: 18px !important;
     color: #4dcc6f !important;
     border: 1px solid #4dcc6f !important;
-    &.btn2{
+    &.btn2 {
         color: #ff5d5d !important;
         border: 1px solid #ff5d5d !important;
     }
-    &.btn3{
+    &.btn3 {
         color: #ccc !important;
         border: 1px solid #ccc !important;
     }
 }
-.filters-container{
+.filters-container {
     .el-button {
         min-width: 80px;
         height: 36px;
@@ -272,52 +269,52 @@ li {
         }
     }
 }
-.el-dialog__footer{
-      .el-button {
-          min-width: 80px;
-          height: 36px;
-          background: rgba(57, 181, 74, 0.12) !important;
-          border-radius: 18px !important;
-          color: #4dcc6f !important;
-          border: 1px solid #4dcc6f !important;
-          &.el-button--danger{
+.el-dialog__footer {
+    .el-button {
+        min-width: 80px;
+        height: 36px;
+        background: rgba(57, 181, 74, 0.12) !important;
+        border-radius: 18px !important;
+        color: #4dcc6f !important;
+        border: 1px solid #4dcc6f !important;
+        &.el-button--danger {
             color: #ff5d5d !important;
             border: 1px solid #ff5d5d !important;
-          }
-          &.el-button--default{
+        }
+        &.el-button--default {
             color: #ccc !important;
             border: 1px solid #ccc !important;
-          }
-      }
+        }
+    }
 }
 .el-input__inner:focus {
     border-color: #4dcc6f !important;
 }
 .el-form-item__content {
     .el-button {
-          min-width: 80px;
-          height: 36px;
-          background: rgba(57, 181, 74, 0.12) !important;
-          border-radius: 18px !important;
-          color: #4dcc6f !important;
-          border: 1px solid #4dcc6f !important;
-             &.el-button--danger {
-                 color: #ff5d5d !important;
-                 border: 1px solid #ff5d5d !important;
-             }
-             &.el-button--default {
-                 color: #ccc !important;
-                 border: 1px solid #ccc !important;
-             }
+        min-width: 80px;
+        height: 36px;
+        background: rgba(57, 181, 74, 0.12) !important;
+        border-radius: 18px !important;
+        color: #4dcc6f !important;
+        border: 1px solid #4dcc6f !important;
+        &.el-button--danger {
+            color: #ff5d5d !important;
+            border: 1px solid #ff5d5d !important;
+        }
+        &.el-button--default {
+            color: #ccc !important;
+            border: 1px solid #ccc !important;
+        }
     }
 }
 .el-message-box__status.el-icon-warning {
     color: #4dcc6f !important;
 }
-.el-message-box__content{
+.el-message-box__content {
     color: #fff !important;
 }
-.el-message-box__btns{
+.el-message-box__btns {
     .el-button {
         min-width: 50px;
         height: 36px;
@@ -337,27 +334,27 @@ li {
         }
     }
 }
-.box-card .clearfix .header-name[data-v-2985affd]::before{
+.box-card .clearfix .header-name[data-v-2985affd]::before {
     background: #fff !important;
 }
-.el-card{
+.el-card {
     background-color: #242744 !important;
-    .header-name{
+    .header-name {
         color: #fff !important;
     }
 }
-.el-card__header{
+.el-card__header {
     margin: 0 20px !important;
-    border-bottom:1px solid #080C27 !important;
+    border-bottom: 1px solid #080c27 !important;
 }
 .sum-row .col {
     background: #242744 !important;
     color: #fff !important;
 }
-.table-summary{
+.table-summary {
     color: #fff !important;
 }
-.link{
+.link {
     color: #4dcc6f !important;
 }
 // .el-table--group::after,
@@ -369,17 +366,17 @@ li {
 // .el-table__fixed-right::before{
 //     background: #242744 !important;
 // }
-.el-input__inner{
+.el-input__inner {
     background-color: transparent !important;
     color: #fff !important;
 }
-.el-input-number__decrease{
+.el-input-number__decrease {
     color: #fff !important;
 }
-.el-input-number__increase{
+.el-input-number__increase {
     color: #fff !important;
 }
- .menu {
+.menu {
     min-width: 220px !important;
     height: 36px;
     border-radius: 18px;
@@ -387,89 +384,89 @@ li {
     box-sizing: border-box;
     background: rgba(255, 255, 255, 0.12);
     margin: 0 10px 10px 0;
-    &.menu2{
+    &.menu2 {
         margin: 0;
     }
-    &.menu3{
+    &.menu3 {
         min-width: 440px;
     }
-     .el-radio-button__inner {
-         background-color: transparent;
-         color: #aaacad;
-         width: 108px !important;
-         height: 36px;
-         line-height: 18px;
-         border: 0;
-         font-weight: normal;
-     }
-     .el-radio-button__orig-radio:checked+.el-radio-button__inner {
-         color: #fff;
-         background: #4dcc6f;
-         border-radius: 18px;
-         width: 108px !important;
+    .el-radio-button__inner {
+        background-color: transparent;
+        color: #aaacad;
+        width: 108px !important;
+        height: 36px;
+        line-height: 18px;
+        border: 0;
+        font-weight: normal;
+    }
+    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+        color: #fff;
+        background: #4dcc6f;
+        border-radius: 18px;
+        width: 108px !important;
         //  border-color: #fff;
-         font-weight: bold;
-         box-shadow: 0 0 0 0 #000000;
-     }
-     .el-radio-button {
-         &:last-child {
-             .el-radio-button__inner {
-                 border: 0;
-             }
-         }
-         &:first-child {
-             .el-radio-button__inner {
-                 border: 0;
-             }
-         }
-     }
- }
+        font-weight: bold;
+        box-shadow: 0 0 0 0 #000000;
+    }
+    .el-radio-button {
+        &:last-child {
+            .el-radio-button__inner {
+                border: 0;
+            }
+        }
+        &:first-child {
+            .el-radio-button__inner {
+                border: 0;
+            }
+        }
+    }
+}
 //  .el-range-separator{
 //      margin-bottom: 2px !important;
 //  }
-.el-button--text{
+.el-button--text {
     color: #4dcc6f !important;
 }
- .menu1 {
+.menu1 {
     min-width: 236px;
     height: 28px;
     box-sizing: border-box;
     border-radius: 18px;
     border: 1px solid #4dcc6f;
     background: rgba(255, 255, 255, 0.12);
-    &.card-menu{
+    &.card-menu {
         min-width: 170px;
     }
-     .el-radio-button__inner {
-         background-color: transparent;
-         width: 64px;
-         height: 28px;
-         color: #4DCC6F;
-         border: 0;
-         border-right: 1px solid #4dcc6f !important;
-         font-weight: normal;
-     }
-     .el-radio-button__orig-radio:checked+.el-radio-button__inner {
-         color: #fff;
-         background: #4dcc6f;
-         font-weight: bold;
-         box-shadow: 0 0 0 0 #000000;
-     }
-     .el-radio-button {
-         &:last-child {
-             .el-radio-button__inner {
+    .el-radio-button__inner {
+        background-color: transparent;
+        width: 64px;
+        height: 28px;
+        color: #4dcc6f;
+        border: 0;
+        border-right: 1px solid #4dcc6f !important;
+        font-weight: normal;
+    }
+    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+        color: #fff;
+        background: #4dcc6f;
+        font-weight: bold;
+        box-shadow: 0 0 0 0 #000000;
+    }
+    .el-radio-button {
+        &:last-child {
+            .el-radio-button__inner {
                 border: 0;
                 border-radius: 0 18px 18px 0;
-             }
-         }
-         &:first-child {
-             .el-radio-button__inner {
+            }
+        }
+        &:first-child {
+            .el-radio-button__inner {
                 border: 0;
                 border-radius: 18px 0 0 18px;
-             }
-         }
-     }
- }
+            }
+        }
+    }
+}
 .table-column-filter {
     cursor: pointer;
     color: #409eff;
@@ -479,16 +476,16 @@ li {
     display: flex;
     align-items: center;
 }
-.el-pagination.is-background .el-pager li:not(.disabled).active{
-    background-color:#4dcc6f !important;
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+    background-color: #4dcc6f !important;
 }
-.el-radio-button__inner:hover{
+.el-radio-button__inner:hover {
     color: #fff !important;
 }
 .table-column-filter-wrapper {
     padding: 10px 20px;
 }
-.filters-container{
+.filters-container {
     background: #242744 !important;
     padding: 20px 0 0 10px;
     border-radius: 10px 10px 0 0;
@@ -560,7 +557,7 @@ li {
     color: #fff;
 }
 .list-view {
-    background: #242744;
+    background: #080c27;
     border-radius: 5px;
     padding: 20px 20px 16px 20px;
     // margin: 20px;
@@ -589,48 +586,48 @@ li {
     background: #242744 !important;
     color: black !important;
 }
-.el-table__footer-wrapper tbody td{
+.el-table__footer-wrapper tbody td {
     background-color: #242744 !important;
 }
-.el-table::before{
+.el-table::before {
     height: 0 !important;
 }
 .el-table__fixed::before,
-.el-table__fixed-right::before{
+.el-table__fixed-right::before {
     height: 0 !important;
 }
-.el-table__footer-wrapper td{
+.el-table__footer-wrapper td {
     border-bottom: 1px solid #2b2e3e !important;
 }
-.el-table__fixed-footer-wrapper tbody td{
+.el-table__fixed-footer-wrapper tbody td {
     background-color: #242744 !important;
 }
 .table-cell {
     color: black !important;
     border-right: none !important;
 }
-.el-table .floor-row .cell{
+.el-table .floor-row .cell {
     color: #fff !important;
 }
-.el-table tr{
-  background-color: #242744 !important;
+.el-table tr {
+    background-color: #242744 !important;
 }
-.el-table__body tr.hover-row>td  {
-    background: #080C27 !important;
+.el-table__body tr.hover-row > td {
+    background: #080c27 !important;
 }
-.el-table th{
+.el-table th {
     background-color: #242744 !important;
 }
 .el-table td,
 .el-table th.is-leaf {
     border-bottom: 1px solid #2b2e3e !important;
- }
-.el-table__fixed-right-patch{
+}
+.el-table__fixed-right-patch {
     background-color: #242744 !important;
 }
 .el-table th.is-leaf {
     border-bottom: 1px solid #2b2e3e !important;
- }
+}
 .top-form {
     .el-form-item--small .el-form-item__label {
         line-height: 16px;
@@ -736,3 +733,176 @@ li {
         color: #409eff !important;
     }
 }
+
+.lightBg {
+    .el-tabs__nav-scroll {
+        background-color: #f2f4f5 !important;
+    }
+    .el-tabs__nav .is-top {
+        background-color: #fff !important;
+    }
+    .main-contianer {
+        background-color: #f2f4f5 !important;
+    }
+    .top-stat {
+        background-color: #fff !important;
+        .name {
+            color: #000000 !important;
+        }
+        .stat-item .content .label {
+            color: #000000 !important;
+        }
+    }
+    .floor-list {
+        background-color: #fff !important;
+        .floor-title {
+            color: #000 !important;
+            &::before {
+                background-color: #4dcc6f !important;
+            }
+        }
+        .search-content {
+            background-color: #fff !important;
+            border-bottom-color: #f5f7fa;
+        }
+
+        .search-top .select .el-input__inner {
+            background-color: #f2f4f5 !important;
+        }
+        .contract-filter {
+            &:hover {
+                border-color: #4dcc6f;
+                background-color: #4dcc6f;
+            }
+        }
+
+        .Arrears {
+            &:hover {
+                background-color: #ff5d5d;
+            }
+        }
+        .menu {
+            height: 38px;
+            background-color: #f5f7fa;
+            .el-radio-button {
+                .el-radio-button__inner {
+                    .radio-item {
+                        &:hover {
+                            color: #4dcc6f;
+                        }
+                    }
+                    &:hover {
+                        color: #4dcc6f;
+                    }
+                }
+                &:hover {
+                    color: #4dcc6f;
+                }
+                &.is-active {
+                    .el-radio-button__inner {
+                        .radio-item {
+                            &:hover {
+                                color: #fff;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .room {
+            background-color: #fff;
+            &:hover {
+                // width: 110px;
+                // height: 108px;
+                // background: rgba(93, 125, 255, 0.3);
+                // box-shadow: 0px 2px 6px 0px rgba(255, 255, 255, 0.4);
+                border-radius: 4px;
+                box-shadow: 0px 0px 6px 0px #4dcc6f;
+            }
+        }
+    }
+
+    .list-view {
+        background-color: #f2f4f5;
+    }
+
+    .el-table {
+        background: #ffffff;
+        .el-table__header {
+            background: #ffffff;
+        }
+    }
+
+    .el-table .floor-row .cell {
+        color: #000;
+    }
+    .el-table tr {
+        background-color: #ffffff !important;
+    }
+    .el-table__body tr.hover-row > td {
+        background: #f7931d22 !important;
+    }
+    .el-table th {
+        background-color: #ffffff !important;
+    }
+    .el-table td,
+    .el-table th.is-leaf {
+        border-bottom: 1px solid #f2f4f5 !important;
+    }
+    .el-table__fixed-right-patch {
+        background-color: #f2f4f5 !important;
+    }
+    .el-table th.is-leaf {
+        border-bottom: 1px solid #f2f4f5 !important;
+    }
+
+    .el-table .cell {
+        color: #000 !important;
+    }
+
+    .el-table__footer-wrapper tbody td {
+        background-color: #ffffff !important;
+    }
+    .el-table__footer-wrapper td {
+        border-bottom: 1px solid #f2f4f5 !important;
+    }
+    .el-table__fixed-footer-wrapper tbody td {
+        background-color: #ffffff !important;
+    }
+    .filters-container {
+        background: #ffffff !important;
+        .el-input .el-input__inner {
+            background-color: #f2f4f5 !important;
+        }
+    }
+    .edit-view {
+        background-color: #ffffff;
+        .el-form-item__label {
+            color: #000 !important;
+        }
+        .el-input__inner {
+            border: 1px solid #f2f4f5;
+            color: #000 !important;
+        }
+        .el-button {
+            background-color: transparent !important;
+        }
+    }
+    .el-tree {
+        background-color: #fff !important;
+        color: #000 !important;
+    }
+    .el-tree-node__content:hover {
+        background: #f2f4f5 !important;
+        .el-button {
+            border-width: 0;
+        }
+    }
+    .main-contianer .menu-tabs {
+        background: #ffffff !important;
+    }
+    .menu-tabs .el-tabs__header {
+        background: #ffffff !important;
+    }
+}

src/main/vue/src/views/Admin.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-container id="app">
+    <el-container id="app" :class="{ lightBg: !darkColor }">
         <el-header class="header" height="90px">
             <!-- <div class="header-btn" @click="collapse=!collapse">
                     <div :style="{transform: collapse ? 'rotate(90deg)' : ''}">
@@ -81,6 +81,8 @@
                 </el-popover>
             </template>
 
+            <el-switch v-model="darkColor" active-text="深色模式" inactive-text="浅色模式"> </el-switch>
+
             <el-dropdown trigger="click" @command="onCommand" class="icon">
                 <span><i class="fas fa-power-off"></i></span>
                 <el-dropdown-menu slot="dropdown">
@@ -240,7 +242,8 @@ export default {
                 'ContractList',
                 'CustomerList',
                 'RealTimeFee'
-            ]
+            ],
+            darkColor: true
         };
     },
     computed: {
@@ -536,7 +539,7 @@ export default {
 /deep/ .el-tabs__nav-scroll {
     padding-top: 10px;
     padding-left: 20px;
-    background: #080c27 !important;
+    background: #080c27;
 }
 /deep/ .el-tabs__nav .is-top {
     border: 0;
@@ -759,6 +762,12 @@ export default {
         font-size: 12px;
     }
 }
+/deep/.el-switch__label {
+    color: #fff;
+}
+/deep/.el-switch__label.is-active {
+    color: #4dcc6f;
+}
 </style>
 <style lang="less">
 .user-menu {

src/main/vue/src/views/Operation/RoomStatus.vue

@@ -1,28 +1,36 @@
 <template>
     <div class="container room-status" ref="roomStatus" @scroll="roomScroll">
         <div class="top-stat" v-loading="statLoading" ref="menuList">
-            <div style="display: flex;" v-if="statData.bailing">
+            <div style="display: flex;width:100%" v-if="statData.bailing">
                 <div>
                     <img src="../../assets/shouye-bailing-icon@3x.png" class="icon-title" />
                     <div class="name">白领</div>
                 </div>
-                <div class="row lanling">
-                    <stat-item
-                        v-for="(item, i) in statData.bailing"
-                        :key="i"
-                        :icon="'pc_home_icon_bailing_0' + (i + 1)"
-                        :label="item[0]"
-                        :value="item[1]"
-                    >
-                    </stat-item>
-                </div>
+                <el-row class="row bailing">
+                    <el-col v-for="(item, i) in statData.bailing" :key="i" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
+                        <stat-item :icon="'pc_home_icon_bailing_0' + (i + 1)" :label="item[0]" :value="item[1]">
+                        </stat-item>
+                    </el-col>
+                </el-row>
             </div>
-            <div style="display: flex;" v-if="statData.lanling">
+            <div style="display: flex;width:100%" v-if="statData.lanling">
                 <div>
                     <img src="../../assets/shouye-lanling-icon@3x.png" class="icon-title" />
                     <div class="name">蓝领</div>
                 </div>
-                <div class="row bailing">
+
+                <el-row class="row lanling">
+                    <el-col v-for="(item, i) in statData.lanling" :key="i" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
+                        <stat-item
+                            type="lanling"
+                            :icon="'pc_home_icon_lanling_0' + (i + 1)"
+                            :label="item[0]"
+                            :value="item[1]"
+                        >
+                        </stat-item>
+                    </el-col>
+                </el-row>
+                <!-- <div class="row bailing">
                     <stat-item
                         v-for="(item, i) in statData.lanling"
                         :key="i"
@@ -31,7 +39,7 @@
                         :value="item[1]"
                     >
                     </stat-item>
-                </div>
+                </div> -->
             </div>
             <div class="row bailin"></div>
         </div>
@@ -1333,7 +1341,7 @@ export default {
 
 .goTop {
     position: fixed;
-    border-bottom: 1px solid;
+    // border-bottom: 1px solid;
     bottom: 20px;
     right: 55px;
     width: 40px;
@@ -1385,6 +1393,7 @@ export default {
         display: flex;
         flex-wrap: wrap;
         align-items: flex-start;
+        flex-grow: 1;
 
         // &.lanling {
         //     border-left: 4px solid #409eff;