From 0ac0f33a9b8fbfa137111422fe47c7cb6fe7ebde Mon Sep 17 00:00:00 2001
From: sd <shidong@jhsoft.cc>
Date: 星期一, 11 八月 2025 10:43:50 +0800
Subject: [PATCH] 文搜万物-卡片样式调整，自适应容器宽度改变大小
---
src/pages/searchNew/components/SurveyView.vue | 56 ++++++++++++++++++++++++++++++++------------------------
1 files changed, 32 insertions(+), 24 deletions(-)
diff --git a/src/pages/searchNew/components/SurveyView.vue b/src/pages/searchNew/components/SurveyView.vue
index 4a21fc3..fee3141 100644
--- a/src/pages/searchNew/components/SurveyView.vue
+++ b/src/pages/searchNew/components/SurveyView.vue
@@ -63,8 +63,7 @@
</el-descriptions-item>
<el-descriptions-item label="闅愭偅鎻忚堪" v-if="backendData">
- <el-tooltip placement="top" :content="detailItem.risk_description" effect="light"
- popper-class="my-tooltip">
+ <el-tooltip placement="top" :content="detailItem.risk_description" effect="light" popper-class="my-tooltip">
<span class="multi-value ellipsis">{{ detailItem.risk_description }}</span>
</el-tooltip>
@@ -140,7 +139,7 @@
<!-- 鍙充晶涓诲唴瀹� -->
<div class="right-content">
<div class="right-header">
- <h2 class="content-title" >
+ <h2 class="content-title">
<span class="header-gradient">AI</span><span style="margin-left: 15px;font-size: 30px">鏂囨悳涓囩墿</span>
</h2>
<div class="header-actions-right">
@@ -246,7 +245,7 @@
</div>
</div>
</div>
- </div>
+ </div>
</template>
<script>
@@ -256,11 +255,11 @@
import chatHistory from './ChatHistoryView';
import cameraVideo from './cameraVideo.vue';
export default {
- components: {
- aiRetrieval,
- chatHistory,
- cameraVideo
- },
+ components: {
+ aiRetrieval,
+ chatHistory,
+ cameraVideo
+ },
data() {
return {
// 鏂板鍗＄墖瀹藉害璁＄畻鐩稿叧鏁版嵁
@@ -390,8 +389,7 @@
if (this.$refs.imageGrid) {
const containerWidth = this.$refs.imageGrid.clientWidth;
// 璁＄畻姣忚鍙互鏀剧疆鐨勫崱鐗囨暟閲忥紝鏈�灏�3鍒�
- const cardsPerRow = Math.max(3, Math.floor(containerWidth / (this.minCardWidth + this.margin)));
-
+ const cardsPerRow = Math.max(4, Math.floor(containerWidth / (this.minCardWidth + this.margin)));
// 璁剧疆鍗＄墖瀹藉害鍏紡
this.cardWidth = `calc(${100 / cardsPerRow}% - ${this.margin}px)`;
}
@@ -815,26 +813,30 @@
}
</style>
<style lang="scss" scoped>
-
/* 鏂板鍥剧墖缃戞牸甯冨眬鏍峰紡 */
.image-grid-container {
width: 100%;
- overflow: hidden; /* 瓒呭嚭閮ㄥ垎闅愯棌 */
+ overflow: hidden;
+ /* 瓒呭嚭閮ㄥ垎闅愯棌 */
}
.image-grid {
display: flex;
flex-wrap: wrap;
- margin: -10px; /* 璐熻竟璺濇姷娑堝寘瑁瑰厓绱犵殑杈硅窛 */
+ margin: -10px;
+ /* 璐熻竟璺濇姷娑堝寘瑁瑰厓绱犵殑杈硅窛 */
width: 100%;
}
.image-card-wrapper {
- margin: 10px; /* 璁剧疆鍗＄墖闂磋窛 */
+ margin: 10px;
+ /* 璁剧疆鍗＄墖闂磋窛 */
// box-sizing: border-box;
// transition: width 0.3s ease; /* 娣诲姞骞虫粦杩囨浮鏁堟灉 */
- min-width: 300px; /* 鍗＄墖鏈�灏忓搴� */
- flex-shrink: 0; /* 闃叉鍗＄墖缂╁皬 */
+ min-width: 300px;
+ /* 鍗＄墖鏈�灏忓搴� */
+ flex-shrink: 0;
+ /* 闃叉鍗＄墖缂╁皬 */
}
@@ -845,6 +847,7 @@
transform: translateY(-50%);
/* 鍨傜洿灞呬腑 */
}
+
.right-btn2 {
position: absolute;
right: 10.5%;
@@ -1091,10 +1094,13 @@
}
.results-container {
- padding: 0 15px;
+ // padding: 0 15px;
// min-height: 600px;
- overflow-x: hidden; /* 闅愯棌妯悜婊氬姩鏉� */
- overflow-y: auto; /* 淇濈暀绾靛悜婊氬姩 */
+ min-width: 1300px;
+ overflow-x: hidden;
+ /* 闅愯棌妯悜婊氬姩鏉� */
+ overflow-y: auto;
+ /* 淇濈暀绾靛悜婊氬姩 */
/* 鏂板婊氬姩鏉� */
height: 900px;
@@ -1233,7 +1239,7 @@
height: 98vh; // 鏂板
.left-sidebar {
- width: 320px;
+ min-width: 320px;
transition: all 0.3s ease;
left: 0;
// height: 100vh;
@@ -1273,6 +1279,7 @@
}
&.collapsed {
+ min-width: 40px;
width: 40px;
.ai-avatar {
@@ -1312,8 +1319,8 @@
.right-content {
transition: margin 0.3s ease;
- padding: 20px;
- min-height: 100vh;
+ // padding: 20px;
+ // min-height: 100vh;
background: #f5f6fa;
}
@@ -1355,10 +1362,11 @@
height: 70px;
/* 鏂板锛氬乏鍙充袱绔榻� */
- .content-title{
+ .content-title {
text-align: left;
margin: 15px 0 0 0;
}
+
.header-actions-right {
margin-top: 20px;
--
Gitblit v1.8.0