lsc 9 meses atrás
pai
commit
04827c5f65
3 arquivos alterados com 318 adições e 2 exclusões
  1. 305 0
      src/assets/css/markdownCss.css
  2. 12 1
      src/components/courseDetail.vue
  3. 1 1
      src/main.js

+ 305 - 0
src/assets/css/markdownCss.css

@@ -0,0 +1,305 @@
+.vditor-reset ul ul ul {
+    list-style-type: square
+}
+
+.vditor-reset ul ul {
+    list-style-type: circle
+}
+
+.vditor-reset ul {
+    list-style-type: disc
+}
+
+.vditor-reset ol,.vditor-reset ul {
+    padding-left: 2em;
+    margin-top: 0;
+    margin-bottom: 16px
+}
+
+.vditor-reset li+li {
+    margin-top: .25em
+}
+
+.vditor-reset audio {
+    max-width: 100%
+}
+
+.vditor-reset audio:focus {
+    outline: none
+}
+
+.vditor-reset video {
+    max-height: 90vh;
+    max-width: 100%
+}
+
+.vditor-reset img {
+    max-width: 100%
+}
+
+.vditor-reset img.emoji {
+    cursor: auto;
+    max-width: 20px;
+    vertical-align: sub
+}
+
+.vditor-reset h1, .vditor-reset h2 {
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid #eaecef;
+}
+
+.vditor-reset hr {
+    background-color: #eaecef;
+}
+
+.vditor-reset blockquote {
+    color: #6a737d;
+    border-left: .25em solid #eaecef
+}
+
+.vditor-reset iframe {
+    border: 1px solid #d1d5da
+}
+
+.vditor-reset table tr {
+    border-top: 1px solid #c6cbd1;
+    background-color: #fafbfc
+}
+
+.vditor-reset table td, .vditor-reset table th {
+    border: 1px solid #dfe2e5
+}
+
+.vditor-reset table tbody tr:nth-child(2n) {
+    background-color: #fff
+}
+
+.vditor-reset code:not(.hljs):not(.highlight-chroma) {
+    background-color: rgba(27, 31, 35, .05);
+}
+
+.vditor-reset kbd {
+    color: #24292e;
+    background-color: #fafbfc;
+    border: solid 1px #d1d5da;
+    box-shadow: inset 0 -1px 0 #d1d5da;
+}
+
+.vditor-speech {
+    background-color: #f6f8fa;
+    border: 1px solid #d1d5da;
+    color: #586069;
+}
+
+.vditor-speech--current, .vditor-speech:hover {
+    color: #4285f4;
+}
+
+.vditor-linkcard a {
+    background-color: #f6f8fa;
+}
+
+.vditor-linkcard a:visited .vditor-linkcard__abstract {
+    color: rgba(88, 96, 105, 0.36);
+}
+
+.vditor-linkcard__title {
+    color: #24292e;
+}
+
+.vditor-linkcard__abstract {
+    color: #586069;
+}
+
+.vditor-linkcard__site {
+    color: #4285f4;
+}
+
+.vditor-linkcard__image {
+    background-color: rgba(88, 96, 105, 0.36);
+}
+
+
+.vditor-reset h1,.vditor-reset h2,.vditor-reset h3,.vditor-reset h4,.vditor-reset h5,.vditor-reset h6 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25
+}
+
+.vditor-reset h1:hover .vditor-anchor svg,.vditor-reset h2:hover .vditor-anchor svg,.vditor-reset h3:hover .vditor-anchor svg,.vditor-reset h4:hover .vditor-anchor svg,.vditor-reset h5:hover .vditor-anchor svg,.vditor-reset h6:hover .vditor-anchor svg {
+    visibility: visible
+}
+
+.vditor-reset h1 {
+    font-size: 1.75em
+}
+
+.vditor-reset h2 {
+    font-size: 1.55em
+}
+
+.vditor-reset h3 {
+    font-size: 1.38em
+}
+
+.vditor-reset h4 {
+    font-size: 1.25em
+}
+
+.vditor-reset h5 {
+    font-size: 1.13em
+}
+
+.vditor-reset h6 {
+    font-size: 1em
+}
+
+.vditor-reset hr {
+    height: 2px;
+    padding: 0;
+    margin: 24px 0;
+    background-color: #eaecef;
+    border: 0
+}
+
+.vditor-reset p {
+    margin-top: 0;
+    margin-bottom: 16px
+}
+
+.vditor-reset blockquote {
+    padding: 0 1em;
+    color: #6a737d;
+    border-left: .25em solid #eaecef;
+    margin: 0 0 16px 0
+}
+
+.vditor-reset blockquote>:first-child {
+    margin-top: 0
+}
+
+.vditor-reset blockquote>:last-child {
+    margin-bottom: 0
+}
+
+.vditor-reset ins>iframe {
+    border: 0
+}
+
+.vditor-reset iframe {
+    border: 1px solid #d1d5da;
+    max-width: 100%;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box
+}
+
+.vditor-reset iframe.iframe__video {
+    min-width: 80%;
+    min-height: 36vh
+}
+
+.vditor-reset table {
+    border-collapse: collapse;
+    empty-cells: show;
+    margin-bottom: 16px;
+    overflow: auto;
+    border-spacing: 0;
+    display: block;
+    word-break: keep-all;
+    width: 100%
+}
+
+.vditor-reset table tr {
+    background-color: #fafbfc;
+    border-top: 1px solid #c6cbd1
+}
+
+.vditor-reset table td,.vditor-reset table th {
+    padding: 6px 13px;
+    border: 1px solid #dfe2e5;
+    word-break: normal;
+    white-space: nowrap
+}
+
+.vditor-reset table td:first-child:after,.vditor-reset table th:first-child:after {
+    content: "";
+    display: inline-block;
+    vertical-align: top;
+    min-height: 24px
+}
+
+.vditor-reset table th {
+    font-weight: 600
+}
+
+.vditor-reset table tbody tr:nth-child(2n) {
+    background-color: #fff
+}
+
+.vditor-reset code:not(.hljs):not(.highlight-chroma) {
+    padding: .2em .4em;
+    margin: 0;
+    font-size: 85%;
+    border-radius: 3px;
+    font-family: mononoki,Consolas,Liberation Mono,Menlo,Courier,monospace,Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
+    word-break: break-word;
+    background-size: 20px 20px;
+    white-space: pre-wrap
+}
+
+.vditor-reset pre {
+    margin: 1em 0
+}
+
+.vditor-reset pre>code {
+    margin: 0;
+    font-size: 85%;
+    padding: .5em;
+    border-radius: 5px;
+    display: block;
+    overflow: auto;
+    white-space: pre;
+    font-family: mononoki,Consolas,Liberation Mono,Menlo,Courier,monospace,Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
+    background-size: 20px 20px;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==);
+    word-break: normal;
+    word-wrap: normal
+}
+
+.vditor-reset pre:hover div.vditor-copy {
+    display: block
+}
+
+
+.vditor-reset kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    font: 11px Consolas,Liberation Mono,Menlo,Courier,monospace;
+    line-height: 10px;
+    color: #24292e;
+    vertical-align: middle;
+    background-color: #fafbfc;
+    border: 1px solid #d1d5da;
+    border-radius: 3px;
+    -webkit-box-shadow: inset 0 -1px 0 #d1d5da;
+    box-shadow: inset 0 -1px 0 #d1d5da
+}
+
+.vditor-reset summary {
+    cursor: pointer
+}
+
+.vditor-reset summary:focus {
+    outline: none
+}
+
+.vditor-reset svg {
+    height: auto;
+    width: auto;
+    stroke-width: initial
+}
+
+.vditor-reset blockquote:last-child,.vditor-reset hr:last-child,.vditor-reset ol:last-child,.vditor-reset p:last-child,.vditor-reset pre:last-child,.vditor-reset ul:last-child {
+    margin-bottom: 0
+}

