|
|
|
|
@ -3,7 +3,7 @@
|
|
|
|
|
<div class="banner">
|
|
|
|
|
<el-image
|
|
|
|
|
style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
|
|
|
|
|
:src="pageData.banner"
|
|
|
|
|
:src="tabsData.find(e => e.id === tabsActive)?.img || pageData.banner"
|
|
|
|
|
fit="contain"></el-image>
|
|
|
|
|
<div class="bannerInfo">{{ pageData.bannerTitle }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -11,6 +11,7 @@
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div @click="checkTabs(i,k)"
|
|
|
|
|
style="white-space: nowrap;overflow: auto"
|
|
|
|
|
:style="{width:`calc(${widthArr[k]}% - 2vw)`,fontSize:`${tabsFontSize}vw`}"
|
|
|
|
|
:class="`tab ${tabsActive == i.id ? 'active':''}`" v-for="(i,k) in tabsData">
|
|
|
|
|
{{ i.title }}
|
|
|
|
|
</div>
|
|
|
|
|
@ -81,8 +82,19 @@ import Swiper from 'swiper';
|
|
|
|
|
import {Autoplay, Navigation} from "swiper/modules";
|
|
|
|
|
import TitleGroup from "@/components/TitleGroup.vue";
|
|
|
|
|
import Page from "@/views/page/index.vue";
|
|
|
|
|
import img1 from '@/assets/image/industrySolutions/3-1智能轮胎.png';
|
|
|
|
|
import img2 from '@/assets/image/industrySolutions/3-2轮胎工厂.png';
|
|
|
|
|
import img3 from '@/assets/image/industrySolutions/3-3快递物流.png';
|
|
|
|
|
import img4 from '@/assets/image/industrySolutions/3-4畜牧食品.png';
|
|
|
|
|
import img5 from '@/assets/image/industrySolutions/3-5新能源.png';
|
|
|
|
|
import img6 from '@/assets/image/industrySolutions/3-6智能制造.png';
|
|
|
|
|
import img7 from '@/assets/image/industrySolutions/3-7工业物联.png';
|
|
|
|
|
|
|
|
|
|
Swiper.use([Navigation, Autoplay])
|
|
|
|
|
|
|
|
|
|
Swiper.use([
|
|
|
|
|
Navigation,
|
|
|
|
|
Autoplay
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'ProductCenter',
|
|
|
|
|
@ -125,52 +137,52 @@ export default {
|
|
|
|
|
],
|
|
|
|
|
tabsData: [
|
|
|
|
|
{
|
|
|
|
|
title: '工厂制造-RFID全流程管理',
|
|
|
|
|
title: '成品胎RFID全生命周期',
|
|
|
|
|
value: '智能轮胎介绍',
|
|
|
|
|
info: '智能轮胎信息',
|
|
|
|
|
img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
|
|
|
|
|
img: img1,
|
|
|
|
|
id: '5'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '成品胎RFID全生命周期',
|
|
|
|
|
title: '工厂制造-RFID全流程管理',
|
|
|
|
|
value: '轮胎工厂介绍',
|
|
|
|
|
info: '轮胎工厂信息',
|
|
|
|
|
img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
|
|
|
|
|
img: img2,
|
|
|
|
|
id: '18'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: 'RFID包裹分拣',
|
|
|
|
|
value: '快递物流介绍',
|
|
|
|
|
info: '快递物流信息',
|
|
|
|
|
img: 'http://1.13.177.47:9665/statics/2025/08/22/%E5%9B%BE%E7%89%8717_20250822141810A130.jpg',
|
|
|
|
|
img: img3,
|
|
|
|
|
id: '19'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '工厂制造-仓储物流',
|
|
|
|
|
value: '畜牧食品介绍',
|
|
|
|
|
info: '在畜牧屠宰行业，RFID助力车间自动化，智能化生产，合作客户包括双汇、正大、牧原等',
|
|
|
|
|
img: 'http://1.13.177.47:9665/statics/2025/08/22/12_20250822135124A121.png',
|
|
|
|
|
img: img4,
|
|
|
|
|
id: '20'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '信息化数据平台',
|
|
|
|
|
title: '能源计量',
|
|
|
|
|
value: '新能源介绍',
|
|
|
|
|
info: '新能源信息',
|
|
|
|
|
img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
|
|
|
|
|
img: img7,
|
|
|
|
|
id: '21'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '智能制造物联网',
|
|
|
|
|
value: '智能制造介绍',
|
|
|
|
|
info: '智能制造信息',
|
|
|
|
|
img: 'http://1.13.177.47:9665/statics/2025/08/22/%E5%9B%BE%E7%89%8736_20250822142617A134.jpg',
|
|
|
|
|
img: img6,
|
|
|
|
|
id: '22'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '能源计量',
|
|
|
|
|
title: '信息化数据平台',
|
|
|
|
|
value: '工业物联介绍',
|
|
|
|
|
info: '工业物联信息',
|
|
|
|
|
img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
|
|
|
|
|
img: img5,
|
|
|
|
|
id: '23'
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
@ -178,22 +190,38 @@ export default {
|
|
|
|
|
{
|
|
|
|
|
name: 'HW-145L-6系列',
|
|
|
|
|
img: 'http://1.13.177.47:9665/statics/2025/09/29/a7ed9fc42af9b6386126eee351f4937_20250929143910A279.png',
|
|
|
|
|
route: [12, 1, 2]
|
|
|
|
|
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]
|
|
|
|
|
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]
|
|
|
|
|
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]
|
|
|
|
|
route: [
|
|
|
|
|
12,
|
|
|
|
|
2,
|
|
|
|
|
2
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
@ -206,12 +234,36 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
this.initSwiper()
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
tabsFontSize: function () {
|
|
|
|
|
let max = 0
|
|
|
|
|
this.tabsData.forEach(item => {
|
|
|
|
|
max = Math.max(max, item.title.length)
|
|
|
|
|
})
|
|
|
|
|
let width = 100 / this.tabsData.length
|
|
|
|
|
return width / max
|
|
|
|
|
},
|
|
|
|
|
widthArr: function () {
|
|
|
|
|
let length = 0
|
|
|
|
|
this.tabsData.forEach(item => {
|
|
|
|
|
length += this.getTextWidth(item.title)
|
|
|
|
|
})
|
|
|
|
|
return this.tabsData.map(item => {
|
|
|
|
|
return (this.getTextWidth(item.title) / length) * 100
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
'$route'() {
|
|
|
|
|
this.tabsActive = parseFloat(this.$route.query.id)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getTextWidth(text) {
|
|
|
|
|
return String(text || '').split('').reduce((total, char) => {
|
|
|
|
|
return total + (/[\x00-\xff]/.test(char) ? 1 : 2)
|
|
|
|
|
}, 0)
|
|
|
|
|
},
|
|
|
|
|
checkTabs(e, k) {
|
|
|
|
|
this.tabsActive = e.id
|
|
|
|
|
},
|
|
|
|
|
@ -263,48 +315,105 @@ export default {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//.tabs {
|
|
|
|
|
// cursor: pointer;
|
|
|
|
|
// bottom: 0;
|
|
|
|
|
// width: 100%;
|
|
|
|
|
// white-space: nowrap;
|
|
|
|
|
// background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
|
|
|
|
|
// backdrop-filter: saturate(50%) blur(4px);
|
|
|
|
|
//
|
|
|
|
|
// .content {
|
|
|
|
|
// width: 100%;
|
|
|
|
|
// position: relative;
|
|
|
|
|
// left: 50%;
|
|
|
|
|
// bottom: 0;
|
|
|
|
|
// transform: translateX(-50%);
|
|
|
|
|
//
|
|
|
|
|
// .tab {
|
|
|
|
|
// display: inline-block;
|
|
|
|
|
// line-height: 6.2vw;
|
|
|
|
|
// letter-spacing: 3px;
|
|
|
|
|
// font-size: 1vw;
|
|
|
|
|
// position: relative;
|
|
|
|
|
// padding: 0 2vw;
|
|
|
|
|
//
|
|
|
|
|
// &:last-child::after {
|
|
|
|
|
// display: none;
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// &::after {
|
|
|
|
|
// content: '';
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// right: 0;
|
|
|
|
|
// width: 1px;
|
|
|
|
|
// height: 1vw;
|
|
|
|
|
// background-color: #409eff;
|
|
|
|
|
// top: calc(50% - 0.5vw);
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// .tab.active {
|
|
|
|
|
// color: @standard-color;
|
|
|
|
|
// //border: 1px solid #fff6;
|
|
|
|
|
// //box-shadow: 0 0 3px #0002;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
//}
|
|
|
|
|
|
|
|
|
|
.tabs {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: sticky;
|
|
|
|
|
top: 0;
|
|
|
|
|
margin-top: calc(-6.405vw + 2px);
|
|
|
|
|
width: calc(100% - 2px);
|
|
|
|
|
height: calc(6.405vw - 2px);
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
|
|
|
|
|
backdrop-filter: saturate(50%) blur(4px);
|
|
|
|
|
//background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
|
|
|
|
|
background: linear-gradient(to bottom, #e7efff, #f6faff);
|
|
|
|
|
//backdrop-filter: saturate(50%) blur(4px);
|
|
|
|
|
border: 1px solid #fff;
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
|
|
|
|
.content {
|
|
|
|
|
width: 100%;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 50%;
|
|
|
|
|
left: 19%;
|
|
|
|
|
left: 0%;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
text-align: left;
|
|
|
|
|
//transform: translateX(-50%);
|
|
|
|
|
|
|
|
|
|
.tab {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
line-height: 6.2vw;
|
|
|
|
|
letter-spacing: 3px;
|
|
|
|
|
font-size: 1vw;
|
|
|
|
|
font-size: 1.6vw;
|
|
|
|
|
position: relative;
|
|
|
|
|
padding: 0 2vw;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 0 1vw;
|
|
|
|
|
|
|
|
|
|
&:last-child::after {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 1px;
|
|
|
|
|
height: 1vw;
|
|
|
|
|
background-color: #409eff;
|
|
|
|
|
top: calc(50% - 0.5vw);
|
|
|
|
|
}
|
|
|
|
|
//&:last-child::after {
|
|
|
|
|
// display: none;
|
|
|
|
|
//}
|
|
|
|
|
//
|
|
|
|
|
//&::after {
|
|
|
|
|
// content: '';
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// right: 0;
|
|
|
|
|
// width: 1px;
|
|
|
|
|
// height: 1vw;
|
|
|
|
|
// background-color: #409eff;
|
|
|
|
|
// top: calc(50% - 0.5vw);
|
|
|
|
|
//}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab.active {
|
|
|
|
|
color: @standard-color;
|
|
|
|
|
//border: 1px solid #fff6;
|
|
|
|
|
//box-shadow: 0 0 3px #0002;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
border: 1px solid #fff;
|
|
|
|
|
box-shadow: 0 0 3px #0002;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
suixy
1 month ago
