添加文章字体，图片预览

src/views/home/learn/page-learn-child.vue

@@ -203,6 +203,7 @@ export default {
         display: -webkit-box;
         -webkit-box-orient: ho;
         -webkit-line-clamp: 10;
+        font-family: SimSun;
       }
       .contentItemstates {
         font-size: 0.6rem;

src/views/home/learn/page-learn-content.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="page-learn-content-box" @scroll="handleCommentScroll($event)">
-    <van-nav-bar v-if="env!=='pro'" title="学习" left-arrow @click-left="onClickLeft" />
+    <van-nav-bar
+      v-if="env !== 'pro'"
+      title="学习"
+      left-arrow
+      @click-left="onClickLeft"
+    />
     <div v-if="!isReadable" class="learn-content-rest-time">已学完</div>
     <div v-else class="learn-content-rest-time">
       剩余学习时间: {{ getTimeHoursMinuteSecondsFun(seconds) }}
@@ -13,7 +18,21 @@
       <div class="learn-content-body-auther">编辑：{{ contentObj.userId }}</div>
       <div class="learn-content-body-description">
         <!-- {{ contentObj.contents }} -->
-        <p class="p-content" v-html="contentObj.contents">{{ contentObj.contents }}</p>
+        <p
+          class="p-content"
+          v-html="contentObj.contents"
+          @click="showImg($event)"
+        >
+          {{ contentObj.contents }}
+        </p>
+        <div
+          class="imgDolg"
+          v-show="imgPreview.show"
+          @click.stop="imgPreview.show = false"
+        >
+          <van-icon class="el-icon-close" id="imgDolgClose" name="cross" @click.stop="imgPreview.show = false" />
+          <img @click.stop="imgPreview.show = true" :src="imgPreview.img" />
+        </div>
       </div>
       <div class="learn-content-body-time-row">
         <div class="learn-content-body-time">
@@ -60,7 +79,7 @@
         <div class="learn-content-comment-title-icon"></div>
         <span>评论</span>
       </div>
-      <div class="learn-content-comment-list"  >
+      <div class="learn-content-comment-list">
         <div
           class="learn-content-comment-item"
           v-for="(item, index) in commentList"
@@ -126,7 +145,11 @@ export default {
       commentPage: 0,
       commentSize: 10,
       canCommentFlag: true, // 加载考试标志
-      env: "pro"
+      env: "pro",
+      imgPreview: {
+        img: "",
+        show: false
+      }
     };
   },
   computed: {
@@ -374,7 +397,16 @@ export default {
           this.isCollected = true;
         }
       }
+    },
+    // 点击图片放大
+    showImg(e) {
+      // console.log(e.target)
+      if (e.target.tagName === "IMG") {
+        this.imgPreview.img = e.target.src;
+        this.imgPreview.show = true;
+      }
     }
+
   }
 };
 </script>
@@ -402,6 +434,7 @@ export default {
       font-weight: bold;
       word-break: break-all;
       word-wrap: break-word;
+      font-family: SimSun;
     }
     .learn-content-body-auther {
       margin-top: 0.5rem;
@@ -412,6 +445,28 @@ export default {
       word-break: break-all;
       word-wrap: break-word;
       letter-spacing: 0.2rem;
+      .imgDolg {
+        overflow-y:scroll;
+        overflow-x:scroll;
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        z-index: 9999;
+        background-color: rgba(140, 134, 134, 0.6);
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        #imgDolgClose {
+            position: fixed;
+            top: 20px;
+            cursor: pointer;
+            right: 2%;
+            font-size: 30px;
+            color: white;
+        }
+      }
     }
     .learn-content-body-time-row {
       margin-top: 1rem;
@@ -543,12 +598,16 @@ export default {
 </style>
 
 <style lang="scss">
-.p-content{
-    letter-spacing:0.05rem;
+.p-content {
+  letter-spacing: 0.05rem;
+
 }
 .p-content img {
-    max-width: 100%;
-    width: auto;
-    height: auto;
+  max-width: 100%;
+  width: auto;
+  height: auto;
+}
+.p-content p,h1,h2,h3,h4,h5,h6 {
+  font-family: SimSun;
 }
 </style>