mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-31 09:12:10 +08:00
feat : update avue 1.3.0
This commit is contained in:
smallwei
parent
64cdbaf07b
commit
d8ff197cbc
@ -1,14 +1,18 @@
|
||||
<template>
|
||||
<div class="pull-height animated" :class="{'zoomOutUp': isLock}">
|
||||
<top></top>
|
||||
<div class="index">
|
||||
<sidebar class="left pull-chheight"></sidebar>
|
||||
<sidebar class="left"></sidebar>
|
||||
<div class="right">
|
||||
<tags ref="nav" class="nav"></tags>
|
||||
<div class="nav">
|
||||
<top class="top"></top>
|
||||
<tags></tags>
|
||||
</div>
|
||||
<div class="main">
|
||||
<keep-alive>
|
||||
<router-view v-if="!$route.meta.keepAlive" class="main pull-chheight"></router-view>
|
||||
<router-view v-if="$route.meta.keepAlive"></router-view>
|
||||
</keep-alive>
|
||||
<router-view v-if="$route.meta.keepAlive" class="main pull-chheight"></router-view>
|
||||
<router-view v-if="!$route.meta.keepAlive"></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -40,23 +44,21 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.index {
|
||||
display: flex;
|
||||
height: calc(100% - 60px);
|
||||
padding: 0 0 20px 0;
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
.left:not(.el-menu--collapse) {
|
||||
width: 200px;
|
||||
.left {
|
||||
width: 230px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.right {
|
||||
padding-top: 42px;
|
||||
padding-top: 107px;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.main {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.nav {
|
||||
@ -66,5 +68,8 @@ export default {
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
.top {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,16 +1,21 @@
|
||||
<template>
|
||||
<el-menu unique-opened :default-active="nowTagValue" class="el-menu-vertical-demo" background-color="#495060" text-color="#c9cbd0" active-text-color="#fff" :collapse="isCollapse">
|
||||
<sidebar-item :menu="menu" :show="!isCollapse"></sidebar-item>
|
||||
<div class="sidebar-container" :class="{'is-active':isCollapse}">
|
||||
<logo :isCollapse="isCollapse"></logo>
|
||||
<el-menu unique-opened :default-active="nowTagValue" class="el-menu-vertical-demo" mode="vertical" :show-timeout="200" background-color="#00142a" text-color="hsla(0,0%,100%,.65)" active-text-color="#409eff" :collapse="isCollapse">
|
||||
<sidebar-item :menu="menu" :isCollapse="isCollapse"></sidebar-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MENU from "@/mock/menu";
|
||||
import { mapGetters } from "vuex";
|
||||
import { setUrlPath } from "@/util/util";
|
||||
import { mapGetters } from "vuex";
|
||||
import SidebarItem from "./sidebarItem";
|
||||
|
||||
import logo from "./logo";
|
||||
export default {
|
||||
name: "sidebar",
|
||||
components: { SidebarItem, logo },
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
@ -24,8 +29,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
components: { SidebarItem }
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
73
src/page/index/sidebar/logo.vue
Normal file
73
src/page/index/sidebar/logo.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="logo">
|
||||
<transition name="fade">
|
||||
<span v-if="isCollapse" class="logo_title is-bold is-active" key="0">Pig</span>
|
||||
</transition>
|
||||
<transition-group name="fade">
|
||||
<template v-if="!isCollapse">
|
||||
<span class="logo_title is-bold" key="1">Pig </span>
|
||||
<span class="logo_subtitle" key="2">微服务快速开发框架</span>
|
||||
</template>
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "logo",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: ["isCollapse"],
|
||||
computed: {},
|
||||
created() {},
|
||||
computed: {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped="scoped" lang="scss">
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.fade-enter-active {
|
||||
transition: opacity 2.5s;
|
||||
}
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.logo {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 230px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
background: #002140;
|
||||
color: #fdfdfd;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.logo_title {
|
||||
padding: 0 5px 0 0;
|
||||
color: #409eff;
|
||||
font-size: 28px;
|
||||
&.is-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.is-active {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
}
|
||||
.logo_subtitle {
|
||||
font-size: 16px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
</style>
|
||||
@ -5,17 +5,17 @@
|
||||
<i :class="item.icon"></i>
|
||||
<span slot="title">{{item.label}}</span>
|
||||
</el-menu-item>
|
||||
<el-submenu v-else :index="filterPath(item.name,index)" :key="item.name">
|
||||
<el-submenu v-else :index="filterPath(item.label,index)" :key="item.label">
|
||||
<template slot="title">
|
||||
<i :class="item.icon"></i>
|
||||
<span slot="title" :class="{'el-menu--display':!show}">{{item.label}}</span>
|
||||
<span slot="title" :class="{'el-menu--display':isCollapse}">{{item.label}}</span>
|
||||
</template>
|
||||
<template v-for="(child,cindex) in item.children">
|
||||
<el-menu-item :index="filterPath(child.path,cindex)" @click="open(child)" v-if="child.children.length==0" :key="cindex">
|
||||
<i :class="child.icon"></i>
|
||||
<span slot="title">{{child.label}}</span>
|
||||
</el-menu-item>
|
||||
<sidebar-item v-else :menu="[child]" :show="show" :key="cindex"></sidebar-item>
|
||||
<sidebar-item v-else :menu="[child]" :key="cindex" :isCollapse="isCollapse"></sidebar-item>
|
||||
</template>
|
||||
</el-submenu>
|
||||
</template>
|
||||
@ -32,19 +32,20 @@ export default {
|
||||
menu: {
|
||||
type: Array
|
||||
},
|
||||
show: {
|
||||
isCollapse: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
computed: {},
|
||||
methods: {
|
||||
filterPath(path, index) {
|
||||
return path == null ? index + "" : path;
|
||||
},
|
||||
open(item) {
|
||||
this.$router.push({
|
||||
path: resolveUrlPath(item.path, item.name),
|
||||
path: resolveUrlPath(item.path, item.label),
|
||||
query: item.query
|
||||
});
|
||||
}
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
<!-- tag盒子 -->
|
||||
<div class="tags-box" ref="tagBox">
|
||||
<div class="tags-list" ref="tagsList" @mousewheel="hadelMousewheel" @mouseup="hadelMouseUp" @mousemove="hadelMouse" @mousedown="hadelMousestart" @touchup="hadelMouseUp" @touchmove="hadelMouse" @touchstart="hadelMousestart">
|
||||
<div ref="tagsPageOpened" class="tag-item" :name="item.value" @contextmenu.prevent="openMenu(item,$event)" v-for="(item,index) in tagList" :key="index" @click="openUrl(item)">
|
||||
<span class="icon-yuan tag-item-icon" :class="{'is-active':nowTagValue==item.value}"></span>
|
||||
<div ref="tagsPageOpened" class="tag-item" :class="{'is-active':nowTagValue==item.value}" :name="item.value" @contextmenu.prevent="openMenu(item,$event)" v-for="(item,index) in tagList" :key="index" @click="openUrl(item)">
|
||||
<span class="icon-yuan tag-item-icon"></span>
|
||||
<span class="tag-text">{{item.label}}</span>
|
||||
<i class="el-icon-close tag-close" @click.stop="closeTag(item)" v-if="item.close"></i>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div class="top">
|
||||
<div class="top-button is-left">
|
||||
<top-logo></top-logo>
|
||||
<div class="tags-breadcrumb">
|
||||
<i class="icon-navicon tag-collapse" :class="[{ 'tag-collapse_right': isCollapse }]" @click="showCollapse"></i>
|
||||
</div>
|
||||
@ -10,7 +9,7 @@
|
||||
<topMenu></topMenu>
|
||||
</h1>
|
||||
<div class="top-button is-right">
|
||||
<el-tooltip class="item" effect="dark" content="换肤" placement="bottom">
|
||||
<el-tooltip class="item" effect="dark" content="主题色" placement="bottom">
|
||||
<span class="top-item">
|
||||
<top-theme></top-theme>
|
||||
</span>
|
||||
@ -25,6 +24,9 @@
|
||||
<i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'" @click="handleScreen"></i>
|
||||
</span>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="用户头像" placement="bottom">
|
||||
<img class="top-userImg" :src="userInfo.avatar">
|
||||
</el-tooltip>
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
{{userInfo.username}}
|
||||
@ -46,21 +48,17 @@
|
||||
<el-dropdown-item @click.native="logout" divided>退出系统</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-tooltip class="item" effect="dark" content="用户头像" placement="bottom">
|
||||
<img class="top-userImg" :src="userInfo.avatar">
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapGetters } from "vuex";
|
||||
import { fullscreenToggel, listenfullscreen } from "@/util/util";
|
||||
import topLogo from "./top-logo";
|
||||
import topLock from "./top-lock";
|
||||
import topMenu from "./top-menu";
|
||||
import topTheme from "./top-theme";
|
||||
export default {
|
||||
components: { topLock, topLogo, topMenu, topTheme },
|
||||
components: { topLock, topMenu, topTheme },
|
||||
name: "top",
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<div class="pull-auto">
|
||||
<div class="logo">
|
||||
<span class="logo_title is-bold">Pig </span>
|
||||
<span class="logo_subtitle"> 微服务快速开发框架</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "top-logo",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
computed: {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped="scoped" lang="scss">
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.logo_title {
|
||||
padding: 0 8px 0 0;
|
||||
color: #409eff;
|
||||
line-height: 60px;
|
||||
font-size: 28px;
|
||||
font-style: italic;
|
||||
&.is-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.logo_subtitle {
|
||||
padding-top: 5px;
|
||||
}
|
||||
</style>
|
||||
@ -16,9 +16,9 @@ export default {
|
||||
watch: {
|
||||
theme(val, oldVal) {
|
||||
if (typeof val !== "string") return;
|
||||
const head = document.getElementsByTagName("head")[0];
|
||||
const themeCluster = this.getThemeCluster(val.replace("#", ""));
|
||||
const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
|
||||
console.log(themeCluster, originalCluster);
|
||||
const getHandler = (variable, id) => {
|
||||
return () => {
|
||||
const originalCluster = this.getThemeCluster(
|
||||
@ -34,7 +34,7 @@ export default {
|
||||
if (!styleTag) {
|
||||
styleTag = document.createElement("style");
|
||||
styleTag.setAttribute("id", id);
|
||||
document.head.appendChild(styleTag);
|
||||
head.appendChild(styleTag);
|
||||
}
|
||||
styleTag.innerText = newStyle;
|
||||
};
|
||||
@ -49,6 +49,30 @@ export default {
|
||||
chalkHandler();
|
||||
}
|
||||
|
||||
const link = [].slice.call(
|
||||
document.getElementsByTagName("head")[0].getElementsByTagName("link")
|
||||
);
|
||||
for (let i = link.length - 3; i < link.length; i++) {
|
||||
const style = link[i];
|
||||
this.getCSSString(style.href, innerText => {
|
||||
const originalCluster = this.getThemeCluster(
|
||||
ORIGINAL_THEME.replace("#", "")
|
||||
);
|
||||
const newStyle = this.updateStyle(
|
||||
innerText,
|
||||
originalCluster,
|
||||
themeCluster
|
||||
);
|
||||
let styleTag = document.getElementById(i);
|
||||
if (!styleTag) {
|
||||
styleTag = document.createElement("style");
|
||||
styleTag.id = i;
|
||||
styleTag.innerText = newStyle;
|
||||
head.appendChild(styleTag);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const styles = [].slice
|
||||
.call(document.querySelectorAll("style"))
|
||||
.filter(style => {
|
||||
@ -86,8 +110,10 @@ export default {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||||
if (variable) {
|
||||
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, "");
|
||||
callback();
|
||||
}
|
||||
callback(xhr.responseText);
|
||||
}
|
||||
};
|
||||
xhr.open("GET", url);
|
||||
|
||||
@ -15,9 +15,22 @@
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}*/
|
||||
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@include scrollBar();
|
||||
body,
|
||||
div,
|
||||
@ -46,9 +59,8 @@ td {
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 1200px;
|
||||
color: #333;
|
||||
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei";
|
||||
min-width: 1300px;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei";
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
@ -67,7 +79,6 @@ ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
@ -82,11 +93,13 @@ textarea {
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
//禁用了文本的拖拉，尤其在谷歌下
|
||||
p {
|
||||
text-align: justify;
|
||||
text-justify: distribute;
|
||||
}
|
||||
|
||||
//为了使文本段落左右两边对齐
|
||||
p {
|
||||
word-wrap: break-word
|
||||
@ -100,8 +113,6 @@ i {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*a:hover { color: #f60; text-decoration:none; }*/
|
||||
|
||||
address,
|
||||
@ -119,10 +130,8 @@ a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
/*a:link{color:#009;}*/
|
||||
|
||||
|
||||
/*a:visited{color:#800080;}*/
|
||||
|
||||
a:hover,
|
||||
@ -135,53 +144,60 @@ table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
.hidden{
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.padding{
|
||||
|
||||
.padding {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.margin{
|
||||
.margin {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right!important;;
|
||||
float: right !important;
|
||||
;
|
||||
}
|
||||
|
||||
.pull-left {
|
||||
float: left!important;
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.pull-center {
|
||||
text-align: center;
|
||||
}
|
||||
.pull-flex{
|
||||
|
||||
.pull-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pull-overflow{
|
||||
.pull-overflow {
|
||||
overflow: hidden;
|
||||
}
|
||||
.pull-auto{
|
||||
|
||||
.pull-auto {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pull-height{
|
||||
|
||||
.pull-height {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pull-chheight{
|
||||
height: calc( 100% - 60px );
|
||||
}
|
||||
.pull-fixed{
|
||||
|
||||
.pull-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.text-white{
|
||||
.text-white {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
&:after {
|
||||
visibility: hidden;
|
||||
@ -191,23 +207,21 @@ table {
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//main-container全局样式
|
||||
.app-main{
|
||||
} //main-container全局样式
|
||||
.app-main {
|
||||
min-height: 100%
|
||||
}
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
.filter-container {
|
||||
padding-bottom: 10px;
|
||||
.filter-item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-container {
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
|
||||
.el-dropdown-menu__item{
|
||||
.el-dropdown-menu__item {
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.el-loading-text{
|
||||
text-align: center;
|
||||
|
||||
.el-menu--horizontal {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.el-menu--display,
|
||||
.el-menu--display + .el-submenu__icon-arrow {
|
||||
display: none;
|
||||
.el-menu--display+.el-submenu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
@ -1,73 +1,19 @@
|
||||
.sidebar-container {
|
||||
background: #00142a;
|
||||
transition: width .6s;
|
||||
&.is-active {
|
||||
width: 64px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hideSidebar {
|
||||
.sidebar-container,.sidebar-container .el-menu {
|
||||
width: 36px!important;
|
||||
// overflow: inherit;
|
||||
}
|
||||
.main-container {
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
.hideSidebar {
|
||||
.submenu-title-noDropdown {
|
||||
padding-left: 10px!important;
|
||||
position: relative;
|
||||
span {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
|
||||
opacity: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
&:hover {
|
||||
span {
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
z-index: 1002;
|
||||
width: 140px;
|
||||
height: 56px;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
right: -145px;
|
||||
text-align: left;
|
||||
text-indent: 20px;
|
||||
top: 0px;
|
||||
background-color: $subMenuBg!important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-submenu {
|
||||
&>.el-submenu__title {
|
||||
padding-left: 10px!important;
|
||||
&>span {
|
||||
display: none;
|
||||
}
|
||||
.el-submenu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.nest-menu {
|
||||
.el-submenu__icon-arrow {
|
||||
display: block!important;
|
||||
}
|
||||
span {
|
||||
display: inline-block!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nest-menu .el-submenu>.el-submenu__title,
|
||||
.el-submenu .el-menu-item {
|
||||
min-width: 180px!important;
|
||||
background-color: $subMenuBg!important;
|
||||
&:hover {
|
||||
background-color: $menuHover!important;
|
||||
}
|
||||
}
|
||||
.el-menu--collapse .el-menu .el-submenu{
|
||||
min-width: 180px!important;
|
||||
}
|
||||
.el-menu-item.is-active {
|
||||
color: $mainBg !important;
|
||||
}
|
||||
|
||||
.nest-menu .el-submenu>.el-submenu__title,
|
||||
.el-submenu .el-menu-item {
|
||||
background-color: #021d3a !important;
|
||||
&:hover {
|
||||
background: #00142a !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,46 +1,46 @@
|
||||
|
||||
.tags-breadcrumb{
|
||||
.tags-breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
height: 50px;
|
||||
}
|
||||
.tags-breadcrumb-list{
|
||||
|
||||
.tags-breadcrumb-list {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.tag-collapse{
|
||||
|
||||
.tag-collapse {
|
||||
font-size: 36px !important;
|
||||
}
|
||||
|
||||
.tag-collapse.tag-collapse_right {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.tags-container {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
.tags-box{
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
||||
.tags-box {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding-right: 106px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #f0f0f0;
|
||||
|
||||
background: #fff;
|
||||
}
|
||||
.tags-list{
|
||||
.tags-list {
|
||||
position: absolute;
|
||||
padding: 2px 10px;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
transition: left .3s ease;
|
||||
}
|
||||
.tag-item-icon{
|
||||
.tag-item-icon {
|
||||
color: #eee;
|
||||
font-size: 11px !important;
|
||||
}
|
||||
.tag-item-icon.is-active{
|
||||
color: $mainBg;
|
||||
}
|
||||
.tag-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -48,28 +48,34 @@
|
||||
line-height: 30px;
|
||||
margin: 2px 4px 2px 0;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #e9eaec;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
color: #495060!important;
|
||||
color: #495060 !important;
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&.is-active {
|
||||
.tag-item-icon {
|
||||
color: $mainBg;
|
||||
}
|
||||
.tag-text{
|
||||
border-color : $mainBg;
|
||||
}
|
||||
}
|
||||
.tag-text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.tag-close{
|
||||
.tag-close {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.tag-item:hover {
|
||||
opacity: .85;
|
||||
}
|
||||
.tags-menu{
|
||||
.tags-menu {
|
||||
position: absolute;
|
||||
top:0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -80,11 +86,11 @@
|
||||
box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.contextmenu {
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
list-style-type: none;
|
||||
padding: 5px 0;
|
||||
border-radius: 4px;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
.top {
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-bottom:2px solid $menuBg;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
color: rgba(0, 0, 0, .65);
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
height: 60px;
|
||||
height: 64px;
|
||||
line-height: 1;
|
||||
padding: 0 10px;
|
||||
white-space: nowrap;
|
||||
@ -20,19 +20,21 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.top-userImg{
|
||||
margin: 0 3px 0 10px;
|
||||
.top-userImg {
|
||||
margin: 0 8px 0 10px;
|
||||
padding: 2px;
|
||||
width: 35px;
|
||||
height:35px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
border:1px solid #eee;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.top-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.top-button>.top-item{
|
||||
margin-right: 12px;
|
||||
|
||||
.top-item {
|
||||
margin-right: 8px;
|
||||
}
|
||||
@ -1,11 +1,2 @@
|
||||
//sidebar
|
||||
$menuBg:#495060;
|
||||
$subMenuBg:#1f2d3d;
|
||||
$menuHover:#001528;
|
||||
|
||||
|
||||
//main
|
||||
$mainBg: #4e97d9;
|
||||
$mainColor: #fff;
|
||||
$mainDisBg: #d3d4d6;
|
||||
$mainDisColor: #eee;
|
||||
$mainBg: #409eff;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user