td_official/src/views/ProjectScreen/components/centerPage.vue

<template>
  <div class="centerPage">
    <div class="topPage">
      <!-- 暂无 -->
    </div>
    <div class="endPage">
      <Title title="AI安全巡检" :prefix="true" />

      <div class="swiper">
        <div class="arrow" :class="{ 'canUse': canLeft }" @click="swiperClick('left')">
          <el-icon size="16" color="skyblue">
            <ArrowLeft />
          </el-icon>
        </div>
        <div class="swiper_content" ref="swiperContent">
          <div class="swiper_item" v-for="(item, index) in swiperList" :key="index">
            <img src="@/assets/projectLarge/swiper.png" alt="" class="swiper_img">
            <div class="swiper_date">{{ item.date }}</div>
            <div class="swiper_tip">{{ item.tip }}</div>
          </div>
        </div>
        <div class="arrow" :class="{ 'canUse': canRight }" @click="swiperClick('right')">
          <el-icon size="16">
            <ArrowRight />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import Title from './title.vue'

const swiperList = ref([
  { date: '03-18 15:00', tip: '未佩戴安全帽1' },
  { date: '03-18 15:00', tip: '未佩戴安全帽2' },
  { date: '03-18 15:00', tip: '未佩戴安全帽3' },
  { date: '03-18 15:00', tip: '未佩戴安全帽4' },
  { date: '03-18 15:00', tip: '未佩戴安全帽5' },
  { date: '03-18 15:00', tip: '未佩戴安全帽6' },
  { date: '03-18 15:00', tip: '未佩戴安全帽7' },
  { date: '03-18 15:00', tip: '未佩戴安全帽8' },
  { date: '03-18 15:00', tip: '未佩戴安全帽9' },
  { date: '03-18 15:00', tip: '未佩戴安全帽10' },
  { date: '03-18 15:00', tip: '未佩戴安全帽11' },
  { date: '03-18 15:00', tip: '未佩戴安全帽12' },
])

const swiperContent = ref<HTMLDivElement>()
const swiperItemWidth = ref(100)
const canLeft = ref(false)
const canRight = ref(true)

const swiperClick = (direction: 'left' | 'right') => {

  if (direction === 'right') {
    if (swiperContent.value.scrollLeft >= swiperContent.value.scrollWidth - swiperContent.value.clientWidth) {
      canRight.value = false
      canLeft.value = true
      return
    }
    swiperContent.value.scrollLeft += swiperItemWidth.value
  } else {
    if (swiperContent.value.scrollLeft <= 0) {
      canLeft.value = false
      canRight.value = true
      return
    }
    swiperContent.value.scrollLeft -= swiperItemWidth.value
  }
}

onMounted(() => {
  swiperItemWidth.value = swiperContent.value.children[0].clientWidth + 20
})

</script>

<style scoped lang="scss">
.centerPage {
  display: flex;
  flex-direction: column;
  width: 50vw;
  height: 100%;

  .topPage,
  .endPage {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 15px 0;
    border: 1px solid rgba(29, 214, 255, 0.1);
    box-sizing: border-box;
  }

  .topPage {
    flex: 1;
    margin-bottom: 23px;
  }
}

.swiper {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 20px 10px 20px;

  .swiper_content {
    width: 100%;
    display: flex;
    gap: 20px;
    transition: all 0.3s ease-in-out;
    overflow-x: auto;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .swiper_item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 133px;
    height: 84px;

    .swiper_img {
      width: 133px;
      height: 84px;
      object-fit: cover;
    }

    .swiper_date {
      position: absolute;
      top: 4px;
      right: 4px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(230, 247, 255, 1);
    }

    .swiper_tip {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 5px 0;
      text-align: center;
      font-size: 12px;
      font-weight: 400;
      color: rgba(230, 247, 255, 1);
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
}

.arrow {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid skyblue;
  color: skyblue;

  &:canUse {
    color: #000 !important;
  }
}
</style>