Commit 1129f3e8 authored by yaqizhang's avatar yaqizhang

首页导航栏样式

parent e9117445
This source diff could not be displayed because it is too large. You can view the blob instead.
<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg> <svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="&#xe60a;"/></svg>
\ No newline at end of file
...@@ -11,19 +11,30 @@ ...@@ -11,19 +11,30 @@
-webkit-transition: width .28s; -webkit-transition: width .28s;
transition: width 0.28s; transition: width 0.28s;
width: $sideBarWidth !important; width: $sideBarWidth !important;
background-color: $menuBg; background-color: #053B6A;
height: 100%; height: 100%;
position: fixed; position: fixed;
font-size: 0px; font-size: 0px;
top: 0; top: 85px;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1001; z-index: 1001;
overflow: hidden; overflow: hidden;
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
box-shadow: 2px 0 6px rgba(0,21,41,.35); box-shadow: 2px 0 6px rgba(0,21,41,.35);
.el-menu-item{
margin-top: 5px;
height: 84px;
line-height: 30px !important;
text-align: center;
.svg-icon{
margin-top: 10px;
font-size: 30px;
// width: 30px !important;
}
// reset element-ui css }
reset element-ui css
.horizontal-collapse-transition { .horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
} }
...@@ -57,10 +68,11 @@ ...@@ -57,10 +68,11 @@
} }
.svg-icon { .svg-icon {
margin-right: 16px; margin-right: 5px;
} }
.el-menu { .el-menu {
background-color: #053B6A;
border: none; border: none;
height: 100%; height: 100%;
width: 100% !important; width: 100% !important;
...@@ -69,7 +81,7 @@ ...@@ -69,7 +81,7 @@
.el-menu-item, .el-submenu__title { .el-menu-item, .el-submenu__title {
overflow: hidden !important; overflow: hidden !important;
text-overflow: ellipsis !important; text-overflow: ellipsis !important;
white-space: nowrap !important; // white-space: nowrap !important;
} }
// menu hover // menu hover
...@@ -81,7 +93,7 @@ ...@@ -81,7 +93,7 @@
} }
& .theme-dark .is-active > .el-submenu__title { & .theme-dark .is-active > .el-submenu__title {
color: $subMenuActiveText !important; color: #5CD9D4 !important;
} }
& .nest-menu .el-submenu>.el-submenu__title, & .nest-menu .el-submenu>.el-submenu__title,
...@@ -95,10 +107,10 @@ ...@@ -95,10 +107,10 @@
& .theme-dark .nest-menu .el-submenu>.el-submenu__title, & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
& .theme-dark .el-submenu .el-menu-item { & .theme-dark .el-submenu .el-menu-item {
background-color: $subMenuBg !important; background-color: #053B6A !important;
&:hover { &:hover {
background-color: $subMenuHover !important; background-color: rgba(0, 0, 0, 0.06) !important;
} }
} }
} }
......
...@@ -24,7 +24,7 @@ $sidebarLightTitle: #001529; ...@@ -24,7 +24,7 @@ $sidebarLightTitle: #001529;
$subMenuBg:#1f2d3d; $subMenuBg:#1f2d3d;
$subMenuHover:#001528; $subMenuHover:#001528;
$sideBarWidth: 200px; $sideBarWidth: 100px;
// the :export directive is the magic sauce for webpack // the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
......
...@@ -5,10 +5,12 @@ ...@@ -5,10 +5,12 @@
@select="handleSelect" @select="handleSelect"
> >
<template v-for="(item, index) in topMenus"> <template v-for="(item, index) in topMenus">
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber" <!-- <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber" -->
><svg-icon :icon-class="item.meta.icon" /> <el-menu-item :style="" :index="item.path" :key="index" v-if="index < visibleNumber">
{{ item.meta.title }}</el-menu-item
> <!-- 导航栏左侧图标 -->
<!-- <svg-icon :icon-class="item.meta.icon" /> -->
{{ item.meta.title }}</el-menu-item>
</template> </template>
<!-- 顶部菜单超出数量折叠 --> <!-- 顶部菜单超出数量折叠 -->
...@@ -160,18 +162,25 @@ export default { ...@@ -160,18 +162,25 @@ export default {
<style lang="scss"> <style lang="scss">
.el-menu--horizontal > .el-menu-item { .el-menu--horizontal > .el-menu-item {
float: left; float: left;
height: 50px; width: 150px;
line-height: 50px; height: 80px;
text-align: center;
line-height: 80px;
margin: 0; margin: 0;
border-bottom: 3px solid transparent; font-size: 18px;
color: #999093; font-weight: 600;
color: #fff;
/* background-color: #053B6A; */
/* border-bottom: 3px solid transparent; */
/* color: #999093; */
padding: 0 5px; padding: 0 5px;
margin: 0 10px; margin: 0 20px;
} }
.el-menu--horizontal > .el-menu-item.is-active { .el-menu--horizontal > .el-menu-item.is-active {
border-bottom: 3px solid #{'var(--theme)'}; border-bottom: 3px solid #{'var(--theme)'};
color: #303133; box-shadow: inset 2px 2px 20px #5CD9D4;
color: #5CD9D4;
} }
/* submenu item */ /* submenu item */
...@@ -179,4 +188,10 @@ export default { ...@@ -179,4 +188,10 @@ export default {
height: 50px !important; height: 50px !important;
line-height: 50px !important; line-height: 50px !important;
} }
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus{
background-color: rgba(0, 0, 0, 0);
/* opacity: 0; */
box-shadow: inset 2px 2px 20px #5CD9D4;
color: #5CD9D4;
}
</style> </style>
<template> <template>
<div class="navbar"> <div class="navbar">
<div style="float: left;padding: 5px;">
<span style="width: 288px;
height: 43px;
font-size: 30px;
font-family: eryaxindahei;
font-weight: 600;
line-height: 43px;
color: #0FC7C0;
opacity: 1;">燃气综合管理平台</span></div>
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/> <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
<!-- 顶部导航 -->
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/> <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
<div class="right-menu"> <div class="right-menu">
<template v-if="device!=='mobile'"> <!-- <template v-if="device!=='mobile'">
<search id="header-search" class="right-menu-item" /> <search id="header-search" class="right-menu-item" />
<!--<el-tooltip content="源码地址" effect="dark" placement="bottom"> <el-tooltip content="源码地址" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" /> <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip>
<el-tooltip content="文档地址" effect="dark" placement="bottom"> <el-tooltip content="文档地址" effect="dark" placement="bottom">
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" /> <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
</el-tooltip>--> </el-tooltip>
<screenfull id="screenfull" class="right-menu-item hover-effect" /> <screenfull id="screenfull" class="right-menu-item hover-effect" />
...@@ -23,8 +36,13 @@ ...@@ -23,8 +36,13 @@
<size-select id="size-select" class="right-menu-item hover-effect" /> <size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip>
</template> </template> -->
<div class="formatDate">
<img src="@/assets/logo/formleft.png" alt="">
<span>{{ nowDate }}</span>
</div>
<div class="yhm">用户名</div>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click"> <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img :src="avatar" class="user-avatar"> <img :src="avatar" class="user-avatar">
...@@ -64,6 +82,11 @@ export default { ...@@ -64,6 +82,11 @@ export default {
SizeSelect, SizeSelect,
Search Search
}, },
data() {
return {
nowDate: "", // 当前日期
};
},
computed: { computed: {
...mapGetters([ ...mapGetters([
'sidebar', 'sidebar',
...@@ -101,6 +124,32 @@ export default { ...@@ -101,6 +124,32 @@ export default {
location.href = '/index'; location.href = '/index';
}) })
}).catch(() => {}); }).catch(() => {});
},
currentTime() {
setInterval(this.formatDate, 500);
},
formatDate() {
let date = new Date();
let year = date.getFullYear(); // 年
let month = date.getMonth() + 1; // 月
let day = date.getDate(); // 日
let week = date.getDay(); // 星期
let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
let hour = date.getHours(); // 时
hour = hour < 10 ? "0" + hour : hour; // 如果只有一位,则前面补零
let minute = date.getMinutes(); // 分
minute = minute < 10 ? "0" + minute : minute; // 如果只有一位,则前面补零
let second = date.getSeconds(); // 秒
second = second < 10 ? "0" + second : second; // 如果只有一位,则前面补零
this.nowDate = `${year}/${month}/${day}`;
}
},
mounted() {
this.currentTime();
},
beforeDestroy() {
if (this.formatDate) {
clearInterval(this.formatDate); // 在Vue实例销毁前,清除时间定时器
} }
} }
} }
...@@ -108,14 +157,17 @@ export default { ...@@ -108,14 +157,17 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.navbar { .navbar {
height: 50px; height: 80px;
width: 100%;
left: 0;
line-height: 80px;
overflow: hidden; overflow: hidden;
position: relative; position: fixed;
background: #fff; background: #053B6A;
box-shadow: 0 1px 4px rgba(0,21,41,.08); box-shadow: 0 1px 4px rgba(0,21,41,.08);
.hamburger-container { .hamburger-container {
line-height: 46px; line-height: 80px;
height: 100%; height: 100%;
float: left; float: left;
cursor: pointer; cursor: pointer;
...@@ -132,27 +184,52 @@ export default { ...@@ -132,27 +184,52 @@ export default {
} }
.topmenu-container { .topmenu-container {
width: 1100px;
background-color: red;
position: absolute; position: absolute;
left: 50px; left: 350px;
background-color: #053B6A;
} }
.errLog-container { .errLog-container {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.right-menu { .right-menu {
width: 366px;
float: right; float: right;
height: 100%; height: 100%;
line-height: 50px; line-height: 80px;
&:focus { &:focus {
outline: none; outline: none;
} }
.formatDate{
width: 200px;
float: left;
font-size: 24px;
font-family: PingFang SC;
font-weight: 400;
color: #fff;
img{
height: 100%;
float: left;
}
}
.yhm{
font-size: 24px;
font-family: PingFang SC;
font-weight: 400;
color: #fff;
float: left;
}
.right-menu-item { .right-menu-item {
display: inline-block; display: inline-block;
margin-top: 8px;
padding: 0 8px; padding: 0 8px;
float: right;
height: 100%; height: 100%;
font-size: 18px; font-size: 18px;
color: #5a5e66; color: #5a5e66;
......
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"> <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)"> <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"> <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" /> <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)"/><br>
<item :title="onlyOneChild.meta.title" />
</el-menu-item> </el-menu-item>
</app-link> </app-link>
</template> </template>
...@@ -94,3 +95,18 @@ export default { ...@@ -94,3 +95,18 @@ export default {
} }
} }
</script> </script>
<style lang="scss">
#app .sidebar-container .submenu-title-noDropdown:hover, #app .sidebar-container .el-submenu__title:hover {
box-shadow: inset 2px 2px 20px #5CD9D4;
}
#app .sidebar-container .el-menu-item, #app .sidebar-container .el-submenu__title {
overflow: hidden !important;
text-overflow: ellipsis !important;
background: rgba(0, 0, 0, 0);
}
.el-menu-item:hover, .el-menu-item:focus,.is-active {
outline: none;
box-shadow: inset 2px 2px 20px #5CD9D4;
color: #5CD9D4 !important;
}
</style>
\ No newline at end of file
<template> <template>
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }"> <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables : variables.menuLightBg }">
<logo v-if="showLogo" :collapse="isCollapse" /> <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"> <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
:collapse="isCollapse" :collapse="isCollapse"
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg" :background-color="settings.sideTheme === 'theme-dark' ? variables : variables.menuLightBg"
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuText : 'rgba(0,0,0,.65)'" :text-color="settings.sideTheme === 'theme-dark' ? variables.menuText : 'rgba(0,0,0,.65)'"
:unique-opened="true" :unique-opened="true"
:active-text-color="settings.theme" :active-text-color="settings.theme"
......
<template> <template>
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar class="sidebar-container" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }" /> <div class="main-container" :class="{ 'hyseNo':!meunStyle,'hyse':meunStyle,hasTagsView:needTagsView}" >
<div :class="{hasTagsView:needTagsView}" class="main-container"> <div :class="{'fixed-header':fixedHeader,'hyfixedNo':fixedHeader,'hyfixed':!fixedHeader}" v-if="!meunStyle">
<div :class="{'fixed-header':fixedHeader}"> <navbar :style=""/>
<navbar /> <sidebar class="sidebar-container" v-if="!meunStyle"/>
<!-- <tags-view v-if="needTagsView" style="width:100%"/> -->
</div>
<div v-if="meunStyle">
<head-navbar v-if="meunStyle" />
<tags-view v-if="needTagsView" /> <tags-view v-if="needTagsView" />
</div> </div>
<app-main /> <app-main />
......
...@@ -14,7 +14,7 @@ module.exports = { ...@@ -14,7 +14,7 @@ module.exports = {
/** /**
* 是否显示顶部导航 * 是否显示顶部导航
*/ */
topNav: false, topNav: true,
/** /**
* 是否显示 tagsView * 是否显示 tagsView
...@@ -24,7 +24,7 @@ module.exports = { ...@@ -24,7 +24,7 @@ module.exports = {
/** /**
* 是否固定头部 * 是否固定头部
*/ */
fixedHeader: false, fixedHeader: true,
/** /**
* 是否显示logo * 是否显示logo
......
...@@ -400,7 +400,7 @@ input, textarea{ ...@@ -400,7 +400,7 @@ input, textarea{
background: #121315; background: #121315;
.el-tabs__header{ .el-tabs__header{
margin: 0; margin: 0;
border-bottom-color: #121315; /* border-bottom-color: #121315; */
.el-tabs__nav{ .el-tabs__nav{
border-color: #121315; border-color: #121315;
} }
...@@ -415,9 +415,9 @@ input, textarea{ ...@@ -415,9 +415,9 @@ input, textarea{
user-select: none; user-select: none;
} }
.el-tabs__item.is-active{ .el-tabs__item.is-active{
background: #1e1e1e; background: rgba(0, 0, 0, 0);
border-bottom-color: #1e1e1e!important; /* border-bottom-color: #1e1e1e!important; */
color: #fff; color: #5CD9D4;
} }
.el-icon-edit{ .el-icon-edit{
color: #f1fa8c; color: #f1fa8c;
......
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