|
|
@@ -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">
|
|
|
+ *注：请务必阅读 <strong
|
|
|
+ style="fontweight: normal; cursor: pointer; color: #3e8ce6"
|
|
|
+ @click="showTips"
|
|
|
+ >免责声明</strong
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 章节报告 -->
|
|
|
@@ -55,6 +99,8 @@
|
|
|
<div
|
|
|
style="
|
|
|
width: 100%;
|
|
|
+ max-width:1200px;
|
|
|
+ margin:0 auto;
|
|
|
padding: 0.8rem 0.66rem 2.2rem;
|
|
|
box-sizing: border-box;
|
|
|
font: 0.52rem/0.8rem 'PingFang-SC-Regular';
|
|
|
@@ -65,21 +111,9 @@
|
|
|
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'; color: #333; text-align: center; margin-bottom: 0.34rem">免责声明</h1>
|
|
|
- <!-- <p>
|
|
|
- 1、本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会仅因接收人/接受机构收到本报告而将其视为客户。
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- 2、本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- 3、报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- 4、在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。
|
|
|
- </p> -->
|
|
|
- <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>
|
|
|
@@ -88,8 +122,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>
|
|
|
|
|
|
@@ -97,8 +134,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 || "",
|
|
|
@@ -114,14 +152,15 @@ export default {
|
|
|
page_no: 0,
|
|
|
pageSize: 20, //默认初始加载50个p标签
|
|
|
total_page: 0,
|
|
|
- Disclaimer: "",
|
|
|
headImgStyle:null,//版头style
|
|
|
endImgStyle:null,//版尾style
|
|
|
layoutBaseInfo:{
|
|
|
研报标题:'',
|
|
|
研报作者:'',
|
|
|
创建时间:''
|
|
|
- }
|
|
|
+ },
|
|
|
+
|
|
|
+ configInfo: {}
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -159,13 +198,36 @@ 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 });
|
|
|
},
|
|
|
hideTips() {
|
|
|
//免责声明收起
|
|
|
- $("#tipsAlert").animate({ top: "-120rem" });
|
|
|
+ $("#tipsAlert").animate({ top: "-9999px" });
|
|
|
},
|
|
|
goTop() {
|
|
|
document.body.scrollTop = document.documentElement.scrollTop = 0;
|
|
|
@@ -182,6 +244,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
|
|
|
@@ -189,7 +256,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()
|
|
|
@@ -321,31 +387,40 @@ 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;
|
|
|
+ box-sizing:border-box; font-size:22px; line-height:36px;
|
|
|
+ border-left: 0.2rem solid #007aff;
|
|
|
+ margin:0.6rem 0;
|
|
|
div{
|
|
|
- padding: 10px 20px;
|
|
|
+ padding: 5px 20px;
|
|
|
box-sizing: border-box;
|
|
|
- background: rgba(20, 121, 253, 0.1);
|
|
|
- color: #4099ef;
|
|
|
+ color: #333;
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
}
|
|
|
- // 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;
|
|
|
- // }
|
|
|
- // }
|
|
|
+ #playcon {
|
|
|
+ margin-top: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+ > div {
|
|
|
+ width: 100%;
|
|
|
+ height: 2.96rem;
|
|
|
+ padding: 0.48rem 0.6rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #f1f1f1;
|
|
|
+ border-radius: 0.2rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
#resetcss {
|
|
|
pre {
|
|
|
white-space: pre-wrap;
|
|
|
@@ -365,11 +440,10 @@ body{
|
|
|
padding: 15% 1rem;
|
|
|
box-sizing: border-box;
|
|
|
position: fixed;
|
|
|
- top: -120rem;
|
|
|
+ top: -99999px;
|
|
|
left: 0;
|
|
|
background: rgba(0, 0, 0, 0.6);
|
|
|
z-index: 200;
|
|
|
- display: none;
|
|
|
.disclaimer {
|
|
|
font-size: 0.58rem;
|
|
|
}
|
|
|
@@ -380,6 +454,9 @@ body{
|
|
|
margin-bottom: 20px;
|
|
|
padding-bottom: 20px;
|
|
|
border-bottom: 1px dashed #ccc;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
.type{
|
|
|
font-size: 15px;
|
|
|
color: #fff;
|
