feat: 优化卡片尺寸计算逻辑，调整样式以适应不同屏幕宽度

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({
+const cardConfig = reactive({
-	width: 285,
+	baseWidth: 285,
-	height: 162,
+	aspectRatio: 162 / 285,
 	margin: 20,
 });
+const containerWidth = ref(0);
 
-const styleWidth = computed(() => {
+const calcCardWidth = (parentWidth) => {
-	console.log('output >>>>> boxRef.value?.clientWidth >= 1440',boxRef.value?.clientWidth);
+	if (parentWidth >= 1080) {
-	
+		return Math.floor((parentWidth - 3 * cardConfig.margin) / 4);
-	if (boxRef.value?.clientWidth >= 1080) {
-		const width = (boxRef.value?.clientWidth - 3 * style.margin) / 4;
-		style.width = width;
 	}
+	return cardConfig.baseWidth;
+};
 
-	return Math.floor(style.width);
+const calcCardHeight = (cardWidth) => Math.floor(cardWidth * cardConfig.aspectRatio);
-});
 
-const styleHeight = computed(() => {
+const styleWidth = computed(() => calcCardWidth(containerWidth.value));
-	if (boxRef.value?.clientWidth >= 1080) {
+const styleHeight = computed(() => calcCardHeight(styleWidth.value));
-		const width = (boxRef.value?.clientWidth - 3 * style.margin) / 4;
-		style.height = (width / 285) * 162;
-	}
 
-	return Math.floor(style.height);
+const updateCardSize = () => {
-});
+	containerWidth.value = boxRef.value?.clientWidth ?? 0;
+};
 
 // 页面加载时
 onMounted(() => {
-	// NextLoading.done();
 	getData();
-	window.addEventListener('resize', () => {
+	updateCardSize();
-		style.width = 285;
+	window.addEventListener('resize', updateCardSize);
-		style.height = 162;
+});
-	});
+
+onUnmounted(() => {
+	window.removeEventListener('resize', updateCardSize);
 });
 </script>
 

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;
+    width: 100%;
-    min-width: 1000px;
     height: 70vh;
     overflow: auto;