pref:修改表格滚动样式

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

-@import './common.less';
-@import '../../theme/default/color.less';
+@import "./common.less";
+@import "../../theme/default/color.less";
 // 字体大小
 @fz18: 18px;
 @fz16: 16px;
@@ -10,13 +10,13 @@
 @cl999: #999;
 @cl000: #000; //表头
 @cl333: #333; //表体
-@cl8B: #8B96A6;
-@dlecl: #FA4D4C; //表格删除
-@redact: #1890FF; //表格编辑
+@cl8B: #8b96a6;
+@dlecl: #fa4d4c; //表格删除
+@redact: #1890ff; //表格编辑
 // 按钮背景色
 @addbg: linear-gradient(90deg, #5ab6ff 0%, #2e9aff 100%); //新增
-@delbg: #FA4D4C; //删除
-@qubg: #E1F0FE; //取消 重置
+@delbg: #fa4d4c; //删除
+@qubg: #e1f0fe; //取消 重置
 
 // 分页显示位置
 .pagination {
@@ -36,22 +36,29 @@
   overflow: hidden !important;
   margin-bottom: 0 !important;
   padding-right: 6px;
+  tr:only-child > th:last-child {
+    border-right-color: #f0f0f0 !important;
+  }
+
+}
+.ant-table-header {
+  background: #fff;
 }
 
 ::-webkit-scrollbar {
   width: 6px;
-  height:6px;
+  height: 6px;
   overflow-y: auto;
 }
 
 ::-webkit-scrollbar-thumb {
   border-radius: 6px;
-  background-color: rgba(144, 147, 153, .5);
+  background-color: rgba(144, 147, 153, 0.5);
 }
 
 ::-webkit-scrollbar-track {
   border-radius: 6px;
-  background: #fff;
+  background: rgba(144, 147, 153, 0);
 }
 
 .color_title {
@@ -68,17 +75,17 @@
     background-color: #1890ff;
   }
 }
