src/renderer/src/views/job-management/Details/index.vue

@@ -68,19 +68,33 @@ const rightComponets = (str) => {
     default:
       return null
   }
+}
+ // 获取视口高度
+ const getViewportHeight = () => {
+  return Math.max(
+    document.documentElement.clientHeight,
+    window.innerHeight || 0
+  );
 }
 // 监听主页传过来的值
 onMounted(() => {
   currentComponent.value = rightComponets(props.parameter.components)
   // 获取当前高度加上滚动条的高度
+  pageHeight.value = getViewportHeight() - 210
   nextTick(() => {
-    pageHeight.value = window.innerHeight + window.scrollY - 156;
+    window.addEventListener('resize', () => {
+      pageHeight.value = getViewportHeight() - 210;
+    });
   });
 })
 </script>
 <style lang="scss" scoped>
 .tabs-container{
   position: relative;
+  height: 100%;
+}
+.demo-tabs{
+  height: 100%;
 }
 .button-div{
   position: absolute;
@@ -88,9 +102,13 @@ onMounted(() => {
   right: 0;
   z-index: 999;
 }
+.tempalte-main{
+  height: 100%;
+}
 .right-box{
   background-color: #fff;
   padding:5px;
   border-radius: 4px;
+  height: 100%;
 }
 </style>

src/renderer/src/views/job-management/Left/index.vue

@@ -1,5 +1,6 @@
 <template>
-<div class="list-container">
+<el-scrollbar :height="viewportHeight">
+  <div class="list-container">
     <div class="content-list" v-for="(item, index) in items" :key="index" @click="handleClick(item)">
       <div class="item-content">
           <el-checkbox v-model="item.checked" @click.stop="clickCheckbox(item)"/>
@@ -14,10 +15,11 @@
       </div>
     </div>
 </div>
+</el-scrollbar>
 </template>
   
   <script setup>
-  import { ref  } from 'vue';
+  import { ref,onMounted,nextTick } from 'vue';
   import { ArrowRight } from '@element-plus/icons-vue';
   import CustomButton from '../components/button.vue'
   const emits = defineEmits(['checked']);
@@ -30,10 +32,14 @@
     { id:5,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
     { id:6,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
     { id:7,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
+    { id:7,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
+    { id:7,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
+    { id:7,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
 
   ]);
   // 获取选中的checkbox的id
   const selectIds = ref([])
+  const viewportHeight = ref(0);
 
   const handleClick = (item) => {
     console.log(item.title);
@@ -50,6 +56,21 @@
     }
     emits('checked',selectIds.value)
   }
+  // 获取视口高度
+const getViewportHeight = () => {
+  return Math.max(
+    document.documentElement.clientHeight,
+    window.innerHeight || 0
+  );
+}
+onMounted(() => {
+  viewportHeight.value = getViewportHeight() - 157
+  nextTick(() => {
+    window.addEventListener('resize', () => {
+      viewportHeight.value = getViewportHeight() - 157;
+    });
+  });
+})
   </script>
   
   <style scoped>

src/renderer/src/views/job-management/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-template flex">
-    <!-- // 顶部 -->
+    <!-- 顶部 -->
     <div class="mb-4">
       <div>
         <el-button type="danger" :disabled="!isChceked">批量删除</el-button>
@@ -12,7 +12,7 @@
         @select-click="selectClick"
       />
     </div>
-    <div :style="{height: viewportHeight - 72 + 'px'}" class="no-horizontal-scroll">
+    <div>
       <el-row :gutter="20" class="tempalte-main">
         <el-col :span="6">
           <!-- 左侧列表 -->
@@ -99,17 +99,8 @@ const listeners = computed(() => ({
 
 .page-template {
   flex-direction: column;
-  height: 100%;
-  overflow-x: hidden; // 防止横向滚动条
-
   .tempalte-main {
     flex: 1;
   }
 }
-.no-horizontal-scroll {
-  overflow: auto;
-  overflow-x: hidden;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none;  /* Internet Explorer 10+ */
-}
 </style>