添加组件
suixy
5 months ago
parent
1e8b0b3426
commit
646dd5f7b7
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="banner">
|
||||
<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="`width:${tabsActive === i.webMenuId ? (100/tabsData.length+'%'):`calc(${100/tabsData.length}% - 2px)`}`"
|
||||
:class="`tab ${tabsActive === i.webMenuId ? 'active':''}`" v-for="(i,k) in tabsData">
|
||||
{{ i.webMenuName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ProduceModel v-if="tabsActive" :data="pageData.productList.find(e=>e.id===tabsActive)"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProduceModel from './produceModel.vue'
|
||||
import {selectMenuTree} from "@/api/productCenter";
|
||||
|
||||
export default {
|
||||
name: 'ProductCenter',
|
||||
components: {
|
||||
ProduceModel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabsActive: 0,
|
||||
pageData: {
|
||||
banner: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
|
||||
bannerTitle: '',
|
||||
productList: []
|
||||
},
|
||||
tabsData: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
selectMenuTree().then(e => {
|
||||
let tabsData = e.data.find(v => v.webMenuId === 7).children
|
||||
this.tabsData = tabsData
|
||||
console.log(tabsData)
|
||||
tabsData.forEach(e => {
|
||||
if (!this.pageData.productList.map(v => v.id).includes(e.webMenuId)) {
|
||||
this.pageData.productList.push({
|
||||
id: e.webMenuId,
|
||||
name: e.webMenuName,
|
||||
list: []
|
||||
})
|
||||
}
|
||||
})
|
||||
this.tabsActive = tabsData[0].webMenuId
|
||||
})
|
||||
},
|
||||
checkTabs(e) {
|
||||
this.tabsActive = e.webMenuId
|
||||
},
|
||||
}
|
||||
}
|
||||
</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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contactUs {
|
||||
width: 100%;
|
||||
background-color: #2e445c;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
width: 100%;
|
||||
background-color: #1d3348;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue