74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<template>
|
|
<div class="menuDiv">
|
|
<div v-for="(item, index) of menuList" :key="index" @click="changeMenu(index, item)"
|
|
:class="{ 'activateTab': index == activateIndex }">{{ item.name }}</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import bimStore from '@/store/modules/bim';
|
|
import { onMounted } from 'vue';
|
|
|
|
const menuList = [
|
|
{
|
|
name: '建筑信息',
|
|
background: '#000000'
|
|
},
|
|
{
|
|
name: '资产信息',
|
|
background: '#2b2f48'
|
|
},
|
|
{
|
|
name: 'BIM应用',
|
|
background: '#212b5f'
|
|
}
|
|
]
|
|
|
|
const data = reactive({
|
|
activateIndex: 0
|
|
});
|
|
|
|
onMounted(() => {
|
|
changeMenu(0, menuList[0]);
|
|
})
|
|
|
|
const { activateIndex } = toRefs(data);
|
|
const emit = defineEmits(['changeMenu'])
|
|
const changeMenu = (index, item) => {
|
|
activateIndex.value = index;
|
|
bimStore().setActivateIndex(index);
|
|
bimStore().setActivateMenu(item);
|
|
emit('changeMenu', index)
|
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
.menuDiv {
|
|
width: 600px;
|
|
height: 45px;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
>div {
|
|
color: #ffff;
|
|
width: 178px;
|
|
height: 64px;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
background: url(@/assets/images/weixuanzhong.png) center center no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.activateTab {
|
|
background-size: 100% 100%;
|
|
background: url(@/assets/images/xuanzhong.png) center center no-repeat;
|
|
}
|
|
}
|
|
</style> |