|
|
|
|
@ -1,11 +1,56 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="banner">
|
|
|
|
|
|
|
|
|
|
<Carousel class="carousel" :bannerList="bannerList"/>
|
|
|
|
|
<el-image
|
|
|
|
|
style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
|
|
|
|
|
:src="pageData.banner"
|
|
|
|
|
fit="contain"></el-image>
|
|
|
|
|
<div class="bannerInfo">{{ pageData.bannerTitle }}</div>
|
|
|
|
|
<div class="tabs">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div @click="checkTabs(i,k)"
|
|
|
|
|
style="white-space: nowrap;overflow: auto"
|
|
|
|
|
:style="`fontSize:clamp(0.7vw,calc(${(60/tabsData.length)}vw / ${ i.title.length}),1.4vw);width:${tabsActive === i.id ? (100/tabsData.length+'%'):`calc(${100/tabsData.length}% - 2px)`}`"
|
|
|
|
|
:class="`tab ${tabsActive === i.id ? 'active':''}`" v-for="(i,k) in tabsData">
|
|
|
|
|
{{ i.title }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<TitleGroup>
|
|
|
|
|
<template slot="title">TYPICAL CASE</template>
|
|
|
|
|
<template slot="subTitle">经典案例</template>
|
|
|
|
|
</TitleGroup>
|
|
|
|
|
<div style="width: 75vw;margin:0 auto;margin-top: 2vw; text-align: left">
|
|
|
|
|
<template v-for="i in tabsList">
|
|
|
|
|
<div class="swiper mySwiper">
|
|
|
|
|
<div class="swiper-wrapper">
|
|
|
|
|
<div class="swiper-slide" v-for="i in cases">
|
|
|
|
|
<el-image
|
|
|
|
|
style="width: 100%;height: 100%"
|
|
|
|
|
:src="i.img"
|
|
|
|
|
fit="contain"></el-image>
|
|
|
|
|
<div class="inner">
|
|
|
|
|
<div class="title">
|
|
|
|
|
{{ i.title }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="value">
|
|
|
|
|
{{ i.value }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="swiper-button-next"></div>
|
|
|
|
|
<div class="swiper-button-prev"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<TitleGroup>
|
|
|
|
|
<template slot="title">SUPPORTING PRODUCT</template>
|
|
|
|
|
<template slot="subTitle">配套产品</template>
|
|
|
|
|
</TitleGroup>
|
|
|
|
|
|
|
|
|
|
<div style="width: 75vw;margin:0 auto;margin-top: 2vw; text-align: left">
|
|
|
|
|
<template v-for="i in productList">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<!-- 左侧图片 -->
|
|
|
|
|
<div class="card-img" :style="{backgroundImage: 'url(' + i.img + ') '}">
|
|
|
|
|
@ -13,13 +58,10 @@
|
|
|
|
|
|
|
|
|
|
<!-- 右侧内容 -->
|
|
|
|
|
<div class="card-content">
|
|
|
|
|
<h3 class="card-title">{{ i.title }}</h3>
|
|
|
|
|
<!-- <p class="card-subtitle">{{ i.value }}</p>-->
|
|
|
|
|
<div class="card-subtitle1"></div>
|
|
|
|
|
<p class="card-desc">{{ i.info }}</p>
|
|
|
|
|
<div class="card-arrow" @click="$router.push('/test?id=' + i.id)">
|
|
|
|
|
→
|
|
|
|
|
<!-- <i class="arrow">→</i>-->
|
|
|
|
|
<div class="card-title">{{ i.name }}</div>
|
|
|
|
|
<div class="card-arrow"
|
|
|
|
|
@click="$router.push(`productCenter/detail?type=${i.route[0]}&typeId=${i.route[1]}&id=${i.route[2]}`)">
|
|
|
|
|
<i class="el-icon-right"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -33,39 +75,51 @@
|
|
|
|
|
<script>
|
|
|
|
|
import ContactUs from '@/components/contactUs'
|
|
|
|
|
import Copyright from '@/components/copyright'
|
|
|
|
|
import {selectMenuTree} from "@/api/hwWebMenu";
|
|
|
|
|
import Carousel from "@/views/index/carousel.vue";
|
|
|
|
|
import Swiper from 'swiper';
|
|
|
|
|
import {Autoplay, Navigation} from "swiper/modules";
|
|
|
|
|
import TitleGroup from "@/components/TitleGroup.vue";
|
|
|
|
|
|
|
|
|
|
Swiper.use([Navigation, Autoplay])
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'ContactUs1',
|
|
|
|
|
name: 'ProductCenter',
|
|
|
|
|
components: {
|
|
|
|
|
Carousel,
|
|
|
|
|
TitleGroup,
|
|
|
|
|
ContactUs,
|
|
|
|
|
Copyright
|
|
|
|
|
Copyright,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
bannerList: [
|
|
|
|
|
tabsActive: 0,
|
|
|
|
|
pageData: {
|
|
|
|
|
banner: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
|
|
|
|
|
bannerTitle: '',
|
|
|
|
|
productList: [],
|
|
|
|
|
},
|
|
|
|
|
webMenuId: 0,
|
|
|
|
|
cases: [
|
|
|
|
|
{
|
|
|
|
|
portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfaf21a51.jpg',
|
|
|
|
|
// portalConfigTitle: '工业物联网定制化解决方案提供商',
|
|
|
|
|
// portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
|
|
|
|
|
title: '标题',
|
|
|
|
|
value: '信息',
|
|
|
|
|
img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/26/5bd2d7716deb5.jpg',
|
|
|
|
|
// portalConfigTitle: '工业物联网定制化解决方案提供商',
|
|
|
|
|
// portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
|
|
|
|
|
title: '标题',
|
|
|
|
|
value: '信息',
|
|
|
|
|
img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfa35afa1.jpg',
|
|
|
|
|
// portalConfigTitle: '工业物联网定制化解决方案提供商',
|
|
|
|
|
// portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
|
|
|
|
|
title: '标题',
|
|
|
|
|
value: '信息',
|
|
|
|
|
img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '标题',
|
|
|
|
|
value: '信息',
|
|
|
|
|
img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
banner:'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfaf21a51.jpg',
|
|
|
|
|
bannerTitle: '',
|
|
|
|
|
tabsActive: 0,
|
|
|
|
|
tabsList: [
|
|
|
|
|
tabsData: [
|
|
|
|
|
{
|
|
|
|
|
title: '智能轮胎',
|
|
|
|
|
value: '智能轮胎介绍',
|
|
|
|
|
@ -116,25 +170,56 @@ export default {
|
|
|
|
|
id: '23'
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
productList: [
|
|
|
|
|
{
|
|
|
|
|
name: 'HW-145L-6系列',
|
|
|
|
|
img: 'http://1.13.177.47:9665/statics/2025/09/29/a7ed9fc42af9b6386126eee351f4937_20250929143910A279.png',
|
|
|
|
|
route: [12, 1, 2]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'HW-R300系列',
|
|
|
|
|
img: 'http://1.13.177.47:9665/statics/2025/09/29/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250926144121_20250929144331A280.png',
|
|
|
|
|
route: [12, 1, 3]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'HW-D100系列',
|
|
|
|
|
img: 'http://1.13.177.47:9665/statics/2025/09/30/%E5%9B%BE%E7%89%87bbb_20250930172331A326.png',
|
|
|
|
|
route: [12, 1, 4]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'HW-R200系列',
|
|
|
|
|
img: 'http://1.13.177.47:9665/statics/2025/09/29/%E5%9B%BE%E7%89%871_20250929162825A294.png',
|
|
|
|
|
route: [12, 2, 2]
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// this.getData()
|
|
|
|
|
if (this.$route.query.id) {
|
|
|
|
|
this.tabsActive = parseFloat(this.$route.query.id)
|
|
|
|
|
}
|
|
|
|
|
this.initSwiper()
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
'$route'() {
|
|
|
|
|
this.tabsActive = parseFloat(this.$route.query.id)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getData() {
|
|
|
|
|
selectMenuTree().then(e=>{
|
|
|
|
|
let data = e.data.find(v=>v.webMenuId ===4)?.children
|
|
|
|
|
this.tabsList = data.map(v=>{
|
|
|
|
|
return {
|
|
|
|
|
title:v.webMenuName,
|
|
|
|
|
value:v.webMenuName+'介绍',
|
|
|
|
|
info:v.webMenuName+'信息',
|
|
|
|
|
id:v.webMenuId
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
console.log(data)
|
|
|
|
|
})
|
|
|
|
|
checkTabs(e, k) {
|
|
|
|
|
this.tabsActive = e.id
|
|
|
|
|
},
|
|
|
|
|
initSwiper() {
|
|
|
|
|
const swiper = new Swiper(".mySwiper", {
|
|
|
|
|
|
|
|
|
|
slidesPerView: 1.5,
|
|
|
|
|
spaceBetween: '3.9%',
|
|
|
|
|
centeredSlides: true,
|
|
|
|
|
navigation: {
|
|
|
|
|
nextEl: ".swiper-button-next",
|
|
|
|
|
prevEl: ".swiper-button-prev",
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -143,11 +228,6 @@ export default {
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
@import "~@/style.less";
|
|
|
|
|
|
|
|
|
|
.carousel {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 35.5vw;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.banner {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 35.5vw;
|
|
|
|
|
@ -192,7 +272,6 @@ export default {
|
|
|
|
|
|
|
|
|
|
.tab {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 25%;
|
|
|
|
|
line-height: 6.2vw;
|
|
|
|
|
font-size: 1.6vw;
|
|
|
|
|
letter-spacing: 3px;
|
|
|
|
|
@ -200,25 +279,30 @@ export default {
|
|
|
|
|
|
|
|
|
|
.tab.active {
|
|
|
|
|
color: @standard-color;
|
|
|
|
|
width: calc(25% - 2px);
|
|
|
|
|
border: 1px solid #fff;
|
|
|
|
|
width: calc(50% - 3px);
|
|
|
|
|
border: 1px solid #fff6;
|
|
|
|
|
box-shadow: 0 0 3px #0002;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.companyProfile {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.swiper {
|
|
|
|
|
width: 58vw;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
|
|
|
|
.enterpriseQualification {
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.swiper-slide {
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.teamStyle {
|
|
|
|
|
width: 100%;
|
|
|
|
|
.inner {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: linear-gradient(to right, #41B5EA, #0000);
|
|
|
|
|
height: 4vw;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.contactUs {
|
|
|
|
|
@ -230,93 +314,56 @@ export default {
|
|
|
|
|
width: 100%;
|
|
|
|
|
background-color: #1d3348;
|
|
|
|
|
}
|
|
|
|
|
.card{
|
|
|
|
|
width: calc(48% - 2px);
|
|
|
|
|
|
|
|
|
|
.card {
|
|
|
|
|
width: calc(32% - 2px);
|
|
|
|
|
display: inline-block;
|
|
|
|
|
height: 300px;
|
|
|
|
|
position: relative;
|
|
|
|
|
border: 1px solid #0001;
|
|
|
|
|
|
|
|
|
|
&:nth-child(2n) {
|
|
|
|
|
&:nth-child(3n) {
|
|
|
|
|
margin-left: 2%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:nth-child(2n-1) {
|
|
|
|
|
&:nth-child(3n-1) {
|
|
|
|
|
margin-left: 2%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-img{
|
|
|
|
|
position: absolute;
|
|
|
|
|
//opacity: 0.4;
|
|
|
|
|
width: 40%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.card-img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100% - 3vw);
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
///* 设置透明蒙版 */
|
|
|
|
|
//-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
|
|
|
|
|
//-webkit-mask-repeat: no-repeat;
|
|
|
|
|
//-webkit-mask-size: 100% 100%;
|
|
|
|
|
//
|
|
|
|
|
//mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
|
|
|
|
|
//mask-repeat: no-repeat;
|
|
|
|
|
//mask-size: 100% 100%;
|
|
|
|
|
background-size: contain;
|
|
|
|
|
background-position: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.card-title{
|
|
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 45%;
|
|
|
|
|
top: 40px;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
}
|
|
|
|
|
.card-subtitle{
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 45%;
|
|
|
|
|
top: 80px;
|
|
|
|
|
width: 70%;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
.card-title {
|
|
|
|
|
font-size: 1vw;
|
|
|
|
|
line-height: 3vw;
|
|
|
|
|
padding-left: 2vw;
|
|
|
|
|
color: #333
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-subtitle1 {
|
|
|
|
|
.card-arrow {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 115px;
|
|
|
|
|
left: 45%;
|
|
|
|
|
width: 5%;
|
|
|
|
|
height: 3px;
|
|
|
|
|
background-color: #2e445c;
|
|
|
|
|
}
|
|
|
|
|
.card-desc{
|
|
|
|
|
width: 50%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 45%;
|
|
|
|
|
top: 120px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #0005;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-arrow{
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 30px;
|
|
|
|
|
bottom: 30px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
right: 1vw;
|
|
|
|
|
bottom: 0.5vw;
|
|
|
|
|
height: 2vw;
|
|
|
|
|
width: 2vw;
|
|
|
|
|
border: 2px solid #0009;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
line-height: 17px;
|
|
|
|
|
line-height: 2vw;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&:hover{
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: #409EFF;
|
|
|
|
|
color:#fff;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border-color: #fff
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
suixy
3 days ago