You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
340 lines
10 KiB
340 lines
10 KiB
<template>
|
|
<div class="wrap">
|
|
<div class="empty" v-if="showEmpty"></div>
|
|
<div class="flex_center" id="hardware_detail_container_flex_center">
|
|
<div class="hardware_detail_container" id="hardware_detail_container">
|
|
<div class="content">
|
|
<Tabs @onMySonFunc="funcToSon" :isCase="false" />
|
|
<Trumbs @onMySonFunc="funcToSon" :isCase="false" />
|
|
<div class="content_detail">
|
|
<div class="left_swiper">
|
|
<div class="header_intro">
|
|
<p>
|
|
{{
|
|
hardware_list[hardware_id] &&
|
|
hardware_list[hardware_id][hardwareExampleId]?.title
|
|
}}
|
|
</p>
|
|
</div>
|
|
<div class="case_swiper_wrap" :key="componentKey">
|
|
<swiper
|
|
:pagination="true"
|
|
:modules="modules"
|
|
:autoHeight="true"
|
|
class="case_detail_swiper"
|
|
>
|
|
<swiper-slide
|
|
v-for="item in hardware_list[hardware_id] &&
|
|
hardware_list[hardware_id][hardwareExampleId]?.swiperList"
|
|
:key="item.id"
|
|
>
|
|
<div class="swiper_div_wrap">
|
|
<img v-lazy="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"
|
|
:key="componentKey"
|
|
>
|
|
<div class="detail_header">
|
|
<div>详情页</div>
|
|
<div class="right">
|
|
<p class="en">DETAILS PAGE</p>
|
|
</div>
|
|
</div>
|
|
<div class="article">
|
|
<Paragraph
|
|
:text="
|
|
hardware_list[hardware_id] &&
|
|
hardware_list[hardware_id][hardwareExampleId]?.detailList
|
|
?.topText
|
|
"
|
|
:isHtml="
|
|
hardware_list[hardware_id] &&
|
|
hardware_list[hardware_id][hardwareExampleId]?.detailList
|
|
?.isHtml
|
|
"
|
|
/>
|
|
<div
|
|
class="card_container"
|
|
v-for="(item, index) in hardware_list[hardware_id] &&
|
|
hardware_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
|
|
: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 { hardware_list } from '@/mock/hardware'
|
|
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 { hardware_id, hardwareExampleId } = storeToRefs(detailStore)
|
|
const componentKey = ref(0)
|
|
const forceRerender = () => {
|
|
componentKey.value = 1 + componentKey.value
|
|
}
|
|
const funcToSon = () => {
|
|
forceRerender()
|
|
}
|
|
onMounted(() => {
|
|
const func = () => {
|
|
handleScreenAuto('#hardware_detail_container')
|
|
handleScreenToFlexCenter(
|
|
'#hardware_detail_container',
|
|
'#hardware_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;
|
|
.hardware_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: 220%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|