详情页样式优化

src/views/report/reportDetail.vue

@@ -14,6 +14,8 @@
             }}{{ reportInfo.CreateTime.substring(8, 10) }})</span
           >
         </p>
+        
+        <img class="logo" :src="configInfo.ReportLogo" alt="" v-if="configInfo.ReportLogo"/>
       </header>
       <div
         style="
@@ -110,7 +112,7 @@
             border-radius: 0.2rem;
           "
         >
-          <!-- <h1 style="font:0.64rem '微软雅黑'; color:#333; text-align:center; margin-bottom:0.34rem;">免责声明</h1> -->
+
           <h1
             style="
               font: 0.64rem 'PingFang-SC-Regular';
@@ -121,7 +123,7 @@
           >
             免责声明
           </h1>
-          <div class="disclaimer" v-html="Disclaimer"></div>
+          <div class="disclaimer" v-html="configInfo.Disclaimer"></div>
           <p
             @click="hideTips"
             style="
@@ -175,7 +177,8 @@ export default {
       page_no: 0,
       pageSize: 20, //默认初始加载50个p标签
       total_page: 0,
-      Disclaimer:''
+
+      configInfo: {}
     };
   },
   created() {
@@ -286,7 +289,10 @@ export default {
         // '【第'+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.configInfo = {
+          ...Data,
+          Report:null
+        };
         this.isshow = true;
 
         this.splitContentHandle();
@@ -434,11 +440,17 @@ export default {
     box-sizing: border-box;
     text-align: left;
     background: #fff;
+    display: flex;
+    justify-content: space-between;
     p {
       font-size: 0.84rem;
       font-weight: 600;
       color: #000;
     }
+    .logo {
+      flex-shrink: 0;
+      height: fit-content;
+    }
   }
   #playcon {
     padding: 0 0.6rem;

src/views/report/reportDetailPdf.vue

@@ -14,6 +14,8 @@
             }}{{ reportInfo.CreateTime.substring(8, 10) }})</span
           >
         </p>
+
+        <img class="logo" :src="configInfo.ReportLogo" alt="" v-if="configInfo.ReportLogo"/>
       </header>
       <div
         style="
@@ -28,41 +30,10 @@
         <span style="float: right" v-if="[2,6].includes(reportInfo.State)">{{ reportInfo.PublishTime }}</span>
       </div>
 
-      <div id="playcon" v-if="reportInfo.VideoUrl">
-        <div>
-          <img
-            src="~@/assets/img/pauseImg.png"
-            style="width: 2rem; height: 2rem; float: left; margin-right: 0.4rem"
-          />
-          <p
-            style="
-              font-size: 0.64rem;
-              line-height: 1rem;
-              color: #333;
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-            "
-          >
-            {{ reportInfo.VideoName }}
-          </p>
-          <p style="font-size: 0.56rem; line-height: 1rem; color: #878787">
-            {{ parseInt(reportInfo.VideoPlaySeconds / 60) }}分{{
-              parseInt(reportInfo.VideoPlaySeconds % 60)
-            }}秒
-          </p>
-        </div>
-      </div>
 
       <div id="abstract">
         <div class="abstract_cont">
           <div v-if="reportInfo.Abstract">摘要：{{ reportInfo.Abstract }}</div>
-          <div style="color: #666;">
-            *注：请务必阅读&nbsp;<strong
-              style="font-weight: normal; cursor: pointer; color: #3e8ce6"
-              >免责声明</strong
-            >
-          </div>
         </div>
       </div>
       <div style="padding: 0.6rem; box-sizing: border-box; overflow: hidden">
@@ -79,6 +50,8 @@
         <div id="resetcss" style="overflow:hidden;" v-else>
           <div v-html="reportInfo.Content"></div>
         </div>
+
+        <div class="disclaimer" v-html="configInfo.Disclaimer"></div>
     </div>
     </div>
   </div>
@@ -96,6 +69,8 @@ export default {
       id: this.$route.query.code || '',
       isshow: false,
       reportInfo: {},
+
+      configInfo: {}
     };
   },
 
