theluyuan/beelink
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

下拉菜单样式

Browse Source
This commit is contained in:
luyuan 2020-10-14 11:12:03 +08:00
parent fb9ca6f040
commit 83ffc8cc83
Signed by: theluyuan
GPG Key ID: A7972FD973317FF3
1 changed files with 85 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/NavTop.vue
View File

@ -12,22 +12,86 @@
</div> </div>
<div style="width: 100%"></div> <div style="width: 100%"></div>
<div class="setting"> <div class="setting">
<div class="item"> <a-dropdown :trigger="['click']" :getPopupContainer="triggerNode => triggerNode.parentNode">
<img src="@/static/images/shijian.png" alt="" class="icon"> <div class="item" @click="e => e.preventDefault()">
<div class="name">{{userinfo.zoneStr}}</div> <img src="@/static/images/shijian.png" alt="" class="icon">
<img src="@/static/images/jiantou2.png" alt="" class="down"> <div class="name">{{userinfo.zoneStr}}</div>
</div> <img src="@/static/images/jiantou2.png" alt="" class="down">
<div class="item"> </div>
<img src="@/static/images/qianbi.png" alt="" class="icon"> <template v-slot:overlay>
<div class="name">{{userinfo.currency}}</div> <a-menu>
<img src="@/static/images/jiantou2.png" alt="" class="down"> <a-menu-item key="0">
</div> <div class="selitem">
<div class="item"> <span>时区1</span>
<img src="@/static/images/yuyan.png" alt="" class="icon"> </div>
<div class="name">{{userinfo.language}}</div> </a-menu-item>
<img src="@/static/images/jiantou2.png" alt="" class="down"> <a-menu-item key="1">
</div> <div class="selitem">
<div class="item"> <span>时区2</span>
</div>
</a-menu-item>
<a-menu-item key="3">
<div class="selitem">
<span>时区3</span>
</div>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
<a-dropdown :trigger="['click']" :getPopupContainer="triggerNode => triggerNode.parentNode">
<div class="item" @click="e => e.preventDefault()">
<img src="@/static/images/qianbi.png" alt="" class="icon">
<div class="name">{{userinfo.currency}}</div>
<img src="@/static/images/jiantou2.png" alt="" class="down">
</div>
<template v-slot:overlay>
<a-menu>
<a-menu-item key="0">
<div class="selitem">
<span>时区1</span>
</div>
</a-menu-item>
<a-menu-item key="1">
<div class="selitem">
<span>时区2</span>
</div>
</a-menu-item>
<a-menu-item key="3">
<div class="selitem">
<span>时区3</span>
</div>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
<a-dropdown :trigger="['click']" :getPopupContainer="triggerNode => triggerNode.parentNode">
<div class="item" @click="e => e.preventDefault()">
<img src="@/static/images/yuyan.png" alt="" class="icon">
<div class="name">{{userinfo.language}}</div>
<img src="@/static/images/jiantou2.png" alt="" class="down">
</div>
<template v-slot:overlay>
<a-menu>
<a-menu-item key="0">
<div class="selitem">
<span>时区1</span>
</div>
</a-menu-item>
<a-menu-item key="1">
<div class="selitem">
<span>时区2</span>
</div>
</a-menu-item>
<a-menu-item key="3">
<div class="selitem">
<span>时区3</span>
</div>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
<div class="item" style="border-right: none;">
<img src="@/static/images/rili.png" alt="" class="icon"> <img src="@/static/images/rili.png" alt="" class="icon">
<div class="name">日历</div> <div class="name">日历</div>
</div> </div>
@ -80,15 +144,17 @@
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
padding: 0 16px; padding: 0 16px;
.selitem{
text-align: center;
font-size: 11px;
color: #111;
}
.item{ .item{
display: flex; display: flex;
align-items: center; align-items: center;
border-right: 1px solid #eee; border-right: 1px solid #eee;
padding: 0 23px; padding: 0 23px;
height: 18rpx; height: 18rpx;
&:last-child{
border-right: none;
}
.icon{ .icon{
width: 16px; width: 16px;
height: 16px; height: 16px;