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

<template>
  <div class="centerPage">
    <div class="topPage" :class="{ 'full-height': hideFooter }">
      <!-- <img src="@/assets/projectLarge/center.png" alt="" style="width: 100%;object-fit: scale-down"> -->
    </div>
    <div class="endPage" :class="{ 'slide-out-down': hideFooter }" v-if="!isHide">
      <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, i) in 10" :key="i">
            <img src="@/assets/projectLarge/swiper.png" alt="安全巡检图片" class="swiper_img">
            <div class="swiper_date">2025-03-18</div>
            <div class="swiper_tip">未佩戴安全帽{{ i }}</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, onMounted } from "vue"
import Title from './title.vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'

const props = defineProps({
  hideFooter: {
    type: Boolean,
    default: false
  },
  isHide: {
    type: Boolean,
    default: false
  }
})

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

const swiperClick = (direction: 'left' | 'right') => {
  if (!swiperContent.value) return

  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
  }

  // 更新箭头状态
  canLeft.value = swiperContent.value.scrollLeft > 0
  canRight.value = swiperContent.value.scrollLeft < swiperContent.value.scrollWidth - swiperContent.value.clientWidth
}

onMounted(() => {
  if (swiperContent.value && swiperContent.value.children.length > 0) {
    swiperItemWidth.value = swiperContent.value.children[0].clientWidth + 20
  }
})
</script>

<style scoped lang="scss">
.centerPage {
  display: flex;
  flex-direction: column;
  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;
  transition: flex 1s ease;
  /* 添加flex过渡效果 */
}

/* 当endPage隐藏时，topPage占满高度 */
.full-height {
  flex: 1 1 100%;
  margin-bottom: 0;
}

.endPage {
  max-height: 300px;
  /* 根据实际内容调整最大高度 */
  opacity: 1;
  transition: all 1s ease;
}

/* 向下滑出动画 */
.slide-out-down {
  transform: translateY(100%);
  opacity: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
  border: none;
}

.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;
  cursor: pointer;
  transition: all 0.3s ease;

  &.canUse {
    background-color: skyblue;
    color: #fff !important;
  }

  &:hover:not(.canUse) {
    opacity: 0.7;
  }
}
</style>