client_iot-daoshi-template-h/src/components/ActivitiesList/ActivitiesList.vue

<template>
  <ScrollView class="scroll" :list="list" scrollX>
    <TransitionGroup name="zoom" tag="div" class="scroll-content">
      <div :class="['content-item', item === activity ? 'd' : '']" v-for="item of list" :key="item.activityId">
        <div class="front">
          <img :src="config.sourceUrl + item.fileUrl" alt="" />
          <div class="tr">{{ item.startDate }} - {{ item.endDate }}</div>
          <div class="bottom">
            <div class="left">{{ switchLanguage(item, 'activityName') }}</div>
            <div class="right" @click="handleActivity(item)">查看详情</div>
          </div>
        </div>
        <div class="back">
          <ScrollView class="backscroll" scrollbar stopPropagation>
            <div>
              <div class="title">{{ switchLanguage(item, 'activityName') }}</div>
              <div class="desc">
                {{ switchLanguage(item, 'activityContent') }}
              </div>
            </div>
          </ScrollView>
        </div>
      </div>
    </TransitionGroup>
  </ScrollView>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '@/store/root'
import ScrollView from '@/base/ScrollView/ScrollView.vue'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/effect-coverflow'

defineProps({
  list: {
    type: Array,
    default: () => []
  }
})
const showDetail = ref(false)
const activity = ref(null)
function handleActivity(item) {
  activity.value = item
  showDetail.value = true
}
const store = useStore()
const { config } = storeToRefs(store)
</script>

<style lang="scss" scoped>
.scroll {
  position: relative;
  flex: 1;
  overflow: hidden;
  :deep(.bscroll-vertical-scrollbar) {
    width: 48px !important;
    top: 48px !important;
    right: 7px !important;
    background: center / 6px 250px no-repeat url(@/assets/images/scrollBar.png);
    border-radius: 6px;
    opacity: 1 !important;
    height: 250px !important;
    &::after {
      position: absolute;
      content: '';
      left: 0;
      top: 120px;
      margin: auto;
      width: 48px;
      height: 61px;
      background: center / cover no-repeat url(@/assets/images/scrollHand.png);
    }
    .bscroll-indicator {
      height: 95px !important;
      width: 6px !important;
      left: 0;
      right: 0;
      margin: auto;
      background: #ffffff !important;
      border-radius: 6px !important;
      border: none !important;
    }
  }
  .scroll-content {
    display: inline-flex;
    align-items: center;
    padding: 100px 68px;
  }
  .content-item {
    position: relative;
    width: 944px;
    height: 532px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
    &.d {
      .front {
        z-index: 0;
      }
      .back {
        z-index: 1;
      }
    }
    .front {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .tr {
        position: absolute;
        top: 0;
        right: 0;
        font-family: 'Montserrat';
        background: rgba(0, 0, 0, 0.4);
        box-shadow: 0px 15px 24px rgba(173, 196, 236, 0.25);
        font-weight: 700;
        font-size: 16px;
        line-height: 40px;
        color: #ffffff;
        padding: 0 27px;
        height: 40px;
        border-radius: 0px 0px 0px 12px;
      }
      .bottom {
        position: absolute;
        display: flex;
        bottom: 0;
        width: 100%;
        height: 64px;
        .left {
          flex: 1;
          height: 100%;
          padding: 0 40px;
          background: rgba(0, 0, 0, 0.4);
          font-weight: 700;
          font-size: 18px;
          line-height: 64px;
          color: #ffffff;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .right {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 234px;
          height: 100%;
          background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
          box-shadow: 0px 15px 24px rgba(173, 196, 236, 0.25);
          font-weight: 700;
          font-size: 18px;
          line-height: 21px;
          text-align: center;
          color: #ffffff;
        }
      }
    }
    .back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      z-index: 0;
      background: #ffffff;
      .backscroll {
        position: relative;
        flex: 1;
        :deep(.bscroll-vertical-scrollbar) {
          width: 6px !important;
          top: 137px !important;
          right: 31px !important;
          background: rgba(0, 0, 0, 0.05) !important;
          border-radius: 6px;
          opacity: 1 !important;
          height: 174px !important;
          &::after {
            display: none;
          }
          .bscroll-indicator {
            height: 95px !important;
            width: 6px !important;
            left: 0;
            right: 0;
            margin: auto;
            background: rgba(0, 0, 0, 0.1) !important;
            border-radius: 6px !important;
            border: none !important;
          }
        }
        .title {
          font-weight: 700;
          font-size: 28px;
          line-height: 150%;
          padding: 48px 68px 40px 68px;
          color: rgba(0, 0, 0, 0.8);
        }
        .desc {
          padding: 0 68px;
          padding-bottom: 23px;
          font-weight: 400;
          font-size: 16px;
          line-height: 200%;
          color: rgba(0, 0, 0, 0.6);
        }
      }
    }
  }
  .content-item + .content-item {
    margin-left: 32px;
  }
}
</style>