Merge branch 'fix_smartReport'

src/views/smartReport/detail.vue

@@ -2,46 +2,37 @@
 <template>
   <div class="wrapper" ref="wrapper">
     <div id="reportdtl" v-if="isshow">
-      <div class="top-header">
+      <!-- <div class="top-header">
           <div class="title">{{reportInfo.Title}}</div>
           <div class="flex">
               <span>{{reportInfo.Author}}</span>
               <span>{{reportInfo.PublishTime}}</span>
           </div>
-      </div>
-      <div style="padding: 0.6rem; box-sizing: border-box; overflow: hidden">
-        <!-- <div id="resetcss" style="overflow:hidden;" v-html="reportInfo.Content"></div> -->
-        <div id="resetcss" style="overflow:hidden;">
-        <ul>
-          <li v-for="(html,index) in realContent" :key="index" v-html="html"></li>
-        </ul>
-      </div>
-      <div id="tipsAlert">
-        <div
-          style="
-            width: 100%;
-            padding: 0.8rem 0.66rem 2.2rem;
-            box-sizing: border-box;
-            font: 0.52rem/0.8rem 'PingFang-SC-Regular';
-            color: #666;
-            background: #fff;
-            overflow: scroll;
-            position: relative;
-            border-radius: 0.2rem;
-          "
-        >
-          <!-- <h1 style="font:0.64rem '微软雅黑'; color:#333; text-align:center; margin-bottom:0.34rem;">免责声明</h1> -->
-          <h1
+      </div> -->
+      <div style="">
+        <div id="resetcss" style="overflow:hidden;" v-html="reportInfo.Content"></div>
+        <!-- <div id="resetcss">
+          <ul>
+            <li v-for="(html, index) in realContent" :key="index" v-html="html"></li>
+          </ul>
+        </div> -->
+        <div id="tipsAlert">
+          <div
             style="
-              font: 0.64rem 'PingFang-SC-Regular';
-              color: #333;
-              text-align: center;
-              margin-bottom: 0.34rem;
+              width: 100%;
+              padding: 0.8rem 0.66rem 2.2rem;
+              box-sizing: border-box;
+              font: 0.52rem/0.8rem 'PingFang-SC-Regular';
+              color: #666;
+              background: #fff;
+              overflow: scroll;
+              position: relative;
+              border-radius: 0.2rem;
             "
           >
-            免责声明
-          </h1>
-          <!-- <p>
+            <!-- <h1 style="font:0.64rem '微软雅黑'; color:#333; text-align:center; margin-bottom:0.34rem;">免责声明</h1> -->
+            <h1 style="font: 0.64rem 'PingFang-SC-Regular'; color: #333; text-align: center; margin-bottom: 0.34rem">免责声明</h1>
+            <!-- <p>
             1、本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会仅因接收人/接受机构收到本报告而将其视为客户。
           </p>
           <p>
@@ -53,44 +44,29 @@
           <p>
             4、在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。
           </p> -->
-          <div class="disclaimer" v-html="Disclaimer"></div>
-          <p
-            @click="hideTips"
-            style="
-              position: absolute;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              font-size: 0.56rem;
-              line-height: 1.6rem;
-              color: #2680eb;
-              text-align: center;
-              border-top: 1px solid #eaeaea;
-            "
-          >
-            知道了
-          </p>
+            <div class="disclaimer" v-html="Disclaimer"></div>
+            <p @click="hideTips" style="position: absolute; bottom: 0; left: 0; right: 0; font-size: 0.56rem; line-height: 1.6rem; color: #2680eb; text-align: center; border-top: 1px solid #eaeaea">
+              知道了
+            </p>
+          </div>
         </div>
       </div>
-      <div style="width:30px; position:fixed; right:0.6rem; bottom:2.4rem; z-index:100;">
-        <img src="~@/assets/img/returntop.png" @click="goTop" style="width:30px; margin-bottom:0.2rem;" />
-      </div>
-    </div>
     </div>
