dvcp_v2_webapp/ui/packages/basic/AiArticle.vue

<template>
  <div class="ai-article">
    <div v-html="value"></div>
  </div>
</template>

<script>
  export default {
    name: 'AiArticle',

    props: {
      value: {
        type: String
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ai-article {
    width: 100%;
    line-height: 1.75;
    font-weight: 400;
    color: #333;
    font-size: 14px;
    text-align: justify;
    overflow-x: auto;
    word-break: break-word;

    :deep( h1 ){
      margin: 1.3rem 0;
      line-height: 1.2
    }

    :deep( p ){
      line-height: 2.27rem
    }

    :deep( hr ){
      border: none;
      border-top: 1px solid #ddd;
      margin-top: 2.7rem;
      margin-bottom: 2.7rem
    }

    :deep( img:not(.equation)), :deep( iframe), :deep( embed), :deep( video ){
      display: block;
      margin: 18px auto;
      max-width: 100% !important;
    }

    :deep( img.equation ){
      margin: 0 .1em;
      max-width: 100% !important;
      vertical-align: middle
    }

    :deep( figure ){
      margin: 2.7rem auto;
      text-align: center
    }

    :deep( img:not(.equation) ){
      cursor: zoom-in
    }

    :deep( figure figcaption ){
      text-align: center;
      font-size: 1rem;
      line-height: 2.7rem;
      color: #909090
    }

    :deep( pre ){
      line-height: 1.93rem;
      overflow: auto
    }

    :deep( code),
    :deep( pre ){
      font-family: Menlo, Monaco, Consolas, Courier New, monospace
    }

    :deep( code ){
      font-size: 1rem;
      padding: .26rem .53em;
      word-break: break-word;
      color: #4e5980;
      background-color: #f8f8f8;
      border-radius: 2px;
      overflow-x: auto
    }

    :deep( pre>code ){
      font-size: 1rem;
      padding: .67rem 1.3rem;
      margin: 0;
      word-break: normal;
      display: block
    }

    :deep( a ){
      color: #259
    }

    :deep( a:active),
    :deep( a:hover ){
      color: #275b8c
    }

    :deep( table ){
      width: 100%;
      margin-top: 18px;
      margin-bottom: 18px;
      overflow: auto;
      font-size: 1rem;
      text-align: center;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
    }

    :deep( thead ){
      background: #f6f6f6;
      color: #000;
      text-align: left
    }

    :deep( td),
    :deep( th ){
      padding: 3px 5px;
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }

    :deep( td ){
      min-width: 10rem
    }

    :deep( blockquote ){
      margin: 1em 0;
      border-left: 4px solid #ddd;
      padding: 0 1.3rem
    }

    :deep( blockquote>p ){
      margin: .6rem 0
    }

    :deep( ol),
    :deep( ul ){
      padding-left: 2.7rem
    }

    :deep( ol li),
    :deep( ul li ){
      margin-bottom: .6rem
    }

    :deep( ol ol),
    :deep( ol ul),
    :deep( ul ol),
    :deep( ul ul ){
      margin-top: .27rem
    }

    :deep( pre>code ){
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      color: #333;
      background: #f8f8f8
    }

    :deep( p ){
      line-height: inherit;
      margin-top: 18px;
      margin-bottom: 18px
    }

    :deep( img ){
      max-height: none
    }

    :deep( a ){
      color: #0269c8;
      border-bottom: 1px solid #d1e9ff
    }

    :deep( code ){
      background-color: #fff5f5;
      color: #ff502c;
      font-size: .87em;
      padding: .065em .4em
    }

    :deep( blockquote ){
      color: #666;
      padding: 1px 23px;
      margin: 18px 0;
      border-left: 4px solid #cbcbcb;
      background-color: #f8f8f8
    }

    :deep( blockquote:after ){
      display: block;
      content: ""
    }

    :deep( blockquote>p ){
      margin: 10px 0
    }

    :deep( blockquote.warning ){
      position: relative;
      border-left-color: #f75151;
      margin-left: 8px
    }

    :deep( blockquote.warning:before ){
      position: absolute;
      top: 14px;
      left: -12px;
      background: #f75151;
      border-radius: 50%;
      content: "!";
      width: 20px;
      height: 20px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center
    }

    :deep( ol),
    :deep( ul ){
      padding-left: 28px
    }

    :deep( ol li),
    :deep( ul li ){
      margin-bottom: 0;
      list-style: inherit
    }

    :deep( ol li.task-list-item),
    :deep( ul li.task-list-item ){
      list-style: none
    }

    :deep( ol li.task-list-item ol),
    :deep( ol li.task-list-item ul),
    :deep( ul li.task-list-item ol),
    :deep( ul li.task-list-item ul ){
      margin-top: 0
    }

    :deep( ol li ){
      padding-left: 6px
    }

    :deep( pre ){
      position: relative;
      line-height: 1.75
    }

    :deep( pre>code ){
      padding: 15px 12px
    }

    :deep( pre>code.hljs[lang] ){
      padding: 18px 15px 12px
    }

    :deep( h1),
    :deep( h2),
    :deep( h3),
    :deep( h4),
    :deep( h5),
    :deep( h6 ){
      color: #333;
      line-height: 1.5;
      margin-top: 35px;
      margin-bottom: 10px;
      padding-bottom: 5px;
      font-weight: 500;
    }

    :deep( h1 ){
      font-size: 30px;
      margin-bottom: 5px
    }

    :deep( h2 ){
      padding-bottom: 12px;
      font-size: 24px;
      border-bottom: 1px solid #ececec
    }

    :deep( h3 ){
      font-size: 18px;
      padding-bottom: 0
    }

    :deep( h4 ){
      font-size: 16px
    }

    :deep( h5 ){
      font-size: 15px
    }

    :deep( h6 ){
      margin-top: 5px
    }

    :deep( h1.heading+h2.heading ){
      margin-top: 20px
    }

    :deep( h1.heading+h3.heading ){
      margin-top: 15px
    }

    :deep( .heading+.heading ){
      margin-top: 0
    }

    :deep( h1+:not(.heading) ){
      margin-top: 25px
    }
  }
</style>