99 lines
2.6 KiB
Vue
99 lines
2.6 KiB
Vue
<template>
|
|
<div>
|
|
<div style="background-color: red">
|
|
<div class="menu">
|
|
<div class="mt-20" style="margin-top: 48px">
|
|
<div v-for="item in list" :key="item.id">
|
|
<div
|
|
class="row flex flex-center flex-justify-start pointer"
|
|
@click="goPath(item)"
|
|
>
|
|
<div class="flex flex-center">
|
|
<icon-home />
|
|
<div class="ml-10">
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="item.children">
|
|
<div
|
|
v-for="sub in item.children"
|
|
class="sub flex flex-center flex-justify-start pointer"
|
|
:key="sub.id"
|
|
@click="goPath(sub)"
|
|
>
|
|
<div
|
|
class="flex flex-center flex-justify-between"
|
|
>
|
|
<div class="flex-child-average">
|
|
{{ sub.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
user: null,
|
|
list: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchMenu()
|
|
},
|
|
methods: {
|
|
fetchMenu() {
|
|
this.$api.sys.menus().then(res => {
|
|
if (res.code === 200) {
|
|
this.list = res.data
|
|
}
|
|
})
|
|
},
|
|
goPath(res) {
|
|
console.log(res)
|
|
this.$router.push(res.value)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.menu {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 200px;
|
|
padding-top: 32px;
|
|
bottom: 200px;
|
|
|
|
.row {
|
|
padding: 16rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.row:hover {
|
|
color: #ab7630;
|
|
font-weight: bold;
|
|
background-color: #f0f1f3;
|
|
}
|
|
|
|
.sub {
|
|
padding: 16px 62px;
|
|
border-bottom: 1px #f0f1f3 solid;
|
|
}
|
|
|
|
.sub:hover {
|
|
color: #ab7630;
|
|
padding: 16px 62px;
|
|
background-color: #f0f1f3;
|
|
}
|
|
}
|
|
</style>
|