添加产品页面
parent
080a883d72
commit
66e350d8f0
@ -0,0 +1,246 @@
|
||||
<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">{{ bannerTitle }}</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>
|
||||
<div v-for="i in contentList">
|
||||
<platformAdvantages class="platformAdvantages" :configTypeId="configTypeId" v-if="i.configModal === '1'"
|
||||
:data="i"/>
|
||||
<PlatformIntroduction class="platformIntroduction" :configTypeId="configTypeId" v-if="i.configModal === '2'"
|
||||
:data="i"/>
|
||||
<PlatformAdvantages2 class="platformAdvantages2" :configTypeId="configTypeId" v-if="i.configModal === '3'"
|
||||
:data="i"/>
|
||||
<PlatformAdvantages3 class="platformAdvantages3" :configTypeId="configTypeId" v-if="i.configModal === '4'"
|
||||
:data="i"/>
|
||||
<PlatformArchitecture class="platformArchitecture" :configTypeId="configTypeId" v-if="i.configModal === '5'"
|
||||
:data="i"/>
|
||||
<TechnicalArchitecture class="technicalArchitecture" :configTypeId="configTypeId" v-if="i.configModal === '6'"
|
||||
:data="i"/>
|
||||
<platformFeatures class="platformFeatures" :configTypeId="configTypeId" v-if="i.configModal === '7'" :data="i"/>
|
||||
<HighFrequencyRFID class="highFrequencyRFID" v-if="i.configModal === '8' " :data="i"/>
|
||||
<!-- <UltraHighFrequencyRFID class="ultraHighFrequencyRFID" v-if="i.configModal === '9' " :data="i"/>-->
|
||||
<DataAcquisitionSensing class="dataAcquisitionSensing" v-if="i.configModal === '9'" :data="i"/>
|
||||
<modal11 class="dataAcquisitionSensing" v-if="i.configModal === '11'" :data="i"/>
|
||||
<modal12 class="dataAcquisitionSensing" v-if="i.configModal === '12'" :data="i"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div v-if="tabsActive === 1">-->
|
||||
<!-- <div v-for="(i, k) in contentList">-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<ContactUs class="contactUs"/>
|
||||
<Copyright class="copyright"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PlatformAdvantages from './platformAdvantages'
|
||||
import PlatformIntroduction from './platformIntroduction'
|
||||
import PlatformAdvantages2 from './platformAdvantages2'
|
||||
import PlatformAdvantages3 from './platformAdvantages3'
|
||||
import PlatformArchitecture from './platformArchitecture'
|
||||
import TechnicalArchitecture from './technicalArchitecture'
|
||||
import PlatformFeatures from './platformFeatures'
|
||||
import HighFrequencyRFID from './product/highFrequencyRFID'
|
||||
import modal11 from './modal11'
|
||||
import modal12 from './modal12'
|
||||
import UltraHighFrequencyRFID from './product/ultraHighFrequencyRFID'
|
||||
import DataAcquisitionSensing from './product/dataAcquisitionSensing'
|
||||
import ContactUs from '@/components/contactUs'
|
||||
import Copyright from '@/components/copyright'
|
||||
import {getPortalConfigList, getPortalConfigTypeList, getProductCenterProductInfos} from "@/api/productCenter";
|
||||
|
||||
export default {
|
||||
name: 'ProductCenter',
|
||||
components: {
|
||||
PlatformAdvantages,
|
||||
PlatformIntroduction,
|
||||
PlatformAdvantages2,
|
||||
PlatformAdvantages3,
|
||||
PlatformArchitecture,
|
||||
TechnicalArchitecture,
|
||||
PlatformFeatures,
|
||||
HighFrequencyRFID,
|
||||
UltraHighFrequencyRFID,
|
||||
DataAcquisitionSensing,
|
||||
ContactUs,
|
||||
Copyright,
|
||||
modal11,
|
||||
modal12
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
banner: '',
|
||||
bannerTitle: '',
|
||||
tabsActive: 0,
|
||||
tabsList: [],
|
||||
configTypeId: 0,
|
||||
contentList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
watch: {
|
||||
'$route'() {
|
||||
this.getData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getContentList(id) {
|
||||
getProductCenterProductInfos({
|
||||
configTypeId: id,
|
||||
// parentId: 0
|
||||
}).then(e => {
|
||||
this.contentList = e.data.sort((a, b) => a.productInfoOrder - b.productInfoOrder)
|
||||
console.log(this.contentList)
|
||||
})
|
||||
},
|
||||
checkTabs(i, k) {
|
||||
this.tabsActive = k
|
||||
this.configTypeId = i.configTypeId
|
||||
this.getContentList(i.configTypeId)
|
||||
},
|
||||
getData() {
|
||||
console.log(this.$route.query)
|
||||
getPortalConfigList({
|
||||
portalConfigType: 2,
|
||||
portalConfigTypeId: this.$route.query.portalConfigTypeId,
|
||||
pageNum: 1,
|
||||
pageSize: 5
|
||||
}).then(e => {
|
||||
this.banner = e.rows?.[0]?.portalConfigPic
|
||||
this.bannerTitle = e.rows?.[0]?.portalConfigDesc
|
||||
})
|
||||
getPortalConfigTypeList({
|
||||
parentId: this.$route.query.portalConfigTypeId,
|
||||
pageNum: 1,
|
||||
pageSize: 50
|
||||
}).then(e => {
|
||||
this.tabsList = e.rows
|
||||
this.configTypeId = e.rows?.[0]?.configTypeId
|
||||
if (e.rows?.[0]?.configTypeId) {
|
||||
this.getContentList(e.rows?.[0]?.configTypeId)
|
||||
} else {
|
||||
this.contentList = []
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</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: 50%;
|
||||
line-height: 6.2vw;
|
||||
font-size: 1.6vw;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: @standard-color;
|
||||
width: calc(50% - 3px);
|
||||
border: 1px solid #fff;
|
||||
box-shadow: 0 0 3px #0002;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.platformAdvantages {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.platformIntroduction {
|
||||
width: 100%;
|
||||
background-color: #f4f9ff;
|
||||
}
|
||||
|
||||
.platformAdvantages2 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.platformAdvantages3 {
|
||||
width: 100%;
|
||||
background-color: #f6f7fb;
|
||||
}
|
||||
|
||||
.platformArchitecture {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.technicalArchitecture {
|
||||
width: 100%;
|
||||
background-color: #f4f9ff;
|
||||
}
|
||||
|
||||
.contactUs {
|
||||
width: 100%;
|
||||
background-color: #2e445c;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
width: 100%;
|
||||
background-color: #1d3348;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue