v-viewer转化成cdn文件,优化包

packages/publicity/AppHotTopic/components/hotDetail.vue

@@ -9,13 +9,13 @@
         <ai-card title="标题信息">
           <template slot="content">
             <ai-wrapper label-width="70px" :columnsNumber="1">
-              <ai-info-item label="话题标题">{{detailObj.title}}</ai-info-item>
+              <ai-info-item label="话题标题">{{ detailObj.title }}</ai-info-item>
               <ai-info-item label="关键字" v-if="detailObj.keyWords">
                 <el-tag
-                  v-for="tag in detailObj.keyWords.split(',')"
-                  :key="tag"
-                  effect="plain">
-                  {{tag}}
+                    v-for="tag in detailObj.keyWords.split(',')"
+                    :key="tag"
+                    effect="plain">
+                  {{ tag }}
                 </el-tag>
               </ai-info-item>
               <ai-info-item label="封面图片">
@@ -26,14 +26,14 @@
           </template>
         </ai-card>
         <ai-card class="card" v-for="(item,index) in detailObj.contents" :key="index">
-          <template slot="title">{{item.question}}</template>
-          <template slot="right">话题来源：{{item.questionSource}}</template>
+          <template slot="title">{{ item.question }}</template>
+          <template slot="right">话题来源：{{ item.questionSource }}</template>
           <template slot="content">
             <div class="wrap">
               <header>
-                <b>{{item.answerSource}}</b>&nbsp;&nbsp;回复
+                <b>{{ item.answerSource }}</b>&nbsp;&nbsp;回复
               </header>
-              <p>{{item.answer}}</p>
+              <p>{{ item.answer }}</p>
               <div v-viewer>
                 <img :src="p.url"
                      v-for="(p,q) in item.files" :key="q" alt="">
@@ -47,113 +47,109 @@
 </template>
 
 <script>
-  import Viewer from 'v-viewer' ;
-  import Vue from 'vue' ;
-
-  Vue.use(Viewer);
-  export default {
-    name: "hotDetail",
-    label: "热点详情",
-    props: {
-      instance: Function,
-      dict: Object,
-      permissions: Function,
-      areaId: String,
-      detail: Object
-    },
-    data() {
-      return {
-        detailObj: {},
-      }
-    },
-    methods: {
-      getDetail() {
-        this.instance.post(`/app/apphotsubject/detail`, null, {
-          params: {id: this.detail.id}
-        }).then(res => {
-          if (res && res.data) {
-            this.detailObj = res.data
-          }
-        })
-      },
-    },
-    created() {
-      this.getDetail()
+export default {
+  name: "hotDetail",
+  label: "热点详情",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    areaId: String,
+    detail: Object
+  },
+  data() {
+    return {
+      detailObj: {},
     }
+  },
+  methods: {
+    getDetail() {
+      this.instance.post(`/app/apphotsubject/detail`, null, {
+        params: {id: this.detail.id}
+      }).then(res => {
+        if (res && res.data) {
+          this.detailObj = res.data
+        }
+      })
+    },
+  },
+  created() {
+    this.getDetail()
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .hotDetail {
-    height: 100%;
-    overflow: hidden;
+.hotDetail {
+  height: 100%;
+  overflow: hidden;
 
-    .card {
-      :deep( .aibar ){
-        height: 94px !important;
-        flex-direction: column;
-        align-items: flex-start;
-        margin-bottom: 0px !important;
-        padding: 16px !important;
+  .card {
+    :deep( .aibar ) {
+      height: 94px !important;
+      flex-direction: column;
+      align-items: flex-start;
+      margin-bottom: 0px !important;
+      padding: 16px !important;
 
-        & > div {
-          line-height: 24px;
+      & > div {
+        line-height: 24px;
 
-          &:last-child {
-            font-size: 14px;
-            color: #888888;
-          }
-        }
-
-      }
-
-      :deep( .ai-card__body ){
-        padding: 12px 20px 22px !important;
-      }
-
-      .wrap {
-        background-color: #F5F6F9;
-        box-sizing: border-box;
-        padding: 16px;
-
-        header {
-          height: 40px;
-          font-size: 16px;
-          color: #222222;
-          line-height: 24px;
-          display: flex;
-          align-items: center;
-          border-bottom: 1px solid #EEEEEE;
-
-          b {
-            color: #2266FF;
-          }
-        }
-
-        p {
-          margin-top: 16px;
-          font-size: 16px;
-          color: #222222;
-          line-height: 32px;
-          text-indent: 2em;
+        &:last-child {
+          font-size: 14px;
+          color: #888888;
         }
       }
+
     }
 
-    :deep( .el-tag){
-      background: #F3F4F7;
-      border-radius: 2px;
-      color: #222222;
-      border: 1px solid #D0D4DC;
-      margin-right: 8px;
+    :deep( .ai-card__body ) {
+      padding: 12px 20px 22px !important;
     }
 
-    img {
-      width: 160px;
-      height: 160px;
-      border-radius: 2px;
-      margin-top: 16px;
-      margin-right: 8px;
+    .wrap {
+      background-color: #F5F6F9;
+      box-sizing: border-box;
+      padding: 16px;
+
+      header {
+        height: 40px;
+        font-size: 16px;
+        color: #222222;
+        line-height: 24px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #EEEEEE;
+
+        b {
+          color: #2266FF;
+        }
+      }
+
+      p {
+        margin-top: 16px;
+        font-size: 16px;
+        color: #222222;
+        line-height: 32px;
+        text-indent: 2em;
+      }
     }
   }
+
+  :deep( .el-tag) {
+    background: #F3F4F7;
+    border-radius: 2px;
+    color: #222222;
+    border: 1px solid #D0D4DC;
+    margin-right: 8px;
+  }
+
+  img {
+    width: 160px;
+    height: 160px;
+    border-radius: 2px;
+    margin-top: 16px;
+    margin-right: 8px;
+  }
+}
 </style>