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.
349 lines
8.8 KiB
349 lines
8.8 KiB
<template>
|
|
<div class="design_detail_container">
|
|
<Header :active="true" />
|
|
<img :src="getTitleImg()" class="big_img" alt="" />
|
|
<div class="cards_case_container">
|
|
<div
|
|
class="card"
|
|
@click="showDetailModal(item.id)"
|
|
v-for="item in case_detail_list[activeTab]"
|
|
:key="item"
|
|
>
|
|
<div class="title">{{ item.title }}</div>
|
|
<div class="img_wrap">
|
|
<img :src="item.thumb" class="img" alt="" />
|
|
</div>
|
|
<div class="bottom_wrap">
|
|
<!-- <p class="en"></p> -->
|
|
<div class="detail">案例详情</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="more_card">
|
|
<img class="more_img" :src="More" alt="" />
|
|
<div class="modal"></div>
|
|
</div> -->
|
|
<div class="btns_box">
|
|
<div :class="activeClass('1')" @click="changeDetail('1')">
|
|
医疗健康
|
|
<p class="line" v-if="activeTab == '1'"></p>
|
|
</div>
|
|
<div :class="activeClass('2')" @click="changeDetail('2')">
|
|
智能硬件
|
|
<p class="line" v-if="activeTab == '2'"></p>
|
|
</div>
|
|
<div :class="activeClass('3')" @click="changeDetail('3')">
|
|
工业设备
|
|
<p class="line" v-if="activeTab == '3'"></p>
|
|
</div>
|
|
<div :class="activeClass('4')" @click="changeDetail('4')">
|
|
高铁设备
|
|
<p class="line" v-if="activeTab == '4'"></p>
|
|
</div>
|
|
<div :class="activeClass('5')" @click="changeDetail('5')">
|
|
户外设备
|
|
<p class="line" v-if="activeTab == '5'"></p>
|
|
</div>
|
|
<div :class="activeClass('6')" @click="changeDetail('6')">
|
|
特种设备
|
|
<p class="line" v-if="activeTab == '6'"></p>
|
|
</div>
|
|
<div :class="activeClass('7')" @click="changeDetail('7')">
|
|
智能家居
|
|
<p class="line" v-if="activeTab == '7'"></p>
|
|
</div>
|
|
<div :class="activeClass('8')" @click="changeDetail('8')">
|
|
实验仪器
|
|
<p class="line" v-if="activeTab == '8'"></p>
|
|
</div>
|
|
<div :class="activeClass('9')" @click="changeDetail('9')">
|
|
消费电子
|
|
<p class="line" v-if="activeTab == '9'"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Bottom />
|
|
<DetailModal
|
|
v-if="showModalVisible"
|
|
:hiddenDetailModal="hiddenDetailModal"
|
|
:productInfo="productInfo"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Header from 'cpns/SoftHardware/Header'
|
|
import A1 from '@/assets/design/detail/1.png'
|
|
import A2 from '@/assets/design/detail/2.png'
|
|
import A3 from '@/assets/design/detail/3.png'
|
|
import A4 from '@/assets/design/detail/4.png'
|
|
import A5 from '@/assets/design/detail/5.png'
|
|
import A6 from '@/assets/design/detail/6.png'
|
|
import A7 from '@/assets/design/detail/7.png'
|
|
import A8 from '@/assets/design/detail/8.png'
|
|
import A9 from '@/assets/design/detail/9.png'
|
|
import More from '@/assets/design/detail/more.png'
|
|
import Bottom from 'cpns/NewBottomWhite.vue'
|
|
import { ref, onMounted, watch } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import DetailModal from 'cpns/design/DetailModal'
|
|
import { case_detail_img_data } from '@/mock/case'
|
|
import { hardware_list as case_detail_list } from '@/mock/case_software'
|
|
|
|
const showModalVisible = ref(false)
|
|
|
|
const activeClass = i => {
|
|
if (activeTab.value == i) {
|
|
return 'btn active'
|
|
}
|
|
return 'btn'
|
|
}
|
|
|
|
const route = useRoute()
|
|
|
|
const activeTab = ref('1')
|
|
|
|
const changeDetail = index => {
|
|
activeTab.value = index
|
|
}
|
|
|
|
const getTitleImg = () => {
|
|
const val = activeTab.value
|
|
if (val == '1') {
|
|
return A1
|
|
}
|
|
if (val == '2') {
|
|
return A2
|
|
}
|
|
if (val == '3') {
|
|
return A3
|
|
}
|
|
if (val == '4') {
|
|
return A4
|
|
}
|
|
if (val == '5') {
|
|
return A5
|
|
}
|
|
if (val == '6') {
|
|
return A6
|
|
}
|
|
if (val == '7') {
|
|
return A7
|
|
}
|
|
if (val == '8') {
|
|
return A8
|
|
}
|
|
if (val == '9') {
|
|
return A9
|
|
}
|
|
}
|
|
|
|
const productInfo = ref({})
|
|
const showDetailModal = id => {
|
|
// 取消html的滚动条
|
|
const rootTag = document.getElementById('iflytop')
|
|
rootTag.style.overflow = 'hidden'
|
|
rootTag.style.height = '100%'
|
|
showModalVisible.value = true
|
|
// 根据activeTab和id确定详情数据
|
|
productInfo.value = case_detail_list[activeTab.value][id]
|
|
}
|
|
|
|
const hiddenDetailModal = () => {
|
|
// 恢复html的滚动条
|
|
const rootTag = document.getElementById('iflytop')
|
|
rootTag.style['overflow-y'] = 'scroll'
|
|
rootTag.style['overflow-x'] = 'hidden'
|
|
rootTag.style.height = 'auto'
|
|
productInfo.value = {}
|
|
showModalVisible.value = false
|
|
}
|
|
|
|
onMounted(() => {
|
|
document.body.scrollTop = document.documentElement.scrollTop = 0
|
|
if (route.query?.t) {
|
|
activeTab.value = route.query?.t
|
|
}
|
|
})
|
|
|
|
watch(
|
|
() => route.query?.t,
|
|
() => {
|
|
activeTab.value = route.query?.t
|
|
},
|
|
{ immediate: true, deep: true },
|
|
)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.design_detail_container {
|
|
.big_img {
|
|
width: 100vw;
|
|
height: auto;
|
|
}
|
|
.cards_case_container {
|
|
background: #f6f6f6;
|
|
padding: 110px;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
column-gap: 40px;
|
|
row-gap: 40px;
|
|
position: relative;
|
|
.btns_box {
|
|
position: absolute;
|
|
left: 110px;
|
|
right: 110px;
|
|
top: -53px;
|
|
height: 106px;
|
|
border-radius: 483px;
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
.btn {
|
|
font-family: Source Han Sans CN;
|
|
font-size: 18px;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0em;
|
|
color: #030303;
|
|
cursor: pointer;
|
|
position: relative;
|
|
padding: 9px 26px;
|
|
.line {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
width: 38px;
|
|
height: 2px;
|
|
border-radius: 276px;
|
|
background: #2a4ee1;
|
|
transform: translateX(-50%);
|
|
}
|
|
transition-property: all;
|
|
transition-duration: 0.1s;
|
|
animation-fill-mode: forwards;
|
|
&:hover {
|
|
// transform: scale(1.1);
|
|
color: $theme-color;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.active {
|
|
color: #2a4ee1;
|
|
}
|
|
}
|
|
.card {
|
|
border-radius: 21px;
|
|
width: 100%;
|
|
background: #ffffff;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
padding: 38px 43px 23px 43px;
|
|
.title {
|
|
white-space: nowrap;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 22px;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0em;
|
|
color: #787878;
|
|
margin-bottom: 51px;
|
|
}
|
|
.img_wrap {
|
|
height: 306px;
|
|
margin-top: 120px;
|
|
width: 100%;
|
|
margin-bottom: 83px;
|
|
display: flex;
|
|
justify-content: center;
|
|
.img {
|
|
width: auto;
|
|
clip-path: inset(4px 4px 4px 4px);
|
|
// max-width: 300px;
|
|
height: 239px;
|
|
border-radius: 20px;
|
|
object-fit: cover;
|
|
transition-property: all;
|
|
transition-duration: 0.7s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
}
|
|
.bottom_wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.en {
|
|
font-family: Source Han Sans CN;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0em;
|
|
color: #000000;
|
|
white-space: nowrap;
|
|
}
|
|
.detail {
|
|
transition-property: all;
|
|
transition-duration: 0.2s;
|
|
animation-fill-mode: forwards;
|
|
white-space: nowrap;
|
|
padding: 11px 40px;
|
|
border-radius: 324px;
|
|
background: #f6f6f6;
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0.1em;
|
|
color: #787878;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
&:hover {
|
|
.bottom_wrap {
|
|
.detail {
|
|
background: #2a4ee1;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.img_wrap {
|
|
.img {
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.more_card {
|
|
border-radius: 21px;
|
|
width: 100%;
|
|
background: #000;
|
|
height: 578px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.more_img {
|
|
height: 578px;
|
|
object-fit: cover;
|
|
}
|
|
.modal {
|
|
opacity: 0;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
box-shadow: inset 0px 0px 100px 0px #000000;
|
|
}
|
|
&:hover {
|
|
.modal {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|