vent-forewarn-micro/src/views/vent/fire/fireHome/components/safetyJc.vue

<template>
  <div class="safetyJc">
    <div class="safety-head">
      <div class="safety-head-item" v-for="(item, index) in safetyHeadList" :key="index">{{
        item.label
      }}</div>
    </div>
    <div class="safety-content">
      <vue3-seamless-scroll hover-stop="true" :list="safetyList" :hover="true" :step="0.15" class="seamless-warp">
        <div class="safety-content-box" v-for="(ite, ind) in safetyList" :key="ind">
          <span v-if="ite.address">{{ ite.address }}</span>
          <span v-if="ite.nd">{{ ite.nd }}</span>
          <span v-if="ite.temp">{{ ite.temp }}</span>
          <span v-if="ite.grade">{{ ite.grade }}</span>
          <span v-if="ite.time">{{ ite.time }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineProps, watch } from 'vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'

let props = defineProps({
  safetyHead: {
    type: Array,
    default: () => {
      return []
    }
  },
  safetyList: {
    type: Array,
    default: () => {
      return []
    }
  }
})

let safetyHeadList = ref<any[]>([]);

let safetyList = ref<any[]>([]);

watch(() => props.safetyHead, (newH, oldH) => {
  if (newH.length != 0) {
    safetyHeadList.value = newH
  }
}, {
  immediate: true,
  deep: true
})
watch(() => props.safetyList, (newL, oldL) => {
  if (newL.length != 0) {
    safetyList.value = newL
  }
}, {
  immediate: true,
  deep: true
})
</script>

<style lang="less" scoped>
.safetyJc {
  position: relative;
  width: 100%;
  height: 100%;

  .safety-head {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    padding: 0 7px;

    .safety-head-item {
      color: #1fb3f7;
      font-weight: bold;

      &:first-child {
        display: flex;
        flex: 2.5;
        align-items: center;
        justify-content: center;
      }

      &:nth-child(2) {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
      }

      &:nth-child(3) {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
      }

      &:nth-child(4) {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
      }

      &:last-child {
        display: flex;
        flex: 2;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .safety-content {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: calc(100% - 30px);
    overflow: hidden;

    .seamless-warp{
      width: 100%;

      .safety-content-box {
      display: flex;
      box-sizing: border-box;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 24px;
      margin-bottom: 10px;
      padding: 0 7px;
      background: url('../../../../../assets/images/fire/firehome/safety1.png') no-repeat center;
      background-size: 100% 100%;

      span {
        color: #fff;

        &:first-child {
          display: flex;
          flex: 2.5;
          align-items: center;
          justify-content: center;
          height: 100%;
          background: url('../../../../../assets/images/fire/firehome/safety2.png') no-repeat center;
          background-size: 100% 100%;
        }

        &:nth-child(2) {
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: center;
          height: 100%;
        }

        &:nth-child(3) {
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: center;
          height: 100%;
        }

        &:nth-child(4) {
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: center;
          height: 100%;
        }

        &:last-child {
          display: flex;
          flex: 2;
          align-items: center;
          justify-content: center;
          height: 100%;
        }
      }
    }
    }

    

  }
}
</style>