maochaoying 2 years ago
parent
commit
1522de1af0
  1. 7
      src/components/Trumbs/index.vue
  2. 192
      src/views/Index/components/CaseDetails/index.vue
  3. 209
      src/views/Index/components/HardwareDetails/index.vue

7
src/components/Trumbs/index.vue

@ -7,14 +7,14 @@
:modules="modules"
@swiper="onSwiper"
@slideChange="onSlideChange"
class="case_detail_swiper"
class="trumbs_swiper"
>
<swiper-slide
v-for="item in props.isCase
? case_detail_img_data[industry_id]
: hard_img_data[hardware_id]"
:key="item.id"
style="background: none; height: 108px"
style="background: none; height: 108px; width: 194px !important"
>
<div class="img_card">
<img :src="item.picUrl" class="img" alt="" />
@ -77,11 +77,10 @@ const onSwiper = swiper => {
width: 194px;
// height: 100%;
height: 108px;
margin: 0 22px;
position: relative;
.img {
width: 194px;
height: auto;
width: 194px;
}
.dialog_text {
display: flex;

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

@ -20,7 +20,7 @@
: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[industry_id] &&
@ -31,45 +31,49 @@
</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[industry_id] &&
case_detail_list[industry_id][example_id]?.detailList
?.topText
"
/>
<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"
<div class="article">
<Paragraph
:text="
case_detail_list[industry_id] &&
case_detail_list[industry_id][example_id]?.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[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 v-if="item?.cardText" :text="item?.cardText" />
<Intro
v-if="item?.cardIntro"
:cardIntro="item?.cardIntro"
/>
<!-- <Video /> -->
</div>
</div>
</div>
</div>
@ -144,10 +148,12 @@ const mouseleave = function () {
.content {
box-sizing: border-box;
width: 100%;
padding: 77px 153px 60px 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;
@ -155,19 +161,17 @@ const mouseleave = function () {
position: relative;
.left_swiper {
width: 1024px;
// height: 100%;
position: relative;
.case_detail_swiper {
width: 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;
@ -176,7 +180,7 @@ const mouseleave = function () {
font-family: DFPYuanW7-GB;
box-sizing: border-box;
font-weight: 400;
background: rgb(40, 63, 231, 0.68);
background: linear-gradient(90deg, #283fe7, #4b17e1);
color: #fafafa;
.p_text {
font-size: 22px;
@ -187,60 +191,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 {
position: sticky;
z-index: 999;
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%;
}
}
}
}

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

@ -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%;
}
}
}
}

Loading…
Cancel
Save