hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-13 04:46:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

style:增加左侧导航及头部导航栏

Browse Source
This commit is contained in:
李晓鸽
2022-09-28 18:33:52 +08:00
commit f416bb7da8
37 changed files with 20589 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/NavTop.vue Normal file
View File

@@ -0,0 +1,90 @@
<template>
<div class="navTop">
<div class="navTopMain">
<img
style="width: 205px; height: 29px; margin-left: 37px; margin-top: 22px"
src="../assets/images/navtop/logo.png"
/>
<div class="navTopRight">
<div class="role">
<div>管理员</div>
<img
style="width: 13px; height: 7px; margin-left: 8px"
src="../assets/images/navtop/down.png"
/>
</div>
<div class="user">
<img
style="
width: 30px;
height: 31px;
margin-left: 8px;
border-radius: 15px;
margin-right: 10px;
"
src="../assets/images/img.jpg"
/>
<div>李玉冰</div>
</div>
<img
style="
width: 27px;
height: 26px;
margin: 27px 29px 0px 31px;
cursor: pointer;
"
src="../assets/images/navtop/signout.png"
/>
</div>
</div>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
name: "NavTop",
setup() {
const state = reactive({});
return {
...toRefs(state),
};
},
};
</script>
<style scoped lang="scss">
.navTop {
width: 100%;
height: 80px;
// display: flex;
background-color: rgba(255, 255, 255, 1);
// box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
.navTopMain {
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
background-color: rgba(255, 255, 255, 1);
.navTopRight {
display: flex;
}
.role {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 400;
color: #333330;
line-height: 36px;
cursor: pointer;
}
.user {
margin-left: 37px;
display: flex;
align-items: center;
font-size: 14px;
font-weight: 400;
color: #b3bdc4;
line-height: 36px;
}
}
}
</style>