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

<template>
  <div class="wrap">
    <div class="case_detail_container" id="hardware_detail_container">
      <div class="empty" v-if="showEmpty"></div>
      <div class="content">
        <Tabs />
        <Trumbs />
        <div class="content_detail">
          <div class="left_swiper">
            <div class="header_intro">
              <p>
                {{
                  case_detail_list[hardware_id] &&
                  case_detail_list[hardware_id][hardwareExampleId]?.title
                }}
              </p>
              <!-- <p class="p_text">PICTURE</p> -->
            </div>
            <swiper
              :pagination="true"
              :modules="modules"
              class="case_detail_swiper"
            >
              <swiper-slide
                v-for="item in case_detail_list[hardware_id] &&
                case_detail_list[hardware_id][hardwareExampleId]?.swiperList"
                :key="item.id"
              >
                <img :src="item.picUrl" class="img_swiper" alt="" />
              </swiper-slide>
            </swiper>
          </div>
          <div class="placeholder"></div>
          <div
            class="right_detail"
            v-on:mouseover="mouseover"
            v-on:mouseleave="mouseleave"
          >
            <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[hardware_id] &&
                  case_detail_list[hardware_id][hardwareExampleId]?.detailList
                    ?.topText
                "
              />
              <div
                class="card_container"
                v-for="(item, index) in case_detail_list[hardware_id] &&
                case_detail_list[hardware_id][hardwareExampleId]?.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 v-if="item?.cardText" :text="item?.cardText" />
                <Intro v-if="item?.cardIntro" :cardIntro="item?.cardIntro" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

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(false)
const modules = ref([Pagination])
const detailStore = useDetailStore()
const swiperStore = useSwiperStore()
const { hardware_id, hardwareExampleId } = storeToRefs(detailStore)
onMounted(() => {
  handleScreenAuto(showEmpty, '#hardware_detail_container')
  window.onresize = handleScreenAuto(showEmpty, '#hardware_detail_container')
})

const mouseover = function () {
  swiperStore.swiper.disable()
}
const mouseleave = function () {
  swiperStore.swiper.enable()
}
</script>

<style lang="scss" scoped>
.wrap {
  width: 100vw;
  height: 100vh;
  background: $common_bg;
  position: relative;
  .case_detail_container {
    width: 100%;
    height: 100%;
    .empty {
      min-height: 90px;
    }
    .content {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding: 77px 153px 130px 153px;
      .content_detail {
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        position: relative;
        .left_swiper {
          width: 1024px;
          height: 100%;
          position: relative;
          .img_swiper {
            width: 100%;
            height: 100%;
          }
          .header_intro {
            position: absolute;
            top: 0;
            min-height: 80px;
            left: 0;
            right: 0;
            z-index: 99;
            padding: 26px 43px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 28px;
            font-family: DFPYuanW7-GB;
            box-sizing: border-box;
            font-weight: 400;
            background: linear-gradient(90deg, #283fe7, #4b17e1);
            color: #fafafa;
            .p_text {
              font-size: 22px;
              font-family: 'ZonaPro';
              font-weight: 800;
            }
          }
        }
        .placeholder {
          flex: 1;
          height: 100%;
        }
        .right_detail {
          transition-property: all;
          transition-duration: 0.7s;
          animation-fill-mode: forwards;
          position: absolute;
          top: 0;
          right: 0;
          width: 591px;
          overflow: scroll;
          z-index: 100;
          height: 100%;
          scrollbar-width: none; /* firefox */
          overflow-x: auto;
          .detail_header {
            position: sticky;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            padding: 30px 25px;
            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;
            .card_container {
              background: linear-gradient(#f9f9f9, #fff);
            }
          }
        }
        .right_detail:hover {
          z-index: 120;
          width: 1000px;
        }
      }
    }
  }
}
</style>