feat: 优化组件样式和布局，提升响应式设计体验

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;