@@ -146,6 +121,11 @@ export default {
       const { Data,Ret  } = await reportDetail({ ReportCode: this.id });
         if (Ret !== 200) return
         this.reportInfo = Data.Report;
+        this.configInfo = {
+          ...Data,
+          Report:null
+        };
+
         this.reportInfo.Content=this.setReportContent(this.reportInfo.Content)
         this.isshow = true;
         //水印
@@ -248,11 +228,17 @@ export default {
     box-sizing: border-box;
     text-align: left;
     background: #fff;
+    display: flex;
+    justify-content: space-between;
     p {
       font-size: 0.84rem;
       font-weight: 600;
       color: #000;
     }
+    .logo {
+      flex-shrink: 0;
+      height: fit-content;
+    }
   }
   #playcon {
     padding: 0 0.6rem;
@@ -332,6 +318,9 @@ export default {
 			margin-bottom: 20px;
 			padding-bottom: 20px;
 			border-bottom: 1px dashed #ccc;
+      &:last-child {
+        border-bottom: none;
+      }
 			.type{
 				font-size: 15px;
 				color: #fff;
@@ -346,6 +335,12 @@ export default {
 			}
 		}
   }
+
+  .disclaimer{
+      font-size: 0.58rem;
+      padding: 30px 0;
+      border-top: 1px solid #ccc;
+  }
 }
 // 不禁止页面打印,不然转pdf会出现空白页
 @media print{

src/views/reportEn/detail.vue

@@ -14,6 +14,8 @@
             }}{{ reportInfo.CreateTime.substring(8, 10) }})</span
           >
         </p>
+
+        <img class="logo" :src="configInfo.ReportLogo" alt="" v-if="configInfo.ReportLogo"/>
       </header>
       <div
         style="
@@ -76,7 +78,7 @@
           >
             Disclaimers 
           </h1>
-          <div style="max-height:50vh;overflow:auto" v-html="Disclaimer">
+          <div style="max-height:50vh;overflow:auto" v-html="configInfo.DisclaimerEn">
           </div>
           <p
             @click="hideTips"
@@ -126,7 +128,8 @@ export default {
       page_no: 0,
       pageSize: 20, //默认初始加载50个p标签
       total_page: 0,
-      Disclaimer: '',
+
+      configInfo: {}
     };
   },
   created() {
@@ -216,7 +219,11 @@ export default {
                           Data.Report.Title+'('+Data.Report.CreateTime.substring(5,7)+Data.Report.CreateTime.substring(8,10)+')'
 
         this.reportInfo = Data.Report;
-        this.Disclaimer = Data.DisclaimerEn||'';
+        this.configInfo = {
+          ...Data,
+          Report:null
+        };
+
         this.isshow = true;
 
         this.splitContentHandle(this.reportInfo.Content);
@@ -354,11 +361,17 @@ export default {
     box-sizing: border-box;
     text-align: left;
     background: #fff;
+    display: flex;
+    justify-content: space-between;
     p {
       font-size: 0.84rem;
       font-weight: 600;
       color: #000;
     }
+    .logo {
+      flex-shrink: 0;
+      height: fit-content;
+    }
   }
   #playcon {
     padding: 0 0.6rem;

src/views/reportEn/detailPdf.vue

@@ -14,6 +14,8 @@
             }}{{ reportInfo.CreateTime.substring(8, 10) }})</span
           >
         </p>
+
+        <img class="logo" :src="configInfo.ReportLogo" alt="" v-if="configInfo.ReportLogo"/>
       </header>
       <div
         style="
@@ -31,12 +33,6 @@
       <div id="abstract">
         <div class="abstract_cont">
           <div>Abstract：{{ reportInfo.Abstract }}</div>
-          <div style="color: #666;">
-            *Note: Please be sure to read the <strong
-              style="font-weight: normal; cursor: pointer; color: #3e8ce6"
-              >disclaimer</strong
-            >
-          </div>
         </div>
       </div>
       <div style="padding: 0.6rem; box-sizing: border-box; overflow: hidden">
@@ -46,6 +42,8 @@
         </div>
         <div id="resetcss" style="overflow:hidden;">
         <div v-html="reportInfo.Content"></div>
+
+        <div class="disclaimer" v-html="configInfo.DisclaimerEn"></div>
       </div>
     </div>
     </div>