-.ant-input{
+.ant-input {
   resize: none;
 }
-.ant-btn-primary{
-  background: linear-gradient(90deg,#5ab6ff,#2e9aff)!important;
-  border:none !important;
+.ant-btn-primary {
+  background: linear-gradient(90deg, #5ab6ff, #2e9aff) !important;
+  border: none !important;
   border-color: transparent !important;
 }
 
-.ant-form-explain{
-  position:absolute
+.ant-form-explain {
+  position: absolute;
 }
 .ant-form-item {
   display: flex;

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

-.ant-modal {
-  box-shadow: none !important;
-}
-.ant-form-item {
-  margin-bottom: 0;
-  display: flex;
-  align-items: center;
-}
-.ant-form-item-children {
-  display: flex;
-  align-items: center;
-}
-.ant-form-item-children input,
-.ant-form-item-children textarea {
-  font-size: 14px;
-  font-weight: 400;
-  color: #999;
-}
-.ant-form-item-label label {
-  font-size: 14px;
-  font-weight: 400;
-  color: #8B96A6;
-}
-.ant-modal {
-  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
-}
-.ant-modal-title {
-  color: #1890FF !important;
-  font-size: 18px;
-  font-weight: bold;
-}
-.ant-modal-close {
-  color: #188fff !important;
-}
-.ant-modal-close svg {
-  font-size: 26px !important;
-}
-.ant-vue-dark .ant-table-thead .ant-table-column-title {
-  font-size: 16px;
-  font-weight: 500;
-  color: #000;
-}
-.ant-vue-dark .ant-table-tbody {
-  font-size: 14px;
-  font-weight: 400;
-  color: #333;
-}
-.ant-vue-light .ant-table-thead .ant-table-column-title {
-  font-size: 16px;
-  font-weight: 500;
-  color: #000;
-}
-.ant-vue-light .ant-table-tbody {
-  font-size: 14px;
-  font-weight: 400;
-  color: #333;
-}
-.del {
-  color: #FA4D4C;
-  padding: 0 4px;
-  display: inline-block;
-}
-.del:hover {
-  color: #FA4D4C;
-  cursor: pointer;
-}
-.redact {
-  color: #1890FF;
-  padding: 0 4px;
-  display: inline-block;
-}
-.redact:hover {
-  color: #1890FF;
-  cursor: pointer;
-}
-.search input {
-  font-size: 14px;
-  color: #BFBFBF;
-}
-.search .chaxun {
-  color: #fff;
-  border: 1px solid #5ab6ff;
-  padding: 0 14px;
-  background: linear-gradient(90deg, #5ab6ff 0%, #2e9aff 100%);
-}
-.btn {
-  margin-top: 20px;
-}
-.btnclass {
-  font-size: 14px;
-  border-radius: 4px;
-  border: none;
-  margin-right: 12px;
-}
-.delclass {
-  background: #FA4D4C !important;
-  color: #fff !important;
-}
-.addclass {
-  background: linear-gradient(90deg, #5ab6ff 0%, #2e9aff 100%) !important;
-  color: #fff !important;
-}
-.quclass {
-  background: #E1F0FE !important;
-  color: #42A5FA !important;
-  border: 1px solid #E1F0FE;
-}
-/**
-* 上传图片、文件父级添加class
-* 文字和控件将向上对齐
-*/
-.up_load_file .ant-form-item {
-  align-items: flex-start;
-}
-.up_load_file .ant-form-item-label {
-  position: relative;
-  top: -4px;
-}
-.up_load_pic .ant-form-item {
-  align-items: flex-start;
-}
-.up_load_pic .ant-upload-list {
-  float: left;
-}
-th {
-  text-align: center !important;
-}
-td {
-  text-align: center;
-}
-.btn_box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.search_block {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-.card_title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #464646;
-  padding-left: 10px;
-  position: relative;
-  margin-bottom: 15px;
-}
-.card_title::before {
-  content: '';
-  position: absolute;
-  background: #1890ff;
-  border-color: #1890FF;
-  border-style: solid;
-  border-width: 2px;
-  height: 15px;
-  top: 4px;
-  left: 0;
-}
-.ant-tabs-nav-wrap {
-  background: #fff;
-}
-.ant-tabs-bar {
-  background: #fff;
-  padding-right: 20px !important;
-}
-.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
-  border-left: none !important;
-  border-top: none !important;
-  border-right: none !important;
-  border-bottom: none !important;
-  color: #999 !important;
-}
-.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
-  border-left: none !important;
-  border-top: none !important;
-  border-right: none !important;
-}
-.tabs-view-content {
-  background: #fff;
-  margin: 0 24px;
-  padding: 20px 24px;
-  min-height: 80vh;
-}
-.admin-layout .admin-layout-content {
-  padding: 20px 0 0 !important;
-  background: #F0F2F5;
-}
-.ant-pagination-item-active {
-  background: #1890FF;
-  border-radius: 4px;
-}
-.ant-pagination-item-active a {
-  color: #fff;
-}

base-manager-ui/admin/src/assets/css/relas.less

@@ -223,22 +223,22 @@ td{
     background: #fff;
     
 }
-.ant-tabs-bar{
-    background: #fff;
-    padding-right: 20px !important;
-}
-.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
-    border-left: none !important;
-    border-top: none !important;
-    border-right: none !important;
-    border-bottom: none !important;
-    color: #999 !important;
-}
-.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active{
-    border-left: none !important;
-    border-top: none !important;
-    border-right: none !important;
-}
+// .ant-tabs-bar{
+//     background: #fff;
+//     padding-right: 20px !important;
+// }
+// .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
+//     border-left: none !important;
+//     border-top: none !important;
+//     border-right: none !important;
+//     border-bottom: none !important;
+//     color: #999 !important;
+// }
+// .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active{
+//     border-left: none !important;
+//     border-top: none !important;
+//     border-right: none !important;
+// }
 // 内容
 .tabs-view-content{
     // background: #fff;

base-manager-ui/admin/src/layouts/Layouts.vue

@@ -5,7 +5,7 @@
       <div class="flex aic">
         <router-link to="/" class="flex aic">
           <img class="mr10" width="32" src="@/assets/img/logo.png" />
-          <h1 class="title">基础设置平台</h1>
+          <h1 class="title">基础设置系统</h1>
         </router-link>
         <HeaderSite class="ml20"></HeaderSite>
       </div>
@@ -28,7 +28,7 @@
       <a-layout-sider width="200" style="background: #fff">
         <i-menu theme="light" :options="menuData" class="menu" />
       </a-layout-sider>
-      <a-layout class="main" style="padding: 0 24px 24px">
+      <a-layout class="main">
         <a-layout-content>
           <keep-alive>
             <!-- 需要缓存的视图组件 -->
@@ -93,7 +93,23 @@ export default {
 }
 .main {
   height: calc(100vh - 64px);
+  padding: 0px 24px 24px;
   overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    overflow-y: auto;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background-color: rgba(144, 147, 153, 0.5);
+  }
+
+  &::-webkit-scrollbar-track {
+    border-radius: 6px;
+    background: rgba(144, 147, 153, 0);
+  }
 }
 .ant-layout-content {
   height: 100%;

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

 <template>
   <div class="deploy">
-    <a-card title="部署板块管理" :bordered="false">
+    <a-tabs activeKey="model">
+      <a-tab-pane key="model" tab="部署板块管理">
         <div class="control">
           <div>
-          <a-button type="primary" style="margin-right: 10px" @click="handleAdd"
+            <a-button
+              type="primary"
+              style="margin-right: 10px"
+              @click="handleAdd"
               >新增模块</a-button
             >
-          <a-button type="danger" @click="handleDelAll">批量删除模块</a-button>
+            <a-button type="danger" @click="handleDelAll"
+              >批量删除模块</a-button
+            >
           </div>
           <div class="search-box">
             <a-input-search
@@ -28,8 +34,8 @@
             }"
             :loading="loading"
             bordered
-          :scroll="{ y: 560 }"
             :columns="columns"
+            :scroll="{ y: 580 }"
             :pagination="{
               showTotal: (total) => `共 ${total} 条`,
               current: current,
@@ -85,17 +91,21 @@
                   @click="statementManage(text)"
                   >配置报表</a
                 >
-              <a href="javascript:;" class="edit" @click="handleEdit(text)"
+                <a href="javascript:;" class="primary" @click="handleEdit(text)"
                   >编辑</a
                 >
-              <a href="javascript:;" class="delete" @click="handleDel(text.id)"
+                <a
+                  href="javascript:;"
+                  class="delete"
+                  @click="handleDel(text.id)"
                   >删除</a
                 >
               </a-space>
             </template>
           </a-table>
         </div>
-    </a-card>
+      </a-tab-pane>
+    </a-tabs>
     <!-- 新增模块 -->
     <a-modal
       v-model="visible"
@@ -520,6 +530,7 @@ export default {
   width: 100%;
   height: 100%;
   background-color: #fff;
+
   .control {
     display: flex;
     justify-content: space-between;
@@ -532,20 +543,20 @@ export default {
   // .table-content {
   //   height: 620px;
   // }
-  .edit {
-    color: #03d76f;
-  }
-  .delete {
-    color: #f94545;
-  }
+}
+.ant-tabs {
+  width: 100%;
+  background-color: #fff;
+  min-height: 100%;
+}
+/deep/.ant-tabs-content {
+  padding: 0px 15px 15px 15px;
 }
 .handle-upload {
   margin-bottom: 30px !important;
   align-items: flex-start !important;
 }
-/deep/.ant-card {
-  width: 100% !important;
-}
+
 .svg-box,
 /deep/.ant-upload-list-item-thumbnail {
   background-color: #54788c;