-
-
+
+
{{item.label}}
diff --git a/src/page/index/top/index.vue b/src/page/index/top/index.vue
index ed2c744f..761e95b7 100644
--- a/src/page/index/top/index.vue
+++ b/src/page/index/top/index.vue
@@ -1,7 +1,6 @@
-
-
-
\ No newline at end of file
diff --git a/src/page/index/top/top-theme.vue b/src/page/index/top/top-theme.vue
index a2443876..285839ae 100644
--- a/src/page/index/top/top-theme.vue
+++ b/src/page/index/top/top-theme.vue
@@ -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) {
- this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, "");
- callback();
+ if (variable) {
+ this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, "");
+ }
+ callback(xhr.responseText);
}
};
xhr.open("GET", url);
@@ -151,4 +177,4 @@ export default {
.theme-picker-dropdown .el-color-dropdown__link-btn {
display: none;
}
-
\ No newline at end of file
+
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 9cda88be..5e7191e7 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -15,9 +15,22 @@
user-select: none;
outline: none;
}*/
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
- font-weight: 500;
+
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-weight: 500;
}
+
@include scrollBar();
body,
div,
@@ -41,67 +54,65 @@ p,
blockquote,
th,
td {
- margin: 0;
- padding: 0;
+ margin: 0;
+ padding: 0;
}
body {
- min-width: 1200px;
- color: #333;
- font-family: "Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei";
- line-height: 2;
+ min-width: 1300px;
+ font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei";
+ line-height: 2;
}
html,
body {
- height: 100%;
+ height: 100%;
}
fieldset,
img {
- border: 0;
+ border: 0;
}
ol,
ul {
- list-style: none;
+ list-style: none;
}
-
em {
- font-style: normal;
+ font-style: normal;
}
input,
button,
select,
textarea {
- outline: none;
+ outline: none;
}
textarea {
- resize: none;
+ resize: none;
}
+
//禁用了文本的拖拉，尤其在谷歌下
p {
- text-align: justify;
- text-justify: distribute;
+ text-align: justify;
+ text-justify: distribute;
}
+
//为了使文本段落左右两边对齐
p {
- word-wrap: break-word
+ word-wrap: break-word
}
a {
- text-decoration: none;
+ text-decoration: none;
}
i {
- display: inline-block;
+ display: inline-block;
}
-
-
/*a:hover { color: #f60; text-decoration:none; }*/
address,
@@ -109,105 +120,108 @@ cite,
code,
em,
th {
- font-weight: normal;
- font-style: normal;
+ font-weight: normal;
+ font-style: normal;
}
a {
- color: inherit;
- text-decoration: none;
- display: inline-block;
+ color: inherit;
+ text-decoration: none;
+ display: inline-block;
}
-
/*a:link{color:#009;}*/
-
/*a:visited{color:#800080;}*/
a:hover,
a:active,
a:focus {
- text-decoration: underline;
+ text-decoration: underline;
}
table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-.hidden{
- display: none;
-}
-.padding{
- padding: 0 !important;
+ border-collapse: collapse;
+ border-spacing: 0;
}
-.margin{
- margin: 0 !important;
+.hidden {
+ display: none;
+}
+
+.padding {
+ padding: 0 !important;
+}
+
+.margin {
+ margin: 0 !important;
}
.pull-right {
- float: right!important;;
+ float: right !important;
+ ;
}
.pull-left {
- float: left!important;
-}
-.pull-center {
- text-align: center;
-}
-.pull-flex{
- display: flex;
+ float: left !important;
}
-.pull-overflow{
- overflow: hidden;
+.pull-center {
+ text-align: center;
}
-.pull-auto{
- height: auto;
- overflow: hidden;
+
+.pull-flex {
+ display: flex;
}
-.pull-height{
- height: 100%;
+
+.pull-overflow {
+ overflow: hidden;
}
-.pull-chheight{
- height: calc( 100% - 60px );
+
+.pull-auto {
+ height: auto;
+ overflow: hidden;
}
-.pull-fixed{
+
+.pull-height {
+ height: 100%;
+ overflow: hidden;
+}
+
+.pull-fixed {
position: fixed;
left: 0;
top: 0;
}
-.text-white{
- color: #fff;
+.text-white {
+ color: #fff;
}
+
.clearfix {
- &:after {
- visibility: hidden;
- display: block;
- font-size: 0;
- content: " ";
- clear: both;
- height: 0;
- }
+ &:after {
+ visibility: hidden;
+ display: block;
+ font-size: 0;
+ content: " ";
+ clear: both;
+ height: 0;
}
-
- //main-container全局样式
- .app-main{
- min-height: 100%
+} //main-container全局样式
+.app-main {
+ min-height: 100%
+}
+
+.filter-container {
+ padding-bottom: 10px;
+ .filter-item {
+ display: inline-block;
+ vertical-align: middle;
+ margin-bottom: 10px;
}
-
- .filter-container {
- padding-bottom: 10px;
- .filter-item {
- display: inline-block;
- vertical-align: middle;
- margin-bottom: 10px;
- }
- }
-
- .app-container {
- padding: 20px;
- box-sizing: border-box;
- }
\ No newline at end of file
+}
+
+.app-container {
+ padding: 20px;
+ box-sizing: border-box;
+}
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 38f0af00..17074f1b 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -1,14 +1,17 @@
-
-.el-dropdown-menu__item{
- font-size: 12px;
- line-height: 28px;
-}
-.el-loading-text{
- text-align: center;
+.el-dropdown-menu__item {
+ font-size: 12px;
+ line-height: 28px;
}
+.el-menu--horizontal {
+ border-bottom: none;
+}
+
+.el-menu {
+ border-right: 0;
+}
.el-menu--display,
-.el-menu--display + .el-submenu__icon-arrow {
-display: none;
-}
\ No newline at end of file
+.el-menu--display+.el-submenu__icon-arrow {
+ display: none;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 3eb4d359..d5d5190c 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -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;
+ }
+}
diff --git a/src/styles/tags.scss b/src/styles/tags.scss
index 962dbd37..221752c1 100644
--- a/src/styles/tags.scss
+++ b/src/styles/tags.scss
@@ -1,90 +1,96 @@
-
-.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;
- height: 30px;
- line-height: 30px;
- margin: 2px 4px 2px 0;
- padding: 0 10px;
- border: 1px solid #e9eaec;
- border-radius: 3px;
- background: #fff;
- color: #495060!important;
- font-size: 12px;
- vertical-align: middle;
- opacity: 1;
- overflow: hidden;
- cursor: pointer;
+ position: relative;
+ display: inline-block;
+ height: 30px;
+ line-height: 30px;
+ margin: 2px 4px 2px 0;
+ padding: 0 10px;
+ border: 1px solid #eee;
+ border-radius: 3px;
+ background: #fff;
+ color: #495060 !important;
+ font-size: 12px;
+ vertical-align: middle;
+ opacity: 1;
+ overflow: hidden;
+ cursor: pointer;
+ &.is-active {
+ .tag-item-icon {
+ color: $mainBg;
+ }
+ border-color : $mainBg;
+ }
}
- .tag-text{
+ .tag-text {
margin-left: 8px;
}
- .tag-close{
+ .tag-close {
margin-left: 8px;
}
.tag-item:hover {
opacity: .85;
}
- .tags-menu{
- position: absolute;
- top:0;
- right: 0;
- display: flex;
- align-items: center;
- padding: 0 15px;
- height: 96%;
- box-sizing: border-box;
- background-color: #fff;
- box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
+ .tags-menu {
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: flex;
+ align-items: center;
+ padding: 0 15px;
+ height: 96%;
+ box-sizing: border-box;
+ background-color: #fff;
+ 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;
@@ -102,4 +108,4 @@
background: #eee;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/styles/top.scss b/src/styles/top.scss
index e4fad71a..d63cf603 100644
--- a/src/styles/top.scss
+++ b/src/styles/top.scss
@@ -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;
-}
\ No newline at end of file
+
+.top-item {
+ margin-right: 8px;
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 0d122a37..219e4a70 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,11 +1,2 @@
-//sidebar
-$menuBg:#495060;
-$subMenuBg:#1f2d3d;
-$menuHover:#001528;
-
-
//main
-$mainBg: #4e97d9;
-$mainColor: #fff;
-$mainDisBg: #d3d4d6;
-$mainDisColor: #eee;
\ No newline at end of file
+$mainBg: #409eff;
-
+
+
+ ![]()
+
{{userInfo.username}}
@@ -46,21 +48,17 @@
退出系统
-
- ![]()
-