+ 12 - 1
src/components/courseDetail.vue

@@ -205,7 +205,7 @@
         <div class="student_body">
           <div class="sLeft" v-if="courseDetail.brief">
             <div class="courseT">课程详情</div>
-            <div class="courseTd" v-html="courseDetail.brief"></div>
+            <div class="courseTd vditor-reset" v-html="MarkdownT(courseDetail.brief)"></div>
           </div>
           <div :class="courseDetail.brief != '' ? 'rightTd' : 'noBRight'">
             <div v-if="tType == 1 || tType == 4" class="checkBox">
@@ -1090,6 +1090,8 @@ import JSZip from "jszip";
 import FileSaver from "file-saver";
 import scoreZong from './scoreZong/get.vue'
 
+import MarkdownIt from "markdown-it";
+
 var OpenCC = require("opencc-js");
 let converter = OpenCC.Converter({
 		from:'hk',
@@ -1187,6 +1189,15 @@ export default {
       tools: JSON.parse(converter(JSON.stringify(tools))),
     };
   },
+  computed: {
+    MarkdownT() {
+      return function (c) {
+        let md = new MarkdownIt();
+        return c
+          ? md.render(c) : "";
+      };
+    },
+  },
   methods: {
 		insertMemorandum(_html,tcid=""){//保存行为操作
 			//variable

+ 1 - 1
src/main.js

@@ -18,7 +18,7 @@ import VueCookies from 'vue-cookies'
 import hevueImgPreview from './components/tools/hevue-img-preview'
 import drag from './components/directive/el-drag-dialog';
 import VueAudio from 'vue-audio-better'
-
+import './assets/css/markdownCss.css'
 
 Vue.use(VideoPlayer).use(VueAudio).use(VueCookies).use(hevueImgPreview, {
     clickMaskCLose: true