|
|
@ -2,10 +2,10 @@ |
|
|
|
<div class="wrap"> |
|
|
|
<div class="empty" v-if="showEmpty"></div> |
|
|
|
<div class="flex_center"> |
|
|
|
<div class="case_detail_container" id="hardware_detail_container"> |
|
|
|
<div class="hardware_detail_container" id="hardware_detail_container"> |
|
|
|
<div class="content"> |
|
|
|
<Tabs /> |
|
|
|
<Trumbs /> |
|
|
|
<Tabs :isCase="true" /> |
|
|
|
<Trumbs :isCase="true" /> |
|
|
|
<div class="content_detail"> |
|
|
|
<div class="left_swiper"> |
|
|
|
<div class="header_intro"> |
|
|
@ -15,13 +15,12 @@ |
|
|
|
case_detail_list[hardware_id][hardwareExampleId]?.title |
|
|
|
}} |
|
|
|
</p> |
|
|
|
<!-- <p class="p_text">PICTURE</p> --> |
|
|
|
</div> |
|
|
|
<swiper |
|
|
|
:pagination="true" |
|
|
|
:modules="modules" |
|
|
|
class="case_detail_swiper" |
|
|
|
style="width: 1024px; height: 576px; background: none" |
|
|
|
style="background: none" |
|
|
|
> |
|
|
|
<swiper-slide |
|
|
|
v-for="item in case_detail_list[hardware_id] && |
|
|
@ -32,46 +31,50 @@ |
|
|
|
</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 class="placeholder"> |
|
|
|
<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> |
|
|
|
<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" |
|
|
|
<div class="article"> |
|
|
|
<Paragraph |
|
|
|
:text=" |
|
|
|
case_detail_list[hardware_id] && |
|
|
|
case_detail_list[hardware_id][hardwareExampleId] |
|
|
|
?.detailList?.topText |
|
|
|
" |
|
|
|
/> |
|
|
|
<Paragraph v-if="item?.cardText" :text="item?.cardText" /> |
|
|
|
<Intro v-if="item?.cardIntro" :cardIntro="item?.cardIntro" /> |
|
|
|
<!-- <Video /> --> |
|
|
|
<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" |
|
|
|
/> |
|
|
|
<!-- <Video /> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -88,9 +91,10 @@ 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 { 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' |
|
|
@ -100,7 +104,6 @@ import CardTitle from 'cpns/CardTitle' |
|
|
|
import Tabs from 'cpns/Tabs' |
|
|
|
import Trumbs from 'cpns/Trumbs' |
|
|
|
import Intro from 'cpns/Intro' |
|
|
|
import Video from 'cpns/Video' |
|
|
|
const showEmpty = ref(true) |
|
|
|
const modules = ref([Pagination]) |
|
|
|
const detailStore = useDetailStore() |
|
|
@ -137,7 +140,7 @@ const mouseleave = function () { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
.case_detail_container { |
|
|
|
.hardware_detail_container { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
.empty { |
|
|
@ -146,10 +149,12 @@ const mouseleave = function () { |
|
|
|
.content { |
|
|
|
box-sizing: border-box; |
|
|
|
width: 100%; |
|
|
|
padding: 77px 153px 130px 153px; |
|
|
|
padding: 20px 153px 60px 153px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
flex-direction: column; |
|
|
|
.content_detail { |
|
|
|
height: 576px; |
|
|
|
width: 100%; |
|
|
|
flex: 1; |
|
|
|
box-sizing: border-box; |
|
|
|
margin-top: 30px; |
|
|
|
display: flex; |
|
|
@ -157,19 +162,17 @@ const mouseleave = function () { |
|
|
|
position: relative; |
|
|
|
.left_swiper { |
|
|
|
width: 1024px; |
|
|
|
height: 100%; |
|
|
|
position: relative; |
|
|
|
.img_swiper { |
|
|
|
.case_detail_swiper { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
.img_swiper { |
|
|
|
width: 1024px; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
.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; |
|
|
@ -189,60 +192,62 @@ const mouseleave = function () { |
|
|
|
} |
|
|
|
.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 { |
|
|
|
z-index: 999; |
|
|
|
position: sticky; |
|
|
|
height: auto; |
|
|
|
position: relative; |
|
|
|
.right_detail { |
|
|
|
transition-property: all; |
|
|
|
transition-duration: 0.7s; |
|
|
|
animation-fill-mode: forwards; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
flex: 1; |
|
|
|
overflow: scroll; |
|
|
|
z-index: 100; |
|
|
|
height: 100%; |
|
|
|
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 { |
|
|
|
scrollbar-width: none; /* firefox */ |
|
|
|
overflow-x: auto; |
|
|
|
.detail_header { |
|
|
|
position: sticky; |
|
|
|
z-index: 999; |
|
|
|
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; |
|
|
|
font-size: 18px; |
|
|
|
font-family: Alibaba PuHuiTi; |
|
|
|
.en { |
|
|
|
font-size: 10px; |
|
|
|
font-family: ' ZonaPro'; |
|
|
|
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); |
|
|
|
.article { |
|
|
|
min-height: 100%; |
|
|
|
background: #fff; |
|
|
|
.card_container { |
|
|
|
background: linear-gradient(#f9f9f9, #fff); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.right_detail:hover { |
|
|
|
z-index: 120; |
|
|
|
width: 1000px; |
|
|
|
.right_detail:hover { |
|
|
|
z-index: 120; |
|
|
|
width: 160%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|