This commit is contained in:
杜恒
2021-04-22 17:53:03 +08:00
parent 5a0250e586
commit 6ca9359887
16 changed files with 200 additions and 62 deletions

File diff suppressed because one or more lines are too long

View File

@@ -668,21 +668,18 @@ body.fullscreen {
}
}
.joe_detail__article-card_default {
display: block;
margin: 0 auto;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
border: 1px solid #ebeef5;
background: #fff;
> .title {
display: block;
padding: 8px 10px;
border-bottom: 1px solid #ebeef5;
color: #303133;
user-select: none;
}
> .content {
display: block;
padding: 10px;
color: #606266;
*:last-child {
@@ -849,7 +846,7 @@ body.fullscreen {
border-left-color: #2bde3f;
background: #2bde3f20;
color: #2bde3f;
.icon {
> .icon {
background: #2bde3f;
&::before {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MDE1ODgxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQxMTU3IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00MTMuMjU1IDY5MS40MzZjMTguNTQ2LTE3LjQ1IDMzLjE4Ni0zMC41NTIgNDcuMDc2LTQ0LjQyNyAxMzMuMDQtMTMyLjgxIDI2Ni4xODItMjY1LjUxMyAzOTguNzI0LTM5OC44MzcgMzIuMDc0LTMyLjI0NCA2NS42NjYtNDguNDUyIDEwNC45OTctMTQuNzUyIDMyLjk4MyAyOC4yNDEgMjguMDQ5IDY3LjQ2NS0xMi45MiAxMDguNTc0LTE1Ny4xNzUgMTU3LjcxLTMxNC41ODcgMzE1LjE4NC00NzIuMjkyIDQ3Mi4zOC00OS4zODkgNDkuMjI1LTc2LjMwOCA0OS41NDYtMTI0LjcxNiAxLjYwNy04NS41OS04NC43NjUtMTcwLjEzNS0xNzAuNTc5LTI1NS44LTI1NS4yNTctMzIuMjkyLTMxLjkyMy00OC42OC02NS41MTYtMTQuOTk3LTEwNC45NzYgMjguMTctMzIuOTk1IDY3LjU1Ny0yOC4xNTUgMTA4LjU1OCAxMi42NzUgNzMuNDI3IDczLjE2IDE0Ni4wNzkgMTQ3LjA5IDIyMS4zNyAyMjMuMDEzeiIgcC1pZD0iNDExNTgiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=);
@@ -860,7 +857,7 @@ body.fullscreen {
border-left-color: #1d72f3;
background: #1d72f320;
color: #1d72f3;
.icon {
> .icon {
background: #1d72f3;
&::before {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MzM4MjIxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYxNjg0IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik03NjcuOTczOTc1IDExNi4zNDYwODZjMCA2NC4yNTI3MzQtNDEuNjgzMjE0IDExNi4zODg3NS05My4wOTM5MzUgMTE2LjM4ODc1UzU4MS43ODYxMDYgMTgwLjU5ODgyIDU4MS43ODYxMDYgMTE2LjM0NjA4NkM1ODEuNzg2MTA2IDUyLjA5MzM1MiA2MjMuNDY5MzIgMCA2NzQuODgwMDQgMFM3NjcuOTczOTc1IDUyLjA5MzM1MiA3NjcuOTczOTc1IDExNi4zNDYwODZ6TTI1NiA1MDQuMjk0MzY1czcwLjgyMzA2Ni0yODQuNzg1NTIzIDI4Ni43NDgwOS0yNzEuMDQ3NTU1YzIxNS45MjUwMjQgMTMuNjk1MzA0IDY3LjIzOTI0OSAyNjEuNDQ4MDQzLTEzLjI2ODY1OSA1MDEuNjQ5MTY2LTgwLjUwNzkwOCAyNDAuMjAxMTIzIDEwMC4yNjE1NyA3MS40MjAzNjkgMTQ1LjQwMDYwOS03LjU1MTYxNiAwIDAtOTMuMTM2NTk5IDQwNi43NjMzMjMtMzY3LjM0MTMyNyAyNjcuNjc3MDYtMTI4LjU0ODEzMi02NS4yMzQwMTcgMzIuMjU0MzYtMzk4LjA1OTc2NSAxMDMuMTIwMDkyLTU0NS41OTM1OTlDNDgxLjU2NzIgMzAxLjgwODY1OCAzMzYuNjM1OTAxIDM4Ny42MDY5NjMgMjU2IDUwNC4yNTE3MDF6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI2MTY4NSI+PC9wYXRoPjwvc3ZnPg==);
@@ -871,7 +868,7 @@ body.fullscreen {
border-left-color: #ffc007;
background: #ffc00720;
color: #ffc007;
.icon {
> .icon {
background: #ffc007;
&::before {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MTI5NTE1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3NDkyIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00NzkuODE3MTQzIDY2NS42YzEwLjI0IDMwLjcyIDMwLjcyIDUxLjIgNjEuNDQgNTEuMnM1MS4yLTIwLjQ4IDYxLjQ0LTUxLjJsNDAuOTYtNTYzLjJDNjQzLjY1NzE0MyA0MC45NiA1OTIuNDU3MTQzIDAgNTQxLjI1NzE0MyAwIDQ3OS44MTcxNDMgMCA0MzguODU3MTQzIDUxLjIgNDM4Ljg1NzE0MyAxMTIuNjRsNDAuOTYgNTUyLjk2eiBtNjEuNDQgMTUzLjZjLTYxLjQ0IDAtMTAyLjQgNDAuOTYtMTAyLjQgMTAyLjQgMCA2MS40NCA0MC45NiAxMDIuNCAxMDIuNCAxMDIuNCA2MS40NCAwIDEwMi40LTQwLjk2IDEwMi40LTEwMi40IDAtNjEuNDQtNDAuOTYtMTAyLjQtMTAyLjQtMTAyLjR6IiBwLWlkPSI0NzQ5MyIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==);
@@ -882,7 +879,7 @@ body.fullscreen {
border-left-color: #f56c6c;
background: #f56c6c20;
color: #f56c6c;
.icon {
> .icon {
background: #f56c6c;
&::before {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MjAyNDk4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ4OTE1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik0xOTMuOCA4MzAuMmMtMTkuNC0xOS40LTE5LjQtNTEuMyAwLTcwLjdsNTY1LjctNTY1LjdjMTkuNC0xOS40IDUxLjMtMTkuNCA3MC43IDAgMTkuNCAxOS40IDE5LjQgNTEuMyAwIDcwLjdMMjY0LjUgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAweiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iNDg5MTYiPjwvcGF0aD48cGF0aCBkPSJNODMwLjIgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAwTDE5My44IDI2NC41Yy0xOS40LTE5LjQtMTkuNC01MS4zIDAtNzAuNyAxOS40LTE5LjQgNTEuMy0xOS40IDcwLjcgMGw1NjUuNyA1NjUuN2MxOS40IDE5LjQgMTkuNCA1MS4zIDAgNzAuN3oiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjQ4OTE3Ij48L3BhdGg+PC9zdmc+);
@@ -897,7 +894,7 @@ body.fullscreen {
width: 100%;
display: flex;
align-items: center;
.strip {
> .strip {
height: 12px;
border-radius: 6px;
overflow: hidden;
@@ -905,7 +902,7 @@ body.fullscreen {
min-width: 0;
flex: 1;
margin-right: 10px;
.percent {
> .percent {
position: relative;
display: block;
height: 100%;
@@ -925,12 +922,11 @@ body.fullscreen {
}
}
}
.percentage {
> .percentage {
color: #909399;
}
}
.joe_detail__article-callout {
display: block;
padding: 12px;
border: 1px solid #ebeef5;
border-left-width: 4px;
@@ -941,20 +937,19 @@ body.fullscreen {
}
}
.joe_detail__article-tabs {
display: block;
width: 100%;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #ebeef5;
border-radius: 4px;
.heads {
> .heads {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
display: flex;
background: #f2f6fc;
.item {
> .item {
position: relative;
padding: 0 15px;
line-height: 40px;
@@ -985,8 +980,8 @@ body.fullscreen {
}
}
}
.bodys {
.item {
> .bodys {
> .item {
padding: 15px;
*:last-child {
margin-bottom: 0 !important;
@@ -999,7 +994,7 @@ body.fullscreen {
border: 1px solid #ebeef5;
border-radius: 4px;
overflow: hidden;
.item {
> .item {
padding: 12px 15px;
border-bottom: 1px solid #ebeef5;
&:last-child {
@@ -1010,6 +1005,40 @@ body.fullscreen {
}
}
}
.joe_detail__article-timeline {
> .item {
position: relative;
padding-bottom: 15px;
> .tail {
position: absolute;
top: 0;
left: 7px;
height: 100%;
border-left: 1px solid #e4e7ed;
}
> .circle {
position: absolute;
width: 13px;
height: 13px;
background-color: #fff;
border-radius: 50%;
border: 1px solid #19be6b;
}
> .content {
padding: 1px 1px 10px 24px;
position: relative;
top: -3px;
*:last-child {
margin-bottom: 0 !important;
}
}
&:last-child {
> .tail {
display: none;
}
}
}
}
@media (max-width: 768px) {
.cm-modal__wrapper {

View File

@@ -730,4 +730,9 @@ export default class JoeAction {
this._replaceSelection(cm, str);
cm.focus();
}
handleTimeline(cm) {
const str = `${this._getLineCh(cm) ? '\n\n' : '\n'}{timeline}\n{timeline-item color="#19be6b"}\n 正式上线\n{/timeline-item}\n{timeline-item color="#ed4014"}\n 删库跑路\n{/timeline-item}\n{/timeline}\n\n`;
this._replaceSelection(cm, str);
cm.focus();
}
}

View File

@@ -34,6 +34,7 @@ export default function createPreviewHtml(str) {
str = str.replace(/{callout([^}]*)}([\s\S]*?){\/callout}/g, '<section style="margin-bottom: 15px"><joe-callout $1><span class="_temp" style="display: none">$2</span></joe-callout></section>');
str = str.replace(/{tabs}([\s\S]*?){\/tabs}/g, '<section style="margin-bottom: 15px"><joe-tabs><span class="_temp" style="display: none">$1</span></joe-tabs></section>');
str = str.replace(/{card-list}([\s\S]*?){\/card-list}/g, '<section style="margin-bottom: 15px"><joe-card-list><span class="_temp" style="display: none">$1</span></joe-card-list></section>');
str = str.replace(/{timeline}([\s\S]*?){\/timeline}/g, '<section><joe-timeline><span class="_temp" style="display: none">$1</span></joe-timeline></section>');
$('.cm-preview-content').html(str);
$('.cm-preview-content p:empty').remove();

View File

@@ -195,6 +195,11 @@ export default [
title: '卡片列表',
innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M359.79 156.52L189.31 330.2a68.454 68.454 0 0 0-19.6 47.95v444.68c0 37.8 30.65 68.45 68.46 68.45h547.66c37.81 0 68.46-30.65 68.46-68.45V200.77c0-37.8-30.65-68.45-68.46-68.45h-.67l-377.19 3.7a68.458 68.458 0 0 0-48.18 20.5zm-48.86-47.95a136.921 136.921 0 0 1 96.37-41l377.19-3.7c.67-.01.67-.01 1.34-.01 75.62 0 136.92 61.29 136.92 136.9v622.06c0 75.61-61.3 136.9-136.92 136.9H238.17c-75.62 0-136.92-61.29-136.92-136.9V378.15c0-35.86 14.08-70.3 39.2-95.89l170.48-173.69z"/><path d="M683.04 353.45v34.12c0 9.42-7.66 17.06-17.1 17.06H358.07c-9.45 0-17.1-7.64-17.1-17.06v-34.12c0-9.42 7.66-17.06 17.1-17.06h307.86c9.45 0 17.11 7.64 17.11 17.06zm0 171.47v34.12c0 9.42-7.66 17.06-17.1 17.06H358.07c-9.45 0-17.1-7.64-17.1-17.06v-34.12c0-9.42 7.66-17.06 17.1-17.06h307.86c9.45 0 17.11 7.64 17.11 17.06zM545.68 695.96v34.12c0 9.42-7.64 17.06-17.06 17.06h-170.6c-9.42 0-17.06-7.64-17.06-17.06v-34.12c0-9.42 7.64-17.06 17.06-17.06h170.6c9.42 0 17.06 7.63 17.06 17.06z"/></svg>'
},
{
type: 'timeline',
title: '时间轴',
innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M365.714 329.143c0-47.543-29.257-87.772-73.143-102.4V36.57C292.571 14.63 277.943 0 256 0s-36.571 14.629-36.571 36.571v190.172c-43.886 14.628-73.143 54.857-73.143 102.4 0 47.543 29.257 87.771 73.143 102.4V588.8c-43.886 14.629-73.143 54.857-73.143 102.4 0 47.543 29.257 87.771 73.143 102.4v193.829c0 21.942 14.628 36.571 36.571 36.571s36.571-14.629 36.571-36.571V797.257c43.886-14.628 73.143-54.857 73.143-102.4 0-47.543-29.257-87.771-73.143-102.4V435.2c43.886-18.286 73.143-58.514 73.143-106.057zM256 731.429c-21.943 0-36.571-14.629-36.571-36.572s14.628-36.571 36.571-36.571 36.571 14.628 36.571 36.571S277.943 731.43 256 731.43zm0-365.715c-21.943 0-36.571-14.628-36.571-36.571S234.057 292.57 256 292.57s36.571 14.629 36.571 36.572-14.628 36.571-36.571 36.571zM768 731.43H475.429c-18.286 0-36.572 14.628-36.572 36.571s14.629 36.571 36.572 36.571H768c18.286 0 36.571-14.628 36.571-36.571S789.943 731.429 768 731.429zm73.143-512H475.429c-18.286 0-36.572 14.628-36.572 36.571s14.629 36.571 36.572 36.571h365.714c18.286 0 36.571-14.628 36.571-36.571s-14.628-36.571-36.571-36.571zM768 438.857c18.286 0 36.571-14.628 36.571-36.571S789.943 365.714 768 365.714H475.429c-18.286 0-36.572 14.629-36.572 36.572s14.629 36.571 36.572 36.571H768zm73.143 146.286H475.429c-18.286 0-36.572 14.628-36.572 36.571s14.629 36.572 36.572 36.572h365.714c18.286 0 36.571-14.629 36.571-36.572s-14.628-36.571-36.571-36.571z"/></svg>'
},
/* --------------------------- 短代码结束 --------------------------- */
{
type: 'clean',

File diff suppressed because one or more lines are too long

View File

@@ -318,6 +318,9 @@ class Joe extends JoeAction {
case 'card-list':
super.handleCardList(this.cm);
break;
case 'timeline':
super.handleTimeline(this.cm);
break;
case 'preview':
el.toggleClass('active');
if (el.hasClass('active')) window.JoeConfig.canPreview = true;