瀏覽代碼

活动中报告样式调整

jwyu 2 年之前
父節點
當前提交
e9fe9e6660
共有 4 個文件被更改,包括 149 次插入72 次删除
  1. 1 1
      src/utils/webLogin.js
  2. 87 42
      src/views/activity/ChapterDetail.vue
  3. 59 27
      src/views/activity/ReportDetail.vue
  4. 2 2
      src/views/report/Index.vue

+ 1 - 1
src/utils/webLogin.js

@@ -31,7 +31,7 @@ export const webLogin=async ()=>{
             if(!res.data.is_bind){
                 store.commit('showBindAccount',true)
             }else{
-                location.href(import.meta.env.VITE_APP_REDIRECT_URI)
+                window.location.href=import.meta.env.VITE_APP_REDIRECT_URI
             }
         }
     }else{

+ 87 - 42
src/views/activity/ChapterDetail.vue

@@ -16,11 +16,13 @@ const getInfo=async ()=>{
 getInfo()
 
 // 获取底部列表
+let info2=ref(null)
 let botList=ref([])
 const getBotList=async ()=>{
     const res=await apiGetReportDetail({research_report_id:Number(route.query.research_report_id)})
     if(res.code===200){
         botList.value=res.data.research_report_type_list
+        info2.value=res.data.research_report_info
     }
 }
 getBotList()
@@ -51,7 +53,7 @@ onMounted(()=>{
 })
 
 // 免责声明
-let disclaimers=ref(false)
+let showDisclaimers=ref(false)
 
 //点击切换章节
 const chapterTypeChange=(item)=>{
@@ -69,13 +71,20 @@ const chapterTypeChange=(item)=>{
         <!-- 章节详情 -->
         <div class="other-type-wrap">
             <div class="section top-box">
-                <h1 class="title">【{{info.research_report_type_info.research_report_type_title}}】</h1>
-                <div class="flag-box" style="margin:14px 0">
+                <span class="title">【第{{info2.periods}}期 | {{info2.type=='week'?'周报':'晨报'}} | {{info.research_report_type_info.report_chapter_type_name}}】{{info.research_report_type_info.research_report_type_title}}</span>
+                <!-- <div class="flag-box" style="margin:14px 0">
                     <img style="width:18px;vertical-align: middle;display: inline-block;" :src="info.research_report_type_info.banner_url" alt="">
                     <span style="vertical-align: middle;margin:0 13px 0 6px;display: inline-block;">{{info.research_report_type_info.report_chapter_type_name}}</span>
                     <span style="vertical-align: middle;color:#999999;display: inline-block;">弘则研究</span>
+                </div> -->
+                <div class="flex author">
+                    <span>FICC团队</span>
+                    <span class="time">{{moment(info2.researchReportDate).format('YYYY-MM-DD HH:mm:ss')}}</span>
+                </div>
+                <div class="tips">
+                    <span>注:请务必阅读</span>
+                    <span style="color:#F3A52F;margin-left:20px;cursor: pointer;" @click="showDisclaimers=true">免责声明</span>
                 </div>
-                <p><span>注:请务必阅读</span><span style="margin-left:5px;color:#DAB37C;cursor: pointer;" @click="disclaimers=true">免责声明</span></p>
             </div>
             <div class="section content-wrap">
                 <div class="item" v-for="item in info.research_report_type_content_list" :key="item.sort">
@@ -85,7 +94,7 @@ const chapterTypeChange=(item)=>{
             </div>
             <!-- 种类快捷切换 -->
             <div class="section classify-list">
-                <div style="font-size:16px;color:#999">更多</div>
+                <div class="top-name">更多</div>
                 <ul class="flex list">
                     <li 
                         :class="['item',item.ResearchReportTypeId==research_report_type_id&&'active']" 
@@ -110,50 +119,66 @@ const chapterTypeChange=(item)=>{
         :url-list="preViewImgs"
     />
 
-    <!-- 免责声明 -->
-    <el-dialog
-        v-model="disclaimers"
-        title="免责声明"
-        width="40%"
-        draggable
-        center
-    >
-        <div>
-            <p>
-                1、本报告仅供弘则弥道(上海)投资咨询有限公司正式签约的机构客户使用,不会仅因接收人/接受机构收到本报告而将其视为客户。
-            </p>
-            <p>
-                2、本报告根据国际和行业通行的准则,以合法渠道获得这些信息,尽可能保证可靠、准确和完整,但并不保证报告所述信息的准确性和完整性,也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。
-            </p>
-            <p>
-                3、报告中的内容不对投资者做出的最终操作建议做任何的担保,也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议,也不作为道义的、责任的和法律的依据或者凭证,无论是否已经明示或者暗示。
-            </p>
-            <p>
-                4、在任何情况下,本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任,客户/接受人/接受机构需自行承担全部风险。
-            </p>
+    <!-- 免责申明 -->
+    <el-dialog v-model="showDisclaimers" title="免责声明" center draggable width="40%">
+        <div class="disclaimers-box">
+            <div style="margin-bottom:10px">1、本报告仅供弘则弥道(上海)投资咨询有限公司正式签约的机构客户使用,不会仅因接收人/接受机构收到本报告而将其视为客户。</div>
+            <div style="margin-bottom:10px">2、本报告根据国际和行业通行的准则,以合法渠道获得这些信息,尽可能保证可靠、准确和完整,但并不保证报告所述信息的准确性和完整性,也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。</div>
+            <div style="margin-bottom:10px">3、报告中的内容不对投资者做出的最终操作建议做任何的担保,也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议,也不作为道义的、责任的和法律的依据或者凭证,无论是否已经明示或者暗示。</div>
+            <div style="margin-bottom:10px">4、在任何情况下,本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任,客户/接受人/接受机构需自行承担全部风险。</div>
         </div>
     </el-dialog>
 </template>
 
 <style lang="scss" scoped>
 .report-detail-page{
-    border: 1px solid #EBEBEB;
-    border-radius: 4px;
-    margin-top: 30px;
     .section{
         padding: 20px;
     }
 }
 .other-type-wrap{
     .top-box{
-        border-bottom: 1px dashed #EBEBEB;
         .title{
-            font-size: 20px;
-            margin: 0;
+            font-size: 24px;
+            font-weight: bold;
+            margin-left: -13px;
+        }
+        .author{
+            margin-top: 20px;
+            color: #666;
+            justify-content: space-between;
+        }
+        .tips{
+            margin-top: 20px;
+            font-size: 18px;
+            &::before{
+                content: '';
+                width: 6px;
+                height: 28px;
+                display: inline-block;
+                background-color: #F3A52F;
+                margin-right: 10px;
+                position: relative;
+                top: 8px;
+            }
+        }
+        .sub-title{
+            margin-top: 30px;
+            font-size: 18px;
+                &::before{
+                    content: '';
+                    display: inline-block;
+                    width: 6px;
+                    height: 28px;
+                    background: #F3A52F;
+                    margin-right: 6px;
+                    position: relative;
+                    top: 8px;
+                }
+            
         }
     }
     .content-wrap{
-        border-bottom: 1px dashed #EBEBEB;
         .item{
             .content-title{
                 font-size: 20px;
@@ -163,15 +188,15 @@ const chapterTypeChange=(item)=>{
                     display: inline-block;
                     margin-right: 5px;
                     position: relative;
-                    top: 4px;
+                    top: 7px;
                     width: 6px;
-                    height: 20px;
-                    background: #DAB37C;
+                    height: 28px;
+                    background: #F3A52F;
                 }
             }
             .content-text{
-                font-size: 16px;
-                line-height: 1.75;
+                font-size: 18px;
+                line-height: 1.8;
                 :deep(img){
                     max-width: 100%;
                     margin-left: auto;
@@ -184,15 +209,35 @@ const chapterTypeChange=(item)=>{
     }
 }
 .classify-list{
+    .top-name{
+            text-align: center;
+            color: #F3A52F;
+            font-size: 18px;
+            margin-bottom: 50px;
+            &::before,&::after{
+                content: '';
+                display: inline-block;
+                width: 83px;
+                height: 1px;
+                background-color: #F3A52F;
+                vertical-align: middle;
+                margin: 0 22px;
+            }
+    }
     .list{
         margin-top: 20px;
         flex-wrap: wrap;
         .item{
-            padding: 7px 8px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 148px;
+            height: 36px;
             background-color: #F7F7F7;
             border-radius: 4px;
-            margin-right: 12px;
-            margin-bottom: 12px;
+            margin-right: 20px;
+            margin-bottom: 20px;
+            cursor: pointer;
             cursor: pointer;
             img{
                 width: 20px;
@@ -206,7 +251,7 @@ const chapterTypeChange=(item)=>{
             }
         }
         .active{
-            border:1px solid #DAB37C;
+            border:1px solid #F3A52F;
         }
     }
 }

+ 59 - 27
src/views/activity/ReportDetail.vue

@@ -2,8 +2,11 @@
 import moment from 'moment'
 import {ref,onMounted} from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex';
 const route=useRoute()
 const router=useRouter()
+const store=useStore()
+moment.locale('zh-cn')
 
 import {apiGetReportDetail} from '@/api/activity'
 let info=ref(null)
@@ -11,6 +14,9 @@ const getInfo=async ()=>{
     const res=await apiGetReportDetail({research_report_id:Number(route.query.research_report_id)})
     if(res.code===200){
         info.value=res.data
+        if(['day','week'].includes(res.data.research_report_info.type)){
+            store.commit('modifyBreadCrumb',res.data.research_report_info.type=='day'?'晨报':'周报')
+        }
     }
 }
 getInfo()
@@ -62,6 +68,7 @@ const goChapterDetail=(item)=>{
     })
 }
 
+let showDisclaimers=ref(false)
 </script>
 
 
@@ -114,11 +121,16 @@ const goChapterDetail=(item)=>{
         <!-- 其他类型 -->
         <div class="other-type-wrap" v-else>
             <div class="section top-box">
-                <h1 class="title">【第{{info.research_report_info.periods}}期 | {{info.research_report_info.reportVariety}}】</h1>
-                <div class="flex sub-title">
-                    <div class="left">{{info.research_report_info.researchReportName.substring(info.research_report_info.researchReportName.indexOf('】')+1)}}</div>
-                    <span class="time">{{moment(info.research_report_info.researchReportDate).format('YYYY-MM-DD')}}</span>
+                <span class="title">【第{{info.research_report_info.periods}}期 | {{info.research_report_info.reportVariety}}】</span>
+                <div class="flex author">
+                    <span>FICC团队</span>
+                    <span class="time">{{moment(info.research_report_info.researchReportDate).format('YYYY-MM-DD HH:mm:ss')}}</span>
+                </div>
+                <div class="tips">
+                    <span>注:请务必阅读</span>
+                    <span style="color:#F3A52F;margin-left:20px;cursor: pointer;" @click="showDisclaimers=true">免责声明</span>
                 </div>
+                <div class="sub-title">摘要:{{info.research_report_info.researchReportName.substring(info.research_report_info.researchReportName.indexOf('】')+1)}}</div>
             </div>
             <div class="section content-wrap">
                 <div class="item" v-for="item in info.ResearchReportTypeContentList" :key="item.sort">
@@ -135,11 +147,20 @@ const goChapterDetail=(item)=>{
         @close="showPreViewImg=false"
         :url-list="preViewImgs"
     />
+
+    <!-- 免责申明 -->
+    <el-dialog v-model="showDisclaimers" title="免责声明" center draggable width="40%">
+        <div class="disclaimers-box">
+            <div style="margin-bottom:10px">1、本报告仅供弘则弥道(上海)投资咨询有限公司正式签约的机构客户使用,不会仅因接收人/接受机构收到本报告而将其视为客户。</div>
+            <div style="margin-bottom:10px">2、本报告根据国际和行业通行的准则,以合法渠道获得这些信息,尽可能保证可靠、准确和完整,但并不保证报告所述信息的准确性和完整性,也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。</div>
+            <div style="margin-bottom:10px">3、报告中的内容不对投资者做出的最终操作建议做任何的担保,也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议,也不作为道义的、责任的和法律的依据或者凭证,无论是否已经明示或者暗示。</div>
+            <div style="margin-bottom:10px">4、在任何情况下,本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任,客户/接受人/接受机构需自行承担全部风险。</div>
+        </div>
+    </el-dialog>
 </template>
 
 <style lang="scss" scoped>
 .report-detail-page{
-    margin-top: 30px;
     .section{
         padding: 20px;
     }
@@ -235,34 +256,45 @@ const goChapterDetail=(item)=>{
 }
 .other-type-wrap{
     .top-box{
-        border-bottom: 1px dashed #EBEBEB;
         .title{
-            font-size: 20px;
-            margin: 0;
+            font-size: 24px;
+            font-weight: bold;
+            margin-left: -13px;
         }
-        .sub-title{
+        .author{
+            margin-top: 20px;
+            color: #666;
             justify-content: space-between;
+        }
+        .tips{
             margin-top: 20px;
-            .left{
-                font-size: 16px;
+            font-size: 18px;
+            margin-bottom: 30px;
+            &::before{
+                content: '';
+                width: 6px;
+                height: 28px;
+                display: inline-block;
+                background-color: #F3A52F;
+                margin-right: 10px;
+                position: relative;
+                top: 8px;
+            }
+        }
+        .sub-title{
+            margin-top: 30px;
+            font-size: 18px;
                 &::before{
                     content: '';
                     display: inline-block;
                     width: 6px;
-                    height: 20px;
-                    background: #DAB37C;
+                    height: 28px;
+                    background: #F3A52F;
                     margin-right: 6px;
                     position: relative;
-                    top: 4px;
+                    top: 8px;
                 }
-            }
-            .time{
-                color: #B6B6B6;
-                margin-left: 20px;
-                flex-shrink: 0;
-                position: relative;
-                top: 7px;
-            }
+            
         }
     }
     .content-wrap{
@@ -275,15 +307,15 @@ const goChapterDetail=(item)=>{
                     display: inline-block;
                     margin-right: 5px;
                     position: relative;
-                    top: 4px;
+                    top: 7px;
                     width: 6px;
-                    height: 20px;
-                    background: #DAB37C;
+                    height: 28px;
+                    background: #F3A52F;
                 }
             }
             .content-text{
-                font-size: 16px;
-                line-height: 1.75;
+                font-size: 18px;
+                line-height: 1.8;
                 :deep(img){
                     max-width: 100%;
                     margin-left: auto;

+ 2 - 2
src/views/report/Index.vue

@@ -323,9 +323,9 @@ onActivated(()=>{
         </div>
         <div class="hot-box" style="margin-top: 60px;">
           <div class="label">上新公告</div>
-          <div class="img-con" :style="'background-image:url('+newAnnounce.ImgUrl+')'" v-if="newAnnounce">
+          <div class="img-con" :style="'background-image:url('+newAnnounce.ImgUrl+')'" v-if="newAnnounce" @click="handleClickAnnounce(newAnnounce)">
             <!-- 活动的话要手搓文字上去 -->
-            <div class="activity-con" v-if="newAnnounce.redirect_type==0" @click="handleClickAnnounce(newAnnounce)">
+            <div class="activity-con" v-if="newAnnounce.redirect_type==0">
               <div class="multi-ellipsis title">{{newAnnounce.Activity.activityTypeName}}</div>
               <div class="user-name">主讲人: {{newAnnounce.Activity.speaker}}</div>
               <div class="time">{{formatAnnounceActivityTime(newAnnounce.Activity.startTime,newAnnounce.Activity.endTime)}}</div>