+    <div style="width: 30px; position: fixed; right: 0.6rem; bottom: 2.4rem; z-index: 100">
+          <img src="~@/assets/img/returntop.png" @click="goTop" style="width: 30px; margin-bottom: 0.2rem" />
+        </div>
   </div>
 </template>
 
 <script>
-import {
-  smartReportDetail,
-} from "@/api/api.js";
-import _ from 'lodash';
-import wxShare from '../utils/wxShare.js';
+import { smartReportDetail } from "@/api/api.js";
+import _ from "lodash";
+import wxShare from "../utils/wxShare.js";
 
 export default {
   data() {
     return {
-      id: this.$route.query.code || '',
+      id: this.$route.query.code || "",
       isshow: false,
       reportInfo: {},
       reportlist: [],
@@ -100,35 +76,37 @@ export default {
       page_no: 0,
       pageSize: 20, //默认初始加载50个p标签
       total_page: 0,
-      Disclaimer:''
+      Disclaimer: "",
     };
   },
   mounted() {
     this.getreportdetail();
-    window.addEventListener('scroll', this.loadMoreHandle);
+    window.addEventListener("scroll", this.loadMoreHandle);
+    window.addEventListener('resize',this.pageResize)
   },
 
   destroyed() {
-    window.removeEventListener('scroll', this.loadMoreHandle);
+    window.removeEventListener("scroll", this.loadMoreHandle);
+    window.removeEventListener('resize',this.pageResize)
   },
 
   updated() {
     // $('#resetcss').css({font:"0.76rem/1.5 '微软雅黑'",color:"#333",letterSpacing:"0.05rem"});
-    $("#resetcss")
-      .find("img")
-      .css({ display: "block", margin: "0 auto", maxWidth: "100%" });
-    $("#resetcss")
-      .find("video")
-      .css({ display: "block", margin: "0 auto", maxWidth: "100%" });
-    $("#resetcss")
-      .find("p")
-      .css({
-        margin: "0 auto 0",
-        font: "0.7rem/1.5 'PingFang-SC-Regular'",
-        color: "#333",
-        letterSpacing: "0.08rem",
-        lineHeight: "1.3rem",
-      });
+    // $("#resetcss")
+    //   .find("img")
+    //   .css({ display: "block", margin: "0 auto", maxWidth: "100%" });
+    // $("#resetcss")
+    //   .find("video")
+    //   .css({ display: "block", margin: "0 auto", maxWidth: "100%" });
+    // $("#resetcss")
+    //   .find("p")
+    //   .css({
+    //     margin: "0 auto 0",
+    //     font: "0.7rem/1.5 'PingFang-SC-Regular'",
+    //     color: "#333",
+    //     letterSpacing: "0.08rem",
+    //     lineHeight: "1.3rem",
+    //   });
     /* $("#resetcss")
       .find("span")
       .css({
@@ -136,22 +114,31 @@ export default {
         letterSpacing: "0.08rem",
         lineHeight: "1.3rem",
       }); */
-    $("#resetcss")
-      .find("span.fr-emoticon")
-      .css({
-        width: "20px",
-        height: "20px",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "cover",
-        display: "inline-block",
-        verticalAlign: "middle",
-      });
-    $("#resetcss").find("ol").css({ listStyleType: "disc" });
-    $("#resetcss")
-      .find("pre")
-      .css({ display: "block", whiteSpace: "pre-wrap" });
+    // $("#resetcss")
+    //   .find("span.fr-emoticon")
+    //   .css({
+    //     width: "20px",
+    //     height: "20px",
+    //     backgroundRepeat: "no-repeat",
+    //     backgroundSize: "cover",
+    //     display: "inline-block",
+    //     verticalAlign: "middle",
+    //   });
+    // $("#resetcss").find("ol").css({ listStyleType: "disc" });
+    // $("#resetcss")
+    //   .find("pre")
+    //   .css({ display: "block", whiteSpace: "pre-wrap" });
   },
   methods: {
+    pageResize(){
+      const el=document.getElementById('reportdtl')
+      const windowWid=document.body.clientWidth
+      if(windowWid<800){
+        el.style.transform=`scale(${windowWid/800})`
+        // el.style.
+      }
+    },
+
     showTips() {
       //免责声明显示
       $("#tipsAlert").animate({ top: 0 });
@@ -165,39 +152,42 @@ export default {
     },
 
     async getreportdetail() {
-      const { Data,Ret  } = await smartReportDetail({ ReportCode: this.id });
-        document.title=(Data && Data.H5ShareName) || "研报"
-        if (Ret !== 200) return
-        // console.log('data',Data)
-        let H5ShareName = Data.H5ShareName
-        let H5ReportShareImg = Data.H5ReportShareImg
-        let wxShareTitle=!!Data.Hz?
-        '【第'+Data.Report.Stage+'期|FICC'+'】'+Data.Report.Title+'('+Data.Report.CreateTime.substring(5,7)+Data.Report.CreateTime.substring(8,10)+')':
-                          Data.Report.Title+'('+Data.Report.CreateTime.substring(5,7)+Data.Report.CreateTime.substring(8,10)+')'
-        this.reportInfo = Data.Report;
-        this.Disclaimer = Data.Disclaimer||'';
-        this.isshow = true;
+      const { Data, Ret } = await smartReportDetail({ ReportCode: this.id });
+      document.title = (Data && Data.H5ShareName) || "研报";
+      if (Ret !== 200) return;
+      // console.log('data',Data)
+      let H5ShareName = Data.H5ShareName;
+      let H5ReportShareImg = Data.H5ReportShareImg;
+      let wxShareTitle = !!Data.Hz
+        ? "【第" + Data.Report.Stage + "期|FICC" + "】" + Data.Report.Title + "(" + Data.Report.CreateTime.substring(5, 7) + Data.Report.CreateTime.substring(8, 10) + ")"
+        : Data.Report.Title + "(" + Data.Report.CreateTime.substring(5, 7) + Data.Report.CreateTime.substring(8, 10) + ")";
+      this.reportInfo = Data.Report;
+      this.Disclaimer = Data.Disclaimer || "";
+      this.isshow = true;
+      this.$nextTick(()=>{
+        this.pageResize()
+      })
 
-        this.splitContentHandle(this.reportInfo.Content);
+      this.splitContentHandle(this.reportInfo.Content);
 
-        $(document).on("click", "#resetcss img", function (event) {
-          let imgArray = [];
-          let curImageSrc = $(this).attr("src");
-          let oParent = $(this).parent();
-          if (curImageSrc && !oParent.attr("href")) {
-            $("#resetcss img").each(function (index, el) {
-              let itemSrc = $(this).attr("src");
-              imgArray.push(itemSrc);
-            });
-            wx.previewImage({ current: curImageSrc, urls: imgArray });
-          }
-        });
-        wxShare(document.location.href,H5ShareName || document.title,wxShareTitle,H5ReportShareImg,0);
+      $(document).on("click", "#resetcss img", function (event) {
+        let imgArray = [];
+        let curImageSrc = $(this).attr("src");
+        let oParent = $(this).parent();
+        if (curImageSrc && !oParent.attr("href")) {
+          $("#resetcss img").each(function (index, el) {
+            let itemSrc = $(this).attr("src");
+            imgArray.push(itemSrc);
+          });
+          wx.previewImage({ current: curImageSrc, urls: imgArray });
+        }
+      });
+      wxShare(document.location.href, H5ShareName || document.title, wxShareTitle, H5ReportShareImg, 0);
     },
 
     /*内容分割*/
     splitContentHandle(content) {
-        const regex = new RegExp(`<div[^>]*class="?report-drag-item-wrap"?>`);
+      const regex = new RegExp(`<div[^>]*class="?report-drag-item-wrap"?>`);
       const arr = content.split(regex);
       this.totalContent = arr.map((_) => _ + "<div class='report-drag-item-wrap'>");
       this.realContent = this.totalContent.slice(0, this.pageSize);
@@ -207,27 +197,21 @@ export default {
 
     /* 加载下一页内容 */
     loadContent() {
-      this.realContent = this.realContent.concat(
-        this.totalContent.slice(
-          this.page_no * this.pageSize,
-          (this.page_no + 1) * this.pageSize
-        )
-      );
+      this.realContent = this.realContent.concat(this.totalContent.slice(this.page_no * this.pageSize, (this.page_no + 1) * this.pageSize));
     },
-    loadMoreHandle: _.throttle(function() {
-
-      if(this.page_no >= this.total_page) return
+    loadMoreHandle: _.throttle(function () {
+      if (this.page_no >= this.total_page) return;
 
       const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动的高度
       const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 可视高度
       const scrollHeight = document.body.scrollHeight; // 总高度
 
-      if((scrollHeight - scrollTop - clientHeight) < 500) {
-        console.log('触底')
-        this.page_no = this.page_no+1;
+      if (scrollHeight - scrollTop - clientHeight < 500) {
+        console.log("触底");
+        this.page_no = this.page_no + 1;
         this.loadContent();
       }
-    },300)
+    }, 300),
   },
 };
 </script>
@@ -235,7 +219,7 @@ export default {
 <style lang="scss">
 .wrapper {
   position: relative;
-  overflow: hidden;
+  // overflow: hidden;
   height: 100%;
   #noaccess {
     width: 100%;
@@ -262,41 +246,43 @@ export default {
   }
 }
 #reportdtl {
+  font-size: 14px;
   background: #fff;
   overflow: auto;
-  max-width: 1200px;
+  width: 800px;
+  padding: 20px 20px 20px 44px;
   margin: 0 auto;
-  
-  .top-header{
-      background-image: url('@/assets/img/smart_report_bg01.png');
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center;
-      padding: 16px;
+
+  .top-header {
+    background-image: url("@/assets/img/smart_report_bg01.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    padding: 16px;
     color: #fff;
-    .title{
-        font-size: 16px;
-        margin-bottom: 10px;
+    .title {
+      font-size: 16px;
+      margin-bottom: 10px;
     }
-    .flex{
-        font-size: 12px;
-        display: flex;
-        justify-content: space-between;
-    }
-  }
-  
-  table {
-    border-top: 1px solid #ccc;
-    border-left: 1px solid #ccc;
-    border-collapse: collapse;
-    th,
-    td {
-      border-right: 1px solid #ccc;
-      border-bottom: 1px solid #ccc;
-      padding: 0.1rem 0.2rem;
-      box-sizing: border-box;
+    .flex {
+      font-size: 12px;
+      display: flex;
+      justify-content: space-between;
     }
   }
+
+  // table {
+  //   border-top: 1px solid #ccc;
+  //   border-left: 1px solid #ccc;
+  //   border-collapse: collapse;
+  //   th,
+  //   td {
+  //     border-right: 1px solid #ccc;
+  //     border-bottom: 1px solid #ccc;
+  //     padding: 0.1rem 0.2rem;
+  //     box-sizing: border-box;
+  //   }
+  // }
   #resetcss {
     pre {
       white-space: pre-wrap;
@@ -316,9 +302,16 @@ export default {
     left: 0;
     background: rgba(0, 0, 0, 0.6);
     z-index: 200;
-    .disclaimer{
-        font-size: 0.58rem;
+    display: none;
+    .disclaimer {
+      font-size: 0.58rem;
     }
   }
 }
+@media screen and (max-width:800px){
+  #reportdtl{
+    position: absolute;
+    transform-origin: 0 0;
+  }
+}
 </style>