救援队伍统计、应急空间统计、风险源统计图表样式初步调整，园区概况布局调整 倾斜模型加载配置微调后续看加载效果 企业名录样式调整

shuishen

2024-11-05 7bcdaba7faad85bf16bf0f2a1dbd3e390bdb15dd

 src/views/survey/components/box/fireSource.vue

@@ -1,6 +1,5 @@
<script setup>
import { Text } from 'vue'
import publicContent from './publicContent.vue'
const { VITE_APP_BASE } = import.meta.env
import { getDetail } from '@/api/indParkInfo'

@@ -86,45 +85,38 @@
</script>

<template>
  <public-content>
    <template #content>
      <div class="box-content-box">
        <div class="box-content">
          <div>
            <div class="box-content-img">
              <img :src="state.parkInfo.imageUrls" alt="">
              {{ state.parkInfo.remark }}
            </div>
          </div>
  <div class="box-content-box">
    <div class="box-content">
      <div>
        <div class="box-content-img">
          <img :src="state.parkInfo.imageUrls" alt="">
          {{ state.parkInfo.remark }}
        </div>
      </div>
    </div>

        <div class="container">
          <div class="box-content-sj" v-for="item in parkInfoList" :key="item.id">
            <img :src="item.img" alt="">
            <div>
              <div class="box-content-ss">
                <div>
                  <div class="box-content-text-title">
                    <span class="box-content-text-title-span">{{ item.content }}</span>
                  </div>
                </div>
                <div>
                  <div class="box-content-text-content">
                    <text class="box-content-text-content-span">{{ item.title }}</text>
                    <text v-if="item.unit" class="box-content-text-content-span">({{ item.unit }})</text>
                  </div>
                </div>
              </div>
            </div>
    <div class="container">
      <div class="box-content-sj" v-for="item in parkInfoList" :key="item.id">
        <img :src="item.img" alt="">

        <div class="r">
          <div class="box-content-text-title">
            {{ item.content }}
          </div>

          <div class="box-content-text-content">
            {{ item.title }}
            <text v-if="item.unit">({{ item.unit }})</text>
          </div>
        </div>
      </div>
    </template>
  </public-content>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box-content-box {
  padding: 10px;
  color: #fff;
  font-size: 15px;
}
@@ -135,7 +127,7 @@
}

.box-content-img {
  height: 300px;
  height: 360px;
  overflow-x: hidden;
  overflow-y: auto;
}
@@ -155,7 +147,7 @@

.box-content-text {
  padding-left: 5px;
  height: 300px;
  height: 360px;
  overflow: scroll;
  // 隐藏滚动条
  scrollbar-width: none;
@@ -163,43 +155,48 @@
}

.container {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 5px;
}

.box-content-sj {
  flex: 1 1 31%;
  /* 每个盒子占据大约31%的宽度，留出一些空间用于间距 */
  min-width: 100px;
  min-width: 30%;
  /* 最小宽度，防止在非常小的屏幕上变得太窄 */
  box-sizing: border-box;
  padding: 5px;
  // border: 1px solid #ccc;
  display: flex;
  // 设置高度
  align-items: center;
}
  justify-content: space-between;

.box-content-sj img {
  width: 36px;
  height: 36px;
  vertical-align: middle;
}
  img {
    width: 36px;
    height: 36px;
    vertical-align: middle;
  }

.box-content-ss {
  margin: 0px 0px 0px 10px;
}
  .r {
    margin-left: 6px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

.box-content-text-title,
.box-content-text-content {
  margin-top: 5px;
  font-size: 10px;
  text-align: center;
}
    .box-content-text-title,
    .box-content-text-content {
      margin-top: 5px;
      font-size: 10px;
      text-align: center;
    }

.box-content-text-title-span,
.box-content-text-content-span {
  font-weight: bold;
    .box-content-text-title {
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style>