BigScreen/src/views/home/leftbox/middleBox.vue

<template>
  <div class="left-top-box">
    <div class="flex gap-15px h-90px">
      <div
        class="box-style color- flex-1 flex flex-col flex-justify-center flex-items-center gap-2px"
      >
        <span>监控点位</span>
        <Countto class="text-20px color-#389bff font-bold" :endVal="80" />
      </div>
      <div class="box-style flex-1 flex flex-col flex-justify-center flex-items-center gap-2px">
        <span>智能分析</span>
        <Countto class="text-20px color-#389bff font-bold" :endVal="60" />
      </div>
    </div>
    <ECharts
      id="sbxx-echarts"
      width="100%"
      height="280px"
      :loading="loading"
      :fullOptions="{ options: chartOptions.setSbxxOption() }"
    />
    <!-- <swiper
      :spaceBetween="30"
      :centeredSlides="true"
      :autoplay="{
        delay: 5000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true
      }"
      :pagination="{
        clickable: true
      }"
      :modules="modules"
      class="mySwiper"
    >
      <swiper-slide>
        <ECharts
          id="sbxx-echarts"
          width="100%"
          height="280px"
          :loading="loading"
          :fullOptions="{ options: chartOptions.setSbxxOption() }"
        />
      </swiper-slide>
      <swiper-slide>
        <ECharts
          id="sbxx-echarts2"
          width="100%"
          height="280px"
          ref="echartsRef"
          :loading="loading"
          :fullOptions="{ options: chartOptions.setSbxxOption2() }"
        />
      </swiper-slide>
    </swiper> -->
  </div>
</template>

<script setup>
  import { chartOptions } from '@/components/ECharts/optionsConfig'
  import { Swiper, SwiperSlide } from 'swiper/vue'
  import { Autoplay, Pagination, Navigation } from 'swiper/modules'
  import 'swiper/css'

  import 'swiper/css/pagination'
  import 'swiper/css/navigation'

  const modules = [Autoplay, Pagination, Navigation]
  const loading = ref(true)
  const echartsRef = ref(null)

  onMounted(() => {
    setTimeout(() => {
      loading.value = false
    }, 1000)
  })
</script>

<style scoped lang="scss">
  .box-style {
    background: url('@/assets/images/box-bg.png') no-repeat center;
    background-size: 100% 100%;
  }
  .left-top-box {
    :deep(.swiper) {
      width: 100%;
      height: 300px;
      .swiper-slide {
        height: 100%;
      }
      .swiper-pagination {
        --swiper-pagination-bottom: -5px;
      }
      .swiper-pagination-bullet {
        --swiper-pagination-bullet-width: 20px;
        --swiper-pagination-bullet-height: 4px;
        border-radius: 0;
      }
    }
  }
</style>