Skip to content

C
confucius
Commit 58b4e003 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 93eea71f
Hide whitespace changes
Inline Side-by-side
Showing with 231 additions and 224 deletions
src/layouts/MainLayout.vue
View file @ 58b4e003
<template>
<q-layout view="lHh Lpr lFf">
<q-layout view="lHh Lpr lFf">
<q-header bordered reveal height-hint="98">
<q-toolbar style="height:60px;" class="q-pr-lg q-pl-lg">
<q-avatar>
<img :src="logo">
</q-avatar>
<q-toolbar-title style="font-family:perfectFont">
{{name}}
</q-toolbar-title>
<q-tabs v-model="tab" @input="changeNavs" inline-label style="margin:0 auto; font-family:perfectFont;height:60px" class="text-white" shrink stretch v-if="userInfo">
<q-tab v-for="(x, i) in userInfo.MenuList" :key="i" @click="setNavs(i)" :name="`navs_${i}`" :label="x.MenuName" :icon="x.MenuIcon" />
</q-tabs>
<div class="q-pl-lg">
<q-btn-dropdown flat color="primary" size="xs">
<template v-slot:label>
<q-icon left name="iconfont icon-message" class="text-white" style="font-size:20px;">
<q-badge color="negative" floating>4</q-badge>
</q-icon>
</template>
<q-list bordered padding class="rounded-borders" style="max-width: 350px">
<q-item-label header>Folders</q-item-label>
<q-toolbar style="height:60px;" class="q-pr-lg q-pl-lg">
<q-avatar>
<img :src="logo">
</q-avatar>
<q-toolbar-title style="font-family:perfectFont">
{{name}}
</q-toolbar-title>
<q-tabs v-model="tab" @input="changeNavs" inline-label
style="margin:0 auto; font-family:perfectFont;height:60px" class="text-white" shrink stretch v-if="userInfo">
<q-tab v-for="(x, i) in userInfo.MenuList" :key="i" @click="setNavs(i)" :name="`navs_${i}`"
:label="x.MenuName" :icon="x.MenuIcon" />
</q-tabs>
<div class="q-pl-lg">
<q-btn-dropdown flat color="primary" size="xs">
<template v-slot:label>
<q-icon left name="iconfont icon-message" class="text-white" style="font-size:20px;">
<q-badge color="negative" floating>4</q-badge>
</q-icon>
</template>
<q-list bordered padding class="rounded-borders" style="max-width: 350px">
<q-item-label header>Folders</q-item-label>
<q-item clickable v-ripple>
<q-item-section avatar top>
<q-avatar icon="folder" color="primary" text-color="white" />
</q-item-section>
<q-item clickable v-ripple>
<q-item-section avatar top>
<q-avatar icon="folder" color="primary" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label lines="1">Photos</q-item-label>
<q-item-label caption>February 22nd, 2019</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label lines="1">Photos</q-item-label>
<q-item-label caption>February 22nd, 2019</q-item-label>
</q-item-section>
<q-item-section side>
<q-icon name="info" color="green" />
</q-item-section>
</q-item>
<q-item-section side>
<q-icon name="info" color="green" />
</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item-section avatar top>
<q-avatar icon="folder" color="orange" text-color="white" />
</q-item-section>
<q-item clickable v-ripple>
<q-item-section avatar top>
<q-avatar icon="folder" color="orange" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label lines="1">Movies</q-item-label>
<q-item-label caption>March 1st, 2019</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label lines="1">Movies</q-item-label>
<q-item-label caption>March 1st, 2019</q-item-label>
</q-item-section>
<q-item-section side>
<q-icon name="info" />
</q-item-section>
</q-item>
<q-item-section side>
<q-icon name="info" />
</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item-section avatar top>
<q-avatar icon="folder" color="teal" text-color="white" />
</q-item-section>
<q-item clickable v-ripple>
<q-item-section avatar top>
<q-avatar icon="folder" color="teal" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label lines="1">Photos</q-item-label>
<q-item-label caption>January 15th, 2019</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label lines="1">Photos</q-item-label>
<q-item-label caption>January 15th, 2019</q-item-label>
</q-item-section>
<q-item-section side>
<q-icon name="info" />
</q-item-section>
</q-item>
<q-item-section side>
<q-icon name="info" />
</q-item-section>
</q-item>
<q-separator spaced />
<q-item-label header>Files</q-item-label>
<q-separator spaced />
<q-item-label header>Files</q-item-label>
<q-item clickable v-ripple>
<q-item-section avatar top>
<q-avatar icon="assignment" color="grey" text-color="white" />
</q-item-section>
<q-item clickable v-ripple>
<q-item-section avatar top>
<q-avatar icon="assignment" color="grey" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label lines="1">Expenses spreadsheet</q-item-label>
<q-item-label caption>March 2nd, 2019</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label lines="1">Expenses spreadsheet</q-item-label>
<q-item-label caption>March 2nd, 2019</q-item-label>
</q-item-section>
<q-item-section side>
<q-icon name="info" />
</q-item-section>
</q-item>
<q-item-section side>
<q-icon name="info" />
</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item-section avatar top>
<q-avatar icon="place" color="grey" text-color="white" />
</q-item-section>
<q-item clickable v-ripple>
<q-item-section avatar top>
<q-avatar icon="place" color="grey" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label lines="1">Places to visit</q-item-label>
<q-item-label caption>February 22, 2019</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label lines="1">Places to visit</q-item-label>
<q-item-label caption>February 22, 2019</q-item-label>
</q-item-section>
<q-item-section side>
<q-icon name="info" color="amber" />
</q-item-section>
</q-item>
<q-item-section side>
<q-icon name="info" color="amber" />
</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item-section avatar top>
<q-avatar icon="library_music" color="grey" text-color="white" />
</q-item-section>
<q-item clickable v-ripple>
<q-item-section avatar top>
<q-avatar icon="library_music" color="grey" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label lines="1">My favorite song</q-item-label>
<q-item-label caption>Singing it all day</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label lines="1">My favorite song</q-item-label>
<q-item-label caption>Singing it all day</q-item-label>
</q-item-section>
<q-item-section side>
<q-icon name="info" />
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-btn-dropdown flat color="primary" size="xs" v-if="userInfo">
<template v-slot:label>
<q-avatar size="28px">
<img :src="userInfo.UserIcon">
</q-avatar>
</template>
<div class="row no-wrap q-pa-md">
<div class="column">
<div class="text-h6 q-mb-md">Settings</div>
<q-toggle label="Use Mobile Data" />
<q-toggle label="Bluetooth" />
</div>
<q-item-section side>
<q-icon name="info" />
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-btn-dropdown flat color="primary" size="xs" v-if="userInfo">
<template v-slot:label>
<q-avatar size="28px">
<img :src="userInfo.UserIcon">
</q-avatar>
</template>
<div class="row no-wrap q-pa-md">
<div class="column">
<div class="text-h6 q-mb-md">Settings</div>
<q-toggle label="Use Mobile Data" />
<q-toggle label="Bluetooth" />
</div>
<q-separator vertical inset class="q-mx-lg" />
<q-separator vertical inset class="q-mx-lg" />
<div class="column items-center">
<q-avatar size="72px">
<img :src="userInfo.UserIcon">
</q-avatar>
<div class="column items-center">
<q-avatar size="72px">
<img :src="userInfo.UserIcon">
</q-avatar>
<div class="text-subtitle1 q-mt-md q-mb-xs">{{userInfo.AccountName}}</div>
<div class="text-subtitle1 q-mt-md q-mb-xs">{{userInfo.AccountName}}</div>
<q-btn color="primary" label="登出系统" push size="sm" v-close-popup @click="logout" />
</div>
</div>
</q-btn-dropdown>
<q-btn color="primary" label="登出系统" push size="sm" v-close-popup @click="logout" />
</div>
</div>
</q-toolbar>
</q-btn-dropdown>
</div>
</q-toolbar>
</q-header>
<q-page-container class="window-height">
<div class="row items-stretch full-height">
<div style="width:180px;box-shadow: 2px 0 10px 0 rgba(237,238,240,0.50);font-family:perfectFont" class="text-subtitle2" v-if="secondNavs && secondNavs.length>0">
<q-list>
<template v-for="(x,i) in secondNavs">
<q-item :to="x.MenuUrl" clickable v-ripple :active="currentPath==x.MenuUrl" v-if="x.SubList.length==0" :key="i">
<q-item-section avatar>
<q-icon :name="x.MenuIcon" size="20px" />
</q-item-section>
<q-item-section>{{x.MenuName}}</q-item-section>
</q-item>
<q-expansion-item expand-separator icon="iconfont icon-jiangshi" label="讲师管理" v-else>
<q-item :to="y.MenuUrl" clickable v-ripple :active="currentPath==y.MenuUrl" v-for="(y, yi) in x.SubList" :key="yi">
<q-item-section avatar>
<q-icon :name="y.MenuIcon" size="20px" />
</q-item-section>
<q-item-section>{{y.MenuName}}</q-item-section>
</q-item>
</q-expansion-item>
</template>
</q-list>
</div>
<div class="col" style="background: #f2f4f7;">
<q-scroll-area class="fit" :thumb-style="thumbStyle" :bar-style="barStyle" visible style="">
<router-view style="margin:20px" />
</q-scroll-area>
</div>
<div class="row items-stretch full-height">
<div style="width:180px;box-shadow: 2px 0 10px 0 rgba(237,238,240,0.50);font-family:perfectFont"
class="text-subtitle2" v-if="secondNavs && secondNavs.length>0">
<q-list>
<template v-for="(x,i) in secondNavs">
<q-item :to="x.MenuUrl" clickable v-ripple :active="currentPath==x.MenuUrl" v-if="x.SubList.length==0"
:key="i">
<q-item-section avatar>
<q-icon :name="x.MenuIcon" size="20px" />
</q-item-section>
<q-item-section>{{x.MenuName}}</q-item-section>
</q-item>
<q-expansion-item expand-separator v-else :label="x.MenuName">
<q-item :to="y.MenuUrl" clickable v-ripple :active="currentPath==y.MenuUrl" v-for="(y, yi) in x.SubList"
:key="yi">
<q-item-section avatar>
<q-icon :name="y.MenuIcon" size="20px" />
</q-item-section>
<q-item-section>{{y.MenuName}}</q-item-section>
</q-item>
</q-expansion-item>
</template>
</q-list>
</div>
<div class="col" style="background: #f2f4f7;">
<q-scroll-area class="fit" :thumb-style="thumbStyle" :bar-style="barStyle" visible style="">
<router-view style="margin:20px" />
</q-scroll-area>
</div>
</div>
</q-page-container>
</q-layout>
</q-layout>
</template>
<script>
import EssentialLink from 'components/EssentialLink.vue'
import {
import EssentialLink from 'components/EssentialLink.vue'
import {
mapGetters
} from 'vuex'
import lockr from 'lockr'
export default {
} from 'vuex'
import lockr from 'lockr'
export default {
name: 'MainLayout',
components: {
EssentialLink
EssentialLink
},
data() {
return {
leftDrawerOpen: false,
//essentialLinks: linksData
tab: "navs_0",
currentPath: "",
secondNavs: [],
thumbStyle: {
right: '0px',
borderRadius: '0px',
backgroundColor: '#1d1d1d',
width: '6px',
opacity: 1
},
barStyle: {
right: '0px',
borderRadius: '0px',
backgroundColor: '#999',
width: '6px',
opacity: 0.5
}
return {
leftDrawerOpen: false,
//essentialLinks: linksData
tab: "navs_0",
currentPath: "",
secondNavs: [],
thumbStyle: {
right: '0px',
borderRadius: '0px',
backgroundColor: '#1d1d1d',
width: '6px',
opacity: 1
},
barStyle: {
right: '0px',
borderRadius: '0px',
backgroundColor: '#999',
width: '6px',
opacity: 0.5
}
}
},
watch: {
$route: {
handler: function (route) {
this.currentPath = route.path
},
immediate: true
$route: {
handler: function (route) {
this.currentPath = route.path
},
userInfo: {
handler: function (newVal) {
let i = this.tab.split('_')[1]
if (newVal && newVal.MenuList) {
this.secondNavs = newVal.MenuList.length > 0 ? newVal.MenuList[i].SubList : []
}
},
immediate: true
}
immediate: true
},
userInfo: {
handler: function (newVal) {
let i = this.tab.split('_')[1]
if (newVal && newVal.MenuList) {
this.secondNavs = newVal.MenuList.length > 0 ? newVal.MenuList[i].SubList : []
}
},
immediate: true
}
},
computed: {
...mapGetters([
'userInfo',
'logo',
'name'
]),
...mapGetters([
'userInfo',
'logo',
'name'
]),
},
mounted() {
let i = 0
if (sessionStorage.getItem("current_navs")) {
i = sessionStorage.getItem("current_navs")
}
this.tab = `navs_${i}`
if (this.userInfo && this.userInfo.MenuList) {
this.secondNavs = this.userInfo.MenuList.length > 0 ? this.userInfo.MenuList[i].SubList : []
}
let i = 0
if (sessionStorage.getItem("current_navs")) {
i = sessionStorage.getItem("current_navs")
}
this.tab = `navs_${i}`
if (this.userInfo && this.userInfo.MenuList) {
this.secondNavs = this.userInfo.MenuList.length > 0 ? this.userInfo.MenuList[i].SubList : []
}
},
methods: {
logout() {
this.$store
.dispatch('LogOut')
.then(() => {
this.$router.push('/login')
})
.catch(() => {})
},
changeNavs(val) {
let i = val.split('_')[1]
this.secondNavs = this.userInfo.MenuList[i].SubList
},
setNavs(val) {
//防止页面数据丢失
sessionStorage.setItem("current_navs", val)
this.tab = `navs_${val}`
this.secondNavs = this.userInfo.MenuList[val].SubList
this.$router.push({
path: this.userInfo.MenuList[val].MenuUrl
})
}
logout() {
this.$store
.dispatch('LogOut')
.then(() => {
this.$router.push('/login')
})
.catch(() => {})
},
changeNavs(val) {
let i = val.split('_')[1]
this.secondNavs = this.userInfo.MenuList[i].SubList
},
setNavs(val) {
//防止页面数据丢失
sessionStorage.setItem("current_navs", val)
this.tab = `navs_${val}`
this.secondNavs = this.userInfo.MenuList[val].SubList
this.$router.push({
path: this.userInfo.MenuList[val].MenuUrl
})
}
},
}
}
</script>
<style>
.full-width{
height: 100%;
}
.full-width {
height: 100%;
}
</style>
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