|
|
|
@ -26,11 +26,11 @@ |
|
|
|
<!-- 项目案例 --> |
|
|
|
<swiper-slide v-for="(item,index2) in bannerList" class="hover-scale cursor-pointer" :key="index2" v-if="selectIndex === 2"> |
|
|
|
<div> |
|
|
|
<div class="case-img overflow-hidden position-relative" @click="goPage(`/projectcase/${index}`)"> |
|
|
|
<div class="case-img overflow-hidden position-relative" @click="goPage(`/projectcase/${index}`, 'projectCase')"> |
|
|
|
<img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase1" loading="lazy"/> |
|
|
|
<div class="position-absolute color-fff project-center-title"> |
|
|
|
<h3 class="font-700">{{ item.name }}</h3> |
|
|
|
<h3 class="font-700">{{ item.address }}</h3> |
|
|
|
<span class="font-700 font-size-20">{{ item.name }}</span> |
|
|
|
<span class="font-700 font-size-20">{{ item.address }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -38,9 +38,9 @@ |
|
|
|
<!-- 产品中心 --> |
|
|
|
<swiper-slide v-for="(item,index3) in bannerList2" class="hover-scale cursor-pointer" :key="index3" v-else-if="selectIndex === 3"> |
|
|
|
<div> |
|
|
|
<div class="case-img overflow-hidden position-relative" @click="goPage(`/productcenter/${item.name}`)"> |
|
|
|
<div class="case-img overflow-hidden position-relative" @click="goPage(`/productcenter/${item.name}`, 'productCenter')"> |
|
|
|
<img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase" loading="lazy"/> |
|
|
|
<h3 class="position-absolute color-fff project-center-title1">{{ item.name }}</h3> |
|
|
|
<span class="position-absolute color-fff project-center-title1 font-size-22 font-700">{{ item.name }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</swiper-slide> |
|
|
|
@ -48,8 +48,8 @@ |
|
|
|
<p class="allproject" @click="goPage('/projectcase/allproject')">EXPLORE ALL PROJECTS >></p> |
|
|
|
</div> --> |
|
|
|
</swiper> |
|
|
|
<p v-if="selectIndex == 2" class="btn" @click="goPage('/projectcase')">EXLORE ALL PROJECTS</p> |
|
|
|
<p v-if="selectIndex == 3" class="btn" @click="goPage('/productcenter')">EXLORE ALL PROJECTS</p> |
|
|
|
<p v-if="selectIndex == 2" class="btn" @click="goPage('/projectcase', '')">EXLORE ALL PROJECTS</p> |
|
|
|
<p v-if="selectIndex == 3" class="btn" @click="goPage('/productcenter', '')">EXLORE ALL PROJECTS</p> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -125,15 +125,15 @@ const onSlideChange = () => { |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
const goPage = (url: any) => { |
|
|
|
const goPage = (url: any, name: string) => { |
|
|
|
if(name != '') { |
|
|
|
localStorage.setItem('scrollPosition', name) |
|
|
|
} |
|
|
|
document.documentElement.scrollTop = 0 |
|
|
|
router.push({ |
|
|
|
path: url |
|
|
|
}) |
|
|
|
} |
|
|
|
const changeindex = () => { |
|
|
|
selectIndex.value = 2 |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="less"> |
|
|
|
@ -191,16 +191,16 @@ const changeindex = () => { |
|
|
|
transition: all 3s; |
|
|
|
} |
|
|
|
.imgcase{ |
|
|
|
height: 600px; |
|
|
|
height: 42rem; |
|
|
|
} |
|
|
|
.imgcase1{ |
|
|
|
height: 350px; |
|
|
|
height: 27rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.hover-scale:hover .case-img img{ |
|
|
|
transform: scale(1.1); |
|
|
|
transform: scale(1.2); |
|
|
|
} |
|
|
|
.hover-scale:hover .project-center-title{ |
|
|
|
background: #fa8106; |
|
|
|
@ -212,7 +212,7 @@ const changeindex = () => { |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
height: 50px; |
|
|
|
line-height: 50px; |
|
|
|
// line-height: 50px; |
|
|
|
text-align: left; |
|
|
|
background: rgba(0,0,0,.4); |
|
|
|
width: 100%; |
|
|
|
@ -231,7 +231,13 @@ const changeindex = () => { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
@media (max-width: 800px) { |
|
|
|
@media (max-width: 960px) { |
|
|
|
.project-case .hover-scale .case-img .imgcase1{ |
|
|
|
height: 17rem; |
|
|
|
} |
|
|
|
.project-case .hover-scale .case-img .imgcase{ |
|
|
|
height: 30rem; |
|
|
|
} |
|
|
|
.bannerImg { |
|
|
|
margin-top:50px; |
|
|
|
:deep(.swiper-button-prev:after){ |
|
|
|
|
xiaohei
2 years ago