From da83bcec5c6c1d401cca338ff6875607029d12f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E6=9D=A8?= <666>
Date: Tue, 19 Nov 2024 09:42:19 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=A0=B7=E5=BC=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/job-management/Details/index.vue    | 20 +++++++-
 .../src/views/job-management/Left/index.vue   | 47 ++++++++++++++-----
 .../src/views/job-management/index.vue        | 13 +----
 3 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/src/renderer/src/views/job-management/Details/index.vue b/src/renderer/src/views/job-management/Details/index.vue
index 696f090..306d4a7 100644
--- a/src/renderer/src/views/job-management/Details/index.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/renderer/src/views/job-management/Left/index.vue b/src/renderer/src/views/job-management/Left/index.vue
index 1b600ac..c195002 100644
--- a/src/renderer/src/views/job-management/Left/index.vue
+++ b/src/renderer/src/views/job-management/Left/index.vue
@@ -1,23 +1,25 @@
 <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)"/>
-        <div class="item-text">
-            <div class="title-header">
-                <div class="item-title" :title="item.title">{{ item.title }}</div>
-                <CustomButton :item="{ type: item.type, text: item.text, plain: true }" />
-            </div>
-            <div class="item-description" :title="item.description">{{ item.description }}</div>
-        </div>
-        <el-icon class="item-icon"><ArrowRight /></el-icon>
-    </div>
+      <div class="item-content">
+          <el-checkbox v-model="item.checked" @click.stop="clickCheckbox(item)"/>
+          <div class="item-text">
+              <div class="title-header">
+                  <div class="item-title" :title="item.title">{{ item.title }}</div>
+                  <CustomButton :item="{ type: item.type, text: item.text, plain: true }" />
+              </div>
+              <div class="item-description" :title="item.description">{{ item.description }}</div>
+          </div>
+          <el-icon class="item-icon"><ArrowRight /></el-icon>
+      </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>
diff --git a/src/renderer/src/views/job-management/index.vue b/src/renderer/src/views/job-management/index.vue
index 91b04e3..277ab70 100644
--- a/src/renderer/src/views/job-management/index.vue
+++ b/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>
\ No newline at end of file