@@ -64,7 +62,9 @@ export default {
     return {
       id: this.$route.query.code || '',
       isshow: false,
-      reportInfo: {}
+      reportInfo: {},
+
+      configInfo: {}
     };
   },
   mounted() {
@@ -124,8 +124,13 @@ export default {
       const { Data,Ret  } = await reportEnDetail({ ReportCode: this.id,ShareEmail:Number(this.$route.query.ShareEmail)||0 });
         if (Ret !== 200) return
         this.reportInfo = Data.Report;
+        this.configInfo = {
+          ...Data,
+          Report:null
+        };
         this.reportInfo.Content=this.setReportContent(this.reportInfo.Content)
-        this.isshow = true;    
+        this.isshow = true;
+
         localStorage.setItem('waterMarkStr',this.$route.query.flag||'')
         const temwaterMarkStr=this.$route.query.flag||localStorage.getItem('waterMarkStr')
         const waterMarkStr=decodeURIComponent(Base64.decode(temwaterMarkStr))
@@ -224,11 +229,17 @@ export default {
     box-sizing: border-box;
     text-align: left;
     background: #fff;
+    display: flex;
+    justify-content: space-between;
     p {
       font-size: 0.84rem;
       font-weight: 600;
       color: #000;
     }
+    .logo {
+      flex-shrink: 0;
+      height: fit-content;
+    }
   }
   #abstract {
     padding: 0.6rem;
@@ -290,6 +301,12 @@ export default {
       white-space: pre-wrap;
     }
   }
+
+  .disclaimer{
+      font-size: 0.58rem;
+      padding: 30px 0;
+      border-top: 1px solid #ccc;
+  }
 }
 </style>
 

src/views/smartReport/detail.vue

@@ -2,13 +2,7 @@
 <template>
   <div class="wrapper" ref="wrapper">
     <div id="reportdtl" v-if="isshow" :style="{backgroundColor:reportInfo.CanvasColor}">
-      <!-- <div class="top-header">
-          <div class="title">{{reportInfo.Title}}</div>
-          <div class="flex">
-              <span>{{reportInfo.Author}}</span>
-              <span>{{reportInfo.PublishTime}}</span>
-          </div>
-      </div> -->
+
       <div>
         <div class="html-head-img-box" v-if="reportInfo && !!reportInfo.NeedSplice && reportInfo.HeadImg">
           <img :src="reportInfo.HeadImg" alt="" style="display:block;width:100%">
@@ -20,14 +14,64 @@
           </div>
         </div>
         <div class="no-layout-img-box" v-if="reportInfo && !!reportInfo.NeedSplice && (!reportInfo.HeadImg) && (!reportInfo.EndImg)">
-          <header>{{reportInfo.Title}}</header>
+          <header>
+            <span>{{reportInfo.Title}}</span>
+
+            <img class="logo" :src="configInfo.ReportLogo" alt="" v-if="configInfo.ReportLogo"/>
+          </header>
           <div style=" box-sizing:border-box; color:#666; font-size:24px; overflow:hidden;">
             <span>{{ reportInfo.Author}}</span>
             <span style="float:right;" v-if="[2,6].includes(reportInfo.State)">{{reportInfo.PublishTime}}</span>
           </div>
         </div>
+
+        <div id="playcon" v-if="reportInfo.VideoUrl">
+          <div>
+            <img
+              @click.stop="$refs.audioRef.playaudiopause()"
+              v-if="
+                $store.state.isplaying &&
+                reportInfo.VideoUrl ==
+                  $store.state.audiolist[$store.state.playcount].video_url
+              "
+              src="~@/assets/img/playImg.png"
+              style="width: 2rem; height: 2rem; float: left; margin-right: 0.4rem"
+            />
+            <img
+              @click.stop="playaudio(reportInfo)"
+              v-else
+              src="~@/assets/img/pauseImg.png"
+              style="width: 2rem; height: 2rem; float: left; margin-right: 0.4rem"
+            />
+            <p
+              style="
+                font-size: 0.64rem;
+                line-height: 1rem;
+                color: #333;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              "
+            >
+              {{ reportInfo.VideoName }}
+            </p>
+            <p style="font-size: 0.56rem; line-height: 1rem; color: #878787">
+              {{ parseInt(reportInfo.VideoPlaySeconds / 60) }}分{{
+                parseInt(reportInfo.VideoPlaySeconds % 60)
+              }}秒
+            </p>
+          </div>
+        </div>
+
         <div class="abstract" v-if="reportInfo && !!reportInfo.NeedSplice">
-          <div v-if="reportInfo.Abstract">摘要： <span v-html="reportInfo.Abstract"></span></div> 
+          <div v-if="reportInfo.Abstract">摘要：{{ reportInfo.Abstract }}</div>
+          <div style="color: #666; margintop: 1.2rem">
+            *注：请务必阅读&nbsp;<strong
+              style="fontweight: normal; cursor: pointer; color: #3e8ce6"
+              @click="showTips"
+              >免责声明</strong
+            >
+          </div>
         </div>
 
         <!-- 章节报告 -->
