添加组件
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