hjyd/src/views/Index/components/CaseDetails/index.vue

<template>
  <div class="wrap">
    <div class="empty" v-if="showEmpty"></div>
    <div class="flex_center" id="case_detail_container_flex_center">
      <div class="case_detail_container" id="case_detail_container">
        <div class="content">
          <Tabs :isCase="true" />
          <Trumbs :isCase="true" />
          <div class="content_detail">
            <div class="left_swiper">
              <div class="header_intro">
                <p>
                  {{
                    case_detail_list[industry_id] &&
                    case_detail_list[industry_id][example_id]?.title
                  }}
                </p>
              </div>
              <div class="case_swiper_wrap">
                <swiper
                  :pagination="true"
                  :modules="modules"
                  :autoHeight="true"
                  class="case_detail_swiper"
                >
                  <swiper-slide
                    v-for="item in case_detail_list[industry_id] &&
                    case_detail_list[industry_id][example_id]?.swiperList"
                    :key="item.id"
                  >
                    <div class="swiper_div_wrap">
                      <img :src="item.picUrl" class="img_swiper" alt="" />
                    </div>
                  </swiper-slide>
                </swiper>
              </div>
            </div>
            <div class="placeholder">
              <div
                class="right_detail"
                v-on:mouseover="mouseover"
                v-on:mouseleave="mouseleave"
                @scroll="handleScroll"
              >
                <div class="detail_header">
                  <div>详情页</div>
                  <div class="right">
                    <p class="en">DETAILS PAGE</p>
                  </div>
                </div>
                <div class="article">
                  <Paragraph
                    :text="
                      case_detail_list[industry_id] &&
                      case_detail_list[industry_id][example_id]?.detailList
                        ?.topText
                    "
                    :isHtml="
                      case_detail_list[industry_id] &&
                      case_detail_list[industry_id][example_id]?.detailList
                        ?.isHtml
                    "
                  />
                  <div
                    class="card_container"
                    v-for="(item, index) in case_detail_list[industry_id] &&
                    case_detail_list[industry_id][example_id]?.detailList?.card"
                    :key="index"
                  >
                    <CardTitle
                      :title="item?.cardTitle"
                      :blue_title="item?.cardBlueTitle"
                      :en="item?.en"
                    />
                    <IMG
                      :double="item?.isDouble"
                      :pic1="item?.pic1"
                      :pic2="item?.pic2"
                    />
                    <Paragraph
                      :isHtml="item.isHtml"
                      v-if="item?.cardText"
                      :text="item?.cardText"
                    />
                    <Intro
                      v-if="item?.cardIntro"
                      :cardIntro="item?.cardIntro"
                    />
                    <video
                      v-if="item?.video"
                      controls
                      style="width: 100%; height: auto; object-fit: fill"
                      controlslist="nodownload"
                    >
                      <source :src="item?.video" />
                    </video>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { handleScreenAuto, handleScreenToFlexCenter } from '@/common/utils'
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Pagination } from 'swiper'
import { case_detail_list } from '@/mock/case'
import { useDetailStore, useSwiperStore } from '@/store'
import { storeToRefs } from 'pinia'
import Video from 'cpns/Video'

import 'swiper/css'
import 'swiper/css/pagination'
import Paragraph from 'cpns/Paragraph'
import IMG from 'cpns/Img'
import CardTitle from 'cpns/CardTitle'
import Tabs from 'cpns/Tabs'
import Trumbs from 'cpns/Trumbs'
import Intro from 'cpns/Intro'
const showEmpty = ref(true)
const modules = ref([Pagination])
const detailStore = useDetailStore()
const swiperStore = useSwiperStore()
const { industry_id, example_id } = storeToRefs(detailStore)
onMounted(() => {
  const func = () => {
    handleScreenAuto('#case_detail_container')
    handleScreenToFlexCenter(
      '#case_detail_container',
      '#case_detail_container_flex_center',
    )
  }
  func()
  window.onresize = func
})

