Quellcode durchsuchen

富文本 移动端

natasha vor 7 Monaten
Ursprung
Commit
321a34b927
2 geänderte Dateien mit 35 neuen und 24 gelöschten Zeilen
  1. 1 0
      src/components/Adult/Preview.vue
  2. 34 24
      src/components/Adult/preview/TinyModule.vue

+ 1 - 0
src/components/Adult/Preview.vue

@@ -839,6 +839,7 @@
                         :theme-color="themeColor"
                         :task-model="TaskModel"
                         :judge-answer="itemJ"
+                        :isPhone="isPhone"
                       />
                     </template>
                     <template

+ 34 - 24
src/components/Adult/preview/TinyModule.vue

@@ -1,7 +1,11 @@
 <!--  -->
 <template>
-  <div class="Big-Book-prev-Tiny" v-if="curQue">
-    <h2 v-if="curQue.title">{{curQue.title}}</h2>
+  <div
+    class="Big-Book-prev-Tiny"
+    v-if="curQue"
+    :class="[isPhone ? 'Big-Book-prev-Tiny-phone' : '']"
+  >
+    <h2 v-if="curQue.title">{{ curQue.title }}</h2>
     <div v-html="curQue.con" class="tiny-box"></div>
   </div>
 </template>
@@ -9,7 +13,7 @@
 <script>
 export default {
   components: {},
-  props: ["curQue"],
+  props: ["curQue", "isPhone"],
   data() {
     return {};
   },
@@ -27,31 +31,37 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
-.Big-Book-prev-Tiny{
-    width: 100%;
-    margin-bottom: 24px;
-    h2{
-        margin: 16px 0 0;
-        font-weight: 500;
-        font-size: 16px;
-        line-height: 24px;
-        color: #000000;
-    }
-    .tiny-box{
-        word-break: break-word;
-        overflow: hidden;
-    }
+.Big-Book-prev-Tiny {
+  width: 100%;
+  margin-bottom: 24px;
+  h2 {
+    margin: 16px 0 0;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    color: #000000;
+  }
+  .tiny-box {
+    word-break: break-word;
+    overflow: hidden;
+  }
 }
 </style>
 <style lang="scss">
-.Big-Book-prev-Tiny{
-    p{
-        margin: 0;
-    }
+.Big-Book-prev-Tiny {
+  p {
+    margin: 0;
+  }
 }
-</style>
+.Big-Book-prev-Tiny-phone {
+  img {
+    max-width: 100%;
+    max-height: fit-content;
+  }
+}
+</style>