126 lines
2.1 KiB
Vue
126 lines
2.1 KiB
Vue
<template>
|
|
<view class="menu">
|
|
|
|
<image class="homelogo" @click="jump(0)" src="/static/homelogo.png" />
|
|
<div v-for="item in data" key="item.id" @click="jump(item.id)" :class="type==item.id?'menu-active':''">
|
|
{{item.title}}
|
|
<span v-if="type==item.id" class="triangle">▲ </span>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
type: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
})
|
|
|
|
const data = [{
|
|
id: 1,
|
|
title: "品牌展示"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "区位配套"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "项目规划"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "户型展示"
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "动线漫游"
|
|
},
|
|
{
|
|
id: 6,
|
|
title: "建筑细节"
|
|
},
|
|
{
|
|
id: 7,
|
|
title: "科技系统"
|
|
}
|
|
|
|
]
|
|
|
|
const jump = (index) => {
|
|
let u;
|
|
switch (index) {
|
|
case 0:
|
|
u = '/pages/index/index';
|
|
break;
|
|
case 1:
|
|
u = '/pages/BrandDisplay/BrandDisplay';
|
|
break;
|
|
case 2:
|
|
u = '/pages/LocationAmenities/LocationAmenities';
|
|
break;
|
|
case 3:
|
|
u = '/pages/ProjectPlanning/ProjectPlanning';
|
|
break;
|
|
case 4:
|
|
u = '/pages/FloorPlanShowcase/FloorPlanShowcase';
|
|
break;
|
|
case 5:
|
|
u = '/pages/RouteNavigation/RouteNavigation';
|
|
break;
|
|
case 6:
|
|
u = '/pages/ArchitecturalDetails/ArchitecturalDetails';
|
|
break;
|
|
case 7:
|
|
u = '/pages/TechnologySystems/TechnologySystems';
|
|
break;
|
|
}
|
|
if (props.type != index) {
|
|
uni.navigateTo({
|
|
url: u,
|
|
animationType: "fade-in"
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.homelogo {
|
|
width: 16vw;
|
|
height: 3.8vw;
|
|
margin-left: 2vw;
|
|
margin-right: 2vw;
|
|
}
|
|
|
|
.menu {
|
|
display: flex;
|
|
height: 100%;
|
|
background-color: rgba(44 61, 43, 0.5);
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 0.4rem;
|
|
border-top: 0.3vw solid #FFE7CE;
|
|
}
|
|
|
|
.menu div {
|
|
color: white;
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.menu .menu-active {
|
|
background-color: rgba(255 231, 206, 0.3);
|
|
position: relative;
|
|
}
|
|
|
|
.triangle {
|
|
color: #FFE7CE;
|
|
font-size: 0.25rem;
|
|
position: absolute;
|
|
bottom: 0px
|
|
}
|
|
</style> |