const mouseover = function () {
  swiperStore.swiper.disable()
}
const mouseleave = function () {
  swiperStore.swiper.enable()
}
const handleScroll = e => {
  const { scrollTop, clientHeight, scrollHeight } = e.target
  if (scrollTop == 0) {
    swiperStore.swiper.enable()
  }
  if (scrollTop + clientHeight === scrollHeight) {
    swiperStore.swiper.enable()
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  width: 100vw;
  height: 100vh;
  background: $common_bg;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 50px;
  ::-webkit-scrollbar {
    width: 25px;
    background-color: #f1f1f1;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
  }
  ::-webkit-scrollbar-button:vertical:end:increment {
    width: 25px;
    height: 25px;
    background: url(../../../../assets/img/scroll/bottom.png) no-repeat;
    background-size: 100% 100%;
  }
  ::-webkit-scrollbar-button:vertical:start:decrement {
    width: 25px;
    height: 25px;
    background: url(../../../../assets/img/scroll/top.png) no-repeat;
    background-size: 100% 100%;
  }
  ::-webkit-scrollbar-button:vertical:end:increment,
  ::-webkit-scrollbar-button:vertical:start:decrement {
    display: block;
  }
  .empty {
    width: 100%;
    min-height: 90px;
  }
  .flex_center {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    .case_detail_container {
      max-width: 100vw;
      height: 100%;
      .content {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 40px 153px 0 153px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        .content_detail {
          flex: 1;
          box-sizing: border-box;
          margin-top: 30px;
          display: flex;
          justify-content: space-between;
          position: relative;
          .left_swiper {
            width: 1024px;
            position: relative;
            flex: 1;
            display: flex;
            // justify-content: space-between;
            flex-direction: column;
            .case_swiper_wrap {
              // flex: 1;
            }
            .swiper_div_wrap {
              // width: 1024px;
              width: 100%;
              // height: 576px;
              overflow: hidden;
              .img_swiper {
                width: 1024px;
                height: 576px;
                object-fit: cover;
              }
            }
            .header_intro {
              height: 80px;
              padding: 0 43px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 28px;
              font-family: DFPYuanW7-GB;
              box-sizing: border-box;
              font-weight: 400;
              z-index: 333;
              background: linear-gradient(90deg, #283fe7, #4b17e1);
              color: #fafafa;
              .p_text {
                font-size: 22px;
                font-family: 'ZonaPro';
                font-weight: 800;
              }
            }
          }
          .placeholder {
            flex: 1;
            position: relative;
            height: 656px;
            z-index: 999;
            .right_detail {
              transition-property: all;
              transition-duration: 0.1s;
              animation-fill-mode: forwards;
              position: absolute;
              top: 0;
              right: 0;
              flex: 1;
              z-index: 999;
              overflow: scroll;
              z-index: 100;
              height: 100%;
              width: 100%;
              scrollbar-width: none; /* firefox */
              overflow-x: auto;
              .detail_header {
                position: sticky;
                top: 0;
                left: 0;
                right: 0;
                width: 100%;
                padding: 0 25px;
                height: 80px;
                background: linear-gradient(90deg, #283fe7, #4b17e1);
                font-size: 20px;
                font-family: DFPYuanW7-GB;
                font-weight: 400;
                color: #ffffff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                box-sizing: border-box;
                .right {
                  display: flex;
                  align-items: center;
                  font-size: 18px;
                  font-family: Alibaba PuHuiTi;
                  .en {
                    font-size: 10px;
                    font-family: ' ZonaPro';
                  }
                }
              }
              .article {
                min-height: 100%;
                background: #fff;
                z-index: 222;
                .card_container {
                  background: linear-gradient(#f9f9f9, #fff);
                }
              }
            }
            .right_detail:hover {
              z-index: 120;
              width: 160%;
            }
          }
        }
      }
    }
  }
}
</style>