Merge branch 'dev' of http://39.101.188.84:8000/suzhou-jichuang-lanhai/volunteer-pc into Lvtianfang
commit
3502bc547f
|
After Width: | Height: | Size: 229 KiB |
|
After Width: | Height: | Size: 112 KiB |
@ -0,0 +1,8 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "Alibaba-PuHuiTi-Bold";
|
||||||
|
src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Bold.otf");
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Alibaba-PuHuiTi-Regular";
|
||||||
|
src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Regular.otf");
|
||||||
|
}
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
<template>
|
||||||
|
<div class="header-container">
|
||||||
|
<div class="system-log">苏州园区志愿服务活动区块链平台</div>
|
||||||
|
<div class="right-menu">
|
||||||
|
<el-dropdown
|
||||||
|
class="avatar-container right-menu-item hover-effect"
|
||||||
|
trigger="click"
|
||||||
|
>
|
||||||
|
<div class="avatar-wrapper">
|
||||||
|
<img :src="avatar" class="user-avatar" />
|
||||||
|
<!-- <i class="el-icon-caret-bottom" /> -->
|
||||||
|
<div class="user-name">{{ name }}</div>
|
||||||
|
</div>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<router-link to="/user/profile">
|
||||||
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
<el-dropdown-item divided @click.native="logout">
|
||||||
|
<span>退出登录</span>
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapGetters } from "vuex";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(["avatar", "name"]),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// @import "@/assets/styles/element-variables.scss";
|
||||||
|
.header-container {
|
||||||
|
height: 60px;
|
||||||
|
background: url("~@/assets/images/title-bg@2x.png");
|
||||||
|
background-size: cover;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
.system-log {
|
||||||
|
font-size: 23px;
|
||||||
|
font-family: "Alibaba-PuHuiTi-Bold";
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 60px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
.avatar-container {
|
||||||
|
.avatar-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
.user-avatar {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.user-name {
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: "Alibaba-PuHuiTi-Regular";
|
||||||
|
}
|
||||||
|
.el-icon-caret-bottom {
|
||||||
|
position: absolute;
|
||||||
|
right: -15px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-size: 12px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,112 +1,164 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div class="my-container">
|
||||||
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
|
<MyHead />
|
||||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
<div class="app-main">
|
||||||
<sidebar v-if="!sidebar.hide" class="sidebar-container"/>
|
<div class="left-sidebar">
|
||||||
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
|
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
|
||||||
<div :class="{'fixed-header':fixedHeader}">
|
</div>
|
||||||
<!-- <navbar/> -->
|
<div class="right-page">
|
||||||
<!-- <tags-view v-if="needTagsView"/> -->
|
<app-main />
|
||||||
</div>
|
</div>
|
||||||
<app-main/>
|
|
||||||
<right-panel>
|
|
||||||
<settings/>
|
|
||||||
</right-panel>
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <div
|
||||||
|
:class="classObj"
|
||||||
|
class="app-wrapper"
|
||||||
|
:style="{ '--current-color': theme }"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="device === 'mobile' && sidebar.opened"
|
||||||
|
class="drawer-bg"
|
||||||
|
@click="handleClickOutside"
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
<app-main />
|
||||||
|
<right-panel>
|
||||||
|
<settings />
|
||||||
|
</right-panel>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import RightPanel from '@/components/RightPanel'
|
import RightPanel from "@/components/RightPanel";
|
||||||
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
import {
|
||||||
import ResizeMixin from './mixin/ResizeHandler'
|
AppMain,
|
||||||
import { mapState } from 'vuex'
|
Navbar,
|
||||||
import variables from '@/assets/styles/variables.scss'
|
Settings,
|
||||||
|
Sidebar,
|
||||||
|
TagsView,
|
||||||
|
MyHead,
|
||||||
|
} from "./components";
|
||||||
|
import ResizeMixin from "./mixin/ResizeHandler";
|
||||||
|
import { mapState } from "vuex";
|
||||||
|
import variables from "@/assets/styles/variables.scss";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Layout',
|
name: "Layout",
|
||||||
components: {
|
components: {
|
||||||
AppMain,
|
AppMain,
|
||||||
Navbar,
|
Navbar,
|
||||||
RightPanel,
|
RightPanel,
|
||||||
Settings,
|
Settings,
|
||||||
Sidebar,
|
Sidebar,
|
||||||
TagsView
|
TagsView,
|
||||||
|
MyHead,
|
||||||
},
|
},
|
||||||
mixins: [ResizeMixin],
|
mixins: [ResizeMixin],
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
theme: state => state.settings.theme,
|
theme: (state) => state.settings.theme,
|
||||||
sideTheme: state => state.settings.sideTheme,
|
sideTheme: (state) => state.settings.sideTheme,
|
||||||
sidebar: state => state.app.sidebar,
|
sidebar: (state) => state.app.sidebar,
|
||||||
device: state => state.app.device,
|
device: (state) => state.app.device,
|
||||||
needTagsView: state => state.settings.tagsView,
|
needTagsView: (state) => state.settings.tagsView,
|
||||||
fixedHeader: state => state.settings.fixedHeader
|
fixedHeader: (state) => state.settings.fixedHeader,
|
||||||
}),
|
}),
|
||||||
classObj() {
|
classObj() {
|
||||||
return {
|
return {
|
||||||
hideSidebar: !this.sidebar.opened,
|
hideSidebar: !this.sidebar.opened,
|
||||||
openSidebar: this.sidebar.opened,
|
openSidebar: this.sidebar.opened,
|
||||||
withoutAnimation: this.sidebar.withoutAnimation,
|
withoutAnimation: this.sidebar.withoutAnimation,
|
||||||
mobile: this.device === 'mobile'
|
mobile: this.device === "mobile",
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
variables() {
|
variables() {
|
||||||
return variables;
|
return variables;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleClickOutside() {
|
handleClickOutside() {
|
||||||
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "~@/assets/styles/mixin.scss";
|
@import "~@/assets/styles/mixin.scss";
|
||||||
@import "~@/assets/styles/variables.scss";
|
@import "~@/assets/styles/variables.scss";
|
||||||
|
|
||||||
.app-wrapper {
|
.my-container {
|
||||||
@include clearfix;
|
height: 100%;
|
||||||
position: relative;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&.mobile.openSidebar {
|
.app-main {
|
||||||
position: fixed;
|
height: calc(100% - 60px);
|
||||||
top: 0;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.left-sidebar {
|
||||||
|
height: 100%;
|
||||||
|
background: url("~@/assets/images/sidebar.png");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.right-page {
|
||||||
|
background: #f5f5f5;
|
||||||
|
padding: 13px;
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.drawer-bg {
|
.app-wrapper {
|
||||||
background: #000;
|
@include clearfix;
|
||||||
opacity: 0.3;
|
position: relative;
|
||||||
width: 100%;
|
height: 100%;
|
||||||
top: 0;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fixed-header {
|
&.mobile.openSidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
|
||||||
z-index: 9;
|
|
||||||
width: calc(100% - #{$base-sidebar-width});
|
|
||||||
transition: width 0.28s;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.hideSidebar .fixed-header {
|
.drawer-bg {
|
||||||
width: calc(100% - 54px);
|
background: #000;
|
||||||
}
|
opacity: 0.3;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebarHide .fixed-header {
|
.fixed-header {
|
||||||
width: 100%;
|
position: fixed;
|
||||||
}
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 9;
|
||||||
|
width: calc(100% - #{$base-sidebar-width});
|
||||||
|
transition: width 0.28s;
|
||||||
|
}
|
||||||
|
|
||||||
.mobile .fixed-header {
|
.hideSidebar .fixed-header {
|
||||||
width: 100%;
|
width: calc(100% - 54px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebarHide .fixed-header {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile .fixed-header {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in new issue