|
|
|
|
@ -0,0 +1,292 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="banner">
|
|
|
|
|
<el-image
|
|
|
|
|
style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
|
|
|
|
|
:src="banner"
|
|
|
|
|
fit="contain"></el-image>
|
|
|
|
|
<div class="bannerInfo">青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。</div>
|
|
|
|
|
<el-button type="primary" class="bannerBtn">免费体验</el-button>
|
|
|
|
|
<div class="tabs">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div v-for="(i,k) in tabsList" @click="checkTabs(i,k)" :class="`tab ${tabsActive === k ? 'active':''}`"
|
|
|
|
|
:style="`width:${tabsActive === k ? `calc(${100/tabsList.length}% - 3px)`:`${100/tabsList.length}%`}`">
|
|
|
|
|
{{ i.configTypeName }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="list">
|
|
|
|
|
<div v-for="(i,k) in contentList">
|
|
|
|
|
<div v-if="k%2 === 1" class="item1">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<div class="itemTitle">{{ i.caseInfoTitle }}</div>
|
|
|
|
|
<div class="itemInfo">
|
|
|
|
|
{{ i.caseInfoDesc }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<el-image
|
|
|
|
|
style="width: 100%; height: 100%;"
|
|
|
|
|
:src="i.caseInfoPic"
|
|
|
|
|
fit="contain"></el-image>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="view">
|
|
|
|
|
<span>
|
|
|
|
|
查看详情
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="k%2 === 0" class="item2">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<el-image
|
|
|
|
|
style="width: 100%; height: 100%;"
|
|
|
|
|
:src="banner"
|
|
|
|
|
fit="contain"></el-image>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<div class="itemTitle">智慧变电站</div>
|
|
|
|
|
<div class="itemInfo">
|
|
|
|
|
针对变配电场景下高压场/GIS组合电器、变压器、电容电抗蛋、避雷器、高压开关柜、隔离开关等电气设备采用不同的手段进行监测，系统可对实时监测的数据进行智能化多维度分机和诊断，评估设备运行状态，捕捉设备运行中的异常。通过对采集的设备图像、温度、环境参数等进行分析，使用户可以
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="view">
|
|
|
|
|
<span>
|
|
|
|
|
查看详情
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<ContactUs class="contactUs"/>
|
|
|
|
|
<Copyright class="copyright"/>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import banner from '@/assets/image/banner.png'
|
|
|
|
|
import ContactUs from '@/components/contactUs'
|
|
|
|
|
import Copyright from '@/components/copyright'
|
|
|
|
|
import {getCaseCenterCaseInfos, getPortalConfigTypeList} from "@/api/casesAndClients";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'IOT',
|
|
|
|
|
components: {
|
|
|
|
|
ContactUs,
|
|
|
|
|
Copyright
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
banner,
|
|
|
|
|
tabsList: [],
|
|
|
|
|
tabsActive: 0,
|
|
|
|
|
contentList: [],
|
|
|
|
|
configTypeId: 0,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
'$route'() {
|
|
|
|
|
this.getData()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getData()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
checkTabs(i, k) {
|
|
|
|
|
this.tabsActive = k
|
|
|
|
|
this.configTypeId = i.configTypeId
|
|
|
|
|
this.getContentList(i.configTypeId)
|
|
|
|
|
},
|
|
|
|
|
getContentList(id) {
|
|
|
|
|
getCaseCenterCaseInfos({
|
|
|
|
|
configTypeId: id
|
|
|
|
|
}).then(e => {
|
|
|
|
|
this.contentList = e.data.sort((a, b) => a.productInfoOrder - b.productInfoOrder)
|
|
|
|
|
console.log(this.contentList)
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
getData() {
|
|
|
|
|
getPortalConfigTypeList({
|
|
|
|
|
parentId: this.$route.query.portalConfigTypeId,
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 10
|
|
|
|
|
}).then(e => {
|
|
|
|
|
this.tabsList = e.rows
|
|
|
|
|
this.configTypeId = e.rows?.[0]?.configTypeId
|
|
|
|
|
this.getContentList(e.rows?.[0]?.configTypeId)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
@import "~@/style.less";
|
|
|
|
|
|
|
|
|
|
.banner {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 35.5vw;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.bannerInfo {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 35%;
|
|
|
|
|
left: 19%;
|
|
|
|
|
width: 45%;
|
|
|
|
|
text-align: left;
|
|
|
|
|
font-size: 1.4vw;
|
|
|
|
|
color: @standard-color;
|
|
|
|
|
line-height: 2.5vw;
|
|
|
|
|
letter-spacing: 4px;
|
|
|
|
|
word-break: break-all;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bannerBtn {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 58%;
|
|
|
|
|
left: 19%;
|
|
|
|
|
width: 11.5vw;
|
|
|
|
|
font-size: 1.2vw;
|
|
|
|
|
line-height: 2vw;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tabs {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
|
|
|
|
|
backdrop-filter: saturate(50%) blur(4px);
|
|
|
|
|
|
|
|
|
|
.content {
|
|
|
|
|
width: 62%;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 50%;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
|
|
|
|
.tab {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 33%;
|
|
|
|
|
line-height: 6.2vw;
|
|
|
|
|
font-size: 1.6vw;
|
|
|
|
|
letter-spacing: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab.active {
|
|
|
|
|
color: @standard-color;
|
|
|
|
|
width: calc(33% - 2px);
|
|
|
|
|
border: 1px solid #fff;
|
|
|
|
|
box-shadow: 0 0 3px #0002;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list {
|
|
|
|
|
width: 62vw;
|
|
|
|
|
margin: 0 auto 5vw auto;
|
|
|
|
|
|
|
|
|
|
.item1 {
|
|
|
|
|
text-align: left;
|
|
|
|
|
margin-top: 5vw;
|
|
|
|
|
height: 18vw;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.left {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 55%;
|
|
|
|
|
|
|
|
|
|
.itemTitle {
|
|
|
|
|
font-size: 1.6vw;
|
|
|
|
|
color: #000;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.itemInfo {
|
|
|
|
|
margin-top: 0.9vw;
|
|
|
|
|
font-size: 1.1vw;
|
|
|
|
|
line-height: 1.75vw;
|
|
|
|
|
color: #0006;
|
|
|
|
|
letter-spacing: 2.7px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 41%;
|
|
|
|
|
margin-left: 4%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.view {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: calc(100% - 3vw);
|
|
|
|
|
height: 3.7vw;
|
|
|
|
|
line-height: 3.7vw;
|
|
|
|
|
padding-left: 3vw;
|
|
|
|
|
font-size: 1.2vw;
|
|
|
|
|
color: #fff;
|
|
|
|
|
background-color: #3372ff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item2 {
|
|
|
|
|
text-align: left;
|
|
|
|
|
margin-top: 5vw;
|
|
|
|
|
height: 18vw;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.left {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 41%;
|
|
|
|
|
margin-right: 4%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right {
|
|
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 55%;
|
|
|
|
|
|
|
|
|
|
.itemTitle {
|
|
|
|
|
font-size: 1.6vw;
|
|
|
|
|
color: #000;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.itemInfo {
|
|
|
|
|
margin-top: 0.9vw;
|
|
|
|
|
font-size: 1.1vw;
|
|
|
|
|
line-height: 1.75vw;
|
|
|
|
|
color: #0006;
|
|
|
|
|
letter-spacing: 2.7px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.view {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: calc(100% - 3vw);
|
|
|
|
|
height: 3.7vw;
|
|
|
|
|
line-height: 3.7vw;
|
|
|
|
|
padding-left: 3vw;
|
|
|
|
|
font-size: 1.2vw;
|
|
|
|
|
color: #fff;
|
|
|
|
|
background-color: #3372ff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.contactUs {
|
|
|
|
|
width: 100%;
|
|
|
|
|
background-color: #2e445c;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.copyright {
|
|
|
|
|
width: 100%;
|
|
|
|
|
background-color: #1d3348;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
夜笙歌
12 months ago