框架样式
This commit is contained in:
parent
ee270bd8c7
commit
65d540d99a
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -5,7 +5,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<link rel="icon" href="<%= BASE_URL %>canteen2.ico">
|
||||
<title><%= webpackConfig.name %></title>
|
||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749116452711" class="icon" viewBox="0 0 1099 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4380" width="34.34375" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M468.715774 431.803817c-7.269107 5.192219-10.384438 13.688577-7.741127 21.712916l0.283212 1.038444c4.436987 13.688577 22.184936 19.069604 34.36305 10.384438 38.233613-27.188347 38.233613-62.306629 38.233613-81.187425V238.275652c0-19.44722 15.010233-32.569374 32.00295-41.160136 6.985895-3.304139 11.517286-10.290034 11.61169-18.031161 0-15.765465-18.031161-25.583479-32.852586-18.125565-28.132387 14.255001-55.320734 38.044805-55.320734 77.50567v145.570941c0.094404 15.671061-0.188808 33.041394-20.580068 47.768416zM369.969208 431.803817c-7.269107 5.192219-10.290034 13.688577-7.741127 21.712916l0.283212 1.038444c4.436987 13.688577 22.27934 19.069604 34.36305 10.384438 38.233613-27.188347 38.233613-62.306629 38.233613-81.187425V238.275652c0-19.44722 15.010233-32.569374 32.00295-41.160136 6.985895-3.304139 11.517286-10.290034 11.61169-18.031161 0-15.765465-18.125565-25.583479-32.852586-18.125565-28.132387 14.255001-55.320734 38.044805-55.320734 77.50567v145.570941c-0.188808 15.671061-0.188808 33.041394-20.580068 47.768416zM265.558403 454.743985c4.342583 13.688577 22.184936 19.164008 34.36305 10.384438 38.233613-27.188347 38.233613-62.306629 38.233613-81.093022V238.275652c0-19.44722 15.010233-32.569374 32.097354-41.160136 6.985895-3.304139 11.517286-10.290034 11.61169-18.031161 0-15.765465-18.125565-25.583479-32.852586-18.125565-28.226791 14.255001-55.320734 38.044805-55.320734 77.50567v145.570941c0 15.765465 0 33.324606-20.674472 48.051628-7.269107 5.192219-10.290034 13.688577-7.741127 21.712916l0.283212 0.94404zM164.26293 529.700747c0 126.123721 86.568452 233.649857 207.783166 274.149165v43.709044c0 10.006822 8.118743 18.125565 18.125564 18.125565h318.896654c10.006822 0 18.125565-8.118743 18.125564-18.125565v-43.425832c121.214714-40.593713 207.783166-148.119849 207.783166-274.149165v-13.688578c0-10.006822-8.118743-18.125565-18.125564-18.125564h-734.462985c-10.006822 0-18.125565 8.118743-18.125565 18.125564v13.405366zM906.844658 271.505854H620.894994c-15.671061 0-28.321195-12.650134-28.321195-28.321195s12.650134-28.321195 28.321195-28.321194h285.949664c15.671061 0 28.321195 12.650134 28.321194 28.321194s-12.650134 28.321195-28.321194 28.321195zM906.844658 384.601825H620.894994c-15.671061 0-28.321195-12.650134-28.321195-28.321194s12.650134-28.321195 28.321195-28.321195h285.949664c15.671061 0 28.321195 12.650134 28.321194 28.321195s-12.650134 28.321195-28.321194 28.321194zM221.754955 271.505854h-29.454042c-15.671061 0-28.321195-12.650134-28.321195-28.321195s12.650134-28.321195 28.321195-28.321194h29.454042c15.671061 0 28.321195 12.650134 28.321195 28.321194s-12.650134 28.321195-28.321195 28.321195zM221.754955 384.601825h-29.454042c-15.671061 0-28.321195-12.650134-28.321195-28.321194s12.650134-28.321195 28.321195-28.321195h29.454042c15.671061 0 28.321195 12.650134 28.321195 28.321195s-12.650134 28.321195-28.321195 28.321194z" p-id="4381" fill="#ffffff"></path></svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749117486370" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4732" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 341.333333c-164.949333 0-298.666667 133.717333-298.666667 298.666667v42.666667H128v-42.666667c0-212.074667 171.925333-384 384-384s384 171.925333 384 384v42.666667h-85.333333v-42.666667c0-164.949333-133.717333-298.666667-298.666667-298.666667z" fill="#ffffff" p-id="4733"></path><path d="M504.576 470.869333l-38.784 17.792a214.549333 214.549333 0 0 0-71.146667 52.906667l-28.224 32-63.978666-56.469333 28.224-32a299.797333 299.797333 0 0 1 99.541333-73.984l38.762667-17.813334 35.605333 77.568zM85.333333 640h853.333334v85.333333H85.333333v-85.333333zM85.333333 789.333333h853.333334v85.333334H85.333333v-85.333334zM512 213.333333a42.666667 42.666667 0 0 0-42.666667 42.666667v42.666667h-85.333333v-42.666667a128 128 0 0 1 256 0v42.666667h-85.333333v-42.666667a42.666667 42.666667 0 0 0-42.666667-42.666667z" fill="#ffffff" p-id="4734"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
|
|
@ -1,10 +1,13 @@
|
|||
#app {
|
||||
|
||||
.main-container {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
// width: calc(100%-240px);
|
||||
width: -webkit-fill-available;
|
||||
transition: margin-left .28s;
|
||||
margin-left: $base-sidebar-width;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
top: 84px;
|
||||
}
|
||||
|
||||
.sidebarHide {
|
||||
|
|
@ -16,10 +19,10 @@
|
|||
transition: width 0.28s;
|
||||
width: $base-sidebar-width !important;
|
||||
background-color: $base-menu-background;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
font-size: 0px;
|
||||
top: 0;
|
||||
top: 84px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
|
|
|
|||
|
|
@ -9,17 +9,17 @@ $yellow:#FEC171;
|
|||
$panGreen: #30B08F;
|
||||
|
||||
// 默认菜单主题风格
|
||||
$base-menu-color:#bfcbd9;
|
||||
$base-menu-color-active:#f4f4f5;
|
||||
$base-menu-background:#00594F;
|
||||
$base-menu-color:#000;
|
||||
$base-menu-color-active:#000;
|
||||
$base-menu-background:#fff;
|
||||
$base-logo-title-color: #ffffff;
|
||||
|
||||
$base-menu-light-color:rgba(0,0,0,.70);
|
||||
$base-menu-light-background:#ffffff;
|
||||
$base-logo-light-title-color: #001529;
|
||||
|
||||
$base-sub-menu-background:#02423b;
|
||||
$base-sub-menu-hover:#0a302c;
|
||||
$base-sub-menu-background:#fff;
|
||||
$base-sub-menu-hover:#ccc;
|
||||
|
||||
// 自定义暗色菜单风格
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -2,13 +2,11 @@
|
|||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
@select="handleSelect" style="background: transparent;border-bottom: 0;"
|
||||
>
|
||||
<template v-for="(item, index) in topMenus">
|
||||
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber">
|
||||
<svg-icon
|
||||
v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
|
||||
:icon-class="item.meta.icon"/>
|
||||
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber" style="background: transparent;">
|
||||
<svg-icon v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" :icon-class="item.meta.icon"/>
|
||||
{{ item.meta.title }}
|
||||
</el-menu-item>
|
||||
</template>
|
||||
|
|
@ -171,16 +169,18 @@ export default {
|
|||
<style lang="scss">
|
||||
.topmenu-container.el-menu--horizontal > .el-menu-item {
|
||||
float: left;
|
||||
height: 50px !important;
|
||||
line-height: 50px !important;
|
||||
color: #999093 !important;
|
||||
height: 80px !important;
|
||||
line-height: 80px !important;
|
||||
color: #FFF !important;
|
||||
font-size: 22px;
|
||||
padding: 0 5px !important;
|
||||
margin: 0 10px !important;
|
||||
}
|
||||
|
||||
.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
|
||||
border-bottom: 2px solid #{'var(--theme)'} !important;
|
||||
color: #303133;
|
||||
border-bottom: 0!important;
|
||||
background-color: #4C9A95!important;
|
||||
// color: #303133;
|
||||
}
|
||||
|
||||
/* submenu item */
|
||||
|
|
|
|||
|
|
@ -1,15 +1,21 @@
|
|||
<template>
|
||||
<div class="navbar">
|
||||
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
|
||||
<!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
|
||||
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/> -->
|
||||
<div style="position: absolute;left: 0;top: 20px;width: 15%;">
|
||||
<router-link key="collapse" class="sidebar-logo-link" to="/">
|
||||
<div style="height: 40px;width: 40px;background: #fff;border-radius: 50%;margin-right: 20px;display: flex;align-items: center;justify-content: center;">
|
||||
<img :src="logo" class="sidebar-logo" />
|
||||
</div>
|
||||
<h1 class="sidebar-title">{{ title }} </h1>
|
||||
</router-link>
|
||||
</div>
|
||||
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
|
||||
|
||||
<div class="right-menu">
|
||||
<template v-if="device!=='mobile'">
|
||||
<search id="header-search" class="right-menu-item" />
|
||||
|
||||
|
||||
|
||||
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
|
||||
|
|
@ -50,7 +56,7 @@ import SizeSelect from '@/components/SizeSelect'
|
|||
import Search from '@/components/HeaderSearch'
|
||||
import bonusGit from '@/components/bonus/Git'
|
||||
import bonusDoc from '@/components/bonus/Doc'
|
||||
|
||||
import logoImg from '@/assets/logo/logo.png'
|
||||
export default {
|
||||
components: {
|
||||
Breadcrumb,
|
||||
|
|
@ -85,6 +91,12 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: process.env.VUE_APP_TITLE,
|
||||
logo: logoImg
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
|
|
@ -106,10 +118,10 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
height: 50px;
|
||||
height: 84px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
background: #026559;
|
||||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||||
|
||||
.hamburger-container {
|
||||
|
|
@ -131,7 +143,8 @@ export default {
|
|||
|
||||
.topmenu-container {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
left: 15%;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.errLog-container {
|
||||
|
|
@ -142,7 +155,7 @@ export default {
|
|||
.right-menu {
|
||||
float: right;
|
||||
height: 100%;
|
||||
line-height: 50px;
|
||||
line-height: 80px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
|
@ -153,7 +166,7 @@ export default {
|
|||
padding: 0 8px;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
color: #5a5e66;
|
||||
color: #fff;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&.hover-effect {
|
||||
|
|
@ -191,4 +204,29 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-logo-link {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.sidebar-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
line-height: 50px;
|
||||
font-size: 24px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -242,8 +242,8 @@ export default {
|
|||
height: 34px;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #d8dce5;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
|
||||
// border-bottom: 1px solid #d8dce5;
|
||||
// box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
|
||||
.tags-view-wrapper {
|
||||
.tags-view-item {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<template>
|
||||
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
|
||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
||||
<navbar/>
|
||||
<sidebar v-if="!sidebar.hide" class="sidebar-container"/>
|
||||
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
|
||||
<div :class="{'fixed-header':fixedHeader}">
|
||||
<navbar/>
|
||||
<tags-view v-if="needTagsView"/>
|
||||
<div :class="{'fixed-header':fixedHeader}" style="display: flex;border-bottom: 1px solid #d8dce5;box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);align-items: center;">
|
||||
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" style="width: 2%;"/>
|
||||
<tags-view v-if="needTagsView" style="width: 98%;"/>
|
||||
</div>
|
||||
<app-main/>
|
||||
<right-panel>
|
||||
|
|
@ -44,7 +45,8 @@ import { validateNewPassword } from '@/utils/validate'
|
|||
import { updateUserPwd, checkPasswordStatus } from '@/api/system/user'
|
||||
import { handleNoWarningLog } from '@/api/system/log'
|
||||
import {MessageBox} from "element-ui";
|
||||
|
||||
import { mapGetters } from 'vuex'
|
||||
import Hamburger from '@/components/Hamburger'
|
||||
export default {
|
||||
name: 'Layout',
|
||||
data() {
|
||||
|
|
@ -89,11 +91,15 @@ export default {
|
|||
Navbar,
|
||||
RightPanel,
|
||||
Settings,
|
||||
Hamburger,
|
||||
Sidebar,
|
||||
TagsView
|
||||
},
|
||||
mixins: [ResizeMixin],
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar'
|
||||
]),
|
||||
...mapState({
|
||||
theme: state => state.settings.theme,
|
||||
sideTheme: state => state.settings.sideTheme,
|
||||
|
|
@ -123,6 +129,9 @@ export default {
|
|||
this.handleNoWarningLog()
|
||||
},
|
||||
methods: {
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
},
|
||||
checkPasswordStatus() {
|
||||
checkPasswordStatus().then(response => {
|
||||
if (response.code === 200) {
|
||||
|
|
@ -311,4 +320,17 @@ export default {
|
|||
.mobile .fixed-header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hamburger-container {
|
||||
line-height: 46px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
-webkit-tap-highlight-color:transparent;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -64,15 +64,15 @@ export const constantRoutes = [
|
|||
{
|
||||
path: '',
|
||||
component: Layout,
|
||||
redirect: 'index',
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/index_v1'),
|
||||
name: 'Index',
|
||||
meta: { title: '首页', icon: 'dashboard', affix: true }
|
||||
}
|
||||
]
|
||||
redirect: '/canteen/index',
|
||||
// children: [
|
||||
// {
|
||||
// path: 'index',
|
||||
// component: () => import('@/views/index_v1'),
|
||||
// name: 'Index',
|
||||
// meta: { title: '首页', icon: 'dashboard', affix: true }
|
||||
// }
|
||||
// ]
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ module.exports = {
|
|||
/**
|
||||
* 是否显示顶部导航
|
||||
*/
|
||||
topNav: false,
|
||||
topNav: true,
|
||||
|
||||
/**
|
||||
* 是否显示 tagsView
|
||||
|
|
@ -27,7 +27,7 @@ module.exports = {
|
|||
/**
|
||||
* 是否显示logo
|
||||
*/
|
||||
sidebarLogo: true,
|
||||
sidebarLogo: false,
|
||||
|
||||
/**
|
||||
* 是否显示动态标题
|
||||
|
|
|
|||
Loading…
Reference in New Issue