mt-fe-group/11-mes-new
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update Navbar & beilv

Browse Source
This commit is contained in:
lb
2022-11-09 15:30:00 +08:00
parent 66ce0d76f2
commit 031f0f18ed
12 changed files with 168 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/layout/components/Navbar.vue
View File

@@ -19,13 +19,15 @@
</div>
<div class="right-menu">
<div v-if="showhome" class="right-menu-back" @click="toHome">
<div class="right-menu-back" @click="toHome">
<svg-icon
class="item-icon"
icon-class="home"
:icon-class="showTitle ? 'home' : 'homeb'"
style="height: 24px; width: 24px; vertical-align: -6px; margin-right: 2px;"
/>
{{ 'navbar.homepage' | i18nFilter }}
<span v-if="showhome">
{{ 'navbar.homepage' | i18nFilter }}
</span>
</div>
<el-dropdown
:style="showTitle ? 'color: #fff' : '#000'"
@@ -39,7 +41,7 @@
style="line-height: 0; margin: 0 10px; vertical-align: -3px"
@click.native="handleAlarm"
>
<svg-icon style="width: 24px; height: 24px" class="item-icon" icon-class="alarm" />
<svg-icon style="width: 24px; height: 24px" class="item-icon" :icon-class="showTitle ? 'alarm' : 'alarmb'" />
</el-badge>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>暂无数据</el-dropdown-item>
@@ -73,7 +75,7 @@
<svg-icon
:style="showTitle ? 'color: #fff' : ''"
style="width: 24px; height: 24px; vertical-align: -7px"
icon-class="chrome"
:icon-class="showTitle ? 'chrome' : 'chromeb'"
/>
</a>
</div>
@@ -291,8 +293,12 @@ export default {
clearInterval(logoutInterval)
},
async toHome() {
this.$store.dispatch('app/setChoicepart')
this.$router.push('/')
if (this.showhome) {
this.$store.dispatch('app/setChoicepart')
this.$router.push('/')
} else {
this.goToRootPage()
}
},
handleAlarm() {},
getAlarm() {
@@ -324,13 +330,15 @@ export default {
<style lang="scss" scoped>
.navbar {
// height: 48px;
height: calc(100vh / 1600 * 80);
height: calc(48px * var(--beilv));
// height: calc(100vh / 1600 * 80);
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
padding-right: calc(100vw / 2560 * 32);
// padding-right: calc(100vw / 2560 * 32);
padding-right: calc(24px * var(--beilv));
display: flex;
justify-content: space-between;
align-items: center;
@@ -338,18 +346,24 @@ export default {
.homeNavIcon {
cursor: pointer;
color: #fff;
font-size: calc(100vw / 2560 * 28);
line-height: 1;
letter-spacing: calc(100vw / 2560 * 2);
font-weight: 500;
padding-left: calc(100vw / 2560 * 32);
display: flex;
align-items: center;
// font-size: calc(100vw / 2560 * 28);
// letter-spacing: calc(100vw / 2560 * 2);
// padding-left: calc(100vw / 2560 * 32);
font-size: calc(24px * var(--beilv));
letter-spacing: calc(1px * var(--beilv));
padding-left: calc(24px * var(--beilv));
img {
width: calc(100vw / 2560 * 32);
height: calc(100vw / 2560 * 32);
margin-right: calc(100vw / 2560 * 16);
width: calc(24px * var(--beilv));
height: calc(24px * var(--beilv));
margin-right: calc(12px * var(--beilv));
// width: calc(100vw / 2560 * 32);
// height: calc(100vw / 2560 * 32);
// margin-right: calc(100vw / 2560 * 16);
// width: 26px;
// height: 26px;
// marginright: 14px;
@@ -357,7 +371,7 @@ export default {
}
.hamburger-container {
line-height: 48px;
line-height: calc(48px * var(--beilv));
height: 100%;
float: left;
cursor: pointer;
@@ -381,7 +395,7 @@ export default {
.right-menu {
float: right;
height: 100%;
line-height: 48px;
line-height: calc(48px * var(--beilv));
position: relative;
&:focus {
outline: none;
@@ -390,17 +404,17 @@ export default {
.right-menu-back {
display: inline-block;
vertical-align: text-bottom;
font-size: 14px;
padding: 0 8px;
font-size: calc(14px * var(--beilv));
padding: 0 calc(8px * var(--beilv));
text-align: center;
cursor: pointer;
}
.right-menu-item {
display: inline-block;
padding: 0 8px;
padding: 0 calc(8px * var(--beilv));
height: 100%;
font-size: 18px;
font-size: calc(18px * var(--beilv));
color: #5a5e66;
vertical-align: text-bottom;
@@ -414,46 +428,46 @@ export default {
}
}
.verticalBar {
height: 32px;
height: calc(32px * var(--beilv));
width: 0;
opacity: 0.49;
padding: 0;
border-right: 1px solid #fff;
position: relative;
top: -8px;
top: calc(-1 * 8px * var(--beilv));
}
.avatar-container {
.avatar-wrapper {
padding-top: 9px;
padding-top: calc(9px * var(--beilv));
position: relative;
width: 140px;
height: 48px;
width: calc(140px * var(--beilv));
height: calc(48px * var(--beilv));
.user-avatar {
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 16px;
width: calc(32px * var(--beilv));
height: calc(32px * var(--beilv));
border-radius: calc(16px * var(--beilv));
}
.avatar-username {
width: 80px;
width: calc(80px * var(--beilv));
text-align: center;
position: absolute;
font-size: 14px;
right: 13px;
top: 3px;
line-height: 25px;
font-size: calc(14px * var(--beilv));
right: calc(13px * var(--beilv));
top: calc(3px * var(--beilv));
line-height: calc(25px * var(--beilv));
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.avatar-roles {
width: 80px;
width: calc(80px * var(--beilv));
text-align: center;
position: absolute;
font-size: 14px;
top: 20px;
right: 13px;
line-height: 25px;
font-size: calc(14px * var(--beilv));
top: calc(20px * var(--beilv));
right: calc(13px * var(--beilv));
line-height: calc(25px * var(--beilv));
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@@ -462,9 +476,9 @@ export default {
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
right: calc(-1 * 20px * var(--beilv));
top: calc(25px * var(--beilv));
font-size: calc(12px * var(--beilv));
}
}
}
@@ -473,13 +487,13 @@ export default {
.dropdown-badge {
background: #ff4949;
color: #fff;
line-height: 16px;
border-radius: 8px;
padding: 0 8px;
line-height: calc(16px * var(--beilv));
border-radius: calc(8px * var(--beilv));
padding: 0 calc(8px * var(--beilv));
float: right;
margin-left: 5px;
margin-left: calc(5px * var(--beilv));
position: relative;
top: 7px;
top: calc(7px * var(--beilv));
}
.navbar-alarmbox {
text-align: center;