fix:修改文字位置

ZhangXianQiang

2024-03-05 6c757d5dab619fd759854778978270f0eecaec93

 src/views/daoAnOffice/right/danger/index.vue

@@ -4,111 +4,48 @@
  <RightTitle title="安全隐患情况">
    <template #top>
      <div class="select-container flex">
        <div class="item whitespace-no-wrap cursor-pointer" v-for="item in selectItems" :key="item.itemIndex">
        <div class="item whitespace-no-wrap cursor-pointer" :class="{ 'select-active': item.isActive }"
          v-for="item in selectItems" :key="item.itemIndex" @click="changeSelect(item)">
          {{ item.name }}
        </div>
      </div>
    </template>

    <template #content>
      <div class="content-container flex flex-col justify-between">
        <div class="content-item" v-for="item in contentList" :key="item.itemIndex">
          <div class="content-wrapper flex justify-between">

            <!-- 信息面板 -->
            <div class="info-content flex flex-col justify-between">
              <div class="info-item">
                <span class="info-label">通择时问：</span>
                <span class="info-value">{{ item.time }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">隐患类型：</span>
                <span class="info-value">{{ item.type }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">责任单位：</span>
                <span class="info-value">{{ item.unit }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">鄂改时限：</span>
                <span class="info-value">{{ item.rectTime }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">完成情况：</span>
                <span class="info-value">{{ item.state }}</span>
              </div>
            </div>

            <!-- 图片列表 -->
            <div class="image-content flex justify-between items-center">
              <ImageSwiper :imageList="item.images"></ImageSwiper>
            </div>
          </div>
        </div>
      </div>
      <InfoView :key="selectItems[0].itemIndex" v-show="selectItems[0].isActive"></InfoView>
      <DataView :key="selectItems[1].itemIndex" v-show="selectItems[1].isActive"></DataView>
      <!-- <TransitionGroup name="fade" mode="out-in">
        
      </TransitionGroup> -->
    </template>

  </RightTitle>
</template>

<script setup lang="ts">
import testImage from '@/assets/img/test_img/道安办.png';
<script setup>

import RightTitle from "@/components/right-title";
import ImageSwiper from './imageSwiper.vue';
import { ref } from 'vue';
import DataView from './dataView.vue';
import InfoView from './infoView.vue';
import { ref, provide } from 'vue';


const tableState = ref(false);
const selectItems = ref([
  { itemIndex: 1, name: '安全隐患', isActive: false },
  { itemIndex: 2, name: '数据统计', isActive: true },
  { itemIndex: 1, name: '安全隐患', isActive: true },
  { itemIndex: 2, name: '数据统计', isActive: false },
]);
// 依赖
provide('tableState',tableState);

const contentList = ref([
  {
    itemIndex: 1,
    time: '2023 12-12',
    type: '道路隐患',
    unit: '都江堰市公安局',
    rectTime: '2023-13-23',
    state: '抢修中',
    images: [
      testImage,
      testImage,
      testImage,
      testImage,
      testImage,
    ]
  },
  {
    itemIndex: 2,
    time: '2023 12-12',
    type: '道路隐患',
    unit: '都江堰市公安局',
    rectTime: '2023-13-23',
    state: '抢修中',
    images: [
      testImage,
      testImage,
      testImage,
      testImage,
      testImage,
    ]
  },
  {
    itemIndex: 3,
    time: '2023 12-12',
    type: '道路隐患',
    unit: '都江堰市公安局',
    rectTime: '2023-13-23',
    state: '抢修中',
    images: [
      testImage,
      testImage,
      testImage,
      testImage,
      testImage,
    ]
const changeSelect = (selectItem) => {
  selectItems.value.map(item => item.isActive = false);
  selectItem.isActive = true;
  if (selectItem.itemIndex === 2) {
    tableState.value = true;
  } else {
    tableState.value = false;
  }
]);
}

</script>

@@ -120,32 +57,31 @@
.item {
  margin: 0 8px;
  padding: 10px 14px;
  font-size: 12px;
  font-size: 14px;
  background: rgba(67, 102, 155, 0.4);
  border: 1px solid rgba(47, 91, 157, 0.8);
  flex-shrink: 0;
  color: #5B83BD;
  font-family: 'PingFang SC';
}

.select-active {
  color: #fff;
}

.item:last-child {
  margin-right: 0;
}
.content-container {
  height: 560px;
}
.content-item {
  background-color: rgba(17, 34, 58, 0.6);
  padding: 23px 7px 23px 23px;
  border: 1px solid #29466A;
}
.content-item:last-child {
  margin-bottom: 0px;

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.info-item {
  font-size: 12px;
.fade-enter,
.fade-leave-to {
  opacity: 0;
  transition: opacity 0.5s;

  .info-label {
    color: rgba(91, 131, 189, 1);
  }
}
</style>