mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-06-02 18:31:44 +08:00
Update toggle side bar button style
This commit is contained in:
baedyl
parent
8e12eb6d96
commit
25ab264b73
@ -1,15 +1,6 @@
|
||||
<template>
|
||||
<div style="padding: 0 15px;" @click="toggleClick">
|
||||
<svg
|
||||
:class="{'is-active':isActive}"
|
||||
class="hamburger"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="64"
|
||||
height="64"
|
||||
>
|
||||
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
|
||||
</svg>
|
||||
<div style="padding: 0 15px" @click="toggleClick">
|
||||
<i class="el-icon-arrow-left hamburger" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -34,8 +25,16 @@ export default {
|
||||
.hamburger {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #1f71bc;
|
||||
color: white;
|
||||
font: normal normal normal 12px/14px FontAwesome;
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
width: 18px;
|
||||
height: 45px;
|
||||
padding: 13px 3px;
|
||||
position: absolute;
|
||||
bottom: 90px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.hamburger.is-active {
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
|
||||
|
||||
<div class="right-menu">
|
||||
@ -33,7 +31,6 @@
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import Breadcrumb from '@/components/Breadcrumb'
|
||||
import Hamburger from '@/components/Hamburger'
|
||||
// import ErrorLog from '@/components/ErrorLog'
|
||||
// import Screenfull from '@/components/Screenfull'
|
||||
// import SizeSelect from '@/components/SizeSelect'
|
||||
@ -41,8 +38,7 @@ import Hamburger from '@/components/Hamburger'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Breadcrumb,
|
||||
Hamburger
|
||||
Breadcrumb
|
||||
// ErrorLog,
|
||||
// Screenfull,
|
||||
// SizeSelect,
|
||||
@ -56,9 +52,6 @@ export default {
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
},
|
||||
async logout() {
|
||||
await this.$store.dispatch('user/logout')
|
||||
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
|
||||
@ -96,6 +89,7 @@ export default {
|
||||
|
||||
.breadcrumb-container {
|
||||
float: left;
|
||||
margin-left: 53px;
|
||||
}
|
||||
|
||||
.errLog-container {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="sidebar-logo-container" :class="{'collapse':collapse}">
|
||||
<transition name="sidebarLogoFade">
|
||||
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo">
|
||||
<img v-if="logo" :src="logoSmall" class="sidebar-logo">
|
||||
</router-link>
|
||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo">
|
||||
@ -23,7 +23,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'MSK Physio',
|
||||
logo: require('@/assets/img/logo_long.png')
|
||||
logo: require('@/assets/img/logo_long.png'),
|
||||
logoSmall: require('@/assets/img/logo.png')
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -44,7 +45,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
background: #2b2f3a;
|
||||
background: transparent linear-gradient(180deg, var(--unnamed-color-122f48) 0%, #1A233F 100%) 0% 0% no-repeat padding-box;;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
@ -55,7 +56,9 @@ export default {
|
||||
& .sidebar-logo {
|
||||
height: 80%;
|
||||
vertical-align: middle;
|
||||
margin-right: 12px;
|
||||
left: 13px;
|
||||
top: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
& .sidebar-title {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div :class="{'has-logo':showLogo}">
|
||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" class="scrollbar">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
@ -14,6 +14,7 @@
|
||||
>
|
||||
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
|
||||
</el-menu>
|
||||
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
@ -23,9 +24,10 @@ import { mapGetters } from 'vuex'
|
||||
import Logo from './Logo'
|
||||
import SidebarItem from './SidebarItem'
|
||||
import variables from '@/styles/variables.scss'
|
||||
import Hamburger from '@/components/Hamburger'
|
||||
|
||||
export default {
|
||||
components: { SidebarItem, Logo },
|
||||
components: { SidebarItem, Logo, Hamburger },
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'permission_routes',
|
||||
@ -49,6 +51,16 @@ export default {
|
||||
isCollapse() {
|
||||
return !this.sidebar.opened
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.scrollbar {
|
||||
margin-top: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,7 +20,10 @@
|
||||
<el-row :gutter="20" class="card-content">
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="Statements">
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="date" label="DATE" width="180" />
|
||||
<el-table-column prop="orderId" label="ORDER ID" width="180" />
|
||||
<el-table-column prop="amount" label="AMOUNT" />
|
||||
@ -157,8 +160,12 @@ export default {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: red!important;
|
||||
}
|
||||
|
||||
.el-table__header-wrapper {
|
||||
background: #778298!important;
|
||||
background: #778298 !important;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
@ -189,3 +196,10 @@ export default {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
// Override Element-UI inline style
|
||||
.el-tabs__content {
|
||||
height: 371px;
|
||||
border-radius: 0px 0px 6px 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -186,6 +186,9 @@ export default {
|
||||
border-color: #6e1c80;
|
||||
background: #6e1c80;
|
||||
font: normal normal 14px/16px SF Pro Display Bold;
|
||||
&:hover {
|
||||
background: #b72687;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
|
||||
@ -180,6 +180,9 @@ export default {
|
||||
border-color: #6e1c80;
|
||||
background: #6e1c80;
|
||||
font: normal normal 14px/16px SF Pro Display Bold;
|
||||
&:hover {
|
||||
background: #bc504a;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user