Skip to content

G
gassafety
Commit 1129f3e8 authored by yaqizhang's avatar yaqizhang
Browse files
Options

首页导航栏样式

parent e9117445
Show whitespace changes
Inline Side-by-side
Showing with 13780 additions and 50 deletions
gassafety-web/package-lock.json 0 → 100644
View file @ 1129f3e8
This source diff could not be displayed because it is too large. You can view the blob instead.
gassafety-web/src/assets/icons/svg/user.svg
View file @ 1129f3e8
<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>
\ No newline at end of file
<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>
gassafety-web/src/assets/styles/sidebar.scss
View file @ 1129f3e8
......@@ -11,19 +11,30 @@
-webkit-transition: width .28s;
transition: width 0.28s;
width: $sideBarWidth !important;
background-color: $menuBg;
background-color: #053B6A;
height: 100%;
position: fixed;
font-size: 0px;
top: 0;
top: 85px;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
-webkit-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 {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
}
......@@ -57,10 +68,11 @@
}
.svg-icon {
margin-right: 16px;
margin-right: 5px;
}
.el-menu {
background-color: #053B6A;
border: none;
height: 100%;
width: 100% !important;
......@@ -69,7 +81,7 @@
.el-menu-item, .el-submenu__title {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
// white-space: nowrap !important;
}
// menu hover
......@@ -81,7 +93,7 @@
}
& .theme-dark .is-active > .el-submenu__title {
color: $subMenuActiveText !important;
color: #5CD9D4 !important;
}
& .nest-menu .el-submenu>.el-submenu__title,
......@@ -95,10 +107,10 @@
& .theme-dark .nest-menu .el-submenu>.el-submenu__title,
& .theme-dark .el-submenu .el-menu-item {
background-color: $subMenuBg !important;
background-color: #053B6A !important;
&:hover {
background-color: $subMenuHover !important;
background-color: rgba(0, 0, 0, 0.06) !important;
}
}
}
......
gassafety-web/src/assets/styles/variables.scss
View file @ 1129f3e8
......@@ -24,7 +24,7 @@ $sidebarLightTitle: #001529;
$subMenuBg:#1f2d3d;
$subMenuHover:#001528;
$sideBarWidth: 200px;
$sideBarWidth: 100px;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
......
gassafety-web/src/components/TopNav/index.vue
View file @ 1129f3e8
......@@ -5,10 +5,12 @@
@select="handleSelect"
>
<template v-for="(item, index) in topMenus">
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
><svg-icon :icon-class="item.meta.icon" />
{{ item.meta.title }}</el-menu-item
>
<!-- <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber" -->
<el-menu-item :style="" :index="item.path" :key="index" v-if="index < visibleNumber">
<!-- 导航栏左侧图标 -->
<!-- <svg-icon :icon-class="item.meta.icon" /> -->
{{ item.meta.title }}</el-menu-item>
</template>
<!-- 顶部菜单超出数量折叠 -->
......@@ -160,18 +162,25 @@ export default {
<style lang="scss">
.el-menu--horizontal > .el-menu-item {
float: left;
height: 50px;
line-height: 50px;
width: 150px;
height: 80px;
text-align: center;
line-height: 80px;
margin: 0;
border-bottom: 3px solid transparent;
color: #999093;
font-size: 18px;
font-weight: 600;
color: #fff;
/* background-color: #053B6A; */
/* border-bottom: 3px solid transparent; */
/* color: #999093; */
padding: 0 5px;
margin: 0 10px;
margin: 0 20px;
}
.el-menu--horizontal > .el-menu-item.is-active {
border-bottom: 3px solid #{'var(--theme)'};
color: #303133;
box-shadow: inset 2px 2px 20px #5CD9D4;
color: #5CD9D4;
}
/* submenu item */
......@@ -179,4 +188,10 @@ export default {
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>
gassafety-web/src/layout/components/Navbar.vue
View file @ 1129f3e8
<template>
<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" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
<!-- 顶部导航 -->
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
<div class="right-menu">
<template v-if="device!=='mobile'">
<!-- <template v-if="device!=='mobile'">
<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" />
</el-tooltip>
<el-tooltip content="文档地址" effect="dark" placement="bottom">
<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" />
......@@ -23,8 +36,13 @@
<size-select id="size-select" class="right-menu-item hover-effect" />
</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">
<div class="avatar-wrapper">
<img :src="avatar" class="user-avatar">
......@@ -64,6 +82,11 @@ export default {
SizeSelect,
Search
},
data() {
return {
nowDate: "", // 当前日期
};
},
computed: {
...mapGetters([
'sidebar',
......@@ -101,6 +124,32 @@ export default {
location.href = '/index';
})
}).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 {
<style lang="scss" scoped>
.navbar {
height: 50px;
height: 80px;
width: 100%;
left: 0;
line-height: 80px;
overflow: hidden;
position: relative;
background: #fff;
position: fixed;
background: #053B6A;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
.hamburger-container {
line-height: 46px;
line-height: 80px;
height: 100%;
float: left;
cursor: pointer;
......@@ -132,27 +184,52 @@ export default {
}
.topmenu-container {
width: 1100px;
background-color: red;
position: absolute;
left: 50px;
left: 350px;
background-color: #053B6A;
}
.errLog-container {
display: inline-block;
vertical-align: top;
}
.right-menu {
width: 366px;
float: right;
height: 100%;
line-height: 50px;
line-height: 80px;
&:focus {
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 {
display: inline-block;
margin-top: 8px;
padding: 0 8px;
float: right;
height: 100%;
font-size: 18px;
color: #5a5e66;
......
gassafety-web/src/layout/components/Sidebar/SidebarItem.vue
View file @ 1129f3e8
......@@ -3,7 +3,8 @@
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<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>
</app-link>
</template>
......@@ -94,3 +95,18 @@ export default {
}
}
</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
gassafety-web/src/layout/components/Sidebar/index.vue
View file @ 1129f3e8
<template>
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }">
<logo v-if="showLogo" :collapse="isCollapse" />
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables : variables.menuLightBg }">
<!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
: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)'"
:unique-opened="true"
:active-text-color="settings.theme"
......
gassafety-web/src/layout/index.vue
View file @ 1129f3e8
<template>
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
<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="{hasTagsView:needTagsView}" class="main-container">
<div :class="{'fixed-header':fixedHeader}">
<navbar />
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<div class="main-container" :class="{ 'hyseNo':!meunStyle,'hyse':meunStyle,hasTagsView:needTagsView}" >
<div :class="{'fixed-header':fixedHeader,'hyfixedNo':fixedHeader,'hyfixed':!fixedHeader}" v-if="!meunStyle">
<navbar :style=""/>
<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" />
</div>
<app-main />
......
gassafety-web/src/settings.js
View file @ 1129f3e8
......@@ -14,7 +14,7 @@ module.exports = {
/**
* 是否显示顶部导航
*/
topNav: false,
topNav: true,
/**
* 是否显示 tagsView
......@@ -24,7 +24,7 @@ module.exports = {
/**
* 是否固定头部
*/
fixedHeader: false,
fixedHeader: true,
/**
* 是否显示logo
......
gassafety-web/src/views/tool/build/index.vue
View file @ 1129f3e8
......@@ -400,7 +400,7 @@ input, textarea{
background: #121315;
.el-tabs__header{
margin: 0;
border-bottom-color: #121315;
/* border-bottom-color: #121315; */
.el-tabs__nav{
border-color: #121315;
}
......@@ -415,9 +415,9 @@ input, textarea{
user-select: none;
}
.el-tabs__item.is-active{
background: #1e1e1e;
border-bottom-color: #1e1e1e!important;
color: #fff;
background: rgba(0, 0, 0, 0);
/* border-bottom-color: #1e1e1e!important; */
color: #5CD9D4;
}
.el-icon-edit{
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