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