Skip to content

H
huamu
Commit f628e96a authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

top-menu in navbar

parent f1dd58a0
Show whitespace changes
Inline Side-by-side
Showing with 201 additions and 13 deletions
src/util/menus.ts
View file @ f628e96a
...@@ -73,6 +73,81 @@ export default [ ...@@ -73,6 +73,81 @@ export default [
{ {
key: 'application', key: 'application',
name: '应用', name: '应用',
children: [], children: [
{
list: [
{ name: '养老管理', id: 'page_a6073dc0-a70c-11ea-bbf4-6fdd8b50636a' },
{ name: '垃圾监管', id: 'page_9bf6bcb0-bd0b-11ea-aa4f-9d7cec320c12' },
{ name: '预案推荐' },
{ name: '志愿者管理' },
{ name: '稳商监管' },
],
},
{
list: [
{ name: '联勤联动', id: 'page_af847490-3937-11eb-8bd2-af9cb9e97668' },
{ name: '电子门铃', id: 'page_7dd43000-28bd-11eb-a455-67d7a1e16cfb' },
{ name: '党建管理' },
{ name: '规划管理' },
{ name: '物业管理' },
],
},
{
list: [
{ name: '疫情管控', id: 'page_b6134040-8869-11ea-8650-bb21e10eb77e' },
{ name: '春节帮困', id: 'page_e4ec9b30-4968-11eb-a659-8bbd9242be6e' },
{ name: '城运提效' },
{ name: '停车管理' },
{ name: '更多应用' },
],
},
{
list: [
{ name: '营商优化', id: 'page_b9efffb0-8aa2-11ea-8956-4db27eca528f' },
{ name: '电梯加装', id: 'page_87f75700-41d7-11eb-84c4-f9d93e21eaf4' },
{ name: '政企通讯' },
{ name: '人才公寓管理' },
],
},
],
},
{
key: 'ability',
name: '能力',
children: [
{
list: [
{
name: '填表机器人',
id: 'page_99c095b0-c1ec-11eb-b455-8573e34978b3',
},
{ name: '建言献策' },
],
},
{
list: [
{
name: '知识库推荐',
id: 'page_af847490-3937-11eb-8bd2-af9cb9e97668',
},
{ name: '问题上报' },
],
},
{
list: [
{
name: '15分钟服务圈模型',
id: 'page_90fa7af0-9f40-11eb-8841-4d34f1d622ba',
},
{ name: '服务获取', id: 'page_213eed40-a0bc-11eb-95d1-691952c8451e' },
],
},
{
list: [
{ name: '短信互动', id: 'page_e0fb11b0-f1b0-11ea-8dfd-198fd4af74bf' },
{ name: '活动参与' },
],
},
],
}, },
] ]
src/view/components/nav-bar.vue
View file @ f628e96a
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
</n-icon> </n-icon>
</div> </div>
<b>|</b> <b>|</b>
<n-popover trigger="hover"> <n-popover trigger="hover" class="top-menu">
<template #trigger> <template #trigger>
<div class="align-center menu-btn"> <div class="align-center menu-btn">
<n-icon <n-icon
...@@ -61,8 +61,29 @@ ...@@ -61,8 +61,29 @@
</div> </div>
</template> </template>
<div class="menu"> <div class="menu">
<div class="parent"></div> <div class="parent">
<div class="children"></div> <div
v-for="menu in menus"
:key="menu.key"
:class="{ on: curMenu.key === menu.key }"
@click="curMenu = menu"
>
{{ menu.name }}
</div>
</div>
<div class="children">
<div v-for="(child, i) in curMenu.children" :key="i">
<h3 v-if="child.name">{{ child.name }}</h3>
<p
v-for="p in child.list"
:key="p.name"
:class="{ link: !!p.id }"
@click.prevent="toPage(p.id)"
>
{{ p.name }}
</p>
</div>
</div>
</div> </div>
</n-popover> </n-popover>
</div> </div>
...@@ -88,6 +109,9 @@ import nav1 from '@images/nav1.svg' ...@@ -88,6 +109,9 @@ import nav1 from '@images/nav1.svg'
import nav2 from '@images/nav2.svg' import nav2 from '@images/nav2.svg'
import nav3 from '@images/nav3.svg' import nav3 from '@images/nav3.svg'
import nav5 from '@images/nav5.svg' import nav5 from '@images/nav5.svg'
import menus from '@/util/menus'
const curMenu = ref(menus[0])
const showFilterDrawer = computed(() => store.state.showFilterDrawer) const showFilterDrawer = computed(() => store.state.showFilterDrawer)
const showBuildingDrawer = computed(() => store.state.showBuildingDrawer) const showBuildingDrawer = computed(() => store.state.showBuildingDrawer)
...@@ -177,6 +201,11 @@ watch( ...@@ -177,6 +201,11 @@ watch(
}, },
) )
const toPage = (id: string) => {
if (!id) return
window.parent._global_datamap_emit &&
window.parent._global_datamap_emit.emit('CHANGE_PAGE_BY_ID_EVENT', id)
}
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
...@@ -256,4 +285,45 @@ watch( ...@@ -256,4 +285,45 @@ watch(
.n-input--focus .n-input--focus
.n-input__border .n-input__border
border .01rem solid $red border .01rem solid $red
.top-menu
width 12rem
height 2.5rem
.menu
border-radius .06rem
background $white-bg
display flex
color $font
.parent
margin .15rem 0
width 1rem
font-size .12rem
font-family $font-ping-medium
>div
border-radius .06rem
box-sizing border-box
padding .08rem .12rem
cursor pointer
&:hover
&.on
background $light-red
color $red
.children
display flex
justify-content space-around
>div
margin 0 .1rem
h3
font-size .13rem
margin-bottom .1rem
p
width 1.2rem
margin .1rem 0
font-size .1rem
&.link
color #000
font-weight bold
cursor pointer
&:hover
color $red
</style> </style>
src/view/components/struct-modal.vue
View file @ f628e96a
...@@ -81,16 +81,49 @@ ...@@ -81,16 +81,49 @@
<div v-else-if="curKey === '1'" class="card"> <div v-else-if="curKey === '1'" class="card">
<div class="row"> <div class="row">
<span>书记</span> <span>书记</span>
<p>李嘉宁</p>
</div>
<div class="row">
<span>成员（按姓氏笔画排序）</span>
<p>
马建勇、王波、朱凤洲、孙建华、李卫鑫、吴惠萍、张佳锋、张晓山、陈斐轶、尚清、钱英、蒋国兴
</p>
</div>
<div class="row">
<span>党组织地址</span>
<p>内容</p>
</div>
</div>
<div v-else-if="curKey === '2'" class="card">
<div class="flex">
<div class="col">
<div class="row">
<span>党总支书记</span>
<p>内容</p> <p>内容</p>
</div> </div>
<div class="row"> <div class="row">
<span>党组织地址</span> <span>党组织地址</span>
<p>内容</p> <p>内容</p>
</div> </div>
<div class="row">
<span>党组织内党员数量</span>
<p>内容</p>
</div>
</div>
<div class="col">
<div class="row">
<span>党总支委员</span>
<p>内容</p>
</div>
<div class="row">
<span>党组织联系方式</span>
<p>内容</p>
</div>
</div>
</div>
</div> </div>
<div <div
v-else-if=" v-else-if="
curKey === '2' ||
curKey === '3' || curKey === '3' ||
(curKey.split('-').length === 3 && curMenu._hasSub) (curKey.split('-').length === 3 && curMenu._hasSub)
" "
...@@ -99,25 +132,35 @@ ...@@ -99,25 +132,35 @@
<div class="flex"> <div class="flex">
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<span>党总支书记</span> <span>党委书记</span>
<p>内容</p> <p>陈倩倩</p>
</div> </div>
<div class="row"> <div class="row">
<span>党组织地址</span> <span>党委副书记</span>
<p>杨燕华</p>
</div>
<div class="row">
<span>党组织联系方式</span>
<p>内容</p> <p>内容</p>
</div> </div>
<div class="row"> <div class="row">
<span>党组织内党员数量</span> <span>党组织成员数量</span>
<p>内容</p> <p>内容</p>
</div> </div>
</div> </div>
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<span>党总支委员</span> <span>党委成员</span>
<p>内容</p> <p>
徐学红、李华、蒋冬梅、戴萍、唐晔君、杨培君、曹静、袁若稼
</p>
</div> </div>
<div class="row"> <div class="row">
<span>党组织联系方式</span> <span>党委副书记（兼职）</span>
<p>吴惠萍、张晓山</p>
</div>
<div class="row">
<span>党组织地址</span>
<p>内容</p> <p>内容</p>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment