文搜万物-卡片样式调整，自适应容器宽度改变大小

sd

2025-08-11 0ac0f33a9b8fbfa137111422fe47c7cb6fe7ebde

文搜万物-卡片样式调整，自适应容器宽度改变大小

 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;