更新基础色调,增加藏青色
parent
9d1a378402
commit
ae5017df1e
|
@ -1,11 +1,12 @@
|
||||||
$ct: #1abc9c #48c9b0 #16a085;
|
$ct: #19b491 #3fc2a7 #16967a;
|
||||||
$cg: #4caf50 #81c784 #388e3c;
|
$cg: #2ecc71 #58d68d #27ae60;
|
||||||
$cpp: #651fff #7c4dff #6200ea;
|
$cpp: #9b59b6 #ac61ce #8e44ad;
|
||||||
$cb: #2196f3 #64b5f6 #1976d2;
|
$cb: #2d8dd6 #52a3de #2776b1;
|
||||||
$cr: #ff5722 #ff7043 #e64a19;
|
$cr: #e34235 #e96458 #be382d;
|
||||||
$co: #ff9800 #ffa726 #f57c00;
|
$co: #f39c12 #ffb618 #e67e22;
|
||||||
$cp: #e7e8eb #ecf0f1 #d3d5db;
|
$cp: #e7e8eb #ecf0f1 #bdc3c7;
|
||||||
$cgr: #546e7a #607d8b #37474f;
|
$cgr: #8a9b9c #98acae #748182;
|
||||||
|
$cnb: #526273 #62778d #34495E;
|
||||||
|
|
||||||
@mixin ts($c: all, $t: .2s, $m: ease-in-out){
|
@mixin ts($c: all, $t: .2s, $m: ease-in-out){
|
||||||
transition:$c $t $m;
|
transition:$c $t $m;
|
||||||
|
|
|
@ -7,21 +7,21 @@
|
||||||
*/
|
*/
|
||||||
@import "var.scss";
|
@import "var.scss";
|
||||||
|
|
||||||
.do-datepicker { position:relative;display:inline-block;width:100%; height:100%;color:nth($cgr, 1);font-size:14px;
|
.do-datepicker { position:relative;display:inline-block;width:100%; height:100%;color:nth($cnb, 1);font-size:14px;
|
||||||
|
|
||||||
&.mini {width:155px;height:30px;line-height:30px;}
|
&.mini {width:155px;height:30px;line-height:30px;}
|
||||||
&.medium {width:175px;height:35px;line-height:35px;}
|
&.medium {width:175px;height:35px;line-height:35px;}
|
||||||
&.large {width:195px;height:40px;line-height:40px;}
|
&.large {width:195px;height:40px;line-height:40px;}
|
||||||
|
|
||||||
a { text-decoration:none;color:nth($cgr, 1);
|
a { text-decoration:none;color:nth($cnb, 1);
|
||||||
|
|
||||||
&:hover {color:nth($cgr, 2);}
|
&:hover {color:nth($cnb, 2);}
|
||||||
&:active {color:nth($cgr, 3);}
|
&:active {color:nth($cnb, 3);}
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-input {position:relative; display:block; width:100%; height:100%;
|
.date-input {position:relative; display:block; width:100%; height:100%;
|
||||||
|
|
||||||
.input { width:100%; height:100%;padding:0 5px; line-height:18px; border:1px solid nth($cp, 1);color:nth($cgr, 1); @include ts();
|
.input { width:100%; height:100%;padding:0 5px; line-height:18px; border:1px solid nth($cp, 3);color:nth($cnb, 1); @include ts();
|
||||||
|
|
||||||
&:focus { border-color:nth($ct, 1); }
|
&:focus { border-color:nth($ct, 1); }
|
||||||
&[disabled] {background:#f7f8fb;cursor:not-allowed;}
|
&[disabled] {background:#f7f8fb;cursor:not-allowed;}
|
||||||
|
@ -29,7 +29,7 @@
|
||||||
.icon {position:absolute;right:0;top:0;width:35px;text-align:center;font-size:25px;color:nth($cp, 3);
|
.icon {position:absolute;right:0;top:0;width:35px;text-align:center;font-size:25px;color:nth($cp, 3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.calendar-box { position:absolute; left:0; top:100%; z-index:65534; width:267px; height:auto; min-height:60px;padding:10px;line-height:35px; border:1px solid #ddd; background:#fff; font-size:14px; color:nth($cgr, 1); text-align:center; box-shadow:0 1px 5px rgba(0, 0, 0, 0.1);
|
.calendar-box { position:absolute; left:0; top:100%; z-index:65534; width:267px; height:auto; min-height:60px;padding:10px;line-height:35px; border:1px solid #ddd; background:#fff; font-size:14px; color:nth($cnb, 1); text-align:center; box-shadow:0 1px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
&::before {position:absolute;left:0;top:0;z-index:-1;width:100%;height:85px;background:nth($ct, 1);content:""}
|
&::before {position:absolute;left:0;top:0;z-index:-1;width:100%;height:85px;background:nth($ct, 1);content:""}
|
||||||
|
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
|
|
||||||
.do-button {overflow:hidden;position:relative;display:inline-block;width:auto;height:30px;padding:0 10px;line-height:30px;text-align:center;cursor:pointer;font-size:14px;
|
.do-button {overflow:hidden;position:relative;display:inline-block;width:auto;height:30px;padding:0 10px;line-height:30px;text-align:center;cursor:pointer;font-size:14px;
|
||||||
|
|
||||||
&::before {position:absolute;left:-50%;top:-50%;display:block;width:200%;height:200%;border-radius:50%;background:nth($cp, 2); content:"";opacity:0;transform: scale(0, .0); transition:opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1),transform 1.3s cubic-bezier(0.23, 1, 0.32, 1);}
|
&::before {position:absolute;left:-50%;top:-50%;display:block;width:200%;height:200%;border-radius:50%;background:rgba(220,220,220,.5); content:"";opacity:0;transform: scale(0, .0); transition:opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1),transform 1.3s cubic-bezier(0.23, 1, 0.32, 1);}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
&::before {opacity:1;transform:scale(1, .8);}
|
&::before {opacity:1;transform:scale(1, .8);}
|
||||||
|
@ -31,7 +31,7 @@
|
||||||
|
|
||||||
i {padding-right:5px;font-size:24px;}
|
i {padding-right:5px;font-size:24px;}
|
||||||
}
|
}
|
||||||
&.large {min-width:150px;height:50px;padding:0 13px;line-height:50px;font-size:18px;
|
&.large {min-width:160px;height:50px;padding:0 13px;line-height:50px;font-size:18px;
|
||||||
|
|
||||||
i {padding-right:10px;font-size:28px;}
|
i {padding-right:10px;font-size:28px;}
|
||||||
}
|
}
|
||||||
|
@ -45,6 +45,7 @@
|
||||||
&.orange {color:nth($co, 1);}
|
&.orange {color:nth($co, 1);}
|
||||||
&.plain {color:nth($cp, 3);}
|
&.plain {color:nth($cp, 3);}
|
||||||
&.grey {color:nth($cgr, 1);}
|
&.grey {color:nth($cgr, 1);}
|
||||||
|
&.navy-blue {color:nth($cnb, 1);}
|
||||||
|
|
||||||
&.disabled {color:nth($cp, 1);cursor:not-allowed;
|
&.disabled {color:nth($cp, 1);cursor:not-allowed;
|
||||||
|
|
||||||
|
@ -99,9 +100,14 @@
|
||||||
}
|
}
|
||||||
&.grey {color:nth($cgr, 1);}
|
&.grey {color:nth($cgr, 1);}
|
||||||
|
|
||||||
|
&.navy-blue &__box {border-color:nth($cnb, 1);
|
||||||
|
&::after {background:nth($cnb, 1);}
|
||||||
|
}
|
||||||
|
&.navy-blue {color:nth($cnb, 1);}
|
||||||
|
|
||||||
|
|
||||||
&.disabled {color:nth($cp, 3);cursor:not-allowed;text-decoration:line-through;}
|
&.disabled {color:nth($cp, 3);cursor:not-allowed;text-decoration:line-through;}
|
||||||
&.disabled.checked {color:nth($cgr, 2);}
|
&.disabled.checked {color:nth($cnb, 2);}
|
||||||
&.disabled &__box {border-color:nth($cp, 3);
|
&.disabled &__box {border-color:nth($cp, 3);
|
||||||
&::after {background:nth($cp, 3);}
|
&::after {background:nth($cp, 3);}
|
||||||
}
|
}
|
||||||
|
@ -145,6 +151,9 @@
|
||||||
&.grey.checked &__dot {background:nth($cgr, 1);}
|
&.grey.checked &__dot {background:nth($cgr, 1);}
|
||||||
&.grey.checked &__label {background:nth($cgr, 2) + a0;}
|
&.grey.checked &__label {background:nth($cgr, 2) + a0;}
|
||||||
|
|
||||||
|
&.navy-blue.checked &__dot {background:nth($cnb, 1);}
|
||||||
|
&.navy-blue.checked &__label {background:nth($cnb, 2) + a0;}
|
||||||
|
|
||||||
&.disabled.checked &__dot {background:#fff;}
|
&.disabled.checked &__dot {background:#fff;}
|
||||||
&.disabled &__label, &.disabled.checked &__label {background:nth($cp, 2);
|
&.disabled &__label, &.disabled.checked &__label {background:nth($cp, 2);
|
||||||
|
|
||||||
|
@ -167,6 +176,10 @@
|
||||||
&.grey &__box {border-color:nth($cgr, 1);}
|
&.grey &__box {border-color:nth($cgr, 1);}
|
||||||
&.grey.checked &__box {background:nth($cgr, 1);}
|
&.grey.checked &__box {background:nth($cgr, 1);}
|
||||||
|
|
||||||
|
&.navy-blue {color:nth($cnb, 1);}
|
||||||
|
&.navy-blue &__box {border-color:nth($cnb, 1);}
|
||||||
|
&.navy-blue.checked &__box {background:nth($cnb, 1);}
|
||||||
|
|
||||||
&.teal {color:nth($ct, 1);}
|
&.teal {color:nth($ct, 1);}
|
||||||
&.teal &__box {border-color:nth($ct, 1);}
|
&.teal &__box {border-color:nth($ct, 1);}
|
||||||
&.teal.checked &__box {background:nth($ct, 1);}
|
&.teal.checked &__box {background:nth($ct, 1);}
|
||||||
|
@ -197,7 +210,7 @@
|
||||||
|
|
||||||
&.disabled {cursor:not-allowed;color:nth($cp, 3);text-decoration:line-through;}
|
&.disabled {cursor:not-allowed;color:nth($cp, 3);text-decoration:line-through;}
|
||||||
&.disabled &__box {border-color:nth($cp, 3);}
|
&.disabled &__box {border-color:nth($cp, 3);}
|
||||||
&.disabled.checked {color:nth($cgr, 2);}
|
&.disabled.checked {color:nth($cnb, 2);}
|
||||||
&.disabled.checked &__box {background:nth($cp, 3);}
|
&.disabled.checked &__box {background:nth($cp, 3);}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -213,7 +226,7 @@
|
||||||
|
|
||||||
&.visible {visibility:visible;}
|
&.visible {visibility:visible;}
|
||||||
}
|
}
|
||||||
&__input {position:relative;width:100%;height:30px;border:0;background:none;font-size:14px;color:nth($cgr, 1);}
|
&__input {position:relative;width:100%;height:30px;padding:0 5px;border:0;background:none;font-size:14px;color:nth($cnb, 1);}
|
||||||
&__icon {position:absolute;bottom:0;width:30px;height:30px;text-align:center;font-size:20px;}
|
&__icon {position:absolute;bottom:0;width:30px;height:30px;text-align:center;font-size:20px;}
|
||||||
|
|
||||||
&::after {position:absolute;left:50%;bottom:-1px;width:0;height:2px;content:"";transition:left .15s linear,width .15s linear;}
|
&::after {position:absolute;left:50%;bottom:-1px;width:0;height:2px;content:"";transition:left .15s linear,width .15s linear;}
|
||||||
|
@ -231,6 +244,10 @@
|
||||||
&::after {background:nth($cgr, 2);}
|
&::after {background:nth($cgr, 2);}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.navy-blue {color:nth($cnb, 1);
|
||||||
|
&::after {background:nth($cnb, 2);}
|
||||||
|
}
|
||||||
|
|
||||||
&.teal{color:nth($ct, 1);
|
&.teal{color:nth($ct, 1);
|
||||||
&::after {background:nth($ct, 2);}
|
&::after {background:nth($ct, 2);}
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
|
|
||||||
|
|
||||||
/* 弹层标题栏 */
|
/* 弹层标题栏 */
|
||||||
.layer-title {width:100%;height:43px;padding:0 10px;line-height:43px;font-size:16px;color:nth($cgr, 1);}
|
.layer-title {width:100%;height:43px;padding:0 10px;line-height:43px;font-size:16px;color:nth($cnb, 1);}
|
||||||
|
|
||||||
/* 弹层主体内容 */
|
/* 弹层主体内容 */
|
||||||
.layer-content {position:relative;width:100%;height:auto;min-height:50px;padding:10px;word-break:break-all;word-wrap: break-word;
|
.layer-content {position:relative;width:100%;height:auto;min-height:50px;padding:10px;word-break:break-all;word-wrap: break-word;
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
*/
|
*/
|
||||||
@import 'var.scss';
|
@import 'var.scss';
|
||||||
|
|
||||||
.do-meditor-attach {width:630px;height:300px;cursor:default;color:nth($cgr, 1);
|
.do-meditor-attach {width:630px;height:300px;cursor:default;color:nth($cnb, 1);
|
||||||
|
|
||||||
::-webkit-scrollbar {width:5px;height:5px;background:nth($cp, 2);}
|
::-webkit-scrollbar {width:5px;height:5px;background:nth($cp, 2);}
|
||||||
::-webkit-scrollbar:hover {background:nth($cp, 1);}
|
::-webkit-scrollbar:hover {background:nth($cp, 1);}
|
||||||
|
@ -34,7 +34,7 @@
|
||||||
|
|
||||||
.section {display:block;width:100%;height:auto;margin:15px 0;line-height:35px;
|
.section {display:block;width:100%;height:auto;margin:15px 0;line-height:35px;
|
||||||
|
|
||||||
.txt {width:100%;height:45px;padding:0 10px;border:0;border-radius:5px;background:nth($cp, 2);color:nth($cgr, 1);font-size:14px;}
|
.txt {width:100%;height:45px;padding:0 10px;border:0;border-radius:5px;background:nth($cp, 2);color:nth($cnb, 1);font-size:14px;}
|
||||||
.submit {float:right;width:30%;height:45px;line-height:45px;}
|
.submit {float:right;width:30%;height:45px;line-height:45px;}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -63,7 +63,7 @@
|
||||||
p {display:block;width:100%;height:30px;line-height:30px;}
|
p {display:block;width:100%;height:30px;line-height:30px;}
|
||||||
}
|
}
|
||||||
|
|
||||||
.insert {display:inline-block;padding:3px 5px;line-height:13px;background:nth($cp, 2);color:nth($cgr, 1);cursor:pointer;}
|
.insert {display:inline-block;padding:3px 5px;line-height:13px;background:nth($cp, 2);color:nth($cnb, 1);cursor:pointer;}
|
||||||
.red {color:#f30;}
|
.red {color:#f30;}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -83,7 +83,7 @@ const tmpls = {
|
||||||
:text="el"
|
:text="el"
|
||||||
:click="setPage(el, $event)"></button>`,
|
:click="setPage(el, $event)"></button>`,
|
||||||
curr: `<button class="page curr" :text="currPage"></button>`,
|
curr: `<button class="page curr" :text="currPage"></button>`,
|
||||||
total: `<span class="total-box">共 {{totalPage}} 页 {{totalItems}} 条</span>`,
|
total: `<span class="total-box">共 {{totalPage}} 页 {{totalItem}} 条</span>`,
|
||||||
jumper: `<div class="input-box">前往
|
jumper: `<div class="input-box">前往
|
||||||
<input type="text" :duplex="inputPage" :keyup="setPage(null, $event)"> 页
|
<input type="text" :duplex="inputPage" :keyup="setPage(null, $event)"> 页
|
||||||
</div>`,
|
</div>`,
|
||||||
|
@ -107,7 +107,7 @@ export default Anot.component('pager', {
|
||||||
)
|
)
|
||||||
|
|
||||||
if (props.total) {
|
if (props.total) {
|
||||||
state.totalItems = +props.total
|
state.totalItem = +props.total
|
||||||
}
|
}
|
||||||
if (props.pageSize) {
|
if (props.pageSize) {
|
||||||
state.pageSize = +props.pageSize
|
state.pageSize = +props.pageSize
|
||||||
|
@ -164,14 +164,14 @@ export default Anot.component('pager', {
|
||||||
state: {
|
state: {
|
||||||
classList: [],
|
classList: [],
|
||||||
currPage: 1,
|
currPage: 1,
|
||||||
totalItems: 1,
|
totalItem: 1,
|
||||||
pageSize: 20,
|
pageSize: 20,
|
||||||
inputPage: 1,
|
inputPage: 1,
|
||||||
pageList: []
|
pageList: []
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
totalPage: function() {
|
totalPage: function() {
|
||||||
return Math.ceil(this.totalItems / this.pageSize)
|
return Math.ceil(this.totalItem / this.pageSize)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
@ -235,7 +235,7 @@ export default Anot.component('pager', {
|
||||||
update(1, this)
|
update(1, this)
|
||||||
},
|
},
|
||||||
setTotalItems: function(num) {
|
setTotalItems: function(num) {
|
||||||
this.totalItems = +num
|
this.totalItem = +num
|
||||||
update(1, this)
|
update(1, this)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
.button,.page {min-width:40px;height:40px}
|
.button,.page {min-width:40px;height:40px}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button,.page {display:inline-block;border:0;color: nth($cgr, 1);text-decoration:none;cursor:pointer;vertical-align:top;font-size:14px;font-weight:100;}
|
.button,.page {display:inline-block;border:0;color: nth($cgr, 1);text-decoration:none;cursor:pointer;vertical-align:top;font-size:14px;font-weight:100;appearance:none;}
|
||||||
.button {font-size:18px;}
|
.button {font-size:18px;}
|
||||||
.curr, .disabled {cursor:default;}
|
.curr, .disabled {cursor:default;}
|
||||||
|
|
||||||
|
@ -46,15 +46,16 @@
|
||||||
|
|
||||||
&.skin-2 {float:right;width:auto;
|
&.skin-2 {float:right;width:auto;
|
||||||
|
|
||||||
.page,
|
.page,
|
||||||
.button,
|
.button,
|
||||||
.disabled,
|
.disabled,
|
||||||
.curr {float:left;margin:0;padding:0 5px;color:#fff;}
|
.curr {float:left;margin:0;padding:0 5px;color:#fff;}
|
||||||
|
|
||||||
.page.disabled {display:none;}
|
.page.disabled {display:none;}
|
||||||
.button[disabled] {cursor:not-allowed;}
|
.button[disabled] {cursor:not-allowed;}
|
||||||
|
|
||||||
.input-box {display:none;}
|
.input-box {display:none;}
|
||||||
|
.total-box {display:inline-block;padding:0 8px;}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.plain {
|
&.plain {
|
||||||
|
@ -77,6 +78,16 @@
|
||||||
&.skin-2 .curr {background:nth($cgr, 3)}
|
&.skin-2 .curr {background:nth($cgr, 3)}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.navy-blue {
|
||||||
|
.page,.button {background:nth($cnb, 1);color: #fff;
|
||||||
|
|
||||||
|
&:hover {background:nth($cnb, 2)}
|
||||||
|
&:active {background:nth($cnb, 3)}
|
||||||
|
}
|
||||||
|
.button[disabled] {background:nth($cnb, 1);}
|
||||||
|
&.skin-2 .curr {background:nth($cnb, 3)}
|
||||||
|
}
|
||||||
|
|
||||||
&.red {
|
&.red {
|
||||||
.page,.button {background:nth($cr, 1);color: #fff;
|
.page,.button {background:nth($cr, 1);color: #fff;
|
||||||
|
|
||||||
|
|
|
@ -9,20 +9,20 @@
|
||||||
@import '../../css/var.scss';
|
@import '../../css/var.scss';
|
||||||
|
|
||||||
|
|
||||||
.do-tree {overflow:hidden;overflow-y:auto;position:relative;display:inline-block;width:100%;height:100%;line-height:36px;font-size:15px;color:nth($cgr, 1);
|
.do-tree {overflow:hidden;overflow-y:auto;position:relative;display:inline-block;width:100%;height:100%;line-height:36px;font-size:15px;color:nth($cnb, 1);
|
||||||
|
|
||||||
&__item {overflow:hidden; min-height:35px;margin:1px 0; white-space:nowrap; text-overflow:ellipsis;
|
&__item {overflow:hidden; min-height:35px;margin:1px 0; white-space:nowrap; text-overflow:ellipsis;
|
||||||
|
|
||||||
.do-tree {display:none;margin-left:20px;}
|
.do-tree {display:none;margin-left:20px;}
|
||||||
|
|
||||||
em,span {display:inline-block;cursor:pointer;color:nth($cgr, 2);}
|
em,span {display:inline-block;cursor:pointer;color:nth($cnb, 2);}
|
||||||
em {float:left;padding:0 5px;font-size:20px;}
|
em {float:left;padding:0 5px;font-size:20px;}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
|
||||||
&:hover {color:nth($cgr, 2);}
|
&:hover {color:nth($cnb, 2);}
|
||||||
&.active {color:nth($cgr, 3);font-weight:bold;}
|
&.active {color:nth($cnb, 3);font-weight:bold;}
|
||||||
&.checkbox {float:left;position:relative;width:20px;height:20px;margin:8px 5px 8px 0;line-height:18px;border:1px solid nth($cgr, 1);border-radius:3px; font-size:20px;text-align:center;}
|
&.checkbox {float:left;position:relative;width:20px;height:20px;margin:8px 5px 8px 0;line-height:18px;border:1px solid nth($cnb, 1);border-radius:3px; font-size:20px;text-align:center;}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__item.open>.do-tree {display:block;}
|
&__item.open>.do-tree {display:block;}
|
||||||
|
|
Reference in New Issue