Skip to content

肖康 / cloudSystem

Go to a project
Commit 1878871d by LJM
Options

bug

parent 952c1bb1
Inline Side-by-side
Showing with 197 additions and 211 deletions
src/assets/css/public/common.less
html { html {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100% -ms-text-size-adjust: 100%
} }
html * { html * {
outline: 0; outline: 0;
-webkit-text-size-adjust: none !important; -webkit-text-size-adjust: none !important;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important
} }
html, body { html, body {
font-family: PingFangSC-Regular, PingFang SC, 'Microsoft Yahei', sans-serif; font-family: PingFangSC-Regular, PingFang SC, 'Microsoft Yahei', sans-serif;
font-style: normal; font-style: normal;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-size: 14px; font-size: 14px;
color: #646B78 color: #646B78
} }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section { body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section {
margin: 0; margin: 0;
padding: 0 padding: 0
} }
button, input, select, textarea { button, input, select, textarea {
font-size: 100%; font-size: 100%;
border: none; border: none;
-webkit-appearance: none -webkit-appearance: none
} }
input[type=button], input[type=file], input[type=submit] { input[type=button], input[type=file], input[type=submit] {
cursor: pointer cursor: pointer
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0 border-spacing: 0
} }
ol, ul, dl { ol, ul, dl {
list-style: none list-style: none
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-size: 100%; font-size: 100%;
font-weight: 500 font-weight: 500
} }
em, b, i { em, b, i {
font-style: normal font-style: normal
} }
a { a {
text-decoration: none text-decoration: none
} }
img { img {
border: none border: none
} }
.clr { .clr {
*zoom: 1; *zoom: 1;
clear: both clear: both
} }
.clr:after { .clr:after {
content: "."; content: ".";
clear: both; clear: both;
height: 0; height: 0;
visibility: hidden; visibility: hidden;
display: block display: block
} }
.fl { .fl {
float: left; float: left;
_display: inline _display: inline
} }
.fr { .fr {
float: right; float: right;
_display: inline _display: inline
} }
.va-t { .va-t {
vertical-align: top vertical-align: top
} }
.va-m { .va-m {
vertical-align: middle vertical-align: middle
} }
.va-b { .va-b {
vertical-align: bottom vertical-align: bottom
} }
.lineBlock { .lineBlock {
display: inline-block; display: inline-block;
*display: inline; *display: inline;
zoom: 1; zoom: 1;
letter-spacing: normal; letter-spacing: normal;
word-spacing: normal word-spacing: normal
} }
.lbBox { .lbBox {
font-size: 0 !important; font-size: 0 !important;
*word-spacing: -1px !important *word-spacing: -1px !important
} }
.emptys { .emptys {
margin-left: -1px; margin-left: -1px;
width: 1px; width: 1px;
height: 100%; height: 100%;
font-size: 0; font-size: 0;
vertical-align: middle vertical-align: middle
} }
.boxsiz { .boxsiz {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box box-sizing: border-box
} }
.column { .column {
display: flex; display: flex;
flex-direction: column flex-direction: column
} }
.row { .row {
display: flex; display: flex;
flex-direction: row flex-direction: row
} }
.bothSide { .bothSide {
justify-content: space-between justify-content: space-between
} }
.avarage { .avarage {
justify-content: space-around justify-content: space-around
} }
.rowCenter { .rowCenter {
justify-content: center justify-content: center
} }
.verCenter { .verCenter {
align-items: center align-items: center
} }
.boxFlex { .boxFlex {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-moz-box-flex: 1; -moz-box-flex: 1;
-webkit-flex: 1; -webkit-flex: 1;
-ms-flex: 1; -ms-flex: 1;
flex: 1 flex: 1
} }
html, body { html, body {
width: 100%; width: 100%;
height: 100%; height: 100%;
-webkit-overflow-scrolling: touch -webkit-overflow-scrolling: touch
} }
body { body {
overflow-x: hidden; overflow-x: hidden;
background: #F1F4FA background: #F1F4FA
} }
.f-blue { .f-blue {
color: #1969F9 color: #1969F9
} }
.f-green { .f-green {
color: #3FBE1B color: #3FBE1B
} }
.f-yellow1 { .f-yellow1 {
color: #CC8200 color: #CC8200
} }
.f-red1 { .f-red1 {
color: #FC1F00 color: #FC1F00
} }
.el-pagination { .el-pagination {
text-align: right; text-align: right;
margin-top: 20px margin-top: 20px
} }
.pagex { .pagex {
padding: 20px; padding: 20px;
min-height: 500px;
} }
.zdypop { .zdypop {
.el-form-item__label { .el-form-item__label {
color: #333 color: #333
} }
.el-input.is-disabled { .el-input.is-disabled {
background-color: #F1F4FA; background-color: #F1F4FA;
border-color: #F1F4FA border-color: #F1F4FA
} }
.el-input.is-disabled .el-input__inner { .el-input.is-disabled .el-input__inner {
background-color: #F1F4FA; background-color: #F1F4FA;
border-color: #F1F4FA border-color: #F1F4FA
} }
} }
//弹窗公共样式 //弹窗公共样式
.el-dialog__body { .el-dialog__body {
padding: 20px !important padding: 20px !important
} }
.el-dialog__title { .el-dialog__title {
font-size: 14px; font-size: 14px;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
position: relative; position: relative;
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
width: 5px; width: 5px;
height: 22px; height: 22px;
background: #1969F9; background: #1969F9;
left: -20px; left: -20px;
top: 2px top: 2px
} }
} }
.el-icon-close { .el-icon-close {
font-size: 24px; font-size: 24px;
&:hover, &:focus { &:hover, &:focus {
color: #1969F9 !important color: #1969F9 !important
} }
} }
.el-message-box__container { .el-message-box__container {
} }
.el-message-box__message { .el-message-box__message {
display: inline-block display: inline-block
} }
.el-message-box__message p { .el-message-box__message p {
color: #333; color: #333;
font-size: 16px font-size: 16px
} }
.el-message-box__status.el-icon-error { .el-message-box__status.el-icon-error {
color: #FC1F00 !important; color: #FC1F00 !important;
font-size: 25px !important font-size: 25px !important
} }
.el-message-box__close:before { .el-message-box__close:before {
content: "\E609" content: "\E609"
} }
.el-message-box__btns, .dialog-footer { .el-message-box__btns, .dialog-footer {
.el-button { .el-button {
width: 76px; width: 76px;
height: 34px; height: 34px;
text-align: center; text-align: center;
line-height: 34px; line-height: 34px;
background: #E8ECF4; background: #E8ECF4;
border: 1px solid #E8ECF4; border: 1px solid #E8ECF4;
border-radius: 2px; border-radius: 2px;
color: #8391AD; color: #8391AD;
font-size: 14px; font-size: 14px;
padding: 0px; padding: 0px;
&:hover, &:focus { &:hover, &:focus {
color: #8391AD; color: #8391AD;
background: #E8ECF4; background: #E8ECF4;
border: 1px solid #E8ECF4 border: 1px solid #E8ECF4
}
&.el-button--primary {
border: 1px solid #1969F9;
color: #fff;
background: #1969F9;
&:hover, &:focus {
color: #fff;
background: #1969F9;
border: 1px solid #1969F9
}
}
} }
}
&.el-button--primary { .p-text {
border: 1px solid #1969F9; margin-bottom: 6px;
color: #fff;
background: #1969F9;
&:hover, &:focus { em {
color: #fff; width: 56px;
background: #1969F9; text-align: left
border: 1px solid #1969F9
}
} }
}
}
.p-text { span {
margin-bottom: 6px; width: 214px;
height: 30px;
em { background: #F1F4FA;
width: 56px; border-radius: 2px;
text-align: left font-size: 14px;
} color: #333333;
padding-left: 7px;
span { margin-left: 8px;
width: 214px; text-align: left
height: 30px; }
background: #F1F4FA;
border-radius: 2px;
font-size: 14px;
color: #333333;
padding-left: 7px;
margin-left: 8px;
text-align: left
}
} }
.popper-class-box { .popper-class-box {
.popper__arrow { .popper__arrow {
left: 20px !important left: 20px !important
} }
} }
.tip-title { .tip-title {
padding: 8px 16px; padding: 8px 16px;
background-color: #ecf8ff; background-color: #ecf8ff;
border-radius: 4px; border-radius: 4px;
border-left: 5px solid #50bfff; border-left: 5px solid #50bfff;
margin: 20px 0; margin: 20px 0;
p { p {
font-size: 14px; font-size: 14px;
color: #5e6d82; color: #5e6d82;
line-height: 1.5em line-height: 1.5em
} }
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
height: 10px; height: 10px;
background: transparent background: transparent
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: transparent background: transparent
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 5px; border-radius: 5px;
background-color: #c1c1c1 background-color: #c1c1c1
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: #a8a8a8 background-color: #a8a8a8
} }
\ No newline at end of file
src/components/menu.vue
...@@ -6,10 +6,10 @@ ...@@ -6,10 +6,10 @@
<div class="tab-box fl" ref="scrollbox"> <div class="tab-box fl" ref="scrollbox">
<!--tab 栏目--> <!--tab 栏目-->
<div class="item-boxs row verCenter" ref="scrollboxinner"> <div class="item-boxs row verCenter" ref="scrollboxinner">
<a class="item first row rowCenter verCenter" href="/#/" :class="{'act':$route.path=='/','scrollsg':rpcg}"> <a class="item first row rowCenter verCenter" href="/#/" :class="{'act':$route.path=='/'}">
<font class="fl">概况</font> <font class="fl">概况</font>
</a> </a>
<a class="item row rowCenter verCenter" :class="{'scrollsg':rpcg,'act':(JSON.stringify(item)==JSON.stringify({path: $route.path,title: $route.meta.title,query:$route.query}))}" @click="tabUrl(item)" v-for="item in tabs"> <a class="item row rowCenter verCenter" :class="{'act':(JSON.stringify(item)==JSON.stringify({path: $route.path,title: $route.meta.title,query:$route.query}))}" @click="tabUrl(item)" v-for="item in tabs">
<font class="fl">{{ item.title }}</font> <font class="fl">{{ item.title }}</font>
<span class="icon iconfont fl" @click.stop="closetab(item.path)"></span> <span class="icon iconfont fl" @click.stop="closetab(item.path)"></span>
</a> </a>
...@@ -186,9 +186,9 @@ export default { ...@@ -186,9 +186,9 @@ export default {
name: 'menus', name: 'menus',
props: {}, props: {},
created() { created() {
var self = this
this.getData(); this.getData();
this.tabUi() this.tabUi()
var self = this
window.onresize = function () { window.onresize = function () {
self.tabUi() self.tabUi()
}; };
...@@ -210,7 +210,6 @@ export default { ...@@ -210,7 +210,6 @@ export default {
tabSure: "", tabSure: "",
tabs: "", tabs: "",
width: "", width: "",
rpcg: false,
dialogVisible: false, dialogVisible: false,
ruleForm: { ruleForm: {
old_password: '', old_password: '',
...@@ -267,13 +266,14 @@ export default { ...@@ -267,13 +266,14 @@ export default {
} }
}, },
tabUi() { tabUi() {
this.$nextTick(() => { let tab_arr = sessionStorage.getItem('tabs')
if (this.$refs.scrollboxinner.clientWidth > this.$refs.scrollbox.clientWidth) { if (tab_arr.length >= 9) {
this.rpcg = true this.$nextTick(() => {
} else { if (this.$refs.scrollboxinner.clientWidth > this.$refs.scrollbox.clientWidth) {
this.rpcg = false document.querySelector('.tab-box').scrollLeft = 12000000;
} }
}) })
}
}, },
tabUrl(item) { tabUrl(item) {
this.$router.push({ this.$router.push({
...@@ -518,26 +518,10 @@ export default { ...@@ -518,26 +518,10 @@ export default {
display: none; display: none;
} }
} }
}
&.scrollsg {
&.act {
&::after {
content: "";
position: absolute;
bottom: -2px;
width: 32px;
height: 5px;
background: #1969F9;
left: 50%;
margin-left: -22px;
}
}
&.first { &:hover {
&::after { .iconfont {
color: #1969f9;
margin-left: -15px;
} }
} }
} }
......
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 sign in to comment