suzhou-jichuang-lanhai
/
TcAssetVerificationPc
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui设计框架

Browse Source
lijinlong
吕天方 8 months ago
parent 1a6bd8a582
commit 88113a803e
4 changed files with 107 additions and 199 deletions
Show Stats Download Patch File Download Diff File

10
src/assets/styles/sidebar.scss
Unescape View File

@ -1,12 +1,12 @@
#app { #app {
.main-container { .main-container {
// height: 100%; height: 100%;
// height: calc(100% - 50px); // height: calc(100% - 50px);
// transition: margin-left .28s; // transition: margin-left .28s;
// margin-left: $base-sidebar-width; // margin-left: $base-sidebar-width;
// position: relative; // position: relative;
height: calc(100% - 50px); // height: calc(100% - 50px);
transition: margin-left .28s; transition: margin-left .28s;
margin-left: 260px; margin-left: 260px;
position: relative; position: relative;
@ -21,11 +21,11 @@
transition: width 0.28s; transition: width 0.28s;
width: $base-sidebar-width !important; width: $base-sidebar-width !important;
background-color: $base-menu-background; background-color: $base-menu-background;
// height: 100%; height: 100%;
height: calc(100% - 50px); // height: calc(100% - 50px);
position: fixed; position: fixed;
font-size: 0px; font-size: 0px;
top: 50px; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1001; z-index: 1001;

2
src/layout/components/AppMain.vue
Unescape View File

@ -30,7 +30,7 @@ export default {
.app-main { .app-main {
/* 50= navbar 50 */ /* 50= navbar 50 */
border-radius: 5px; border-radius: 5px;
height: calc(100vh - 100px); height: calc(100vh - 60px);
width: calc(100% - 20px); width: calc(100% - 20px);
position: relative; position: relative;
// overflow: scroll; // overflow: scroll;

196
src/layout/components/TagsView/index.vue
Unescape View File

@ -17,25 +17,36 @@
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" /> <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
</router-link> </router-link>
</scroll-pane> --> </scroll-pane> -->
<div class="tagsView-box">
<img src="@/assets/images/position.png" alt="" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
</div>
<img src="@/assets/images/position.png" alt="" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
<!-- <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu"> <header class="app-header">
<li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> 刷新页面</li> <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><i class="el-icon-close"></i> 关闭当前</li> <div class="avatar-wrapper">
<li @click="closeOthersTags"><i class="el-icon-circle-close"></i> 关闭其他</li> <img :src="avatar" class="user-avatar">
<li v-if="!isFirstView()" @click="closeLeftTags"><i class="el-icon-back"></i> 关闭左侧</li> <span class="user-name">{{ name }}</span>
<li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> 关闭右侧</li> <i class="el-icon-caret-bottom" />
<li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> 全部关闭</li> </div>
</ul> --> <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>
</header>
</div> </div>
</template> </template>
<script> <script>
import ScrollPane from './ScrollPane' import ScrollPane from './ScrollPane'
import Breadcrumb from '@/components/Breadcrumb' import Breadcrumb from '@/components/Breadcrumb'
import { mapGetters } from 'vuex'
import path from 'path' import path from 'path'
export default { export default {
@ -60,6 +71,10 @@ export default {
// theme() { // theme() {
// return this.$store.state.settings.theme; // return this.$store.state.settings.theme;
// } // }
...mapGetters([
'avatar',
'name'
]),
}, },
watch: { watch: {
// $route() { // $route() {
@ -79,6 +94,17 @@ export default {
// this.addTags() // this.addTags()
}, },
methods: { methods: {
async logout() {
this.$confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$store.dispatch('LogOut').then(() => {
location.href = '/index';
})
}).catch(() => {});
},
isActive(route) { isActive(route) {
return route.path === this.$route.path return route.path === this.$route.path
}, },
@ -249,107 +275,87 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.tags-view-container { .tags-view-container {
height: 34px; height: 50px;
width: 100%; width: 100%;
// background: #fff; // background: #fff;
display: flex;
align-items: center;
// border-bottom: 1px solid #d8dce5; // 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); // box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
display: flex;
align-items: center;
justify-content: space-between;
.tagsView-box {
height: 100%;
display: flex;
align-items: center;
}
img { img {
width: 14px; width: 14px;
margin-right: 10px; margin-right: 10px;
} }
// .tags-view-wrapper { .app-header {
.tags-view-item { height: 100%;
padding: 0px 20px;
box-sizing: border-box;
display: flex;
align-items: center;
.right-box {
display: flex;
align-items: center;
}
.right-menu-item {
display: inline-block; display: inline-block;
position: relative; padding: 0 8px;
cursor: pointer; height: 100%;
height: 26px; font-size: 18px;
line-height: 26px; color: #5a5e66;
// border: 1px solid #d8dce5; vertical-align: text-bottom;
// color: #495060;
// background: #fff; &.hover-effect {
// padding: 0 8px; cursor: pointer;
font-size: 14px; transition: background .3s;
font-weight: 400;
color: #292F38; &:hover {
// margin-left: 5px; background: rgba(0, 0, 0, .025)
margin-top: 4px;
// &:first-of-type {
// margin-left: 15px;
// }
// &:last-of-type {
// margin-right: 15px;
// }
span {
margin: 0 2px;
}
&.active {
background-color: #42b983;
color: #fff;
border-color: #42b983;
&::before {
content: '';
background: #fff;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
position: relative;
margin-right: 2px;
} }
} }
} }
// }
.contextmenu {
margin: 0;
background: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
&:hover {
background: #eee;
}
}
}
}
</style>
<style lang="scss"> .avatar-container {
//reset element css of el-icon-close margin-right: 30px;
.tags-view-wrapper {
.tags-view-item { .avatar-wrapper {
.el-icon-close { position: relative;
width: 16px; display: flex;
height: 16px; align-items: center;
vertical-align: 2px;
border-radius: 50%; .user-name {
text-align: center; line-height: 50px;
transition: all .3s cubic-bezier(.645, .045, .355, 1); font-weight: 400;
transform-origin: 100% 50%; font-size: 14px;
&:before { color: #192733;
transform: scale(.6); }
display: inline-block;
vertical-align: -3px; .user-avatar {
} cursor: pointer;
&:hover { width: 30px;
background-color: #b4bccc; height: 30px;
color: #fff; border-radius: 50%;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
top: 20px;
font-size: 12px;
}
} }
} }
} }
} }
</style> </style>

98
src/layout/index.vue
Unescape View File

@ -1,27 +1,6 @@
<template> <template>
<!-- :class="classObj" --> <!-- :class="classObj" -->
<div class="app-wrapper" :style="{'--current-color': theme}"> <div class="app-wrapper" :style="{'--current-color': theme}">
<header class="app-header">
<div class="header-title"><span>太仓资产核查管理系统</span></div>
<div class="right-box">
<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>
<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>
</header>
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<sidebar v-if="!sidebar.hide" class="sidebar-container"/> <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container"> <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
@ -107,83 +86,6 @@ export default {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
.app-header {
background-color: #304156;
background-color: #3f3f3f;
height: 50px;
padding: 0px 20px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
.header-title {
display: flex;
align-items: center;
height: 50px;
line-height: 50px;
color: #fff;
img {
width: 20px;
height: 20px;
margin-right: 10px;
}
}
.right-box {
display: flex;
align-items: center;
}
.right-menu {
margin-left: 40px;
float: right;
&:focus {
outline: none;
}
.right-menu-item {
display: inline-block;
padding: 0 8px;
height: 100%;
font-size: 18px;
color: #5a5e66;
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background .3s;
&:hover {
background: rgba(0, 0, 0, .025)
}
}
}
.avatar-container {
margin-right: 30px;
.avatar-wrapper {
margin-top: 5px;
position: relative;
.user-avatar {
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 50%;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
top: 10px;
font-size: 12px;
}
}
}
}
}
&.mobile.openSidebar { &.mobile.openSidebar {
position: fixed; position: fixed;
top: 0; top: 0;

Write Preview
Loading…
Cancel
Save