pref:修改页面

base-manager-ui/admin/src/assets/css/common.css

 /* 颜色 */
-.primary{
-    color:#1890FF;
+.primary {
+  color: #1890ff;
 }
-.delete{
-    color:#FA4D4C;
+.delete {
+  color: #fa4d4c;
 }
-.green{
-    color:#1BBC9B;
+.green {
+  color: #1bbc9b;
 }
-.edit{
-    color:#03d76f !important;
+.edit {
+  color: #03d76f !important;
 }
-.clofff{
-    color:#fff;
+.clofff {
+  color: #fff;
 }
-.bgdel{
-    background-color: #FA4D4C;
+.bgdel {
+  background-color: #fa4d4c;
 }
-.bgpr{
-    background-color: #1890FF;
+.bgpr {
+  background-color: #1890ff;
 }
-.bgg{
-    background-color:#1BBC9B;
+.bgg {
+  background-color: #1bbc9b;
 }
-.bgw{
+.bgw {
   background-color: #fff;
-  }
+}
+.h-full {
+  height: 100%;
+}
+.w-full {
+  width: 100%;
+}
 /* 版心 */
-.container{
-    width:1200px;
+.container {
+  width: 1200px;
 }
 /* 弹性布局 */
-.flex{
+.flex {
   display: flex;
 }
-.flex1{
-    flex:1
+.flex1 {
+  flex: 1;
 }
-.flexc{
+.flexc {
   flex-direction: column;
 }
-.flexwrap{
+.flexwrap {
   flex-wrap: wrap;
 }
-.jcc{
+.jcc {
   justify-content: center;
 }
-.jca{
+.jca {
   justify-content: space-around;
 }
-.jcb{
+.jcb {
   justify-content: space-between;
 }
-.jce{
+.jce {
   justify-content: space-evenly;
 }
-.jc-start{
+.jc-start {
   justify-content: flex-start;
 }
-.jc-end{
+.jc-end {
   justify-content: flex-end;
 }
-.aic{
+.aic {
   align-items: center;
 }
-.aca{
+.aca {
   align-content: space-around;
 }
-.acb{
+.acb {
   align-content: space-between;
 }
-.ace{
+.ace {
   align-content: space-evenly;
 }
 /* margin */
-.m10{
-    margin:10px
+.m10 {
+  margin: 10px;
 }
-.m15{
-    margin:15px;
+.m15 {
+  margin: 15px;
 }
-.m20{
-    margin:20px;
+.m20 {
+  margin: 20px;
 }
-.mt10{
-    margin-top:10px;
+.mt10 {
+  margin-top: 10px;
 }
-.mt15{
-    margin-top:15px;
+.mt15 {
+  margin-top: 15px;
 }
-.mt20{
-    margin-top:20px;
+.mt20 {
+  margin-top: 20px;
 }
-.ml10{
-    margin-left:10px;
+.ml10 {
+  margin-left: 10px;
 }
-.ml15{
-    margin-left:15px;
+.ml15 {
+  margin-left: 15px;
 }
-.ml20{
-    margin-left:20px;
+.ml20 {
+  margin-left: 20px;
 }
-.ml25{
-    margin-left:25px;
+.ml25 {
+  margin-left: 25px;
 }
 .mr5 {
   margin-right: 5px;
-  }
-.mr10{
-    margin-right:10px;
 }
-.mr15{
-    margin-right:15px;
+.mr8 {
+  margin-right: 8px;
+}
+.mr10 {
+  margin-right: 10px;
+}
+.mr15 {
+  margin-right: 15px;
 }
-.mr20{
-    margin-right:20px;
+.mr20 {
+  margin-right: 20px;
 }
-.mr25{
-    margin-right:25px;
+.mr25 {
+  margin-right: 25px;
 }
-.mb10{
-    margin-bottom:10px;
+.mb10 {
+  margin-bottom: 10px;
 }
-.mb15{
-    margin-bottom:15px;
+.mb15 {
+  margin-bottom: 15px;
 }
-.mb20{
-    margin-bottom:20px;
+.mb20 {
+  margin-bottom: 20px;
 }
-.mb25{
-    margin-bottom:25px;
+.mb25 {
+  margin-bottom: 25px;
 }
 /* padding */
-.pd10{
-    padding:10px;
+.pd10 {
+  padding: 10px;
 }
-.pd15{
-    padding:15px;
+.pd15 {
+  padding: 15px;
 }
-.pd20{
-    padding:20px;
+.pd20 {
+  padding: 20px;
 }
-.pdt10{
-    padding-top:10px;
+.pdt10 {
+  padding-top: 10px;
 }
-.pdt15{
-    padding-top:15px;
+.pdt15 {
+  padding-top: 15px;
 }
-.pdt20{
-    padding-top:20px;
+.pdt20 {
+  padding-top: 20px;
 }
-.pdt30{
-    padding-top:30px;
+.pdt30 {
+  padding-top: 30px;
 }
-.pdl10{
-    padding-left:10px;
+.pdl10 {
+  padding-left: 10px;
 }
-.pdl15{
-    padding-left:15px;
+.pdl15 {
+  padding-left: 15px;
 }
-.pdl20{
-    padding-left:20px;
+.pdl20 {
+  padding-left: 20px;
 }
-.pdr6{
-    padding-right:6px;
+.pdr6 {
+  padding-right: 6px;
 }
-.pdr10{
-    padding-right:10px;
+.pdr10 {
+  padding-right: 10px;
 }
-.pdr15{
-    padding-right:15px;
+.pdr15 {
+  padding-right: 15px;
 }
-.pdr20{
-    padding-right:20px;
+.pdr20 {
+  padding-right: 20px;
 }
-.pdb10{
-    padding-bottom:10px;
+.pdb10 {
+  padding-bottom: 10px;
 }
-.pdb15{
-    padding-bottom:15px;
+.pdb15 {
+  padding-bottom: 15px;
 }
-.pdb20{
-    padding-bottom:20px;
+.pdb20 {
+  padding-bottom: 20px;
 }
 /* 字体大小 */
-.font16{
-    font-size:16px;
+.font16 {
+  font-size: 16px;
 }
-.font18{
-    font-size:18px;
+.font18 {
+  font-size: 18px;
 }
-.font20{
-    font-size:20px;
+.font20 {
+  font-size: 20px;
 }
-.font22{
-    font-size:22px;
+.font22 {
+  font-size: 22px;
 }
-.font24{
-    font-size:24px;
+.font24 {
+  font-size: 24px;
 }
-.font26{
-    font-size:26px;
+.font26 {
+  font-size: 26px;
 }
-.font28{
-    font-size:28px;
+.font28 {
+  font-size: 28px;
 }
-.font30{
-    font-size:30px;
+.font30 {
+  font-size: 30px;
 }
 /* 字体位置 */
-.tac{
+.tac {
   text-align: center;
 }
-.tal{
+.tal {
   text-align: left;
 }
-.tar{
+.tar {
   text-align: right;
 }
 /* 加粗 */
-.fontw600{
-    font-weight:600;
+.fontw600 {
+  font-weight: 600;
 }
-.fontw700{
-    font-weight:700;
+.fontw700 {
+  font-weight: 700;
 }
-.fontw800{
-    font-weight:800;
+.fontw800 {
+  font-weight: 800;
 }
 
 .skin-box {
@@ -235,15 +244,15 @@
 .empty {
   height: 100%;
 }
-.pointer{
+.pointer {
   cursor: pointer;
 }
-.auto-scroll-y{
+.auto-scroll-y {
   overflow-y: auto;
 }
-.auto-scroll-x{
+.auto-scroll-x {
   overflow-y: auto;
 }
-.auto-scroll{
+.auto-scroll {
   overflow: auto;
 }

base-manager-ui/admin/src/components/TabHeader.vue

 <template>
   <div class="tab-header flex jcb aic">
-    <div>
-      <a-icon :type="icon" class="mr5 primary" />
+    <div class="h-full flex aic">
+      <a-icon :type="icon" class="mr8 primary" />
       <span class="label">{{ label }}</span>
     </div>
     <div>

base-manager-ui/admin/src/pages/basicset/surface/components/LeftMenu.vue

 <template>
-  <div class="left-menu">
+  <div class="left-menu flex flexc">
     <div class="search-box">
       <a-input-search
         placeholder="请输入设备关键字搜索"
@@ -8,7 +8,7 @@
         @search="onSearch"
       />
     </div>
-    <div class="menu">
+    <div class="menu flex1 auto-scroll-y">
       <a-card-grid
         :class="{ active: i === isActive }"
         v-for="(v, i) in productList"
@@ -41,7 +41,9 @@ export default {
     async getProductList(search = {}) {
       let res = await getProductList({ page: 1, size: -1, ...search });
       let { data } = res.data.data;
-      this.productList = data;
+      this.productList = data.filter(
+        (v) => !v.productName.includes("电子门牌")
+      );
       this.changeMenu(0, this.productList[0]);
     },
     // 搜索
@@ -70,12 +72,12 @@ export default {
 <style lang="less" scoped>
 .left-menu {
   height: 100%;
+  background-color: #fff;
 }
 .search-box {
   padding: 15px 15px 0px;
 }
 .menu {
-  height: 70vh;
   margin-top: 15px;
   overflow-y: auto;
   padding: 0px 15px 15px 15px;

base-manager-ui/admin/src/pages/basicset/surface/components/RightPreview.vue

@@ -13,7 +13,7 @@
       </a-select>
     </div>
     <a-spin size="small" :spinning="spinning">
-      <div class="preview-list">
+      <div ref="previewList" class="preview-list">
         <div v-if="previewList.length > 0">
           <div
             class="preview-item"
@@ -64,6 +64,7 @@ export default {
   },
   watch: {
     curProduct(newVal) {
+      this.$refs.previewList.scrollTop = 0;
       if (Object.keys(newVal).length) {
         this.getSkinList({ productId: newVal.productId });
       }
@@ -156,22 +157,25 @@ export default {
 <style lang="less" scoped>
 .right-preview {
   height: 100%;
+  width: 100%;
   display: flex;
   flex-direction: column;
-  padding: 15px 0px;
-
+  padding-top: 15px;
+  background-color: #fff;
   .preview-seach {
     height: 32px;
     padding: 0px 15px;
     margin-bottom: 15px;
+    flex-shrink: 0;
   }
   .preview-list {
     height: 65vh;
     padding: 0px 15px;
     display: flex;
     flex-direction: column;
-    // border-bottom: 1px solid #ccc;
     overflow-y: auto;
+
+    // border-bottom: 1px solid #ccc;
     .preview-item {
       margin-bottom: 6px;
       height: 120px;
@@ -188,10 +192,12 @@ export default {
     }
   }
   .preview-btn {
+    border-top: 1px solid #ccc;
     height: 100px;
     display: flex;
     flex-direction: column;
     justify-content: center;
+    flex-shrink: 0;
   }
 }
 </style>
\ No newline at end of file

base-manager-ui/admin/src/pages/basicset/surface/components/ShowBox.vue

@@ -166,26 +166,16 @@ export default {
 .show {
   width: 100%;
   height: 100%;
+  padding: 20px 0px;
   background-image: linear-gradient(#cfe9ff, #fff);
   display: flex;
   flex-direction: column;
   justify-content: center;
-  overflow-y: auto;
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-  &::-webkit-scrollbar-thumb {
-    border-radius: 5px;
-    background: rgba(144, 147, 153, 0.5);
-  }
-  &::-webkit-scrollbar-track {
-    box-shadow: 0;
-    border-radius: 0px;
-    background: #f0f2f5;
-  }
   .show-content {
     width: 100%;
     height: 75vh;
+    overflow-y: auto;
+
     .show-header {
       text-align: center;
       color: #48866c;

base-manager-ui/admin/src/pages/basicset/surface/index.vue

@@ -11,8 +11,6 @@ export default {};
 <style lang="less" scoped>
 .index {
   width: 100%;
-  min-height: 100%;
-  background-color: #fff;
-  display: flex;
+  height: 100%;
 }
 </style>
\ No newline at end of file

base-manager-ui/admin/src/pages/basicset/surface/surface.vue

 <template>
-  <div class="surface">
-    <div class="container">
+  <div class="surface flex flexc">
     <TabHeader label="皮肤管理">
       <a-space>
         <a-button v-permission="[1]" icon="plus" @click="addDev"
@@ -14,7 +13,7 @@
         >
       </a-space>
     </TabHeader>
-      <div class="main">
+    <div class="main flex1">
       <div class="menu-box">
         <LeftMenu
           ref="LeftMenu"
@@ -51,7 +50,6 @@
     <!-- 新增设备 -->
     <AddDev :visible.sync="addDevVisible" @addDev="addDevSuccess"></AddDev>
   </div>
-  </div>
 </template>
 
 <script>
@@ -140,17 +138,11 @@ export default {
 
 <style lang="less" scoped>
 .surface {
-  width: 100%;
-  height: 100%;
-  .container {
   width: 100%;
   height: 100%;
   position: relative;
-  }
   .main {
     height: 100%;
-    border-top: 1px solid rgb(224, 224, 224);
-    background-color: #fff;
     display: flex;
     .menu-box {
       width: 20%;
@@ -158,19 +150,12 @@ export default {
     }
     .show-box {
       width: 65%;
+      height: 100%;
     }
     .preview-box {
       width: 15%;
+      height: 100%;
     }
   }
 }
-/deep/.ant-card {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-/deep/.ant-card-body {
-  flex: 1;
-  padding: 0px;
-}
 </style>
\ No newline at end of file