From 260c9d7edc65fb6a3893a517f58459a76c748007 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=82=85=E5=85=89=E5=AD=9F?= <fgmfjf@163.com>
Date: Mon, 30 Mar 2026 21:46:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=B8=83=E5=B1=80=EF=BC=8C=E6=8F=90?=
 =?UTF-8?q?=E5=8D=87=E5=93=8D=E5=BA=94=E5=BC=8F=E8=AE=BE=E8=AE=A1=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pages/yuqingFLS/index.vue | 56 +++++++++++++++++++++++------
 1 file changed, 45 insertions(+), 11 deletions(-)

diff --git a/src/views/pages/yuqingFLS/index.vue b/src/views/pages/yuqingFLS/index.vue
index 2c605b9..94746c4 100644
--- a/src/views/pages/yuqingFLS/index.vue
+++ b/src/views/pages/yuqingFLS/index.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="container">
-		<div class="mb20" style="width: 1200px; margin: 0 auto">
+	<div class="container" ref="boxRef">
+		<div class="mb20" style="padding: 0 20px">
 			<el-breadcrumb separator="/" class="font16">
 				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
 				<el-breadcrumb-item>企业舆情</el-breadcrumb-item>
@@ -68,6 +68,7 @@
 						@mouseleave="mouseLeave(index)"
 						@click="goDetail(item)"
 						:class="{ hover: item.isHovered }"
+						:style="{ width: styleWidth + 'px', height: styleHeight + 'px' }"
 					>
 						<div>
 							<div class="r_list_title" style="height: 25px">
@@ -123,7 +124,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { getYqcompanyList, getYqCheck } from '/@/api/api';
 import { ElMessage } from 'element-plus';
@@ -244,10 +245,40 @@ function handleCommand(value) {
 	}
 }
 
+// 计算样式宽高
+const boxRef = ref(null);
+const style = reactive({
+	width: 285,
+	height: 162,
+	margin: 20,
+});
+
+const styleWidth = computed(() => {
+	if (boxRef.value?.clientWidth >= 1280) {
+		const width = (boxRef.value?.clientWidth - 40 - 3 * style.margin) / 4;
+		style.width = width;
+	}
+
+	return Math.floor(style.width);
+});
+
+const styleHeight = computed(() => {
+	if (boxRef.value?.clientWidth >= 1280) {
+		const width = (boxRef.value?.clientWidth - 40 - 3 * style.margin) / 4;
+		style.height = (width / 285) * 162;
+	}
+
+	return Math.floor(style.height);
+});
+
 // 页面加载时
 onMounted(() => {
 	// NextLoading.done();
 	getData();
+	window.addEventListener('resize', () => {
+		style.width = 285;
+		style.height = 162;
+	});
 });
 </script>
 
@@ -275,7 +306,7 @@ onMounted(() => {
 
 .bk {
 	width: 100%;
-	height: 140px;
+	// height: 140px;
 	display: flex;
 	flex-direction: column;
 	text-align: center;
@@ -371,16 +402,19 @@ input::placeholder {
 }
 
 .page {
-	max-width: calc(285px * 4 + 20px * 3);
-	width: calc(285px * 4 + 20px * 3);
+	// max-width: calc(285px * 4 + 20px * 3);
+	// width: calc(285px * 4 + 20px * 3);
+	width: 100%;
+	padding: 0 40px;
 }
 
 .list {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 20px;
-	max-width: calc(285px * 4 + 20px * 3);
-	width: calc(285px * 4 + 20px * 3);
+	// max-width: calc(285px * 4 + 20px * 3);
+	// width: calc(285px * 4 + 20px * 3);
+	padding: 30px 20px;
 }
 
 .list_item {
@@ -388,8 +422,8 @@ input::placeholder {
 	flex-direction: column;
 	background: url('/@/assets/yuqingNew/card_bg.png') no-repeat center 0;
 	background-size: 100% 100%;
-	width: 285px;
-	height: 162px;
+	// width: 285px;
+	// height: 162px;
 	padding: 20px 30px;
 	gap: 15px;
 	box-shadow: 0 0 10px rgba($color: #515151, $alpha: 0.2);
@@ -450,7 +484,7 @@ input::placeholder {
 		text-align: left;
 		font-style: normal;
 
-		width: 237px;
+		width: 100%;
 		height: 32px;
 		color: #5f6063;
 		background: #ffffff;