@@ -67,7 +111,7 @@
           >
             <h1 style="font: 0.64rem 'PingFang-SC-Regular'; color: #333; text-align: center; margin-bottom: 0.34rem">免责声明</h1>
             
-            <div class="disclaimer" v-html="Disclaimer"></div>
+            <div class="disclaimer" v-html="configInfo.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>
@@ -76,8 +120,11 @@
       </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>
+      <img src="~@/assets/img/returntop.png" @click="goTop" style="width: 30px; margin-bottom: 0.2rem" />
+    </div>
+
+
+    <AudioPlay ref="audioRef"/>
   </div>
 </template>
 
@@ -85,8 +132,9 @@
 import { getShareInfo,reportDetail } from "@/api/api.js";
 import _ from "lodash";
 import {wxShare,injectSdk} from "../utils/wxShare.js";
-
+import AudioPlay from '../report/audioPlay.vue';
 export default {
+  components: { AudioPlay },
   data() {
     return {
       id: this.$route.query.code || "",
@@ -102,14 +150,15 @@ export default {
       page_no: 0,
       pageSize: 20, //默认初始加载50个p标签
       total_page: 0,
-      Disclaimer: "",
       headImgStyle:null,//版头style
       endImgStyle:null,//版尾style
       layoutBaseInfo:{
           研报标题:'',
           研报作者:'',
           创建时间:''
-      }
+      },
+
+      configInfo: {}
     };
   },
   created() {
@@ -147,6 +196,29 @@ export default {
       }
     },
 
+    playaudio(item) {
+      //子组件先存后播
+      console.log(item);
+      if (
+        this.$store.state.audiolist.length > 0 &&
+        item.VideoUrl == this.$store.state.audiolist[0].VideoUrl
+      ) {
+        // this.$parent.playaudioplay();
+        this.$refs.audioRef.playaudioplay();
+      } else {
+        this.$refs.audioRef.setisshowaudio(
+          [
+            {
+              video_url: item.VideoUrl,
+              video_name: item.VideoName,
+              video_play_seconds: item.VideoPlaySeconds,
+            },
+          ],
+          0
+        );
+      }
+    },
+
     showTips() {
       //免责声明显示
       $("#tipsAlert").animate({ top: 0 });
@@ -170,6 +242,11 @@ export default {
       //   ? "【第" + 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.configInfo = {
+        ...Data,
+        Report:null
+      };
+
       this.headImgStyle=this.reportInfo.HeadStyle?JSON.parse(this.reportInfo.HeadStyle):[]
       this.endImgStyle=this.reportInfo.EndStyle?JSON.parse(this.reportInfo.EndStyle):[]
       this.layoutBaseInfo['研报标题']=this.reportInfo.Title
@@ -177,7 +254,6 @@ export default {
       // 已发布已通过的报告才显示发布时间
       this.layoutBaseInfo['创建时间']=[2,6].includes(this.reportInfo.State)?this.reportInfo.PublishTime:''
       
-      this.Disclaimer = Data.Disclaimer || "";
       this.isshow = true;
       this.$nextTick(()=>{
         this.pageResize()
@@ -309,16 +385,23 @@ body{
   }
   .no-layout-img-box{
     header{
-        padding:10px 0; box-sizing:border-box; font-size:28px; font-weight:500; color:#333; background:#fff; 
+        padding:10px 0; box-sizing:border-box; font-size:28px; font-weight:500; color:#333; background:#fff;
+        display: flex;
+        justify-content: space-between;
+        .logo {
+          flex-shrink: 0;
+          height: fit-content;
+        }
     }
   }
   .abstract{
     padding:10px 0; box-sizing:border-box; font-size:22px; line-height:36px;
+    border-left: 0.2rem solid #007aff;
+    margin:0.6rem 0;
     div{
         padding: 10px 20px;
         box-sizing: border-box;
-        background: rgba(20, 121, 253, 0.1);
-        color: #4099ef;
+        color: #333;
         border-radius: 10px;
     }
   }
@@ -357,7 +440,6 @@ body{
     left: 0;
     background: rgba(0, 0, 0, 0.6);
     z-index: 200;
-    display: none;
     .disclaimer {
       font-size: 0.58rem;
     }
@@ -368,6 +450,9 @@ body{
 			margin-bottom: 20px;
 			padding-bottom: 20px;
 			border-bottom: 1px dashed #ccc;
+      &:last-child {
+        border-bottom: none;
+      }
 			.type{
 				font-size: 15px;
 				color: #fff;

src/views/smartReport/detailPdf.vue

@@ -13,14 +13,20 @@
           </div>
         </div>
         <div class="no-layout-img-box" v-if="reportInfo && !!reportInfo.NeedSplice && (!reportInfo.HeadImg) && (!reportInfo.EndImg)">
-          <header>{{reportInfo.Title}}</header>
+          <header>
+            <span>{{reportInfo.Title}}</span>
+
+            <img class="logo" :src="configInfo.ReportLogo" alt="" v-if="configInfo.ReportLogo"/>
+          </header>
           <div style=" box-sizing:border-box; color:#666; font-size:24px; overflow:hidden;">
             <span>{{ reportInfo.Author}}</span>
             <span style="float:right;" v-if="[2,6].includes(reportInfo.State)">{{reportInfo.PublishTime}}</span>
           </div>
         </div>
-        <div class="abstract" v-if="reportInfo && !!reportInfo.NeedSplice">
-          <div v-if="reportInfo.Abstract">摘要： <span v-html="reportInfo.Abstract"></span></div> 
+        
+        <div class="abstract" v-if="reportInfo && !!reportInfo.NeedSplice"> 
+          <div v-if="reportInfo.Abstract">摘要：{{ reportInfo.Abstract }}</div>
+         
         </div>
 
         <!-- 章节报告 -->
@@ -35,6 +41,8 @@
         </div>
         <div id="resetcss" style="overflow:hidden;" v-html="reportInfo.Content" v-else></div>
 
+        <div class="disclaimer" v-html="configInfo.Disclaimer"></div>
+
         <div class="html-end-img-box" v-if="reportInfo && !!reportInfo.NeedSplice && reportInfo.EndImg">
           <img :src="reportInfo.EndImg" alt="" style="display:block;width:100%">
           <div class="head-layout-item" v-for="item in endImgStyle" :key="item.value"
@@ -67,7 +75,9 @@ export default {
           研报标题:'',
           研报作者:'',
           创建时间:''
-      }
+      },
+
+      configInfo: {}
     };
   },
   mounted() {
@@ -92,6 +102,11 @@ export default {
       if (Ret !== 200) return;
       
       this.reportInfo = Data.Report;
+      this.configInfo = {
+        ...Data,
+        Report:null
+      };
+
       this.headImgStyle=this.reportInfo.HeadStyle?JSON.parse(this.reportInfo.HeadStyle):[]
       this.endImgStyle=this.reportInfo.EndStyle?JSON.parse(this.reportInfo.EndStyle):[]
       this.layoutBaseInfo['研报标题']=this.reportInfo.Title
@@ -190,16 +205,23 @@ body{
   }
   .no-layout-img-box{
     header{
-        padding:10px 0; box-sizing:border-box; font-size:28px; font-weight:500; color:#333; background:#fff; 
+        padding:10px 0; box-sizing:border-box; font-size:28px; font-weight:500; color:#333; background:#fff;
+        display: flex;
+        justify-content: space-between;
+        .logo {
+          flex-shrink: 0;
+          height: fit-content;
+        }
     }
   }
   .abstract{
     padding:10px 0; box-sizing:border-box; font-size:22px; line-height:36px;
+    border-left: 0.2rem solid #007aff;
+    margin:0.6rem 0;
     div{
         padding: 10px 20px;
         box-sizing: border-box;
-        background: rgba(20, 121, 253, 0.1);
-        color: #4099ef;
+         color: #333;
         border-radius: 10px;
     }
   }
@@ -218,6 +240,9 @@ body{
 			margin-bottom: 20px;
 			padding-bottom: 20px;
 			border-bottom: 1px dashed #ccc;
+      &:last-child {
+        border-bottom: none;
+      }
 			.type{
 				font-size: 15px;
 				color: #fff;
@@ -232,6 +257,11 @@ body{
 			}
 		}
   }
+  .disclaimer{
+      font-size: 0.58rem;
+      padding: 30px 0;
+      border-top: 1px solid #ccc;
+  }
 }
 @media screen and (max-width:1200px){
   #reportdtl{