This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

Merge branch 'master' of github.com:yutent/doui

old
linteng 2017-09-30 15:02:45 +08:00
parent d74cd9cdf5 81a764db68
commit bdb07f4a06
23 changed files with 425 additions and 355 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/basic-elem.css
View File

File diff suppressed because one or more lines are too long

34
css/basic-elem.scss
View File

@ -16,13 +16,19 @@
&.large {min-width:150px;height:50px;padding:0 13px;line-height:50px;font-size:18px;} &.large {min-width:150px;height:50px;padding:0 13px;line-height:50px;font-size:18px;}
&.radius-3 {border-radius:3px;} &.radius-3 {border-radius:3px;}
&.radius-5 {border-radius:5px;} &.radius-5 {border-radius:5px;}
&.teal {border:0;background:nth($ct, 1);color:#fff;}
&.teal:hover {background:nth($ct, 2);}
&.teal:active {background:nth($ct, 3);}
&.green {border:0;background:nth($cg, 1);color:#fff;} &.green {border:0;background:nth($cg, 1);color:#fff;}
&.green:hover {background:nth($cg, 2);} &.green:hover {background:nth($cg, 2);}
&.green:active {background:nth($cg, 3);} &.green:active {background:nth($cg, 3);}
&.blue {border:0;background:nth($cb, 1);color:#fff;} &.blue {border:0;background:nth($cb, 1);color:#fff;}
&.blue:hover {background:nth($cb, 2);} &.blue:hover {background:nth($cb, 2);}
&.blue:active {background:nth($cb, 3);} &.blue:active {background:nth($cb, 3);}
&.purple {border:0;background:nth($cpp, 1);color:#fff;}
&.purple:hover {background:nth($cpp, 2);}
&.purple:active {background:nth($cpp, 3);}
&.red {border:0;background:nth($cr, 1);color:#fff;} &.red {border:0;background:nth($cr, 1);color:#fff;}
&.red:hover {background:nth($cr, 2);} &.red:hover {background:nth($cr, 2);}
&.red:active {background:nth($cr, 3);} &.red:active {background:nth($cr, 3);}
@ -81,7 +87,7 @@
&.radius-3 {border-radius:3px;} &.radius-3 {border-radius:3px;}
&.radius-5 {border-radius:5px;} &.radius-5 {border-radius:5px;}
&:focus,&:hover {border-color:nth($cg, 1);color:nth($cg, 1);} &:focus,&:hover {border-color:nth($ct, 1);}
&.alert {border-color:nth($cr, 1);color:nth($cr, 1); &.alert {border-color:nth($cr, 1);color:nth($cr, 1);
input {color:nth($cr, 1);} input {color:nth($cr, 1);}
} }
@ -103,13 +109,11 @@
/* select框 */ /* select框 */
.do-ui-select {display:inline-block;min-height:30px;padding:0 25px 0 5px;border:1px solid nth($cp, 3);background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAQCAMAAADOBMQXAAAAFVBMVEUAAAD///8wMDAwMDAyMjIzMzMyMjLeZPLMAAAAB3RSTlMAABAwkLDARx1RgwAAAD9JREFUeAGlz0UChFAAgFB+3v/GMwZ2K8u3g7DXI40s6zWnuaXaK7IYVVlElUV14lQik8opw6SyiCqLXB9/0D/ZNQE+FhzMpgAAAABJRU5ErkJggg==) no-repeat right 6px;color:nth($cgr, 1);outline:none;-webkit-appearance:none;-moz-appearance: none;@include ts; .do-ui-select {display:inline-block;min-height:30px;padding:0 30px 0 10px;border:0;border-bottom:1px solid #e7e7e7;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAMAAABV0m3JAAAADFBMVEUAAAD///+Pj4+JiYkxcGihAAAABHRSTlMAABBwqVQF9wAAADNJREFUeNqlzjEOACAMw8DQ/v/PSE5FFhaEx5usdekBuzRVH0RtCqJYELUFrVjQigX/5jdvzgDh9izlMQAAAABJRU5ErkJggg==) no-repeat right 8px;color:nth($cgr, 1);outline:none;-webkit-appearance:none;-moz-appearance: none;@include ts;
&::-ms-expand {display:none;} &::-ms-expand {display:none;}
&.radius-3 {border-radius:3px;}
&.radius-5 {border-radius:5px;}
&:focus {border-color:nth($cg, 1);} &:focus {border-color:nth($ct, 1);}
&.alert {border-color:nth($cr, 1);color:nth($cr, 1)} &.alert {border-color:nth($cr, 1);color:nth($cr, 1)}
&.disabled {border-color:transparent;background:nth($cp, 1);color:nth($cp, 3)} &.disabled {border-color:transparent;background:nth($cp, 1);color:nth($cp, 3)}
} }
@ -133,9 +137,15 @@
&.green >input:checked {background:nth($cg, 2); &.green >input:checked {background:nth($cg, 2);
&::after {background:nth($cg, 3);} &::after {background:nth($cg, 3);}
} }
&.teal >input:checked {background:nth($cg, 2);
&::after {background:nth($ct, 3);}
}
&.blue >input:checked {background:nth($cb, 2); &.blue >input:checked {background:nth($cb, 2);
&::after {background:nth($cb, 3);} &::after {background:nth($cb, 3);}
} }
&.purple >input:checked {background:nth($cb, 2);
&::after {background:nth($cpp, 3);}
}
&.red >input:checked {background:nth($cr, 2); &.red >input:checked {background:nth($cr, 2);
&::after {background:nth($cr, 3);} &::after {background:nth($cr, 3);}
} }
@ -154,6 +164,8 @@
&:disabled {border-color:nth($cp, 3);color:nth($cp, 3);} &:disabled {border-color:nth($cp, 3);color:nth($cp, 3);}
} }
&.green >input {color:nth($cg, 1)!important;border-color:nth($cg, 1)} &.green >input {color:nth($cg, 1)!important;border-color:nth($cg, 1)}
&.teal >input {color:nth($ct, 1)!important;border-color:nth($ct, 1)}
&.purple >input {color:nth($cpp, 1)!important;border-color:nth($cpp, 1)}
&.blue >input {color:nth($cb, 1)!important;border-color:nth($cb, 1)} &.blue >input {color:nth($cb, 1)!important;border-color:nth($cb, 1)}
&.red >input {color:nth($cr, 1)!important;border-color:nth($cr, 1)} &.red >input {color:nth($cr, 1)!important;border-color:nth($cr, 1)}
&.orange >input {color:nth($co, 1)!important;border-color:nth($co, 1)} &.orange >input {color:nth($co, 1)!important;border-color:nth($co, 1)}
@ -169,6 +181,8 @@
} }
&.green {border-color:nth($cg, 1);background:nth($cg, 1);color:#fff;} &.green {border-color:nth($cg, 1);background:nth($cg, 1);color:#fff;}
&.teal {border-color:nth($ct, 1);background:nth($ct, 1);color:#fff;}
&.purple {border-color:nth($cpp, 1);background:nth($cpp, 1);color:#fff;}
&.blue {border-color:nth($cb, 1);background:nth($cb, 1);color:#fff;} &.blue {border-color:nth($cb, 1);background:nth($cb, 1);color:#fff;}
&.red {border-color:nth($cr, 1);background:nth($cr, 1);color:#fff;} &.red {border-color:nth($cr, 1);background:nth($cr, 1);color:#fff;}
&.orange {border-color:nth($co, 1);background:nth($co, 1);color:#fff;} &.orange {border-color:nth($co, 1);background:nth($co, 1);color:#fff;}
@ -185,12 +199,12 @@
} }
/* 提醒文本 */ /* 提醒文本 */
.do-ui-warn,.do-ui-mark {display:inline-block;position:relative;min-height:50px;margin:10px 0;padding:8px 8px 8px 50px;border:1px solid nth($co, 1);border-radius:10px;background:#fffbed;color:nth($co, 3);word-break: break-all; .do-ui-warn,.do-ui-mark {display:inline-block;position:relative;min-height:40px;margin:5px 0;padding:5px 8px 5px 50px;border:1px solid nth($co, 1);border-radius:5px;background:#fffbed;color:nth($co, 3);word-break: break-all;
p {margin:0!important;} p {margin:0!important;}
&::before {position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:nth($cr, 1);content:"\e6f6";} &::before {position:absolute;left:15px;top:5px;font:20px/1.5 "ui font";color:nth($cr, 1);content:"\e6f6";}
} }
.do-ui-mark {border-color:nth($cg, 2);color:nth($cg, 3);background:#edfbf8; .do-ui-mark {border-color:nth($ct, 2);color:nth($ct, 3);background:#edfbf8;
&::before {color:nth($cg, 3);content:"\e657";} &::before {color:nth($ct, 3);content:"\e657";}
} }

12
css/var.scss
View File

@ -1,9 +1,11 @@
$cg: #1abc9c #48c9b0 #16a085; $ct: #1abc9c #48c9b0 #16a085;
$cb: #3498db #5dade2 #2c81ba; $cg: #4caf50 #81c784 #388e3c;
$cr: #e74c3c #ec7063 #c54133; $cpp: #651fff #7c4dff #6200ea;
$co: #f39c12 #fbbb56 #e67e22; $cb: #2196f3 #64b5f6 #1976d2;
$cr: #ff5722 #ff7043 #e64a19;
$co: #ff9800 #ffa726 #f57c00;
$cp: #e7e8eb #ecf0f1 #bdc3c7; $cp: #e7e8eb #ecf0f1 #bdc3c7;
$cgr: #34495e #5d6d7e #2c3e50; $cgr: #546e7a #607d8b #37474f;
@mixin ts($c: all, $t: .1s, $m: ease-in-out){ @mixin ts($c: all, $t: .1s, $m: ease-in-out){
transition:$c $t $m; transition:$c $t $m;

2
js/lib/datepicker/style.css
View File

@ -1 +1 @@
.do-datepicker{position:relative;z-index:65534;width:100%;height:100%}.do-datepicker a{text-decoration:none}.do-datepicker .date-input{display:block;width:100%;height:100%;padding:0 5px;line-height:18px;border:1px solid #e7e8eb;transition:all .1s ease-in-out}.do-datepicker .date-input:focus{border-color:#1abc9c}.do-datepicker .calendar-box{position:absolute;left:0;top:100%;width:267px;height:auto;min-height:60px;padding:10px;line-height:35px;border:1px solid #ddd;background:#fff;font-size:14px;color:#34495e;text-align:center;box-shadow:0 1px 5px rgba(0,0,0,0.1)}.do-datepicker .calendar-box dt.title{width:100%;height:35px;background:#e7e8eb}.do-datepicker .calendar-box dd.contrl{position:relative;width:90%;height:35px;margin:0 5%}.do-datepicker .calendar-box dd.contrl a{position:absolute;left:0;top:0;width:35px;height:35px;color:#34495e;font-weight:bold}.do-datepicker .calendar-box dd.contrl a:hover{color:#1abc9c}.do-datepicker .calendar-box dd.contrl a.prev-month{left:35px}.do-datepicker .calendar-box dd.contrl a.next-month{left:auto;right:35px}.do-datepicker .calendar-box dd.contrl a.next-year{left:auto;right:0}.do-datepicker .calendar-box dd.calendar{width:100%;height:auto}.do-datepicker .calendar-box dd.calendar .week{width:100%;height:35px;margin-bottom:5px;border-bottom:1px solid #eee}.do-datepicker .calendar-box dd.calendar span.td{float:left;width:35px}.do-datepicker .calendar-box dd.calendar .list span.td{height:30px;line-height:30px;cursor:pointer;transition:all .1s ease-in-out}.do-datepicker .calendar-box dd.calendar .list span.td:hover{background:#e7e8eb}.do-datepicker .calendar-box dd.calendar .list span.td.weeken{color:#e74c3c}.do-datepicker .calendar-box dd.calendar .list span.td.selected{background:#48c9b0;color:#fff}.do-datepicker .calendar-box dd.calendar .list span.td.disabled{color:#bdc3c7;cursor:default}.do-datepicker .calendar-box dd.calendar .list span.td.disabled:hover{background:none}.do-datepicker .calendar-box dd.time{position:relative;width:100%;height:41px;padding:5px 0;margin-top:5px;line-height:30px;border-top:1px solid #eee}.do-datepicker .calendar-box dd.time label{float:left;width:60px;height:30px}.do-datepicker .calendar-box dd.time label input{width:30px;height:30px;border:1px solid #e7e8eb;text-align:center}.do-datepicker .calendar-box dd.time .now{float:right;width:50px;height:30px;border-radius:3px;background:#1abc9c;color:#fff;text-align:center}.do-datepicker .calendar-box dd.time .now:hover{background:#48c9b0}.do-datepicker .calendar-box dd.time .now:active{background:#16a085}.do-datepicker .calendar-box dd.tips{position:absolute;z-index:65535;left:25%;top:40%;width:50%;height:30px;line-height:30px;background:rgba(0,0,0,0.7);color:#fff;font-size:12px;text-align:center} .do-datepicker{position:relative;z-index:65534;width:100%;height:100%}.do-datepicker a{text-decoration:none}.do-datepicker .date-input{display:block;width:100%;height:100%;padding:0 5px;line-height:18px;border:1px solid #e7e8eb;transition:all .1s ease-in-out}.do-datepicker .date-input:focus{border-color:#1abc9c}.do-datepicker .calendar-box{position:absolute;left:0;top:100%;width:267px;height:auto;min-height:60px;padding:10px;line-height:35px;border:1px solid #ddd;background:#fff;font-size:14px;color:#546e7a;text-align:center;box-shadow:0 1px 5px rgba(0,0,0,0.1)}.do-datepicker .calendar-box dt.title{width:100%;height:35px;background:#e7e8eb}.do-datepicker .calendar-box dd.contrl{position:relative;width:90%;height:35px;margin:0 5%}.do-datepicker .calendar-box dd.contrl a{position:absolute;left:0;top:0;width:35px;height:35px;color:#546e7a;font-weight:bold}.do-datepicker .calendar-box dd.contrl a:hover{color:#1abc9c}.do-datepicker .calendar-box dd.contrl a.prev-month{left:35px}.do-datepicker .calendar-box dd.contrl a.next-month{left:auto;right:35px}.do-datepicker .calendar-box dd.contrl a.next-year{left:auto;right:0}.do-datepicker .calendar-box dd.calendar{width:100%;height:auto}.do-datepicker .calendar-box dd.calendar .week{width:100%;height:35px;margin-bottom:5px;border-bottom:1px solid #eee}.do-datepicker .calendar-box dd.calendar span.td{float:left;width:35px}.do-datepicker .calendar-box dd.calendar .list span.td{height:30px;line-height:30px;cursor:pointer;transition:all .1s ease-in-out}.do-datepicker .calendar-box dd.calendar .list span.td:hover{background:#e7e8eb}.do-datepicker .calendar-box dd.calendar .list span.td.weeken{color:#ff5722}.do-datepicker .calendar-box dd.calendar .list span.td.selected{background:#48c9b0;color:#fff}.do-datepicker .calendar-box dd.calendar .list span.td.disabled{color:#bdc3c7;cursor:default}.do-datepicker .calendar-box dd.calendar .list span.td.disabled:hover{background:none}.do-datepicker .calendar-box dd.time{position:relative;width:100%;height:41px;padding:5px 0;margin-top:5px;line-height:30px;border-top:1px solid #eee}.do-datepicker .calendar-box dd.time label{float:left;width:60px;height:30px}.do-datepicker .calendar-box dd.time label input{width:30px;height:30px;border:1px solid #e7e8eb;text-align:center}.do-datepicker .calendar-box dd.time .now{float:right;width:50px;height:30px;border-radius:3px;background:#1abc9c;color:#fff;text-align:center}.do-datepicker .calendar-box dd.time .now:hover{background:#48c9b0}.do-datepicker .calendar-box dd.time .now:active{background:#16a085}.do-datepicker .calendar-box dd.tips{position:absolute;z-index:65535;left:25%;top:40%;width:50%;height:30px;line-height:30px;background:rgba(0,0,0,0.7);color:#fff;font-size:12px;text-align:center}

12
js/lib/datepicker/style.scss
View File

@ -11,7 +11,7 @@
a {text-decoration:none;} a {text-decoration:none;}
.date-input {display:block;width:100%;height:100%;padding:0 5px;line-height:18px;border:1px solid nth($cp, 1);@include ts(); .date-input {display:block;width:100%;height:100%;padding:0 5px;line-height:18px;border:1px solid nth($cp, 1);@include ts();
&:focus {border-color:nth($cg, 1)} &:focus {border-color:nth($ct, 1)}
} }
.calendar-box {position:absolute;left:0;top:100%;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,.1); .calendar-box {position:absolute;left:0;top:100%;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,.1);
@ -20,7 +20,7 @@
dd.contrl {position:relative;width:90%;height:35px;margin:0 5%; dd.contrl {position:relative;width:90%;height:35px;margin:0 5%;
a {position:absolute;left:0;top:0;width:35px;height:35px;color:nth($cgr, 1);font-weight:bold;} a {position:absolute;left:0;top:0;width:35px;height:35px;color:nth($cgr, 1);font-weight:bold;}
a:hover {color:nth($cg, 1)} a:hover {color:nth($ct, 1)}
a.prev-month {left:35px;} a.prev-month {left:35px;}
a.next-month {left:auto;right:35px;} a.next-month {left:auto;right:35px;}
a.next-year {left:auto;right:0;} a.next-year {left:auto;right:0;}
@ -34,7 +34,7 @@
&:hover {background:nth($cp, 1);} &:hover {background:nth($cp, 1);}
&.weeken {color:nth($cr, 1)} &.weeken {color:nth($cr, 1)}
&.selected {background:nth($cg, 2);color:#fff} &.selected {background:nth($ct, 2);color:#fff}
&.disabled {color:nth($cp, 3);cursor:default;} &.disabled {color:nth($cp, 3);cursor:default;}
&.disabled:hover {background:none;} &.disabled:hover {background:none;}
} }
@ -44,10 +44,10 @@
label {float:left;width:60px;height:30px; label {float:left;width:60px;height:30px;
input {width:30px;height:30px;border:1px solid nth($cp, 1);text-align:center;} input {width:30px;height:30px;border:1px solid nth($cp, 1);text-align:center;}
} }
.now {float:right;width:50px;height:30px;border-radius:3px;background:nth($cg, 1);color:#fff;text-align:center; .now {float:right;width:50px;height:30px;border-radius:3px;background:nth($ct, 1);color:#fff;text-align:center;
&:hover {background:nth($cg, 2);} &:hover {background:nth($ct, 2);}
&:active {background:nth($cg, 3);} &:active {background:nth($ct, 3);}
} }
} }
dd.tips {position:absolute;z-index:65535;left:25%;top:40%;width:50%;height:30px;line-height:30px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;text-align:center;} dd.tips {position:absolute;z-index:65535;left:25%;top:40%;width:50%;height:30px;line-height:30px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;text-align:center;}

4
js/lib/drag/main.js
View File

@ -97,8 +97,8 @@ define(['yua'], function(){
dy = cst[5] dy = cst[5]
//滚动条的偏移 //滚动条的偏移
bst = document.body.scrollTop bst = $doc.scrollTop()
bsl = document.body.scrollLeft bsl = $doc.scrollLeft()
// 计算元素的offset值, 需要修正 // 计算元素的offset值, 需要修正
ox = offset.left - dx - bsl ox = offset.left - dx - bsl

2
js/lib/layer/base.js
View File

@ -28,7 +28,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
shadeClose: false, //遮罩点击关闭弹窗 shadeClose: false, //遮罩点击关闭弹窗
radius: '0px', //弹窗圆角半径 radius: '0px', //弹窗圆角半径
area: ['auto', 'auto'], area: ['auto', 'auto'],
title: '', //弹窗主标题(在工具栏上的) title: '提示', //弹窗主标题(在工具栏上的)
menubar: true, //是否显示菜单栏 menubar: true, //是否显示菜单栏
content: '', // 弹窗的内容 content: '', // 弹窗的内容
fixed: false, //是否固定不可拖拽 fixed: false, //是否固定不可拖拽

2
js/lib/layer/skin/def.css
View File

File diff suppressed because one or more lines are too long

22
js/lib/layer/skin/def.scss
View File

@ -17,24 +17,24 @@
&.skin-def {color:#666;font-size:14px;box-shadow:0 0 10px rgba(0,0,0,.3); &.skin-def {color:#666;font-size:14px;box-shadow:0 0 10px rgba(0,0,0,.3);
.icon-0::before {content:"\e62e";color:nth($cr, 1);} // question .icon-0::before {content:"\e62e";color:nth($cr, 1);} // question
.icon-1::before {content:"\e610";color:nth($cg, 1);} // get .icon-1::before {content:"\e610";color:nth($ct, 1);} // get
.icon-2::before {content:"\e6f8";color:nth($cb, 1);} // happy .icon-2::before {content:"\e6f8";color:nth($cb, 1);} // happy
.icon-3::before {content:"\e6fd";color:nth($co, 1);} // sad .icon-3::before {content:"\e6fd";color:nth($co, 1);} // sad
.icon-4::before {content:"\e6f6";color:nth($co, 1);} // warn .icon-4::before {content:"\e6f6";color:nth($co, 1);} // warn
.icon-5::before {content:"\e630";color:nth($cg, 1);} // face .icon-5::before {content:"\e630";color:nth($ct, 1);} // face
.icon-6::before {content:"\e636";color:nth($cgr, 1);} // time .icon-6::before {content:"\e636";color:nth($cgr, 1);} // time
.icon-7::before {content:"\e623";color:nth($co, 1);} // star .icon-7::before {content:"\e623";color:nth($co, 1);} // star
.icon-8::before {content:"\e604";color:nth($cr, 1);} // mute .icon-8::before {content:"\e604";color:nth($cr, 1);} // mute
.icon-9::before {content:"\e605";color:nth($cg, 1);} // unmute .icon-9::before {content:"\e605";color:nth($ct, 1);} // unmute
/* 弹层标题栏 */ /* 弹层标题栏 */
.layer-title {width:100%;height:40px;padding:0 8px;line-height:40px;background:nth($cp, 2);font-size:14px;color:nth($cgr, 1);} .layer-title {width:100%;height:43px;padding:0 8px;line-height:43px;background:#f5f5f5;font-size:16px;color:nth($cgr, 1);}
.action-min, .action-min,
.action-close {position:absolute;display:block;top:10px;width:20px;height:20px;line-height:20px;border:0;text-align:center;cursor:pointer;color:nth($cgr, 2); .action-close {position:absolute;display:block;top:12px;width:20px;height:20px;line-height:20px;font-size:14px;text-align:center;cursor:pointer;color:nth($cgr, 2);
&:hover {border: 1px solid #ddd;line-height: 18px;color:nth($cg, 1);} &:hover {color:nth($ct, 1);}
} }
.action-min {right:40px; .action-min {right:40px;
&::before {content:"\e634"} &::before {content:"\e634"}
@ -52,7 +52,7 @@
.prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px; .prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;
&.alert {border-color:nth($cr, 1)} &.alert {border-color:nth($cr, 1)}
&:focus {border-color:nth($cg, 1)} &:focus {border-color:nth($ct, 1)}
} }
.msg-box {line-height:30px;} .msg-box {line-height:30px;}
} }
@ -64,7 +64,7 @@
/* 弹层按钮部分 */ /* 弹层按钮部分 */
.layer-btns {width:100%;height:40px;padding:0 5px;line-height:30px;font-size:14px;color:#454545;text-align:right; .layer-btns {width:100%;height:40px;padding:0 5px;line-height:30px;font-size:14px;color:#454545;text-align:right;
a {display:inline-block;width:auto;min-width:60px;height:30px;margin:0 5px;padding:0 10px;color:nth($cgr, 1);text-align:center;background:nth($cp, 1); a {display:inline-block;width:auto;min-width:60px;height:30px;margin:0 5px;padding:0 10px;color:nth($cgr, 1);text-align:center;background:nth($cp, 1);@include ts();
&:hover {background:nth($cp, 2)} &:hover {background:nth($cp, 2)}
&:active {background:nth($cp, 3)} &:active {background:nth($cp, 3)}
@ -124,7 +124,7 @@
.dot-box{width:100%;height:100%; .dot-box{width:100%;height:100%;
i {float:left;display:block;width:10px;height:100%;margin:0 5px;background:nth($cg, 3);-webkit-animation: bounce 1s infinite ease-in-out;-moz-animation: bounce 1s infinite ease-in-out;animation: bounce 1s infinite ease-in-out;-webkit-transform:scaleY(.6);-moz-transform:scaleY(.6);transform:scaleY(.6); i {float:left;display:block;width:10px;height:100%;margin:0 5px;background:nth($ct, 3);-webkit-animation: bounce 1s infinite ease-in-out;-moz-animation: bounce 1s infinite ease-in-out;animation: bounce 1s infinite ease-in-out;-webkit-transform:scaleY(.6);-moz-transform:scaleY(.6);transform:scaleY(.6);
&:nth-child(2) {-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s;} &:nth-child(2) {-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s;}
&:nth-child(3) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;} &:nth-child(3) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;}
@ -141,7 +141,7 @@
i {position:absolute;display:block;width:60px;height:60px;-webkit-animation: circle2 2s infinite ease-in-out;-moz-animation: circle2 2s infinite ease-in-out;animation: circle2 2s infinite ease-in-out;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg); i {position:absolute;display:block;width:60px;height:60px;-webkit-animation: circle2 2s infinite ease-in-out;-moz-animation: circle2 2s infinite ease-in-out;animation: circle2 2s infinite ease-in-out;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
&::before {display:block;width:8px;height:8px;background:nth($cg, 3);border-radius:50%;content:""} &::before {display:block;width:8px;height:8px;background:nth($ct, 3);border-radius:50%;content:""}
&:nth-child(2) {-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s;} &:nth-child(2) {-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s;}
&:nth-child(3) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;} &:nth-child(3) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;}
@ -156,7 +156,7 @@
.dot-box{width:90%;height:90%;margin:5%; .dot-box{width:90%;height:90%;margin:5%;
i {float:left;display:block;width:30px;height:30px;background:nth($cg, 3);-webkit-animation: grid 1.5s infinite linear;-moz-animation: grid 1.5s infinite linear;animation: grid 1.5s infinite linear; i {float:left;display:block;width:30px;height:30px;background:nth($ct, 3);-webkit-animation: grid 1.5s infinite linear;-moz-animation: grid 1.5s infinite linear;animation: grid 1.5s infinite linear;
&:nth-child(4), &:nth-child(4),
&:nth-child(8) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;} &:nth-child(8) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;}

31
js/lib/marked/main.js
View File

@ -19,7 +19,7 @@ var block = {
nptable: noop, nptable: noop,
lheading: /^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/, lheading: /^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/,
blockquote: /^( *>[^\n]+(\n(?!def)[^\n]+)*\n*)+/, blockquote: /^( *>[^\n]+(\n(?!def)[^\n]+)*\n*)+/,
mark: /^( *;;;([\!]?)[^\n]+(\n(?!def)[^\n]+)*\n*)+/, mark: /^ *;;;([\!]?) ([^\n]+)/,
task: /^ *- *\[([ x]?)\] *([^\n]*)/, task: /^ *- *\[([ x]?)\] *([^\n]*)/,
list: /^( *)(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/, list: /^( *)(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,
html: /^ *(?:comment *(?:\n|\s*$)|closed *(?:\n{2,}|\s*$)|closing *(?:\n{2,}|\s*$))/, html: /^ *(?:comment *(?:\n|\s*$)|closed *(?:\n{2,}|\s*$)|closing *(?:\n{2,}|\s*$))/,
@ -44,9 +44,7 @@ block.list = replace(block.list)
block.blockquote = replace(block.blockquote) block.blockquote = replace(block.blockquote)
('def', block.def) ('def', block.def)
(); ();
block.mark = replace(block.mark)
('def', block.def)
();
block._tag = '(?!(?:' block._tag = '(?!(?:'
+ 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code' + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code'
@ -289,9 +287,11 @@ Lexer.prototype.token = function(src, top, bq) {
src = src.substring(cap[0].length); src = src.substring(cap[0].length);
this.tokens.push({ this.tokens.push({
type: 'mark_start' type: 'mark',
mark: cap[1] === '!',
text: cap[2]
}); });
var sign = cap[2] === '!' /* var sign = cap[2] === '!'
cap = cap[0].replace(/^ *;;;[\!]? ?/gm, ''); cap = cap[0].replace(/^ *;;;[\!]? ?/gm, '');
this.token(cap, top, true); this.token(cap, top, true);
@ -299,7 +299,7 @@ Lexer.prototype.token = function(src, top, bq) {
this.tokens.push({ this.tokens.push({
type: 'mark_end', type: 'mark_end',
mark: sign mark: sign
}); });*/
continue; continue;
} }
@ -849,10 +849,10 @@ Renderer.prototype.code = function(code, lang, escaped) {
}; };
Renderer.prototype.blockquote = function(quote) { Renderer.prototype.blockquote = function(quote) {
return '<blockquote>\n' + quote + '</blockquote>\n'; return '<blockquote class="md-quote">\n' + quote + '</blockquote>\n';
}; };
Renderer.prototype.mark = function(mark, t) { Renderer.prototype.mark = function(mark, t) {
return '<mark class="' + (t ? 'do-ui-warn' : 'do-ui-mark') + '">\n' + mark + '</mark>\n'; return '<section><mark class="' + (t ? 'md-warn' : 'md-mark') + '">\n' + mark + '</mark></section>\n';
}; };
Renderer.prototype.task = function(task, t) { Renderer.prototype.task = function(task, t) {
@ -868,7 +868,7 @@ Renderer.prototype.heading = function(text, level, raw) {
raw = text.replace(/<[^>]+>|<\/[^>]+>/g, '') raw = text.replace(/<[^>]+>|<\/[^>]+>/g, '')
return '<h' return '<h'
+ level + level
+ ' class="md-hd" id="' + ' class="md-head" id="'
+ raw + raw
+ '"><a href="#' + '"><a href="#'
+ raw + raw
@ -1120,13 +1120,8 @@ Parser.prototype.tok = function() {
return this.renderer.blockquote(body); return this.renderer.blockquote(body);
} }
case 'mark_start': { case 'mark': {
var body = ''; return this.renderer.mark(this.token.text, this.token.mark);
while (this.next().type !== 'mark_end') {
body += this.tok();
}
return this.renderer.mark(body, this.token.mark);
} }
case 'task': { case 'task': {
return this.renderer.task(this.token.text, this.token.mark) return this.renderer.task(this.token.text, this.token.mark)
@ -1374,7 +1369,7 @@ this.marked = marked;
if (typeof module !== 'undefined' && typeof exports === 'object') { if (typeof module !== 'undefined' && typeof exports === 'object') {
module.exports = marked; module.exports = marked;
} else if (typeof define === 'function' && define.amd) { } else if (typeof define === 'function' && define.amd) {
define(function() { return marked; }); define(['css!./theme'], function() { return marked; });
} }
}).call(function() { }).call(function() {

1
js/lib/marked/theme.css Normal file
View File

@ -0,0 +1 @@
.do-marked-theme{position:relative}.do-marked-theme .md-head{position:relative;margin:15px 0;padding-left:30px;font-weight:normal;font-size:17px}.do-marked-theme h1.md-head{padding-left:0}.do-marked-theme .md-head a{position:relative;display:inline-block;padding:0 8px;background:#fff;color:#454545}.do-marked-theme .md-head a:hover{text-decoration:none}.do-marked-theme h1.md-head a{padding-left:0;color:#000}.do-marked-theme h2.md-head a{color:#000}.do-marked-theme h1.md-head{margin:0 0 30px;font-size:25px}.do-marked-theme h2.md-head{margin:20px 0;font-size:23px}.do-marked-theme h3.md-head{margin:20px 0 15px;font-size:20px}.do-marked-theme h1:after{display:block;width:100%;content:" ";border-bottom:1px solid #ddd}.do-marked-theme h2:before,.do-marked-theme h3:before,.do-marked-theme h4:before,.do-marked-theme h5:before,.do-marked-theme h6:before{display:block;position:absolute;left:0;top:50%;width:100%;content:" ";border-bottom:1px solid #ddd}.do-marked-theme a{text-decoration:none}.do-marked-theme a:hover{text-decoration:underline}.do-marked-theme p{margin:15px 0}.do-marked-theme blockquote.md-quote{margin:10px 0;padding:5px 10px;border-left:5px solid #6bb294;background:#f7f7f7}.do-marked-theme blockquote.md-quote p{margin:0}.do-marked-theme .md-warn,.do-marked-theme .md-mark{display:inline-block;position:relative;min-height:40px;margin:5px 0;padding:5px 8px 5px 50px;border:1px solid #ff9800;border-radius:5px;background:#fffbed;color:#f57c00;word-break:break-all}.do-marked-theme .md-warn p,.do-marked-theme .md-mark p{margin:0 !important}.do-marked-theme .md-warn::before,.do-marked-theme .md-mark::before{position:absolute;left:15px;top:5px;font:20px/1.5 "ui font";color:#ff5722;content:"\e6f6"}.do-marked-theme .md-mark{border-color:#48c9b0;color:#16a085;background:#edfbf8}.do-marked-theme .md-mark::before{color:#16a085;content:"\e657"}.do-marked-theme table{width:100%}.do-marked-theme table thead tr{height:45px;line-height:45px;background:#f7f7f7}.do-marked-theme table thead th{padding:0 8px;border:0}.do-marked-theme table tbody tr{height:43px;line-height:42px;transition:all .3s ease-in-out}.do-marked-theme table tbody tr:hover{background:#ecf6fd}.do-marked-theme table tbody td{padding:0 8px;border-bottom:1px solid #e9e9e9}.do-marked-theme hr{margin:30px 0;border-bottom:0}.do-marked-theme ol{margin-left:2em;list-style:decimal outside none}.do-marked-theme ul{margin-left:2em;list-style:disc outside none}.do-marked-theme li ol{margin-left:2em}.do-marked-theme li ul{margin-left:2em;list-style-type:circle}.do-marked-theme li ol ul,.do-marked-theme li ul ul{list-style-type:square}

60
js/lib/marked/theme.scss Normal file
View File

@ -0,0 +1,60 @@
@charset "UTF-8";
/**
*
* @authors yutent (yutent@doui.cc)
* @date 2017-09-29 00:05:45
* @version $Id$
*/
@import "../../../css/var.scss";
.do-marked-theme {position:relative;
.md-head {position:relative;margin:15px 0;padding-left:30px;font-weight:normal;font-size:17px;}
h1.md-head {padding-left:0;}
.md-head a {position:relative;display:inline-block;padding:0 8px;background:#fff;color:#454545}
.md-head a:hover {text-decoration:none;}
h1.md-head a {padding-left:0;color:#000;}
h2.md-head a {color:#000;}
h1.md-head {margin:0 0 30px;font-size:25px;}
h2.md-head {margin:20px 0;font-size:23px;}
h3.md-head {margin:20px 0 15px;font-size:20px;}
h1:after {display:block;width:100%;content:" ";border-bottom:1px solid #ddd;}
h2:before,
h3:before,
h4:before,
h5:before,
h6:before {display:block;position:absolute;left:0;top:50%;width:100%;content:" ";border-bottom:1px solid #ddd;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
p {margin:15px 0;}
blockquote.md-quote {margin:10px 0;padding:5px 10px;border-left:5px solid #6bb294;background:#f7f7f7}
blockquote.md-quote p {margin:0;}
/* 提醒文本 */
.md-warn,.md-mark {display:inline-block;position:relative;min-height:40px;margin:5px 0;padding:5px 8px 5px 50px;border:1px solid nth($co, 1);border-radius:5px;background:#fffbed;color:nth($co, 3);word-break: break-all;
p {margin:0!important;}
&::before {position:absolute;left:15px;top:5px;font:20px/1.5 "ui font";color:nth($cr, 1);content:"\e6f6";}
}
.md-mark {border-color:nth($ct, 2);color:nth($ct, 3);background:#edfbf8;
&::before {color:nth($ct, 3);content:"\e657";}
}
table {width:100%;
thead tr {height:45px;line-height:45px;background:#f7f7f7}
thead th {padding:0 8px;border:0;}
tbody tr {height:43px;line-height:42px;@include ts(all, .3s);
&:hover {background:#ecf6fd}
}
tbody td {padding:0 8px;border-bottom:1px solid #e9e9e9}
}
hr {margin:30px 0;border-bottom:0;}
ol {margin-left:2em;list-style:decimal outside none;}
ul {margin-left:2em;list-style:disc outside none;}
li ol {margin-left:2em;}
li ul {margin-left:2em;list-style-type: circle;}
li ol ul,
li ul ul {list-style-type: square;}
}

60
js/lib/meditor/addon/attach.css
View File

@ -1,59 +1 @@
@charset "UTF-8"; .do-meditor-attach{width:630px;height:auto;background:#f7f7f7;cursor:default}.do-meditor-attach .tab-box{width:100%;height:50px;line-height:49px;border-bottom:1px solid #e2e2e2;text-align:center}.do-meditor-attach .tab-box .item{position:relative;float:left;width:100px;height:49px;border-right:1px solid #ddd;cursor:pointer}.do-meditor-attach .tab-box .item.active{background:#fff}.do-meditor-attach .tab-box .item.active::after{position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:#fff;content:""}.do-meditor-attach .tab-box a.action-close{top:5px;width:40px;height:40px;line-height:40px;font-size:20px}.do-meditor-attach .tab-box a.action-close:hover{line-height:40px;border:0}.do-meditor-attach .cont-box{position:relative;width:100%;height:auto;min-height:200px;background:#fff}.do-meditor-attach .cont-box .remote,.do-meditor-attach .cont-box .local{position:relative;width:60%;height:auto;margin:0 auto;padding:15px 0 30px}.do-meditor-attach .cont-box .local{width:96%}.do-meditor-attach .cont-box .hide{display:none}.do-meditor-attach .cont-box .section{display:block;width:100%;height:auto;margin:15px 0;line-height:35px}.do-meditor-attach .cont-box .section.input{line-height:33px;border:1px solid #e9e9e9}.do-meditor-attach .cont-box .section .label{float:left;width:30%;text-align:center;background:#f7f7f7}.do-meditor-attach .cont-box .section .txt{float:left;width:70%;height:33px;padding:0 8px;border:0;border-left:1px solid #e9e9e9;background:#fff;color:#666}.do-meditor-attach .cont-box .section .submit{float:right;width:30%;height:35px;background:#ddd;color:#666;text-align:center}.do-meditor-attach .cont-box .select-file{width:100%;height:35px;line-height:33px}.do-meditor-attach .cont-box .select-file span.file{float:left;width:100px;height:35px;border:1px solid #ddd;background:#f7f7f7;color:#666;text-align:center;cursor:pointer}.do-meditor-attach .cont-box .select-file span.tips{display:inline-block;padding:0 10px;line-height:35px;color:#666}.do-meditor-attach .cont-box .upload-box{width:100%;height:auto;min-height:190px;margin:10px 0;border:1px solid #e2e2e2}.do-meditor-attach .cont-box .upload-box .tr{width:100%;height:35px;line-height:35px;text-align:center}.do-meditor-attach .cont-box .upload-box .tr:hover{background:#fafafa}.do-meditor-attach .cont-box .upload-box .thead{line-height:34px;border-bottom:1px solid #e2e2e2;background:#f7f7f7}.do-meditor-attach .cont-box .upload-box .td{float:left}.do-meditor-attach .cont-box .upload-box .td.name{width:45%}.do-meditor-attach .cont-box .upload-box .td.progress{width:40%}.do-meditor-attach .cont-box .upload-box .td.option{width:15%}.do-meditor-attach .cont-box .upload-box .td.option a{display:inline-block;padding:3px 5px;line-height:13px;border:1px solid #e2e2e2;background:#f7f7f7;color:#666}.do-meditor-attach .cont-box .upload-box .td .red{color:#f30}.do-meditor-attach .cont-box .manager{overflow:hidden;overflow-y:auto;width:100%;height:320px;padding:10px}.do-meditor-attach .cont-box .manager .item{float:left;width:22%;height:130px;margin:10px 1.5%;padding:5px}.do-meditor-attach .cont-box .manager .item:hover{background:#f7f7f7}.do-meditor-attach .cont-box .manager .thumb{display:block;width:100%;height:100px}.do-meditor-attach .cont-box .manager .name{overflow:hidden;height:20px;line-height:30px;text-align:center}.do-meditor-attach .cont-box .manager img{width:100%;height:100%}.do-meditor-attach .cont-box .manager .attach-icon{display:inline-block;width:100%;height:100px;text-align:center;font:50px/100px "ui font" !important;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale}
/**
*
* @authors yutent (yutent@doui.cc)
* @date 2017-04-20 19:13:24
*
*/
.do-meditor-attach {width:630px;height:auto;background:#f7f7f7;cursor:default;}
.do-meditor-attach .attach-wrap {width:100%;height:auto;}
.do-meditor-attach .tab-box {width:100%;height:50px;line-height:49px;border-bottom:1px solid #e2e2e2;text-align:center;}
.do-meditor-attach .tab-box .item {position:relative;float:left;width:100px;height:49px;border-right:1px solid #ddd;cursor:pointer;}
.do-meditor-attach .tab-box .item.active {background:#fff;}
.do-meditor-attach .tab-box .item.active::after {position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:#fff;content:""}
.do-meditor-attach .tab-box a.action-close {top:5px;width:40px;height:40px;line-height:40px;font-size:20px;}
.do-meditor-attach .tab-box a.action-close:hover {line-height:40px;border:0;}
.do-meditor-attach .cont-box {position:relative;width:100%;height:auto;min-height:200px;background:#fff;}
.do-meditor-attach .cont-box .remote,
.do-meditor-attach .cont-box .local {position:relative;width:60%;height:auto;margin:0 auto;padding:15px 0 30px;}
.do-meditor-attach .cont-box .local {width:96%;}
.do-meditor-attach .cont-box .hide {display:none;}
.do-meditor-attach .cont-box .section {display:block;width:100%;height:auto;margin:15px 0;line-height:35px;}
.do-meditor-attach .cont-box .section::after {visibility: hidden;overflow:hidden; display: block;height: 0;content: "."; clear: both;}
.do-meditor-attach .cont-box .section .label {float: left;width:30%;text-align:center;background:#e2e2e2;}
.do-meditor-attach .cont-box .section label {float: left;width:50%;}
.do-meditor-attach .cont-box .section .input {float: left;width:70%;height:35px;padding:0 8px;border:1px solid #e2e2e2;border-left:0;background:#fff;color:#666;}
.do-meditor-attach .cont-box .section .submit {float:right;width:30%;height:35px;border:1px solid #ddd;background:#f7f7f7;color:#666;text-align:center;}
.do-meditor-attach .cont-box .section .submit:hover {border:1px solid #049789;}
.do-meditor-attach .cont-box .select-file {width:100%;height:35px;line-height:33px}
.do-meditor-attach .cont-box .select-file span.file {float:left;width:100px;height:35px;border:1px solid #ddd;background:#f7f7f7;color:#666;text-align:center;cursor:pointer;}
.do-meditor-attach .cont-box .select-file span.tips {display:inline-block;padding:0 10px;line-height:35px;color:#666;}
.do-meditor-attach .cont-box .upload-box {width:100%;height:auto;min-height:190px;margin:10px 0;border:1px solid #e2e2e2;}
.do-meditor-attach .cont-box .upload-box .tr {width:100%;height:35px;line-height:35px;text-align:center;}
.do-meditor-attach .cont-box .upload-box .tr:hover {background:#fafafa}
.do-meditor-attach .cont-box .upload-box .thead {line-height:34px;border-bottom:1px solid #e2e2e2;background:#f7f7f7;}
.do-meditor-attach .cont-box .upload-box .td {float:left;}
.do-meditor-attach .cont-box .upload-box .td.name {width:45%;}
.do-meditor-attach .cont-box .upload-box .td.progress {width:40%;}
.do-meditor-attach .cont-box .upload-box .td.option {width:15%;}
.do-meditor-attach .cont-box .upload-box .td.option a {display:inline-block;padding:3px 5px;line-height:13px;border:1px solid #e2e2e2;background:#f7f7f7;color:#666;}
.do-meditor-attach .cont-box .upload-box .td .red {color:#f30;}
.do-meditor-attach .cont-box .manager {overflow:hidden;overflow-y:auto;width:100%;height:320px;padding:10px;}
.do-meditor-attach .cont-box .manager .item {float:left;width:22%;height:130px;margin:10px 1.5%;padding:5px;}
.do-meditor-attach .cont-box .manager .item:hover {background:#f7f7f7;}
.do-meditor-attach .cont-box .manager .thumb {display:block;width:100%;height:100px;}
.do-meditor-attach .cont-box .manager .name {overflow:hidden;height:20px;line-height:30px;text-align:center;}
.do-meditor-attach .cont-box .manager img {width:100%;height:100%;}
.do-meditor-attach .cont-box .manager .attac-icon {display:inline-block;width:100%;height:100px;text-align:center;font:50px/100px "edicon" !important;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}

84
js/lib/meditor/addon/attach.js
View File

@ -186,48 +186,46 @@ define([
file: [] file: []
}, },
fixCont = function(){ fixCont = function(){
return '<div class="do-meditor-attach meditor-font">' return '<dl class="do-meditor-attach do-meditor-font">'
+ '<dl class="attach-wrap">' + '<dt class="tab-box" :drag="do-layer" data-limit="window">'
+ '<dt class="tab-box" :drag="do-layer" data-limit="window">' + '<span class="item" :class="active:tab === 1" :click="$switch(1)">' + lang[openType][0] +'</span>'
+ '<span class="item" :class="active:tab === 1" :click="$switch(1)">' + lang[openType][0] +'</span>' + '<span class="item" :class="active:tab === 2" :click="$switch(2)">本地上传</span>'
+ '<span class="item" :class="active:tab === 2" :click="$switch(2)">本地上传</span>' + '<span class="item" :class="active:tab === 3" :click="$switch(3)">' + lang[openType][1] + '</span>'
+ '<span class="item" :class="active:tab === 3" :click="$switch(3)">' + lang[openType][1] + '</span>' + '<a href="javascript:;" :click="no" class="action-close do-ui-font"></a>'
+ '<a href="javascript:;" :click="no" class="action-close def-font"></a>' + '</dt>'
+ '</dt>' + '<dt class="cont-box">'
+ '<dt class="cont-box">' + '<div class="remote" :visible="tab === 1">'
+ '<div class="remote" :visible="tab === 1">' + '<section class="section do-fn-cl input"><span class="label">'+ lang[openType][2] + '</span>'
+ '<section class="section"><span class="label">'+ lang[openType][2] + '</span>' + '<input class="txt" :duplex="attachAlt" />'
+ '<input class="input" :duplex="attachAlt" />' + '</section>'
+ '</section>' + '<section class="section do-fn-cl input"><span class="label">'+ lang[openType][3] + '</span>'
+ '<section class="section"><span class="label">'+ lang[openType][3] + '</span>' + '<input class="txt" :duplex="attach" />'
+ '<input class="input" :duplex="attach" />' + '</section>'
+ '</section>' + '<section class="section do-fn-cl">'
+ '<section class="section">' + '<a href="javascript:;" class="submit" :click="$confirm">确定</a>'
+ '<a href="javascript:;" class="submit" :click="$confirm">确定</a>' + '</section>'
+ '</section>' + '</div>'
+ '</div>' + '<div class="local" :visible="tab === 2">'
+ '<div class="local" :visible="tab === 2">' + '<div class="select-file"><input id="meditor-attch" multiple :change="$change" type="file" class="hide" /><span class="file" :click="$select">选择文件</span><span class="tips">(上传大小限制:单文件最大 '
+ '<div class="select-file"><input id="meditor-attch" multiple :change="$change" type="file" class="hide" /><span class="file" :click="$select">选择文件</span><span class="tips">(上传大小限制:单文件最大' + ((ME.maxSize/1048576).toFixed(2) - 0)
+ (ME.maxSize/1048576).toFixed(2) + 'MB)</span></div>'
+ 'MB)</span></div>' + '<ul class="upload-box">'
+ '<ul class="upload-box">' + '<li class="tr thead"><span class="td name">文件名</span><span class="td progress">上传进度</span><span class="td option">操作</span></li>'
+ '<li class="tr thead"><span class="td name">文件名</span><span class="td progress">上传进度</span><span class="td option">操作</span></li>' + '<li class="tr" :repeat="uploadFile">'
+ '<li class="tr" :repeat="uploadFile">' + '<span class="td name" :text="el.name"></span>'
+ '<span class="td name" :text="el.name"></span>' + '<span class="td progress" :html="el.progress"></span>'
+ '<span class="td progress" :html="el.progress"></span>' + '<span class="td option"><a href="javascript:;" :click="$insert(el)">插入</a></span>'
+ '<span class="td option"><a href="javascript:;" :click="$insert(el)">插入</a></span>'
+ '</li>'
+ '</ul>'
+ '</div>'
+ '<ul class="manager" :visible="tab === 3">'
+ '<li class="item" :repeat="attachList" :click="$insert(el)">'
+ '<span class="thumb" :html="el.thumb"></span>'
+ '<p class="name" :attr-title="el.name" :text="el.name"></p>'
+ '</li>' + '</li>'
+ '</ul>' + '</ul>'
+ '</dt>' + '</div>'
+ '</dl>' + '<ul class="manager" :visible="tab === 3">'
+ '</div>' + '<li class="item" :repeat="attachList" :click="$insert(el)">'
+ '<span class="thumb" :html="el.thumb"></span>'
+ '<p class="name" :attr-title="el.name" :text="el.name"></p>'
+ '</li>'
+ '</ul>'
+ '</dt>'
+ '</dl>'
}; };
/** /**
@ -243,7 +241,7 @@ define([
vm.uploadFile.push({name: it.name, progress: '<span class="red">0%(失败,不允许的文件类型)</span>', url: ''}) vm.uploadFile.push({name: it.name, progress: '<span class="red">0%(失败,不允许的文件类型)</span>', url: ''})
continue continue
} }
if(it.size > ME.maxSize){ if(ME.maxSize > 0 && it.size > ME.maxSize){
vm.uploadFile.push({name: it.name, progress: '<span class="red">0%(文件体积过大)</span>', url: ''}) vm.uploadFile.push({name: it.name, progress: '<span class="red">0%(文件体积过大)</span>', url: ''})
continue continue
} }
@ -314,7 +312,7 @@ define([
menubar: false, menubar: false,
shade: false, shade: false,
fixed: true, fixed: true,
offset: [offset.top + 37 - document.documentElement.scrollTop], offset: [offset.top + 37 - ME.doc.scrollTop()],
tab: 2, tab: 2,
attach: '', attach: '',
attachAlt: '', attachAlt: '',
@ -332,7 +330,7 @@ define([
getAttach(vm, function(json){ getAttach(vm, function(json){
if(json){ if(json){
cache[openType] = json.data.list.map(function(it){ cache[openType] = json.data.list.map(function(it){
it.thumb = openType === 'image' ? '<img src="' + it.url + '"/>' : '<em class="attac-icon">&#xe603;</em>' it.thumb = openType === 'image' ? '<img src="' + it.url + '"/>' : '<em class="attach-icon">&#xe73e;</em>'
return it return it
}) })
lvm.attachList = json.data.list lvm.attachList = json.data.list

62
js/lib/meditor/addon/attach.scss Normal file
View File

@ -0,0 +1,62 @@
@charset "UTF-8";
/**
*
* @authors yutent (yutent@doui.cc)
* @date 2017-04-20 19:13:24
*
*/
.do-meditor-attach {width:630px;height:auto;background:#f7f7f7;cursor:default;
.tab-box {width:100%;height:50px;line-height:49px;border-bottom:1px solid #e2e2e2;text-align:center;
.item {position:relative;float:left;width:100px;height:49px;border-right:1px solid #ddd;cursor:pointer;}
.item.active {background:#fff;}
.item.active::after {position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:#fff;content:""}
a.action-close {top:5px;width:40px;height:40px;line-height:40px;font-size:20px;}
a.action-close:hover {line-height:40px;border:0;}
}
.cont-box {position:relative;width:100%;height:auto;min-height:200px;background:#fff;
.remote,
.local {position:relative;width:60%;height:auto;margin:0 auto;padding:15px 0 30px;}
.local {width:96%;}
.hide {display:none;}
.section {display:block;width:100%;height:auto;margin:15px 0;line-height:35px;
&.input {line-height:33px;border:1px solid #e9e9e9;}
.label {float: left;width:30%;text-align:center;background:#f7f7f7;}
.txt {float: left;width:70%;height:33px;padding:0 8px;border:0;border-left:1px solid #e9e9e9;background:#fff;color:#666;}
.submit {float:right;width:30%;height:35px;background:#ddd;color:#666;text-align:center;}
}
.select-file {width:100%;height:35px;line-height:33px}
.select-file span.file {float:left;width:100px;height:35px;border:1px solid #ddd;background:#f7f7f7;color:#666;text-align:center;cursor:pointer;}
.select-file span.tips {display:inline-block;padding:0 10px;line-height:35px;color:#666;}
.upload-box {width:100%;height:auto;min-height:190px;margin:10px 0;border:1px solid #e2e2e2;}
.upload-box .tr {width:100%;height:35px;line-height:35px;text-align:center;}
.upload-box .tr:hover {background:#fafafa}
.upload-box .thead {line-height:34px;border-bottom:1px solid #e2e2e2;background:#f7f7f7;}
.upload-box .td {float:left;}
.upload-box .td.name {width:45%;}
.upload-box .td.progress {width:40%;}
.upload-box .td.option {width:15%;}
.upload-box .td.option a {display:inline-block;padding:3px 5px;line-height:13px;border:1px solid #e2e2e2;background:#f7f7f7;color:#666;}
.upload-box .td .red {color:#f30;}
.manager {overflow:hidden;overflow-y:auto;width:100%;height:320px;padding:10px;}
.manager .item {float:left;width:22%;height:130px;margin:10px 1.5%;padding:5px;}
.manager .item:hover {background:#f7f7f7;}
.manager .thumb {display:block;width:100%;height:100px;}
.manager .name {overflow:hidden;height:20px;line-height:30px; text-align:center;}
.manager img {width:100%;height:100%;}
.manager .attach-icon {display:inline-block;width:100%;height:100px;text-align:center;font:50px/100px "ui font" !important;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
}
}

48
js/lib/meditor/addon/base.js
View File

@ -42,8 +42,8 @@ define(['lib/layer/base'], function(){
ME.insert(vm.$editor, wrap, true) ME.insert(vm.$editor, wrap, true)
layer.close(h1ID) layer.close(h1ID)
}, },
offset: [offset.top + 37 - document.documentElement.scrollTop, 'auto', 'auto', offset.left - document.documentElement.scrollLeft], offset: [offset.top + 37 - ME.doc.scrollTop(), 'auto', 'auto', offset.left - ME.doc.scrollLeft()],
content: '<ul class="do-meditor-h1 do-fn-noselect meditor-font">' content: '<ul class="do-meditor-h1 do-fn-noselect do-meditor-font">'
+ '<li :click="$insert(1)" class="h1">一级标题</li>' + '<li :click="$insert(1)" class="h1">一级标题</li>'
+ '<li :click="$insert(2)" class="h2">二级标题</li>' + '<li :click="$insert(2)" class="h2">二级标题</li>'
+ '<li :click="$insert(3)" class="h3">三级标题</li>' + '<li :click="$insert(3)" class="h3">三级标题</li>'
@ -121,13 +121,13 @@ define(['lib/layer/base'], function(){
ME.insert(vm.$editor, val, false) ME.insert(vm.$editor, val, false)
layer.close(layid) layer.close(layid)
}, },
offset: [offset.top + 37 - document.documentElement.scrollTop, 'auto', 'auto', offset.left - document.documentElement.scrollLeft], offset: [offset.top + 37 - ME.doc.scrollTop(), 'auto', 'auto', offset.left - ME.doc.scrollLeft()],
content: '<div class="do-meditor-common meditor-font">' content: '<div class="do-meditor-common do-meditor-font">'
+ '<section><span class="label">链接文字</span>' + '<section class="input"><span class="label">链接文字</span>'
+ '<input class="input" :duplex="linkName" />' + '<input class="txt" :duplex="linkName" />'
+ '</section>' + '</section>'
+ '<section><span class="label">链接地址</span>' + '<section class="input"><span class="label">链接地址</span>'
+ '<input class="input" :duplex="link"/>' + '<input class="txt" :duplex="link"/>'
+ '</section>' + '</section>'
+ '<section>' + '<section>'
+ '<label><input name="link" type="radio" class="radio" :duplex-number="linkTarget" value="1"/> 新窗口打开</label>' + '<label><input name="link" type="radio" class="radio" :duplex-number="linkTarget" value="1"/> 新窗口打开</label>'
@ -151,7 +151,7 @@ define(['lib/layer/base'], function(){
fixed: true, fixed: true,
shadeClose: true, shadeClose: true,
arr: getOrderArr(36), arr: getOrderArr(36),
offset: [offset.top + 37 - document.documentElement.scrollTop, 'auto', 'auto', offset.left - document.documentElement.scrollLeft], offset: [offset.top + 37 - ME.doc.scrollTop(), 'auto', 'auto', offset.left - ME.doc.scrollLeft()],
content: '<ul class="do-meditor-face">' content: '<ul class="do-meditor-face">'
+ '<li class="item" :repeat="arr" ><img :attr-src="ME.path + \'/addon/face/\' + el + \'.gif\'" :click="$insert(this.src)" /></li>' + '<li class="item" :repeat="arr" ><img :attr-src="ME.path + \'/addon/face/\' + el + \'.gif\'" :click="$insert(this.src)" /></li>'
+ '</ul>', + '</ul>',
@ -168,7 +168,7 @@ define(['lib/layer/base'], function(){
title: '0行 x 0列', title: '0行 x 0列',
fixed: true, fixed: true,
shadeClose: true, shadeClose: true,
offset: [offset.top + 37 - document.documentElement.scrollTop, 'auto', 'auto', offset.left - document.documentElement.scrollLeft], offset: [offset.top + 37 - ME.doc.scrollTop(), 'auto', 'auto', offset.left - ME.doc.scrollLeft()],
matrix: objArr(10).map(function(){return objArr(10)}), matrix: objArr(10).map(function(){return objArr(10)}),
content: '<ul class="do-meditor-table">' content: '<ul class="do-meditor-table">'
+ '<li :repeat="matrix"><span :repeat-o="el" :class="{active: o.v}" :data="{x: $index, y: $outer.$index}"></span></li>' + '<li :repeat="matrix"><span :repeat-o="el" :class="{active: o.v}" :data="{x: $index, y: $outer.$index}"></span></li>'
@ -239,13 +239,13 @@ define(['lib/layer/base'], function(){
ME.insert(vm.$editor, val, false) ME.insert(vm.$editor, val, false)
layer.close(layid) layer.close(layid)
}, },
offset: [offset.top + 37 - document.documentElement.scrollTop, 'auto', 'auto', offset.left - document.documentElement.scrollLeft], offset: [offset.top + 37 - ME.doc.scrollTop(), 'auto', 'auto', offset.left - ME.doc.scrollLeft()],
content: '<div class="do-meditor-common meditor-font">' content: '<div class="do-meditor-common do-meditor-font">'
+ '<section><span class="label">图片描述</span>' + '<section class="input"><span class="label">图片描述</span>'
+ '<input class="input" :duplex="imgAlt" />' + '<input class="txt" :duplex="imgAlt" />'
+ '</section>' + '</section>'
+ '<section><span class="label">图片地址</span>' + '<section class="input"><span class="label">图片地址</span>'
+ '<input class="input" :duplex="img"/>' + '<input class="txt" :duplex="img"/>'
+ '</section>' + '</section>'
+ '<section>' + '<section>'
+ '<a href="javascript:;" class="submit" :click="$confirm">确定</a>' + '<a href="javascript:;" class="submit" :click="$confirm">确定</a>'
@ -257,8 +257,10 @@ define(['lib/layer/base'], function(){
this.link(elem, vm, false) this.link(elem, vm, false)
}, },
inlinecode: function(elem, vm){ inlinecode: function(elem, vm){
var wrap = ME.selection(vm.$editor) || '在此输入文本' var wrap = ME.selection(vm.$editor) || '在此输入文本',
wrap = '`' + wrap + '`' wraped = trim(wrap, '`');
wrap = wrap === wraped ? ('`' + wrap + '`') : wraped
ME.insert(vm.$editor, wrap, true) ME.insert(vm.$editor, wrap, true)
}, },
blockcode: function(elem, vm){ blockcode: function(elem, vm){
@ -310,8 +312,8 @@ define(['lib/layer/base'], function(){
ME.insert(vm.$editor, val, false) ME.insert(vm.$editor, val, false)
layer.close(layid) layer.close(layid)
}, },
content: '<div class="do-meditor-codeblock meditor-font">' content: '<div class="do-meditor-codeblock do-meditor-font">'
+ '<section><span class="label">语言类型</span>' + '<section class="do-fn-cl"><span class="label">语言类型</span>'
+ '<select :duplex="lang">' + '<select :duplex="lang">'
+ '<option :repeat="$lang" :attr-value="el.id">{{el.name || el.id}}</option>' + '<option :repeat="$lang" :attr-value="el.id">{{el.name || el.id}}</option>'
+ '</select>' + '</select>'
@ -319,7 +321,7 @@ define(['lib/layer/base'], function(){
+ '<section>' + '<section>'
+ '<textarea :duplex="code" placeholder="在这里输入/粘贴代码"></textarea>' + '<textarea :duplex="code" placeholder="在这里输入/粘贴代码"></textarea>'
+ '</section>' + '</section>'
+ '<section>' + '<section class="do-fn-cl">'
+ '<a href="javascript:;" class="submit" :click="$confirm">确定</a>' + '<a href="javascript:;" class="submit" :click="$confirm">确定</a>'
+ '</section>' + '</section>'
+ '</div>' + '</div>'
@ -340,8 +342,8 @@ define(['lib/layer/base'], function(){
layer.open({ layer.open({
type: 7, type: 7,
title: '关于编辑器', title: '关于编辑器',
offset: [offset.top + 37 - document.documentElement.scrollTop], offset: [offset.top + 37 - ME.doc.scrollTop()],
content: '<div class="do-meditor-about meditor-font">' content: '<div class="do-meditor-about do-meditor-font">'
+ '<pre>' + '<pre>'
+ ' __ __ _____ _ _ _\n' + ' __ __ _____ _ _ _\n'
+ '| \\/ | ____|__| (_) |_ ___ _ __\n' + '| \\/ | ____|__| (_) |_ ___ _ __\n'

42
js/lib/meditor/main.js
View File

@ -22,7 +22,7 @@ define([
}) })
var editorVM = [] var editorVM = []
yua.ui.meditor = '0.0.1' yua.ui.meditor = '1.0.0'
//存放编辑器公共静态资源 //存放编辑器公共静态资源
window.ME = { window.ME = {
version: yua.ui.meditor, version: yua.ui.meditor,
@ -141,7 +141,7 @@ define([
return vm.$htmlTxt return vm.$htmlTxt
}, },
setVal: function(txt){ setVal: function(txt){
vm.plainTxt = txt vm.plainTxt = txt || ''
}, },
show: function(){ show: function(){
vm.editorVisible = true vm.editorVisible = true
@ -152,7 +152,8 @@ define([
} }
} }
return null return null
} },
doc: yua(document)
} }
//获取真实的引用路径,避免因为不同的目录结构导致加载失败的情况 //获取真实的引用路径,避免因为不同的目录结构导致加载失败的情况
for(var i in yua.modules){ for(var i in yua.modules){
@ -224,7 +225,10 @@ define([
return new RegExp(exp, 'gi') return new RegExp(exp, 'gi')
} }
function html2md(str){ function html2md(str){
str = decodeURIComponent(str).replace(/\t/g, ' ').replace(/<meta [^>]*>/, '') try{
str = decodeURIComponent(str)
}catch(err){}
str = str.replace(/\t/g, ' ').replace(/<meta [^>]*>/, '')
for(var i in elems){ for(var i in elems){
var cb = elems[i], var cb = elems[i],
@ -294,7 +298,7 @@ define([
function tool(name){ function tool(name){
name = (name + '').trim().toLowerCase() name = (name + '').trim().toLowerCase()
name = '|' === name ? 'pipe' : name name = '|' === name ? 'pipe' : name
return '<span title="' + ME.toolbar[name] + '" class="edicon icon-' + name+ '" ' return '<span title="' + ME.toolbar[name] + '" class="icon-' + name+ '" '
+ (name !== 'pipe' ? (':click="$onToolbarClick(\'' + name + '\')"') : '') + (name !== 'pipe' ? (':click="$onToolbarClick(\'' + name + '\')"') : '')
+ '></span>' + '></span>'
} }
@ -302,14 +306,11 @@ define([
yua.component('meditor', { yua.component('meditor', {
$template: '<div class="do-meditor meditor-font" ' $template: '<div class="do-meditor do-meditor-font" :visible="editorVisible"'
+ ':visible="editorVisible" ' + ' :class="{fullscreen: fullscreen, preview: preview}">'
+ ':class="{fullscreen: fullscreen, preview: preview}">' + '<div class="tool-bar do-ui-font do-fn-noselect">{toolbar}</div>'
+ '<div class="tool-bar do-fn-noselect">{toolbar}</div>' + '<textarea class="editor-body" spellcheck="false" :duplex="plainTxt" :attr="{disabled: disabled}" :on-paste="$paste($event)"></textarea>'
+ '<div class="editor-body">' + '<content class="md-preview do-marked-theme" :visible="preview" :html="htmlTxt"></content>'
+ '<textarea spellcheck="false" :duplex="plainTxt" :attr="{disabled: disabled}" :on-paste="$paste($event)" id="{uuid}"></textarea>'
+ '</div>'
+ '<content class="md-preview" :visible="preview" :html="htmlTxt"></content>'
+ '</div>', + '</div>',
$$template: function(txt){ $$template: function(txt){
@ -335,7 +336,6 @@ define([
return base return base
}, },
$init: function(vm){ $init: function(vm){
vm.$watch('plainTxt', function(val){ vm.$watch('plainTxt', function(val){
vm.$compile() vm.$compile()
//只有开启实时预览,才会赋值给htmlTxt //只有开启实时预览,才会赋值给htmlTxt
@ -368,8 +368,9 @@ define([
vm.plainTxt = this.value vm.plainTxt = this.value
} }
}, },
$ready: function(vm){ $ready: function(vm, elem){
vm.$editor = document.querySelector('#' + vm.$id)
vm.$editor = elem.children[1]
editorVM.push(vm) editorVM.push(vm)
//自动加载额外的插件 //自动加载额外的插件
@ -407,9 +408,11 @@ define([
$paste: yua.noop, $paste: yua.noop,
$compile: function(){ $compile: function(){
var txt = this.plainTxt.trim() var txt = this.plainTxt.trim()
txt = txt.replace(/<script([^>]*?)>/g, '&lt;script$1&gt;')
.replace(/<\/script>/g, '&lt;/script&gt;') if(this.$safelyCompile){
txt = txt.replace(/<script([^>]*?)>/g, '&lt;script$1&gt;')
.replace(/<\/script>/g, '&lt;/script&gt;')
}
//只解析,不渲染 //只解析,不渲染
this.$htmlTxt = marked(txt) this.$htmlTxt = marked(txt)
}, },
@ -417,6 +420,7 @@ define([
$onSuccess: yua.noop, $onSuccess: yua.noop,
$onUpdate: yua.noop, $onUpdate: yua.noop,
$onFullscreen: yua.noop, $onFullscreen: yua.noop,
$safelyCompile: true,
disabled: false, //禁用编辑器 disabled: false, //禁用编辑器
fullscreen: false, //是否全屏 fullscreen: false, //是否全屏
preview: false, //是否显示预览 preview: false, //是否显示预览

BIN
js/lib/meditor/skin/iconfont.eot
View File

Binary file not shown.

BIN
js/lib/meditor/skin/iconfont.ttf
View File

Binary file not shown.

155
js/lib/meditor/skin/main.css
View File

File diff suppressed because one or more lines are too long

133
js/lib/meditor/skin/main.scss Normal file
View File

@ -0,0 +1,133 @@
@charset "UTF-8";
/**
*
* @authors yutent (yutent@doui.cc)
* @date 2017-04-17 16:43:22
*
*/
@import "../../../../css/var.scss";
::-webkit-scrollbar {width:5px;height:5px;background:#ebeeec;}
::-webkit-scrollbar:hover {background:rgba(0,0,0,.05);}
::-webkit-scrollbar-button {display:none;}
::-webkit-scrollbar-thumb {background:nth($ct, 1);}
::-webkit-scrollbar-thumb:hover {background:nth($ct, 3);}
.do-meditor {position:relative;width:100%;height:100%;min-height:180px;padding-top:43px;border:1px solid #ddd;background:#fff;color:#666;}
.do-meditor-font {font-family:"PingFang SC","Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft YaHei",sans-serif;}
/* 关于编辑器模块*/
.do-meditor-about {width:400px;padding:10px 20px;
pre {width:100%;padding-bottom:15px;line-height:1;font-size:14px;}
a {color:#049789}
p {margin:0 auto 5px;}
}
/*表格模块*/
.do-meditor-table {width:270px;height:270px;padding:10px;
li {width:100%;height:25px;
span {float:left;width:25px;height:25px;border:2px solid #fff;background:#f2f2f2;}
span.active {background:rgba(4,151,137,.2);}
}
}
/*表情模块*/
.do-meditor-face {float:left;;width:241px;height:241px;margin:10px;border-top:1px solid #e2e2e2;border-left:1px solid #e2e2e2;
li {float:left;width:40px;height:40px;padding:8px;border:1px solid #e2e2e2;border-top:0;border-left:0}
li img {width:100%;@include ts();}
li:hover img {-webkit-transform:scale(3);-moz-transform:scale(3);-ms-transform:scale(3);transform:scale(3);}
}
/*段落模块*/
.do-meditor-h1 {width:150px;height:auto;padding:5px 0;
li {width:100%;height:auto;padding:0 10px;line-height:1.5;font-size:18px;cursor:default;}
li:hover {background:#f2f2f2;}
li::before {font-family:"ui font" !important;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
li.h1 {font-size:23px;}
li.h2 {font-size:21px;}
li.h1::before {content:"\e62b "}
li.h2::before {content:"\e625 "}
li.h3::before {content:"\e626 "}
li.h4::before {content:"\e629 "}
li.h5::before {content:"\e62a "}
li.h6::before {content:"\e624 "}
}
/*通用输入模块, 链接/图片插入/文件插入/代码块插入*/
.do-meditor-common {width:360px;height:auto;padding:15px 20px;
section {width:100%;height: 35px;margin:10px 0;line-height:35px;
&.input {line-height:33px;border:1px solid #e9e9e9;}
.label {float: left;width:30%;text-align:center;background:#f7f7f7;}
label {float: left;width:50%;}
.txt {float: left;width:70%;height:33px;padding:0 8px;border:0;border-left:1px solid #e9e9e9;background:#fff;color:#666;}
.submit {float:right;width:30%;height:35px;background:#ddd;color:#666;text-align:center;}
}
}
.do-meditor-codeblock {width:780px;height:auto;padding:15px 20px;background:#fafafa;
section {display:block;width:100%;height:auto;margin:10px 0;line-height:35px;
.label {float: left;width:80px;}
select {float:left;width:200px;height:35px;padding:0 30px 0 10px;border:0;border-bottom:1px solid #e7e7e7;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAMAAABV0m3JAAAADFBMVEUAAAD///+Pj4+JiYkxcGihAAAABHRSTlMAABBwqVQF9wAAADNJREFUeNqlzjEOACAMw8DQ/v/PSE5FFhaEx5usdekBuzRVH0RtCqJYELUFrVjQigX/5jdvzgDh9izlMQAAAABJRU5ErkJggg==) no-repeat right 8px;color:nth($cgr, 1);outline:none;-webkit-appearance:none;-moz-appearance: none;@include ts;
&::-ms-expand {display:none;}
&:focus {border-color:nth($ct, 1);}
}
textarea {width:100%;height:300px;padding:5px 10px;border:1px solid #ddd;background:#fff;resize:none;outline:none;}
.submit {float:right;width:80px;height:35px;background:#ddd;color:#666;text-align:center;}
}
}
.do-meditor {
.tool-bar {overflow:hidden;position:absolute;top:0;left:0;z-index:99;width:100%;height:43px;padding:5px 10px;border-bottom:1px solid #ddd;background:#f5f5f5;color:#666;
span {display:inline-block;width:30px;height:32px;line-height:32px;text-align:center;font-size:20px;}
span:hover {background:#e5e5e5;}
.icon-pipe {width:20px;}
.icon-pipe:hover {background:none;}
.icon-pipe::before {content:"\e62c"}
.icon-h1::before {content:"\e62b"}
.icon-bold::before {content:"\e62f"}
.icon-italic::before {content:"\e639"}
.icon-through::before {content:"\e619"}
.icon-link::before {content:"\e61c"}
.icon-inlinecode::before {content:"\e63a"}
.icon-blockcode::before {content:"\e632"}
.icon-quote::before {content:"\e61b"}
.icon-hr::before {content:"\e614"}
.icon-time::before {content:"\e636"}
.icon-face::before {content:"\e630"}
.icon-image::before {content:"\e637"}
.icon-file::before {content:"\e618"}
.icon-preview::before {content:"\e61f"}
.icon-fullscreen::before {content:"\e621"}
.icon-table::before {content:"\e617"}
.icon-ordered::before {content:"\e638"}
.icon-unordered::before {content:"\e633"}
.icon-about::before {content:"\e700"}
}
.editor-body{overflow:hidden;overflow-y:auto;float:left;width:100%;height:100%;padding:5px 5px 50px;border:0;outline:none;resize:none;color:#666;background:#fff;}
.md-preview {float:right;overflow:hidden;overflow-y:auto;display:block;width:50%;height:100%;padding:10px 10px 50px;line-height:2;border-left:1px solid #ddd;color:#666;font-size:14px;background:#fff;}
/*全屏模式*/
&.fullscreen {position:fixed;left:0;top:0;z-index:999;}
&.preview .editor-body {width:50%}
}

2
js/lib/pages/main.css
View File

@ -1 +1 @@
.do-pages{height:auto;text-align:center;font-size:13px}.do-pages a{display:inline-block;width:auto;min-width:40px;height:40px;line-height:40px;color:#34495e;text-decoration:none;cursor:pointer}.do-pages a.curr,.do-pages a.disabled{cursor:default}.do-pages.skin-1{width:100%}.do-pages.skin-1 a.normal,.do-pages.skin-1 a.disabled,.do-pages.skin-1 a.curr{padding:0 10px;margin:0 3px}.do-pages.skin-1 a.curr{font-weight:bold;font-size:15px}.do-pages.skin-1 a.disabled{min-width:0;padding:0}.do-pages.skin-1 .input-box,.do-pages.skin-1 .input-box span,.do-pages.skin-1 .input-box input{display:inline-block}.do-pages.skin-1 .input-box input{width:25px;height:20px;padding:0 3px;background:#fff;border:1px solid #ddd}.do-pages.skin-1 .input-box a.normal{height:30px;line-height:30px}.do-pages.skin-2{float:right;width:auto}.do-pages.skin-2 a.normal,.do-pages.skin-2 a.disabled,.do-pages.skin-2 a.curr{float:left;margin:0;padding:0 5px;color:#fff}.do-pages.skin-2 a.disabled{display:none}.do-pages.skin-2 .input-box{display:none}.do-pages.plain a.normal{background:#e7e8eb}.do-pages.plain a.normal:hover{background:#ecf0f1}.do-pages.skin-2.plain a.curr,.do-pages.plain a.normal:active{background:#bdc3c7}.do-pages.grey a.normal{background:#34495e;color:#fff}.do-pages.grey a.normal:hover{background:#5d6d7e}.do-pages.skin-2.grey a.curr,.do-pages.grey a.normal:active{background:#2c3e50}.do-pages.red a.normal{background:#e74c3c;color:#fff}.do-pages.red a.normal:hover{background:#ec7063}.do-pages.skin-2.red a.curr,.do-pages.red a.normal:active{background:#c54133}.do-pages.orange a.normal{background:#f39c12;color:#fff}.do-pages.orange a.normal:hover{background:#fbbb56}.do-pages.skin-2.orange a.curr,.do-pages.orange a.normal:active{background:#e67e22}.do-pages.green a.normal{background:#1abc9c;color:#fff}.do-pages.green a.normal:hover{background:#48c9b0}.do-pages.skin-2.green a.curr,.do-pages.green a.normal:active{background:#16a085}.do-pages.blue a.normal{background:#3498db;color:#fff}.do-pages.blue a.normal:hover{background:#5dade2}.do-pages.skin-2.blue a.curr,.do-pages.blue a.normal:active{background:#2c81ba} .do-pages{height:auto;text-align:center;font-size:13px}.do-pages a{display:inline-block;width:auto;min-width:40px;height:40px;line-height:40px;color:#546e7a;text-decoration:none;cursor:pointer}.do-pages a.curr,.do-pages a.disabled{cursor:default}.do-pages.skin-1{width:100%}.do-pages.skin-1 a.normal,.do-pages.skin-1 a.disabled,.do-pages.skin-1 a.curr{padding:0 10px;margin:0 3px}.do-pages.skin-1 a.curr{font-weight:bold;font-size:15px}.do-pages.skin-1 a.disabled{min-width:0;padding:0}.do-pages.skin-1 .input-box,.do-pages.skin-1 .input-box span,.do-pages.skin-1 .input-box input{display:inline-block}.do-pages.skin-1 .input-box input{width:25px;height:20px;padding:0 3px;background:#fff;border:1px solid #ddd}.do-pages.skin-1 .input-box a.normal{height:30px;line-height:30px}.do-pages.skin-2{float:right;width:auto}.do-pages.skin-2 a.normal,.do-pages.skin-2 a.disabled,.do-pages.skin-2 a.curr{float:left;margin:0;padding:0 5px;color:#fff}.do-pages.skin-2 a.disabled{display:none}.do-pages.skin-2 .input-box{display:none}.do-pages.plain a.normal{background:#e7e8eb}.do-pages.plain a.normal:hover{background:#ecf0f1}.do-pages.skin-2.plain a.curr,.do-pages.plain a.normal:active{background:#bdc3c7}.do-pages.grey a.normal{background:#546e7a;color:#fff}.do-pages.grey a.normal:hover{background:#607d8b}.do-pages.skin-2.grey a.curr,.do-pages.grey a.normal:active{background:#37474f}.do-pages.red a.normal{background:#ff5722;color:#fff}.do-pages.red a.normal:hover{background:#ff7043}.do-pages.skin-2.red a.curr,.do-pages.red a.normal:active{background:#e64a19}.do-pages.orange a.normal{background:#ff9800;color:#fff}.do-pages.orange a.normal:hover{background:#ffa726}.do-pages.skin-2.orange a.curr,.do-pages.orange a.normal:active{background:#f57c00}.do-pages.green a.normal{background:#4caf50;color:#fff}.do-pages.green a.normal:hover{background:#81c784}.do-pages.skin-2.green a.curr,.do-pages.green a.normal:active{background:#388e3c}.do-pages.teal a.normal{background:#1abc9c;color:#fff}.do-pages.teal a.normal:hover{background:#48c9b0}.do-pages.skin-2.teal a.curr,.do-pages.teal a.normal:active{background:#16a085}.do-pages.blue a.normal{background:#2196f3;color:#fff}.do-pages.blue a.normal:hover{background:#64b5f6}.do-pages.skin-2.blue a.curr,.do-pages.blue a.normal:active{background:#1976d2}.do-pages.purple a.normal{background:#651fff;color:#fff}.do-pages.purple a.normal:hover{background:#7c4dff}.do-pages.skin-2.purple a.curr,.do-pages.purple a.normal:active{background:#6200ea}

10
js/lib/pages/main.scss
View File

@ -67,11 +67,21 @@
&.skin-2.green a.curr, &.skin-2.green a.curr,
&.green a.normal:active {background:nth($cg, 3)} &.green a.normal:active {background:nth($cg, 3)}
&.teal a.normal {background:nth($ct, 1);color: #fff;}
&.teal a.normal:hover {background:nth($ct, 2)}
&.skin-2.teal a.curr,
&.teal a.normal:active {background:nth($ct, 3)}
&.blue a.normal {background:nth($cb, 1);color: #fff;} &.blue a.normal {background:nth($cb, 1);color: #fff;}
&.blue a.normal:hover {background:nth($cb, 2)} &.blue a.normal:hover {background:nth($cb, 2)}
&.skin-2.blue a.curr, &.skin-2.blue a.curr,
&.blue a.normal:active {background:nth($cb, 3)} &.blue a.normal:active {background:nth($cb, 3)}
&.purple a.normal {background:nth($cpp, 1);color: #fff;}
&.purple a.normal:hover {background:nth($cpp, 2)}
&.skin-2.purple a.curr,
&.purple a.normal:active {background:nth($cpp, 3)}
} }