maochaoying
/
hjyd
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

123

master
maochaoying 2 years ago
parent
9ade744a1f
commit
1522de1af0
3 changed files with 209 additions and 199 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/components/Trumbs/index.vue
  2. 40
      src/views/Index/components/CaseDetails/index.vue
  3. 61
      src/views/Index/components/HardwareDetails/index.vue

7
src/components/Trumbs/index.vue
View File

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

40
src/views/Index/components/CaseDetails/index.vue
View File

@ -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,7 +31,7 @@
</swiper-slide>
</swiper>
</div>
<div class="placeholder"></div>
<div class="placeholder">
<div
class="right_detail"
v-on:mouseover="mouseover"
@ -68,7 +68,10 @@
:pic2="item?.pic2"
/>
<Paragraph v-if="item?.cardText" :text="item?.cardText" />
<Intro v-if="item?.cardIntro" :cardIntro="item?.cardIntro" />
<Intro
v-if="item?.cardIntro"
:cardIntro="item?.cardIntro"
/>
<!-- <Video /> -->
</div>
</div>
@ -78,6 +81,7 @@
</div>
</div>
</div>
</div>
</template>
<script setup>
@ -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,8 +191,8 @@ const mouseleave = function () {
}
.placeholder {
flex: 1;
height: 100%;
}
height: auto;
position: relative;
.right_detail {
transition-property: all;
transition-duration: 0.7s;
@ -196,10 +200,11 @@ const mouseleave = function () {
position: absolute;
top: 0;
right: 0;
width: 591px;
flex: 1;
overflow: scroll;
z-index: 100;
height: 100%;
width: 100%;
scrollbar-width: none; /* firefox */
overflow-x: auto;
.detail_header {
@ -240,7 +245,8 @@ const mouseleave = function () {
}
.right_detail:hover {
z-index: 120;
width: 1000px;
width: 160%;
}
}
}
}

61
src/views/Index/components/HardwareDetails/index.vue
View File

@ -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,7 +31,7 @@
</swiper-slide>
</swiper>
</div>
<div class="placeholder"></div>
<div class="placeholder">
<div
class="right_detail"
v-on:mouseover="mouseover"
@ -48,8 +47,8 @@
<Paragraph
:text="
case_detail_list[hardware_id] &&
case_detail_list[hardware_id][hardwareExampleId]?.detailList
?.topText
case_detail_list[hardware_id][hardwareExampleId]
?.detailList?.topText
"
/>
<div
@ -70,7 +69,10 @@
:pic2="item?.pic2"
/>
<Paragraph v-if="item?.cardText" :text="item?.cardText" />
<Intro v-if="item?.cardIntro" :cardIntro="item?.cardIntro" />
<Intro
v-if="item?.cardIntro"
:cardIntro="item?.cardIntro"
/>
<!-- <Video /> -->
</div>
</div>
@ -80,6 +82,7 @@
</div>
</div>
</div>
</div>
</template>
<script setup>
@ -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,8 +192,8 @@ const mouseleave = function () {
}
.placeholder {
flex: 1;
height: 100%;
}
height: auto;
position: relative;
.right_detail {
transition-property: all;
transition-duration: 0.7s;
@ -198,15 +201,16 @@ const mouseleave = function () {
position: absolute;
top: 0;
right: 0;
width: 591px;
flex: 1;
overflow: scroll;
z-index: 100;
height: 100%;
width: 100%;
scrollbar-width: none; /* firefox */
overflow-x: auto;
.detail_header {
z-index: 999;
position: sticky;
z-index: 999;
top: 0;
left: 0;
right: 0;
@ -242,7 +246,8 @@ const mouseleave = function () {
}
.right_detail:hover {
z-index: 120;
width: 1000px;
width: 160%;
}
}
}
}

Write Preview
Loading…
Cancel
Save