数据源样式修改2

src/views/dataEntry_manage/coal/index.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="lzTarget-container">
-    <div class="left-cont minHeight">
+    <span
+        class="slide-btn-icon"
+        :class="{'slide-left':isLeftWrapShow,'slide-right':!isLeftWrapShow}"
+        @click="isLeftWrapShow = !isLeftWrapShow"
+    >
+        <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
+    </span>
+    <div class="left-cont minHeight" v-show="isLeftWrapShow">
       <div class="left-top">
         <!-- <el-button type="primary" plain size="medium" @click="exportClick" :loading="btnload">导出Excel</el-button> -->
         <el-button
@@ -135,6 +142,7 @@ export default {
   },
   data() {
     return {
+      isLeftWrapShow:true,
       dataloading: false,
       rightShow: false,
       exportBase: process.env.VUE_APP_API_ROOT + "/entry/export/coalList", //中国煤炭网数据导出接口
@@ -526,6 +534,15 @@ export default {
 <style lang="scss" scoped>
 .lzTarget-container {
   display: flex;
+  position:relative;
+  .slide-btn-icon{
+        &.slide-left{
+            left:235px;
+        }
+        &.slide-right{
+            left: 0;
+        }
+    }
   * {
     box-sizing: border-box;
   }
@@ -540,6 +557,7 @@ export default {
   }
   .left-cont {
     min-width: 250px;
+    width:250px;
     margin-right: 20px;
     padding: 30px 0;
     // overflow: hidden;
@@ -566,11 +584,12 @@ export default {
     }
   }
   .right-cont {
-    width: 80%;
+    flex:1;
+    overflow-x: auto;
     padding: 30px;
     .right-box {
       max-width: 100%;
-      max-height: calc(100vh - 230px);
+      max-height: calc(100vh - 240px);
       border-left: 1px solid #dcdfe6;
       border-right: 1px solid #dcdfe6;
       overflow: auto;
@@ -594,9 +613,12 @@ export default {
       margin-top: 20px;
       display: flex;
       flex-wrap: wrap;
+      gap:20px;
+      .el-button{
+            margin-left: 0 !important;
+        }
       .frequency-btn {
         width: 112px;
-        margin: 0 30px 10px 0;
       }
     }
   }

src/views/dataEntry_manage/css/baseTargetPage.scss

@@ -0,0 +1,22 @@
+//可调整宽度目录的统一样式
+.target-container{
+    position:relative;
+    .slide-btn-icon{
+        &.slide-left{
+            right:0;
+        }
+        &.slide-right{
+            left: 0;
+        }
+    }
+    .right-cont{
+        flex:1;
+        overflow-x: auto;
+    }
+    .frequency-list{
+        gap:20px;
+        .el-button{
+            margin-left: 0 !important;
+        }
+    }
+}

src/views/dataEntry_manage/thirdBase/BAIINFOTargetbase.vue

@@ -1,6 +1,20 @@
 <template>
-  <div class="smmTarget-container" id="box">
-    <div class="left-cont minHeight" id="left">
+  <div class="smmTarget-container target-container" id="box">
+    <span
+        v-show="!isLeftWrapShow"
+        class="slide-btn-icon slide-right"
+        @click="isLeftWrapShow = !isLeftWrapShow"
+    >
+        <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
+    </span>
+    <div class="left-cont minHeight" id="left" v-show="isLeftWrapShow">
+        <span
+            v-show="isLeftWrapShow"
+            class="slide-btn-icon slide-left"
+            @click="isLeftWrapShow = !isLeftWrapShow"
+        >
+            <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
+        </span>
       <div class="left-top">
         <el-button
           v-permission="permissionBtn.dataSourcePermission.bcyfData_export"
@@ -295,6 +309,7 @@ export default {
   watch: {},
   data() {
     return {
+      isLeftWrapShow:true,
       exportBase:
         process.env.VUE_APP_API_ROOT + "/datamanage/export/baiinfoList", //ssm数据导出接口
       dataloading: false,
@@ -1190,6 +1205,7 @@ export default {
 </script>
 <style lang="scss">
 @import "../css/customtree.scss";
+@import "../css/baseTargetPage.scss";
 .smmTarget-dialog-cont {
   .el-cascader {
     .el-input {
@@ -1289,11 +1305,10 @@ export default {
     }
   }
   .right-cont {
-    width: 82%;
     padding: 30px;
     .right-box {
       max-width: 100%;
-      max-height: calc(100vh - 230px);
+      max-height: calc(100vh - 240px);
       border-left: 1px solid #dcdfe6;
       border-right: 1px solid #dcdfe6;
       overflow: auto;
@@ -1319,7 +1334,6 @@ export default {
       flex-wrap: wrap;
       .frequency-btn {
         width: 112px;
-        margin: 0 30px 10px 0;
       }
     }
     .nodata-cont {

src/views/dataEntry_manage/thirdBase/SCITargetbase.vue

@@ -1,6 +1,20 @@
 <template>
-  <div class="smmTarget-container" id="box">
-    <div class="left-cont minHeight" id="left">
+  <div class="smmTarget-container target-container" id="box">
+    <span
+        v-show="!isLeftWrapShow"
+        class="slide-btn-icon slide-right"
+        @click="isLeftWrapShow = !isLeftWrapShow"
+    >
+        <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
+    </span>
+    <div class="left-cont minHeight" id="left" v-show="isLeftWrapShow">
+        <span
+            v-show="isLeftWrapShow"
+            class="slide-btn-icon slide-left"
+            @click="isLeftWrapShow = !isLeftWrapShow"
+        >
+            <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
+        </span>
       <div class="left-top">
         <el-button
           v-permission="permissionBtn.dataSourcePermission.hongtao3Data_export"
@@ -247,6 +261,7 @@ export default {
   watch: {},
   data() {
     return {
+      isLeftWrapShow:true,
       exportBase: process.env.VUE_APP_API_ROOT + "/datamanage/export/sciList", //sci数据导出接口
       dataloading: false,
       rightShow: false,
@@ -1078,6 +1093,7 @@ export default {
 </script>
 <style lang="scss">
 @import "../css/customtree.scss";
+@import "../css/baseTargetPage.scss";
 .smmTarget-dialog-cont {
   .el-cascader {
     .el-input {

src/views/dataEntry_manage/thirdBase/glTargetbase.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="lzTarget-container">
-    <div class="left-cont minHeight">
+    <span
+        class="slide-btn-icon"
+        :class="{'slide-left':isLeftWrapShow,'slide-right':!isLeftWrapShow}"
+        @click="isLeftWrapShow = !isLeftWrapShow"
+    >
+        <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
+    </span>
+    <div class="left-cont minHeight" v-show="isLeftWrapShow">
       <div class="left-top">
         <!-- <el-button type="primary" plain size="medium" @click="exportClick" :loading="btnload">导出Excel</el-button> -->
         <el-button
@@ -114,6 +121,7 @@ export default {
   },
   data() {
     return {
+      isLeftWrapShow:true,
       dataloading: false,
       rightShow: false,
       exportBase: process.env.VUE_APP_API_ROOT + "/datamanage/export/glList", //钢联数据导出接口
@@ -439,6 +447,15 @@ export default {
 <style lang="scss" scoped>
 .lzTarget-container {
   display: flex;
+  position:relative;
+  .slide-btn-icon{
+        &.slide-left{
+            left:225px;
+        }
+        &.slide-right{
+            left: 0;
+        }
+    }
   * {
     box-sizing: border-box;
   }
@@ -452,7 +469,8 @@ export default {
     width: 5px !important;
   }
   .left-cont {
-    min-width: 140px;
+    min-width: 240px;
+    width:240px;
     margin-right: 20px;
     padding: 30px 0;
     overflow: hidden;
@@ -479,11 +497,12 @@ export default {
     }
   }
   .right-cont {
-    width: 86%;
+    flex:1;
     padding: 30px;
+    overflow-x: auto;
     .right-box {
       max-width: 100%;
-      max-height: calc(100vh - 230px);
+      max-height: calc(100vh - 240px);
       border-left: 1px solid #dcdfe6;
       border-right: 1px solid #dcdfe6;
       overflow: auto;
@@ -507,9 +526,12 @@ export default {
       margin-top: 20px;
       display: flex;
       flex-wrap: wrap;
+      gap:20px;
+      .el-button{
+            margin-left: 0 !important;
+        }
       .frequency-btn {
         width: 112px;
-        margin: 0 30px 10px 0;
       }
     }
   }

src/views/dataEntry_manage/thirdBase/lzTargetbase.vue

@@ -460,6 +460,9 @@ export default {
       display: flex;
       flex-wrap: wrap;
       gap:20px;
+      .el-button{
+            margin-left: 0 !important;
+        }
       .frequency-btn {
         width: 112px;
       }

src/views/dataEntry_manage/thirdBase/smmTargetbase.vue

@@ -1,6 +1,20 @@
 <template>
-  <div class="smmTarget-container" id="box">
-    <div class="left-cont minHeight" id="left">
+  <div class="smmTarget-container target-container" id="box">
+    <span
+        v-show="!isLeftWrapShow"
+        class="slide-btn-icon slide-right"
+        @click="isLeftWrapShow = !isLeftWrapShow"
+    >
+        <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
+    </span>
+    <div class="left-cont minHeight" id="left" v-show="isLeftWrapShow">
+        <span
+            v-show="isLeftWrapShow"
+            class="slide-btn-icon slide-left"
+            @click="isLeftWrapShow = !isLeftWrapShow"
+        >
+            <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
+        </span>
       <div class="left-top">
         <el-button
           v-permission="permissionBtn.dataSourcePermission.smmData_export"
@@ -260,6 +274,7 @@ export default {
   watch: {},
   data() {
     return {
+      isLeftWrapShow:true,
       exportBase: process.env.VUE_APP_API_ROOT + "/datamanage/export/smmList", //ssm数据导出接口
       dataloading: false,
       rightShow: false,
@@ -1109,6 +1124,7 @@ export default {
 </script>
 <style lang="scss">
 @import "../css/customtree.scss";
+@import "../css/baseTargetPage.scss";
 .smmTarget-dialog-cont {
   .el-cascader {
     .el-input {
@@ -1208,11 +1224,10 @@ export default {
     }
   }
   .right-cont {
-    width: 82%;
     padding: 30px;
     .right-box {
       max-width: 100%;
-      max-height: calc(100vh - 230px);
+      max-height: calc(100vh - 240px);
       border-left: 1px solid #dcdfe6;
       border-right: 1px solid #dcdfe6;
       overflow: auto;
@@ -1238,7 +1253,6 @@ export default {
       flex-wrap: wrap;
       .frequency-btn {
         width: 112px;
-        margin: 0 30px 10px 0;
       }
     }
     .nodata-cont {

src/views/dataEntry_manage/thirdBase/steelChemicalbase.vue

@@ -1,6 +1,20 @@
 <template>
   <div class="steelChemical-container" id="box">
-    <div class="left-cont minHeight" id="left">
+    <span
+        v-show="!isLeftWrapShow"
+        class="slide-btn-icon slide-right"
+        @click="isLeftWrapShow = !isLeftWrapShow"
+    >
+        <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
+    </span>
+    <div class="left-cont minHeight" id="left" v-show="isLeftWrapShow">
+        <span
+            v-show="isLeftWrapShow"
+            class="slide-btn-icon slide-left"
+            @click="isLeftWrapShow = !isLeftWrapShow"
+        >
+            <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
+        </span>
       <div class="left-top">
         <div>
           <el-button v-permission="permissionBtn.dataSourcePermission.mysteelData_add"
@@ -246,6 +260,7 @@ export default {
   components: { lzTable, mDialog, targetDialog },
   data() {
     return {
+      isLeftWrapShow:true,
       dataloading: false,
       rightShow: false,
       exportBase:
@@ -651,6 +666,15 @@ export default {
 <style lang="scss" scoped>
 .steelChemical-container {
   display: flex;
+  position: relative;
+  .slide-btn-icon{
+        &.slide-left{
+            right:0;
+        }
+        &.slide-right{
+            left: 0;
+        }
+    }
   * {
     box-sizing: border-box;
   }
@@ -722,12 +746,13 @@ export default {
     }
   }
   .right-cont {
-    width: 82%;
+    flex:1;
+    overflow-x: auto;
     padding: 30px;
     position: relative;
     .right-box {
       max-width: 100%;
-      max-height: calc(100vh - 230px);
+      max-height: calc(100vh - 240px);
       border-left: 1px solid #dcdfe6;
       border-right: 1px solid #dcdfe6;
       overflow: auto;
@@ -751,9 +776,12 @@ export default {
       margin-top: 20px;
       display: flex;
       flex-wrap: wrap;
+      gap:20px;
+      .el-button{
+            margin-left: 0 !important;
+        }
       .frequency-btn {
         width: 112px;
-        margin: 0 30px 10px 0;
       }
     }
   }