From cd29296c1a05b6d629e734a2585a8bdc8a0dcf48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=82=85=E5=85=89=E5=AD=9F?= <fgmfjf@163.com>
Date: Thu, 16 Apr 2026 10:23:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E8=AE=A1=E7=AE=97=E9=80=BB=E8=BE=91=EF=BC=8C?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F=E4=BB=A5=E9=80=82=E5=BA=94?=
 =?UTF-8?q?=E4=B8=8D=E5=90=8C=E5=B1=8F=E5=B9=95=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pages/yuqingFLS/index.vue  | 46 +++++++++++++---------------
 src/views/pages/yuqingFLS/zxList.vue |  4 +--
 2 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/views/pages/yuqingFLS/index.vue b/src/views/pages/yuqingFLS/index.vue
index b9ec303..8370baa 100644
--- a/src/views/pages/yuqingFLS/index.vue
+++ b/src/views/pages/yuqingFLS/index.vue
@@ -124,7 +124,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, computed } from 'vue';
+import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { getYqcompanyList, getYqCheck } from '/@/api/api';
 import { ElMessage } from 'element-plus';
@@ -247,40 +247,38 @@ function handleCommand(value) {
 
 // 计算样式宽高
 const boxRef = ref(null);
-const style = reactive({
-	width: 285,
-	height: 162,
+const cardConfig = reactive({
+	baseWidth: 285,
+	aspectRatio: 162 / 285,
 	margin: 20,
 });
+const containerWidth = ref(0);
 
-const styleWidth = computed(() => {
-	console.log('output >>>>> boxRef.value?.clientWidth >= 1440',boxRef.value?.clientWidth);
-	
-	if (boxRef.value?.clientWidth >= 1080) {
-		const width = (boxRef.value?.clientWidth - 3 * style.margin) / 4;
-		style.width = width;
+const calcCardWidth = (parentWidth) => {
+	if (parentWidth >= 1080) {
+		return Math.floor((parentWidth - 3 * cardConfig.margin) / 4);
 	}
+	return cardConfig.baseWidth;
+};
 
-	return Math.floor(style.width);
-});
+const calcCardHeight = (cardWidth) => Math.floor(cardWidth * cardConfig.aspectRatio);
 
-const styleHeight = computed(() => {
-	if (boxRef.value?.clientWidth >= 1080) {
-		const width = (boxRef.value?.clientWidth - 3 * style.margin) / 4;
-		style.height = (width / 285) * 162;
-	}
+const styleWidth = computed(() => calcCardWidth(containerWidth.value));
+const styleHeight = computed(() => calcCardHeight(styleWidth.value));
 
-	return Math.floor(style.height);
-});
+const updateCardSize = () => {
+	containerWidth.value = boxRef.value?.clientWidth ?? 0;
+};
 
 // 页面加载时
 onMounted(() => {
-	// NextLoading.done();
 	getData();
-	window.addEventListener('resize', () => {
-		style.width = 285;
-		style.height = 162;
-	});
+	updateCardSize();
+	window.addEventListener('resize', updateCardSize);
+});
+
+onUnmounted(() => {
+	window.removeEventListener('resize', updateCardSize);
 });
 </script>
 
diff --git a/src/views/pages/yuqingFLS/zxList.vue b/src/views/pages/yuqingFLS/zxList.vue
index 809ee9a..72cc966 100644
--- a/src/views/pages/yuqingFLS/zxList.vue
+++ b/src/views/pages/yuqingFLS/zxList.vue
@@ -296,11 +296,11 @@ input::placeholder {
     justify-content: center;
     flex-direction: column;
     align-items: center;
+	padding: 30px 32px 32px;
 }
 
 .list {
-    width: 70vw;
-    min-width: 1000px;
+    width: 100%;
     height: 70vh;
     overflow: auto;