初步完成首页和报告详情页

src/router/index.js

@@ -12,7 +12,7 @@ const routes=[
   {
     path: "/",
     name: "Layout",
-    redirect:'/activity/list',
+    redirect:'/report/index',
     component: ()=>import("@/layout/Index.vue"),
   },
   //活动模块

src/style/global.scss

@@ -165,6 +165,7 @@ img {
   display: flex;
   .content-box{
     flex:1;
+    padding-right: 30px;
   }
 
   .right-aside-box {

src/views/report/Detail.vue

@@ -1,5 +1,7 @@
 <script setup>
 import {ref} from 'vue'
+import moment from 'moment';
+import AudioBox from './components/AudioBox.vue'
 import {apiReportDetail} from '@/api/report'
 import { useRoute, useRouter } from 'vue-router';
 
@@ -19,7 +21,7 @@ const getReportDetail=async ()=>{
         audioData.value={
             auth_ok:res.data.auth_ok,
             video_name:res.data.report_info.video_name,
-            video_size:res.data.report_info.video_size,
+            video_size:res.data.report_info.video_size||'',
             video_play_seconds:res.data.report_info.video_play_seconds,
             video_url:res.data.report_info.video_url
         }
@@ -32,10 +34,85 @@ getReportDetail()
 </script>
 
 <template>
-    <div class="report-detail-page">
+    <div class="report-detail-page" v-if="info">
         <div class="hasrightaside-box">
             <div class="content-box">
+                <!-- 晨报、周报章节 -->
+                <div class="chapter-list-wrap" v-if="['晨报','周报'].includes(info.report_info.classify_name_first)">
+                    <div class="top-box" :style="'background-image:url(' + info.report_info.banner_url + ')'">
+                        <div class="title">{{info.report_info.classify_name_first}}</div>
+                        <div class="sub-title">{{info.report_info.title}}</div>
+                        <div class="flex top-bot">
+                            <div class="flex time-box">
+                                <div class="day">{{formatChapterTime(info.report_info.publish_time,'day')}}</div>
+                                <div>
+                                    <div>{{formatChapterTime(info.report_info.publish_time,'week')}}</div>
+                                    <div>{{formatChapterTime(info.report_info.publish_time,'year-month')}}</div>
+                                </div>
+                            </div>
+                            <div class="num">第{{info.report_info.stage}}期</div>
+                        </div>
+                    </div>
+                    <div class="list-box">
+                        <div class="flex item" v-for="item in chapterList" :key="item.report_chapter_id" @click="goChapterDetail(item)">
+                            <van-image class="img" :src="item.report_chapter_type_thumb" mode="aspectFill" />
+                            <div class="con">
+                                <div class="title">
+                                    {{item.report_chapter_type_name}} 
+                                    <text class="tag" :style="{backgroundColor:getTagColor(tag)}" v-for="tag in item.trend.split(',')" :key="tag">{{tag}}</text>
+                                </div>
+                                <div class="van-multi-ellipsis--l2 sub-title">{{item.title}}</div>
+                                <div class="update-time">更新至：{{formatChapterTime(item.publish_time,'year-month-day')}}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 无权限 -->
+                    <div class="no-auth-box" v-if="!info.auth_ok">
+                        <img class="img" src="https://hzstatic.hzinsights.com/static/icon/hzyb/activity_no_auth.png" mode="widthFix" />
+                        <div class="apply-box" v-if="info.permission_check.type=='apply'">
+                            <div>您暂无权限查看报告，若想查看请申请开通</div>
+                            <div class="btn" @click="handleGoApply">立即申请</div>
+                        </div>
+                        <div class="apply-box" v-else>
+                            <div>您暂无权限查看报告 </div>
+                            <div>若想查看请联系对口销售：{{info.permission_check.name}}</div>
+                            <a class="btn" :href="'tel:'+info.permission_check.mobile" tag="div">立即联系</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- 报告详情 -->
+                <div class="report-box" v-else>
+                    <div class="title">【第{{info.report_info.stage}}期｜{{info.report_info.classify_name_second}}】{{info.report_info.title}}</div>
+                    <div class="time">
+                        <span>FICC团队</span>
+                        <span>{{moment(info.report_info.publish_time).format('YYYY.MM.DD HH:mm')}}</span>
+                    </div>
+                    <div class="tips">
+                        <span>注：请务必阅读</span>
+                        <span style="color:#F3A52F;margin-left:20px;cursor: pointer;">免责声明</span>
+                    </div>
+                    <!-- 音频模块 -->
+                    <AudioBox :data="audioData" v-if="info.report_info.video_url&&info.report_info.video_play_seconds>0"></AudioBox>
+                    <div class="abstract" v-if="info.report_info.abstract">摘要：{{info.report_info.abstract}}</div>
+
+                    <div class="rich-content">
+                        <div v-html="info.report_info.content" v-if="info.auth_ok"></div>
+                        <div v-html="info.report_info.content_sub" v-else></div>
+                    </div>
 
+                    <!-- 无权限 -->
+                    <div class="no-auth-wrap" v-if="!info.auth_ok">
+                        <div class="apply-box" v-if="info.permission_check.type=='apply'">
+                            <div>您暂无权限查看报告，若想查看请申请开通</div>
+                            <div class="btn" @click="handleGoApply">立即申请</div>
+                        </div>
+                        <div class="apply-box" v-else>
+                            <div>您暂无权限查看报告 </div>
+                            <div>若想查看请联系对口销售：{{info.permission_check.name}}</div>
+                            <a class="btn" :href="'tel:'+info.permission_check.mobile" tag="div">立即联系</a>
+                        </div>
+                    </div>
+                </div>
             </div>
             <div class="right-aside-box">
                 <div class="fix-top">
@@ -78,8 +155,180 @@ getReportDetail()
 
 <style lang="scss" scoped>
 .report-detail-page{
-    .content-box{
-        
+    .report-box{
+        .title{
+            display: inline;
+            font-size: 24px;
+            font-weight: bold;
+            margin-left: -14px;
+        }
+        .time{
+            color: #666;
+            margin-top: 20px;
+            margin-bottom: 30px;
+            font-size: 16px;
+            span:last-child{
+                float: right;
+            }
+        }
+        .tips{
+            font-size: 18px;
+            margin-bottom: 30px;
+            &::before{
+                content: '';
+                width: 6px;
+                height: 30px;
+                display: inline-block;
+                background-color: #F3A52F;
+                margin-right: 10px;
+                position: relative;
+                top: 10px;
+            }
+        }
+        .abstract{
+            font-size: 18px;
+            font-weight: bold;
+            margin-top: 20px;
+            &::before{
+                content: '';
+                width: 6px;
+                height: 30px;
+                display: inline-block;
+                background-color: #F3A52F;
+                margin-right: 10px;
+                position: relative;
+                top: 10px;
+            }
+        }
+        .rich-content{
+            margin-top: 30px;
+            line-height: 1.8;
+            font-size: 18px;
+            :deep(img){
+                width: 100% !important;
+            }
+            :deep(span){
+                font-size: 18px !important;
+                line-height: 1.8 !important;
+            }
+            :deep(p){
+                font-size: 18px !important;
+                line-height: 1.8 !important;
+            }
+        }
+    }
+    
+    .chapter-list-wrap{
+        .top-box{
+            height: 418px;
+            background-color: rgba($color: #000000, $alpha: 0.7);
+            background-size: cover;
+            color: #fff;
+            position: relative;
+            .title{
+                text-align: center;
+                font-size: 34px;
+                font-weight: 600;
+                padding-top: 78px;
+            }
+            .sub-title{
+                font-size: 32px;
+                text-align: center;
+                width: 70%;
+                margin-left: auto;
+                margin-right: auto;
+            }
+            .top-bot{
+                position: absolute;
+                bottom: 70px;
+                left: 34px;
+                right: 34px;
+                justify-content: space-between;
+                align-items: flex-end;
+                .time-box{
+                    align-items: center;
+                    font-size: 24px;
+                    .day{
+                        font-size: 32px;
+                        border-right: 1px solid #fff;
+                        padding-right: 15px;
+                        margin-right: 15px;
+                    }
+                }
+                
+            }
+        }
+        .list-box{
+            margin-top: -50px;
+            border-top-left-radius: 40px;
+            border-top-right-radius: 40px;
+            min-height: 100px;
+            background-color: #fff;
+            position: relative;
+            z-index: 2;
+            .item{
+                padding: 30px 34px;
+                border-bottom: 1px solid #E5E5E5;
+                .img{
+                    width: 104px;
+                    height: 104px;
+                    // background-color: #f5f5f5;
+                    flex-shrink: 0;
+                    margin-right: 20px;
+                }
+                .con{
+                    flex: 1;
+                    position: relative;
+                    .title{
+                        font-size: 28px;
+                        color: #57768D;
+                        font-weight: bold;
+                        margin-bottom: 5px;
+                        .tag{
+                            font-size: 20px;
+                            color: #fff;
+                            font-weight: normal;
+                            display: inline-block;
+                            background-color: #1E88E5;
+                            line-height: 37px;
+                            padding: 0 6px;
+                            border-radius: 4px;
+                            margin-left: 10px;
+                        }
+                    }
+                    .sub-title{
+                        color: #999;
+                    }
+                    .update-time{
+                        position: absolute;
+                        top: 0;
+                        right: 0;
+                        color: #D4D4D4;
+                        font-size: 20px;
+                    }
+                }
+            }
+        }
+        .no-auth-box{
+            text-align: center;
+            font-size: 32px;
+            color: #E3B377;
+            img{
+                width: 100%;
+                margin-bottom: 50px;
+            }
+            .btn{
+                width: 90%;
+                margin-left: auto;
+                margin-right: auto;
+                line-height: 80px;
+                background-color: #E6B77D;
+                border-radius: 4px;
+                color: #fff;
+                margin-top: 100px;
+                display: block;
+            }
+        }
     }
 }
 </style>

src/views/report/Index.vue

@@ -160,7 +160,7 @@ const formatDate=(e)=>{
     </teleport>
   </template>
   <div class="hasrightaside-box report-list-page">
-    <div class="report-main">
+    <div class="content-box report-main">
       <div class="top-nav-wrap">
         <div class="flex first-nav">
           <div 
@@ -250,7 +250,6 @@ $active-color: #f3a52f;
 .report-list-page {
   position: relative;
   .report-main {
-    padding-right: 250px;
     .top-nav-wrap {
       position: fixed;
       top: 60px;
@@ -258,8 +257,8 @@ $active-color: #f3a52f;
       background-color: #fff;
       padding-top: 30px;
       padding-bottom: 12px;
-      min-width: 880px;
-      max-width: 1240px;
+      // min-width: 880px;
+      // max-width: 1240px;
       width: 100%;
       border-bottom: 1px solid #f2f2f2;
       .first-nav {
@@ -338,13 +337,13 @@ $active-color: #f3a52f;
       }
       .item-time {
         font-size: 16px;
-        margin-bottom: 40px;
+        margin-bottom: 20px;
       }
 
       .content-list {
         padding-left: 20px;
         .content-box {
-          padding: 0 0px 20px 14px;
+          padding: 0 0px 10px 14px;
           position: relative;
           .all-btn {
             position: absolute;
@@ -364,7 +363,7 @@ $active-color: #f3a52f;
         }
 
         .content-item {
-          padding: 0 0 50px 20px;
+          padding: 0 0 30px 20px;
           border-left: 1px solid #F3A52F;
           position: relative;
 
@@ -422,6 +421,10 @@ $active-color: #f3a52f;
             margin-top: 10px;
             color: #666666;
             font-size: 14px;
+            :deep(div){
+              word-wrap: break-word;
+            }
+            word-wrap: break-word;
           }
 
           .tags {