ETA_1.1.7 预提测

src/api/report.js

@@ -14,8 +14,7 @@ export const apiReportDetail=params=>{
 }
 
 /**
- * 研报分类
- * @param classify_type 0是英文研报，1是线上路演
+ * 研报分类 英文研报与线上路演分类相同
  */
 export const apiReportClassifyList=(params)=>{
     return get('/english_report/classify',params)

src/components/Pagination.vue

@@ -0,0 +1,73 @@
+<!-- 分页器 -->
+<script setup>
+  const props=defineProps({
+    page_no:{
+      type:Number,
+      default:1
+    },
+    pageSize: {
+			type:Number,
+			default:10
+		},
+		total: {
+			type:Number,
+			default:0
+		}
+  })
+  const emits = defineEmits(['handleCurrentChange','handleSizeChange'])
+  // 页码改变
+  const handleCurrentChange=(page)=>{
+    emits('handleCurrentChange',page)
+  }
+  // 每页数量变化
+  const handleSizeChange=(pageSize)=>{
+    emits('handleSizeChange',pageSize)
+  }
+</script>
+
+<template>
+  <el-pagination
+    layout='prev, pager, next, jumper, ->, total,sizes'
+    :current-page="page_no"
+    @current-change="handleCurrentChange"
+    @size-change="handleSizeChange"
+    :page-size="pageSize" 
+    :total="total"
+    v-show="total!=0"
+    class="pagination"
+    id="pagination"
+  >
+  </el-pagination>
+</template>
+<style lang="scss" scoped>
+  .pagination{
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    background-color: white;
+  }
+</style>
+<style lang="scss">
+  #pagination{
+    *{
+      font-size: 12px;
+    }
+    .el-pagination__rightwrapper{
+      order: -1;
+      justify-content: flex-start;
+    }
+    .el-input__wrapper{
+      height: 28px;
+      box-sizing: border-box;
+    }
+    .el-pagination__editor.el-input{
+      display: flex;
+      align-items: center;
+    }
+    .el-select .el-input{
+      width: 92px;
+    }
+  }
+
+</style>

src/views/report/Detail.vue

@@ -5,6 +5,7 @@ import {apiReportDetail,apiReportClassifyList} from '@/api/report'
 import AvatarPopover from '../../components/AvatarPopover.vue';
 import {goYBPCCN,userInfoGo} from '@/utils/common.js'
 import NoAuthBox from '@/components/NoAuthBox.vue';
+import { ArrowRightBold } from '@element-plus/icons-vue';
 
 
 const route=useRoute()
@@ -13,28 +14,6 @@ const router=useRouter()
 const userInfo=localStorage.getItem('user_info')?JSON.parse(localStorage.getItem('user_info')):{}
 
 
-//分类
-// let reportClassify=ref([])
-// async function getReportClassify(){
-//     const res=await apiReportClassifyList()
-//     if(res.code===200){
-//         const arr=res.data.list||[]
-//         reportClassify.value=[...arr,{id: -1, classify_name: "Online Video"},{id: 0,classify_name: "ABOUT US"}]
-//     }
-// }
-// getReportClassify()
-
-//点击分类
-// function goIndex(item){
-//     router.replace({
-//         path:'/report/index',
-//         query:{
-//             firstclassifyid:item.id
-//         }
-//     })
-// }
-
-
 //报告详情
 const code=route.query.code
 const email=route.query.ShareEmail||0
@@ -78,21 +57,11 @@ let showFilter=ref(false)
 let filterSize=ref('30%')
 
 async function getReportNav(){
-    const res=await apiReportClassifyList({classify_type:0})
-    const videores=await apiReportClassifyList({classify_type:1})
+    const res=await apiReportClassifyList()
     if(res.code===200){
         const arr=res.data.list||[]
-        let videoResList=[]
-        if(videores.code===200){
-            videoResList=videores.data.list||[]
-        }
         navList.value=[
             ...arr,
-            {
-                id: -1,
-                classify_name: "ONLINE VEDIO",
-                child: videoResList
-            },
             {
                 id: 0,
                 classify_name: "ABOUT US",
@@ -103,7 +72,7 @@ async function getReportNav(){
 }
 getReportNav()
 
-function handleChangeFirstClassify(item){
+function handleChangeRootClassify(item){
     if(item.id==0){
         router.replace({
             path:'/'
@@ -111,17 +80,40 @@ function handleChangeFirstClassify(item){
     }    
 }
 
-function handleChangeSecClassify(item,pitem){
+function handleChangeFirstClassify(item,pitem){
+        router.replace({
+            path:'/report/index',
+            query:{
+                firstclassifyid:item.id,
+                secclassifyid:0,
+                rootclassifyid:pitem.id
+            }
+        })
+
+}
+
+function handleChangeSecClassify(item,pitem,rootItem){
         router.replace({
             path:'/report/index',
             query:{
                 firstclassifyid:pitem.id,
-                secclassifyid:item.id
+                secclassifyid:item.id,
+                rootclassifyid:rootItem.id
             }
         })
 
 }
 
+const nodeClick=(rootItem,data,node)=>{
+    if(!data.child){
+        // 二级分类
+        handleChangeSecClassify(data,node.parent.data,rootItem)
+    }else{
+        // 一级分类
+        handleChangeFirstClassify(data,rootItem)
+    }
+}
+
 onMounted(()=>{
     wwidth.value=window.innerWidth
 })
@@ -144,7 +136,7 @@ onMounted(()=>{
         </div>
         <div class="mobile-header-wrap">
             <img class="menu-icon" @click="showFilter=true;filterSize='100%'" src="@/assets/menu.svg" alt="">
-            <span @click="$router.replace('/')">HORIZON INSIGHTS</span>
+            <span @click="$router.replace('/')" style="cursor: pointer;">HORIZON INSIGHTS</span>
             <img src="@/assets/icons/avatar.svg" class="user-info-avatar" @click="userInfoGo" />
         </div>
         <div class="no-select-text detail-wrap">
@@ -158,6 +150,12 @@ onMounted(()=>{
                 <div v-if="info.key_takeaways" style="margin-top:20px">Key Takeaways：<span v-html="info.key_takeaways"></span></div>
                 <div class="notes">*Note: Please be sure to read the <span style="color:#00459F" @click="showDisclaimers=true">disclaimer</span></div>
             </div>
+            <div class="time-classify-name">
+                <span>{{info.classify_name_root}}</span>
+                <span v-show="info.classify_name_first!==info.classify_name_root">{{info.classify_name_first}}</span>
+                <span v-show="info.classify_name_first!==info.classify_name_second && 
+                    info.classify_name_root!==info.classify_name_second">{{info.classify_name_second}}</span>
+            </div>
             <div class="overview-box">
                 <div class="label">Overview:</div>
                 <div v-html="info.overview"></div>
@@ -189,8 +187,14 @@ onMounted(()=>{
     >
         <div class="filter-wrap">
             <div class="item" v-for="item in navList" :key="item.id">
-                <span  class="title" @click="handleChangeFirstClassify(item)">{{item.classify_name}}</span>
-                <div class="text" v-for="_item in item.child" :key="_item.id" @click="handleChangeSecClassify(_item,item)">{{_item.classify_name}}</div>
+                <span  class="title" @click="handleChangeRootClassify(item)">{{item.classify_name}}</span>
+                <!-- <div class="text" v-for="_item in item.child" :key="_item.id" @click="handleChangeSecClassify(_item,item)">{{_item.classify_name}}</div> -->
+                <el-tree :data="item.child" node-key="id" :props="{label:'classify_name',children:'child'}" ref="treeRefList"
+                :icon="ArrowRightBold" :indent="0" @node-click="(data,node)=> nodeClick(item,data,node)" v-if="item.id!=0">
+                    <template #default="{ node, data }">
+                        <span>{{ data.classify_name }}</span>
+                    </template>
+                </el-tree>
             </div>
         </div>
     </el-drawer>
@@ -203,6 +207,17 @@ onMounted(()=>{
         margin-bottom: 0;
     }
 }
+
+.filter-wrap{
+    .el-tree-node__content{
+        height: 42px;
+        &:hover{
+            color: #00459F;
+            background-color: transparent;
+        }
+    }
+}
+
 .user-info-popper{
     width: unset!important;
     .user-info-message{
@@ -222,7 +237,7 @@ onMounted(()=>{
 
 <style lang="scss" scoped>
 .report-detail-page{
-    padding: 0 20px;
+    padding: 0 20px 20px;
 }
 @media (max-width: 768px){
     .report-detail-page{
@@ -364,8 +379,26 @@ onMounted(()=>{
             background-color: var(--el-color-primary);
         }
     }
+    .time-classify-name{
+        margin-top: 30px;
+        span{
+            display: inline-flex;
+            font-size: 14px;
+            color: #000;
+            background-color: #ECF4FF;
+            padding: 0 10px;
+            height: 24px;
+            box-sizing: border-box;
+            border-radius: 24px;
+            align-items: center;
+            justify-content: center;
+            min-width: 68px;
+            margin-right: 12px;
+            margin-bottom: 6px;
+        }
+    }
     .overview-box{
-        margin-top: 40px;
+        margin-top: 34px;
         padding: 20px;
         margin-bottom: 20px;
         background: rgba(77, 130, 191, 0.1);
@@ -432,6 +465,20 @@ onMounted(()=>{
                 font-size: 16px;
             }
         }
+        .time-classify-name{
+            margin-top: 15px;
+            span{
+                font-size: 12px;
+            }
+        }
+        .overview-box{
+            margin-top: 14px;
+            padding: 10px;
+            margin-bottom: 10px;
+            .label{
+                margin-bottom: 10px;
+            }
+        }
     }
 }
 

src/views/report/Index.vue

@@ -1,13 +1,17 @@
 <script setup>
-import {ref,reactive} from 'vue'
+import {ref,reactive,onMounted,nextTick} from 'vue'
 import { useRoute, useRouter } from "vue-router";
 import {apiReportClassifyList,apiReportList} from '@/api/report'
+import {apiRoadShowVideoList} from '@/api/roadShow'
+
 import { useWindowSize } from '@vueuse/core'
 import videoPlayBox from '@/components/VideoPlayBox.vue'
 import roadShowList from '@/views/roadShow/List.vue'
 import {goYBPCCN,userInfoGo} from '@/utils/common.js'
 import AvatarPopover from '../../components/AvatarPopover.vue';
+import Pagination from "../../components/Pagination.vue"
 
+import { ArrowRightBold } from '@element-plus/icons-vue';
 const { width, height } = useWindowSize()
 
 const router=useRouter()
@@ -18,84 +22,115 @@ const userInfo=localStorage.getItem('user_info')?JSON.parse(localStorage.getItem
 //分类
 let navList=ref([])
 async function getReportClassify(){
-    const res=await apiReportClassifyList({classify_type:0})
-    const videores=await apiReportClassifyList({classify_type:1})
+    const res=await apiReportClassifyList()
 
     if(res.code===200){
-        const arr=res.data.list||[]
-        let videoResList=[]
-        if(videores.code===200){
-            videoResList=videores.data.list||[]
-        }
-        navList.value=[
-            ...arr,
-            {
-                id: -1,
-                classify_name: "Online Video",
-                child: videoResList
-            },
-            {
-                id: 0,
-                classify_name: "ABOUT US",
-                child: []
-            }
-        ]
-
-        if(route.query.secclassifyid){
-            navList.value.forEach(item => {
-                if(item.id==route.query.firstclassifyid){
-                    item.child.forEach(citem=>{
-                        if(citem.id==route.query.secclassifyid){
-                            handleChangeSecClassify(citem,item)
-                        }
-                    })
-                }
-            });
+        navList.value=res.data.list||[]
+        console.log(route.query.secclassifyid,route.query.firstclassifyid,route.query.rootclassifyid);
+        if(!route.query.rootclassifyid) return 
+        let rootItem,firstItem;
+        let secondItem={id:+route.query.secclassifyid}
+        // 根据Id找对应的分类
+        navList.value.map(itR=>{
+            if(itR.id == route.query.rootclassifyid){
+                rootItem = itR
+                rootItem.child.map(itF =>{
+                    if(itF.id == route.query.firstclassifyid){
+                        firstItem = itF
+                    }
+                })
+            }
+        })
+
+        if(route.query.secclassifyid!=0){
+            console.log("选中二级分类");
+            handleChangeSecClassify(secondItem,firstItem,rootItem)
             return
         }
         if(route.query.firstclassifyid){
-            navList.value.forEach(item => {
-                if(item.id==route.query.firstclassifyid){
-                    handleChangeFirstClassify(item)
-                }
-            });
+            console.log("选中一级分类");
+            handleChangeFirstClassify(firstItem,rootItem)
         }
+        // initList()
     }
 }
 getReportClassify()
 
 
 let listState = reactive({
-    firstClassifyId:0,
-    firstClassifyName:'',
-    secClassifyId:0,
+    rootClassifyId:0, // 顶级分类
+    firstClassifyId:0, // 一级分类
+    firstClassifyOpt:[],
+    // firstClassifyName:'',
+    secClassifyId:0, // 二级分类
     secClassifyOpt:[],
 
     page:1,
-    pageSize:20,
+    pageSize:10,
+    total:0,
     list:[],
     loading:false,
-    finished:false
+    finished:false,
+    reportFinished:false,
+    videoPage:1,
+    videoPageSize:10,
+    videoList:[],
+    videoLoading:false,
+    videoFinished:false,
 })
-// 切换一级分类
-function handleChangeFirstClassify(item){
+
+
+// 切换顶级分类
+
+function handleChangeRootClassify(item){
     if(width.value<768&&item.id!=0) return
     showFilter.value=false
+    if(listState.rootClassifyId===item.id) return
+    listState.rootClassifyId=item.id
+    listState.firstClassifyOpt=item.child || []
+    listState.firstClassifyId=item.child[0]?item.child[0].id:0
+
+    listState.secClassifyId=0
+
+    if(item.child[0] && item.child[0].child.length>0){
+        listState.secClassifyOpt=item.child[0].child||[]
+    }else{
+        listState.secClassifyOpt=[]
+    }
+    initList()
+}
+
+// 切换一级分类
+function handleChangeFirstClassify(item,rootItem){
+    console.log(rootItem,'rootItem');
+    showFilter.value=false
     if(listState.firstClassifyId===item.id) return
     listState.firstClassifyId=item.id
-    listState.firstClassifyName=item.classify_name
-    listState.secClassifyId=0
+    // listState.firstClassifyOpt=item.classify_name
     listState.secClassifyOpt=item.child||[]
+    // listState.secClassifyId=item.child[0]?item.child[0].id:0
+    listState.secClassifyId=0
+
+    if(rootItem){
+        // 回显父级
+        listState.rootClassifyId = rootItem.id
+        listState.firstClassifyOpt=rootItem.child || []
+    }
+    // console.log(listState.secClassifyId,listState.firstClassifyId,listState.rootClassifyId);
     initList()
 }
 // 切换二级分类
-function handleChangeSecClassify(item,fitem){
+function handleChangeSecClassify(item,fitem,rootItem){
     showFilter.value=false
     if(listState.secClassifyId===item.id) return
     listState.secClassifyId=item.id
+    if(rootItem){
+        listState.rootClassifyId = rootItem.id
+        listState.firstClassifyOpt=rootItem.child || []
+    }
     if(fitem){
         listState.firstClassifyId=fitem.id 
-        listState.firstClassifyName=fitem.classify_name
+        // listState.firstClassifyName=fitem.classify_name
         listState.secClassifyOpt=fitem.child||[]
     }
    initList()
@@ -105,16 +140,23 @@ function handleChangeSecClassify(item,fitem){
 function initList(){
     listState.page=1
     listState.finished=false
+    listState.reportFinished=false
+    listState.videoFinished=false
     listState.list=[]
-    getList()
+    listState.videoList=[]
+    getReportList()
+    if(listState.secClassifyId!=0){
+        getVideoList()
+    }
 }
 
-// 获取列表数据
-async function getList(){
+// 获取报告列表数据
+async function getReportList(){
     listState.loading=true
     const res=await apiReportList({
         page_size:listState.pageSize,
         current:listState.page,
+        classify_id_root:listState.rootClassifyId,
         classify_id_first:listState.firstClassifyId,
         classify_id_second:listState.secClassifyId
     })
@@ -123,30 +165,102 @@ async function getList(){
     }, 100);
     if(res.code===200){
         const arr=res.data.list||[]
-        listState.list=[...listState.list,...arr]
+        // 移动端的报告是滚动加载分页  PC端是分页器加载分页
+        
+        if(width.value<768){
+            listState.list=[...listState.list,...arr]
+            if(arr.length<listState.pageSize){
+                listState.reportFinished=true
+            }
+        }else{
+            listState.list=arr
+            listState.total = res.data.page.total
+        }
         if(arr.length<listState.pageSize){
             listState.finished=true
         }
     }
 }
+//更改页码
+const changePageNo=(pageNo)=>{
+    listState.page = pageNo
+    getReportList()
+}
+// 切换每页的数量
+const changePageSize=(pageSize)=>{
+    listState.pageSize = pageSize
+    getReportList()
+}
+// 获取线上路演视频列表数据
+async function getVideoList(){
+    listState.videoLoading=true
+    const res=await apiRoadShowVideoList({
+        page_size:listState.videoPageSize,
+        current:listState.videoPage,
+        classify_id_root:listState.rootClassifyId,
+        classify_id_first:listState.firstClassifyId,
+        classify_id_second:listState.secClassifyId
+    })
+    setTimeout(() => {
+        listState.videoLoading=false
+    }, 100);
+    if(res.code===200){
+        const arr=res.data.list||[]
+
+        listState.videoList=[...listState.videoList,...arr]
+
+        if(arr.length<listState.videoPageSize){
+            listState.videoFinished=true
+        }
+    }
+}
 
+// 格式化视频时长
+function getVideoTime(e){
+    const minus = parseInt(e / 60);
+    const sec = parseInt(e % 60);
+    return `${minus > 9 ? minus : "0" + minus}:${sec > 9 ? sec : "0" + sec}`;
+}
 // 监听页面滚动
 function listenScroll(){
     window.onscroll=(e)=>{
-        if([0,-1].includes(listState.firstClassifyId)) return
-        if(listState.loading||listState.finished) return
+        if(!(width.value<768)) return 
+        if([0,-1].includes(listState.rootClassifyId)) return
+        if(listState.loading||listState.reportFinished) return
         const scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
         const windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
         const scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
         if(scrollTop+windowHeight>=scrollHeight){   //考虑到滚动的位置一般可能会大于一点可滚动的高度，所以这里不能用等于
             console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
             listState.page++
-            getList()
-        }   
+            getReportList()
+        }
+    }
+}
+
+// PC端 视频列表滚动监听
+const videoListScroll=(e)=>{
+    if(width.value<768) return
+    if(listState.rootClassifyId==0) return
+    if(listState.videoLoading||listState.videoFinished) return
+    const scrollTop = videoBox.scrollTop
+    const windowHeight = videoBox.clientHeight
+    const scrollHeight = videoBox.scrollHeight
+    if(scrollTop+windowHeight>=scrollHeight){
+        console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight,'videoBox')
+        listState.videoPage++
+        getVideoList()
     }
 }
+
 listenScroll()
 
+let videoBox;
+
+onMounted(() => {
+    videoBox = document.getElementById('video-list-wrap')
+})
+
 //跳转详情
 function goReportDetail(item){
     const url=router.resolve({
@@ -157,19 +271,66 @@ function goReportDetail(item){
     })
     window.open(url.href,'_blank')
 }
+// 视频详情
+function goDetail(item){
+    const url=router.resolve({
+        path:'/roadshow/detail',
+        query:{
+            code:item.video_code
+        }
+    })
+    window.open(url.href,'_blank')
+}
+
+const treeRefList=ref([])
+
+const showFilterFun=()=>{
+
+    if(width.value<768){
+        filterSize.value='100%'
+    }else{
+        filterSize.value='30%'
+    }
+
+    showFilter.value=true
+    nextTick(()=>{
+        console.log(treeRefList.value);
+        if(listState.secClassifyId){
+            treeRefList.value.map(item => {
+                item.setCurrentKey(listState.secClassifyId)
+            })
+        }
+    })
+}
+
+const nodeClick=(rootItem,data,node)=>{
+    if(!data.child){
+        // 二级分类
+        handleChangeSecClassify(data,node.parent.data,rootItem)
+    }else{
+        // 一级分类
+        handleChangeFirstClassify(data,rootItem)
+    }
+}
 
 // 弹窗筛选
 let showFilter=ref(false)
 let filterSize=ref('30%')
 
+const typeList=["Report","Online Vedio"]
+const contentType = ref(1)
+const contentTypeChange=(index)=>{
+    contentType.value = index+1
+}
 
 </script>
 
 <template>
     <div class="report-index-page">
         <div class="header-wrap">
-            <img class="menu-icon" @click="showFilter=true;filterSize='100%'" src="@/assets/menu.svg" alt="">
-            <span>HORIZON INSIGHTS</span>
+            <img class="menu-icon" @click="showFilterFun" src="@/assets/menu.svg" alt="">
+            <span @click="handleChangeRootClassify({id: 0,classify_name: 'ABOUT US', child: []})"
+             style="cursor: pointer;">HORIZON INSIGHTS</span>
             <div class="search-box" @click="$router.push('/report/search')">
                 <img src="@/assets/search.svg" alt="">
                 <span style="margin-left:10px">search for</span>
@@ -182,27 +343,39 @@ let filterSize=ref('30%')
         </div>
         <div class="content-wrap">
         <div class="nav-wrap">
-            <img class="menu-icon" @click="showFilter=true;filterSize='30%'" src="@/assets/menu.svg" alt="">
-            <span 
-                :class="['nav-item',item.id===listState.firstClassifyId?'active':'']" 
-                v-for="item in navList" 
-                :key="item.Id"
-                @click="handleChangeFirstClassify(item)"
-            >{{item.classify_name}}</span>
+            <div>
+                <img class="menu-icon" @click="showFilterFun" src="@/assets/menu.svg" alt="">
+                <span 
+                    :class="['nav-item',item.id===listState.rootClassifyId?'active':'']" 
+                    v-for="item in navList" 
+                    :key="item.id"
+                    @click="handleChangeRootClassify(item)"
+                >{{item.classify_name}}</span>
+            </div>
+            <span @click="handleChangeRootClassify({id: 0,classify_name: 'ABOUT US', child: []})"
+            :class="['nav-item',0===listState.rootClassifyId?'active':'']" >ABOUT US</span>
         </div>
-        <div class="sub-nav-wrap" v-if="listState.firstClassifyId!=-1">
-            <h2 class="label">{{listState.firstClassifyName}}</h2>
+        <div class="sub-nav-wrap">
+            <div class="sub-nav-list fisrt-sub" v-show="listState.rootClassifyId!==0">
+                <span 
+                    :class="['label',item.id===listState.firstClassifyId?'active':'']" 
+                    v-for="item in listState.firstClassifyOpt" 
+                    :key="item.id"
+                    @click="handleChangeFirstClassify(item)"
+                >{{item.classify_name}}</span>
+            </div>
+            <h2 class="label" v-show="listState.rootClassifyId===0">ABOUT US</h2>
             <div class="sub-nav-list">
                 <span 
                     :class="['item',item.id===listState.secClassifyId?'active':'']" 
                     v-for="item in listState.secClassifyOpt" 
-                    :key="item.Id"
+                    :key="item.id"
                     @click="handleChangeSecClassify(item)"
                 >{{item.classify_name}}</span>
             </div>
         </div>
         <!-- 固定展示的报告区域 -->
-        <div class="fix-report-wrap" v-show="![-1,0].includes(listState.firstClassifyId)&&listState.secClassifyId===0">
+        <div class="fix-report-wrap" v-show="listState.rootClassifyId!==0&&listState.secClassifyId===0">
             <div class="left-wrap">
                 <div class="report-item-normal" v-for="item in listState.list.slice(0,3)" :key="item.id" @click="goReportDetail(item)">
                     <div class="title">{{item.title}}</div>
@@ -236,22 +409,64 @@ let filterSize=ref('30%')
                 </div>
             </div>
         </div>
+        <div class="mobile-type-zone" v-if="listState.secClassifyId!=0">
+            <div v-for="(item,index) in typeList" :key="item" :class="contentType == (index+1)?'active':''"
+            @click="contentTypeChange(index)">{{ item }}</div>
+        </div>
         <!-- 报告列表 -->
-        <div class="report-list-wrap" v-show="listState.secClassifyId!=0&&listState.firstClassifyId!=-1">
-            <div class="item" v-for="item in listState.list" :key="item.id" @click="goReportDetail(item)">
-                <div class="title">
-                    <span class="label">【NO.{{item.stage}}|FICC】</span>
-                    <span>{{item.title}}</span>
-                    <span v-if="item.create_time">({{item.create_time.substring(5,7)}}{{item.create_time.substring(8,10)}})</span>
+        <div class="list-wrap-container" v-show="listState.secClassifyId!=0">
+            <div class="report-list-wrap" v-show="!(width<768) || contentType==1">
+                <div class="item" v-for="item in listState.list" :key="item.id" @click="goReportDetail(item)">
+                    <div class="title">
+                        <!-- <span class="label">【NO.{{item.stage}}|FICC】</span> -->
+                        <img src="@/assets/icons/report.png"  >
+                        <span class="title-span">
+                            {{item.title}}
+                            <span v-if="item.create_time">({{item.create_time.substring(5,7)}}{{item.create_time.substring(8,10)}})</span>
+                        </span>     
+                    </div>
+                    <div class="time-classify-name" v-show="width<768">
+                        <span>{{item.classify_name_root}}</span>
+                        <span v-show="item.classify_name_first!==item.classify_name_root">{{item.classify_name_first}}</span>
+                        <span v-show="item.classify_name_first!==item.classify_name_second && 
+                            item.classify_name_root!==item.classify_name_second">{{item.classify_name_second}}</span>
+                    </div>
+                    <div class="intro">{{item.abstract}}</div>
+                    <div class="time">
+                        <span class="time-time">
+                            {{item.publish_time}}
+                        </span>
+                        <div class="time-classify-name" v-show="!(width<768)">
+                            <span>{{item.classify_name_root}}</span>
+                            <span v-show="item.classify_name_first!==item.classify_name_root">{{item.classify_name_first}}</span>
+                            <span v-show="item.classify_name_first!==item.classify_name_second && 
+                                item.classify_name_root!==item.classify_name_second">{{item.classify_name_second}}</span>
+                        </div>
+                    </div>
                 </div>
-                <div class="intro">{{item.abstract}}</div>
-                <div class="time">{{item.publish_time}}</div>
+                <div style="text-align: center;color: #666;font-size: 16px;padding-top: 100px;" v-show="listState.list.length==0&&listState.finished">no results</div>
+                <Pagination :pageSize="listState.pageSize" :page_no="listState.page"  style="display: flex;justify-content: flex-end;margin-top: 20px;" 
+                :total="listState.total" @handleCurrentChange="changePageNo" @handleSizeChange="changePageSize" v-if="!(width<768)"/>
+            </div>
+            <div class="video-list-wrap" id="video-list-wrap" @scroll="videoListScroll" v-show="!(width<768) || contentType==2">
+                <div class="video-box" v-for="item in listState.videoList" :key="item.id">
+                    <div class="video-item" @click="goDetail(item)">
+                        <div class="video-item-title">{{item.title}}</div>
+                        <div class="video-item-img">
+                            <img :src="item.video_cover_url" />
+                            <span class="time">{{getVideoTime(item.video_seconds)}}</span>
+                        </div>
+                        <div class="video-item-item">{{item.publish_time}}</div>
+                    </div>
+                </div>
+                <div style="text-align: center;color: #666;font-size: 16px;padding-top: 100px;" v-show="listState.videoList.length==0&&listState.videoFinished">no results</div>
+
             </div>
-            <div style="text-align: center;color: #666;font-size: 16px;padding-top: 100px;" v-if="listState.list.length==0&&listState.finished">no results</div>
         </div>
+        
 
         <!-- 关于 我们 -->
-        <div class="about-us-box" v-if="listState.firstClassifyId==0||(listState.firstClassifyId!=0&&listState.secClassifyId==0&&width<768)">
+        <div class="about-us-box" v-if="listState.rootClassifyId==0||(listState.rootClassifyId!=0&&listState.secClassifyId==0&&width<768)">
             <div class="flex box top-box">
                 <div class="left">
                     <!-- <video controls loop src="https://hongze.oss-cn-shanghai.aliyuncs.com/static/video_03.mp4"></video> -->
@@ -288,7 +503,7 @@ let filterSize=ref('30%')
         </div>
 
         <!-- 路演视频模块 -->
-        <roadShowList v-if="listState.firstClassifyId==-1" :defaultClassifyId="listState.secClassifyId"></roadShowList>
+        <!-- <roadShowList v-if="listState.firstClassifyId==-1" :defaultClassifyId="listState.secClassifyId"></roadShowList> -->
         </div>
     </div>
     <!-- 筛选 -->
@@ -300,8 +515,19 @@ let filterSize=ref('30%')
     >
         <div class="filter-wrap">
             <div class="item" v-for="item in navList" :key="item.id">
-                <span  class="title" @click="handleChangeFirstClassify(item)">{{item.classify_name}}</span>
-                <div class="text" v-for="_item in item.child" :key="_item.id" @click="handleChangeSecClassify(_item,item)">{{_item.classify_name}}</div>
+                <span  class="title" @click="handleChangeRootClassify(item)">{{item.classify_name}}</span>
+                <!-- <div class="text" v-for="_item in item.child" :key="_item.id" @click="handleChangeSecClassify(_item,item)">{{_item.classify_name}}</div> -->
+                <el-tree :data="item.child" node-key="id" :props="{label:'classify_name',children:'child'}" ref="treeRefList"
+                :icon="ArrowRightBold" :indent="0" @node-click="(data,node)=> nodeClick(item,data,node)">
+                    <template #default="{ node, data }">
+                        <span :class="data.id == listState.firstClassifyId || data.id==listState.secClassifyId?'select-node':''">
+                            {{ data.classify_name }}
+                        </span>
+                    </template>
+                </el-tree>
+            </div>
+            <div class="item">
+                <span  class="title" @click="handleChangeRootClassify({id: 0,classify_name: 'ABOUT US', child: []})">ABOUT US</span>
             </div>
         </div>
     </el-drawer>
@@ -314,6 +540,21 @@ let filterSize=ref('30%')
         margin-bottom: 0;
     }
 }
+
+.filter-wrap{
+    .el-tree-node__content{
+        height: 42px;
+        &:hover{
+            color: #00459F;
+            background-color: transparent;
+        }
+    }
+    .select-node{
+        color: #00459F;
+        cursor: pointer;
+    }
+}
+
 .user-info-popper{
     // min-width: 300px!important;
     width: unset!important;
@@ -401,6 +642,11 @@ let filterSize=ref('30%')
     .header-wrap{
         font-size: 26px;
     }
+    .list-wrap-container .video-list-wrap{
+        width: 300px!important;
+        min-width: 300px!important;
+    }
+
 }
 
 
@@ -447,6 +693,8 @@ let filterSize=ref('30%')
     top: 127px;
     background-color: #fff;
     z-index: 99;
+    display: flex;
+    justify-content: space-between;
     .menu-icon{
         width: 13px;
         cursor: pointer;
@@ -481,11 +729,14 @@ let filterSize=ref('30%')
 .sub-nav-wrap{
     .label{
         font-size: 34px;
+        font-weight: 700;
+        cursor: pointer;
     }
     .sub-nav-list{
+        margin-left: -30px;
         .item{
             display: inline-block;
-            margin-right: 30px;
+            margin-left: 30px;
             margin-bottom: 20px;
             font-size: 16px;
             color: #666;
@@ -497,6 +748,20 @@ let filterSize=ref('30%')
                 color: var(--el-color-primary);
             }
         }
+        .label{
+            &:hover{
+                color: var(--el-color-primary);
+            }
+            &.active{
+                color: var(--el-color-primary);
+            }
+        }
+    }
+    .fisrt-sub{
+      padding: 24px 0 20px;  
+      .label{
+        margin-left: 30px;
+      }
     }
 }
 @media (max-width: 768px){
@@ -615,11 +880,11 @@ let filterSize=ref('30%')
 
 .filter-wrap{
     .item{
-        margin-bottom: 50px;
+        margin-bottom: 40px;
         .title{
             font-size: 28px;
             font-weight: bold;
-            margin-bottom: 30px;
+            margin-bottom: 20px;
             display: block;
             cursor: pointer;
         }
@@ -635,7 +900,7 @@ let filterSize=ref('30%')
 }
 
 .fix-report-wrap{
-    margin-top: 30px;
+    // margin-top: 30px;
     border-top: 1px solid #E6E6E6;
     border-bottom: 1px solid #E6E6E6;
     padding: 20px 0;
@@ -751,49 +1016,213 @@ let filterSize=ref('30%')
     .fix-report-wrap{
         display: none;
     }
-}
-
-.report-list-wrap{
-    padding-bottom: 50px;
-    .item{
-        padding: 20px 0;
-        border-top: 1px solid #E6E6E6;
-        .title{
-            font-size: 20px;
+    .mobile-type-zone{
+        display: flex!important;
+        position: sticky;
+        background-color: white;
+        width: 100vw;
+        padding: 13px 0;
+        border-bottom: solid 1px #DCDFE6;
+        border-top: solid 1px #DCDFE6;
+        flex-wrap: nowrap;
+        align-items: center;
+        margin-left: -20px;
+        top: 49px;
+        z-index: 1000;
+        div{
+            font-size: 14px;
+            padding: 0 16px;
+        }
+        .active{
+            color: #00459F;
             font-weight: 600;
-            cursor: pointer;
-            .label{
-                display: inline-block;
-                background-image: url('@/assets/report_tag.png');
-                background-size: cover;
-                background-position: right center;
-                background-repeat: no-repeat;
-                color: #fff;
-                font-size: 12px;
-                padding-right: 20px;
-                padding-top: 3px;
-                padding-bottom: 3px;
-                box-sizing: border-box;
-                margin-right: 5px;
-            }
-            span{
-                vertical-align: middle;
+            position: relative;
+            &::after{
+                content: '';
+                background-color: #00459F;
+                height: 3px;
+                width: 16px;
+                border-radius: 16px;
+                position: absolute;
+                bottom: -4px;
+                left: 50%;
+                transform: translateX(-50%);
+
             }
         }
-        .intro{
-            font-size: 14px;
-            color: #666;
-            margin-top: 10px;
-            margin-bottom: 20px;
+    }
+}
+.mobile-type-zone{
+    display: none;
+}
+.list-wrap-container{
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    padding: 10px 0 0;
+    border-top: 1px solid #E6E6E6;
+    .report-list-wrap{
+        flex-grow: 1;
+        padding: 10px 20px 50px 0;
+        border-right: solid 1px #E6E6E6;
+        .item{
+            padding: 20px 0;
+            border-bottom: 1px solid #E6E6E6;
+            &:first-child{
+                padding-top: 0 ;
+            }
+            .title{
+                font-size: 16px;
+                font-weight: 600;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                line-height: 18px;
+                display: flex;
+                align-items: flex-start;
+                img{
+                    height: 16px;
+                    width: 16px;
+                    margin: 2px 4px 0 0;
+                }
+                // .label{
+                //     display: inline-block;
+                //     background-image: url('@/assets/report_tag.png');
+                //     background-size: cover;
+                //     background-position: right center;
+                //     background-repeat: no-repeat;
+                //     color: #fff;
+                //     font-size: 12px;
+                //     padding-right: 20px;
+                //     padding-top: 3px;
+                //     padding-bottom: 3px;
+                //     box-sizing: border-box;
+                //     margin-right: 5px;
+                // }
+                span{
+                    vertical-align: middle;
+                }
+                .title-span{
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    // word-break: break-all;
+                    -webkit-box-orient: vertical;
+                }
+            }
+            .intro{
+                font-size: 14px;
+                color: #666;
+                margin-top: 10px;
+                margin-bottom: 20px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 3;
+                // word-break: break-all;
+                -webkit-box-orient: vertical;
+            }
+            .time{
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
+                .time-time{
+                    font-size: 14px;
+                    color: #999;
+                    margin-right: 20px;
+                }
+            }
+            .time-classify-name{
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
+                margin-bottom: -6px;
+                span{
+                    display: inline-flex;
+                    font-size: 14px;
+                    color: #000;
+                    background-color: #ECF4FF;
+                    padding: 0 10px;
+                    height: 24px;
+                    box-sizing: border-box;
+                    border-radius: 24px;
+                    align-items: center;
+                    justify-content: center;
+                    min-width: 68px;
+                    margin-right: 12px;
+                    margin-bottom: 6px;
+                }
+            }
         }
-        .time{
-            font-size: 14px;
-            color: #999;
+    }
+    .video-list-wrap{
+        height: 787px;
+        width: 380px;
+        min-width: 380px;
+        padding-left: 20px;
+        padding-top: 10px;
+        overflow: auto;
+        .video-box{
+            padding: 20px 15px;
+            border-bottom: solid 1px #E6E6E6;
+            &:first-child{
+                padding-top: 0;
+            }
+            .video-item{
+                padding: 0 20px;
+                .video-item-title{
+                    font-size: 14px;
+                    line-height: 17px;
+                    color: #333333;
+                    margin-bottom: 10px;
+                }
+                .video-item-img{
+                    position: relative;
+                    img{
+                        width: 100%;
+                        object-fit: cover;
+                        display: block;
+                        cursor: pointer;
+                    }
+                    .time{
+                        position: absolute;
+                        bottom: 10px;
+                        right: 10px;
+                        background-color: rgba(0, 0, 0, 0.3);
+                        color: #fff;
+                        font-size: 12px;
+                        padding: 4px 8px;
+                    }
+                    &::after{
+                        content: '';
+                        display: block;
+                        width: 55px;
+                        height: 55px;
+                        background-image: url('@/assets/icon_play.png');
+                        background-size: cover;
+                        position: absolute;
+                        left: 50%;
+                        top: 50%;
+                        transform: translate(-50%,-50%);
+                        cursor: pointer;
+                    }
+                }
+                .video-item-item{
+                    text-align: right;
+                    margin-top: 10px;
+                    font-size: 14px;
+                    color: #999;
+                }
+            }
         }
     }
 }
+
+
 @media (max-width: 768px){
     .report-list-wrap{
+        border-right: none!important;
         .item{
             padding: 10px 0;
             .title{
@@ -814,5 +1243,49 @@ let filterSize=ref('30%')
             }
         }
     }
+    .list-wrap-container{
+        border-top: none;
+        .report-list-wrap{
+            padding: 0;
+            .item{
+                padding: 10px 0;
+                .intro{
+                    margin: 8px 0;
+                }
+                .time-classify-name{
+                    margin-bottom: 0;
+                    span{
+                        font-size: 12px;
+                        margin-bottom: 0;
+                        margin-top: 8px;
+                    }
+                }
+            }
+        }
+        .video-list-wrap{
+            height: unset;
+            width: 100%!important;
+            min-width: 100%!important;
+            padding-left: 0;
+            padding-top: 0;
+            .video-box{
+                padding: 0;
+                .video-item{
+                    padding: 0;
+                    .video-item-title{
+                        margin-top: 10px;
+                    }
+                    .video-item-item{
+                        margin-bottom: 10px;
+                    }
+                }
+                &:first-child{
+                    .video-item-title{
+                        margin-top: 0;
+                    }
+                }
+            }
+        }
+    }
 }
 </style>

src/views/report/Search.vue

@@ -3,16 +3,21 @@ import {reactive} from 'vue'
 import { Search } from '@element-plus/icons-vue'
 import { apiReportSearch } from '@/api/report'
 import { useRouter } from 'vue-router'
+import Pagination from "../../components/Pagination.vue"
+import { useWindowSize } from '@vueuse/core'
+const { width, height } = useWindowSize()
 
 const router=useRouter()
 
 let listState=reactive({
     keywords:'',
     page:1,
-    pageSize:20,
+    pageSize:10,
+    total:0,
     list:[],
     loading:false,
-    finished:false
+    finished:false,
+    reportFinished:false
 })  
 
 async function getReportList(){
@@ -28,17 +33,39 @@ async function getReportList(){
     }, 100);
     if(res.code===200){
         const arr=res.data.list||[]
-        listState.list=[...listState.list,...arr]
+        // 移动端的报告是滚动加载分页  PC端是分页器加载分页
+        
+        if(width.value<768){
+            listState.list=[...listState.list,...arr]
+            if(arr.length<listState.pageSize){
+                listState.reportFinished=true
+            }
+        }else{
+            listState.list=arr
+            listState.total = res.data.page.total
+        }
         if(arr.length<listState.pageSize){
             listState.finished=true
         }
     }
 }
 
+//更改页码
+const changePageNo=(pageNo)=>{
+    listState.page = pageNo
+    getReportList()
+}
+// 切换每页的数量
+const changePageSize=(pageSize)=>{
+    listState.pageSize = pageSize
+    getReportList()
+}
+
 function handleSearch(){
     listState.list=[]
     listState.page=1
     listState.finished=false
+    listState.reportFinished=false
     getReportList()
 }
 
@@ -63,12 +90,30 @@ function goVideoDetail(item){
     window.open(url.href,'_blank')
 }
 
+// 监听页面滚动
+function listenScroll(){
+    window.onscroll=(e)=>{
+        if(!(width.value<768)) return 
+        if(listState.loading||listState.reportFinished) return
+        const scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
+        const windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
+        const scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
+        if(scrollTop+windowHeight>=scrollHeight){   //考虑到滚动的位置一般可能会大于一点可滚动的高度，所以这里不能用等于
+            console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
+            listState.page++
+            getReportList()
+        }
+    }
+}
+
+listenScroll()
+
 </script>
 
 <template>
     <div class="report-search-page">
         <div class="header-wrap" @click="$router.replace('/')">
-            <span>HORIZON INSIGHTS</span>
+            <span @click="$router.replace('/')" style="cursor: pointer;">HORIZON INSIGHTS</span>
         </div>
         <div class="search-box">
             <el-input
@@ -84,12 +129,32 @@ function goVideoDetail(item){
             <div class="item" v-for="item in listState.list" :key="item.id" >
                 <div @click="goReportDetail(item)" v-if="item.report_type===0">
                     <div class="title">
-                        <span class="label">【NO.{{item.stage}}|FICC】</span>
-                        <span v-html="item.title"></span>
-                        <span v-if="item.create_time">({{item.create_time.substring(5,7)}}{{item.create_time.substring(8,10)}})</span>
+                        <!-- <span class="label">【NO.{{item.stage}}|FICC】</span> -->
+                        <img src="@/assets/icons/report.png"  >
+                        <span class="title-span">
+                            <span v-html="item.title"></span>
+                            <span v-if="item.create_time">({{item.create_time.substring(5,7)}}{{item.create_time.substring(8,10)}})</span>
+                        </span>
+                    </div>
+                    <div class="time-classify-name" v-show="width<768">
+                        <span>{{item.classify_name_root}}</span>
+                        <span v-show="item.classify_name_first!==item.classify_name_root">{{item.classify_name_first}}</span>
+                        <span v-show="item.classify_name_first!==item.classify_name_second && 
+                            item.classify_name_root!==item.classify_name_second">{{item.classify_name_second}}</span>
                     </div>
                     <div class="intro" v-html="item.content_sub"></div>
-                    <div class="time">{{item.publish_time}}</div>
+                    <div class="time">
+                        <span class="time-time">
+                            {{item.publish_time}}
+                        </span>
+                        <div class="time-classify-name" v-show="!(width<768)">
+                            <span>{{item.classify_name_root}}</span>
+                            <span v-show="item.classify_name_first!==item.classify_name_root">{{item.classify_name_first}}</span>
+                            <span v-show="item.classify_name_first!==item.classify_name_second && 
+                                item.classify_name_root!==item.classify_name_second">{{item.classify_name_second}}</span>
+                        </div>
+                    </div>
+                    <!-- <div class="time">{{item.publish_time}}</div> -->
                 </div>
                 <div @click="goVideoDetail(item)" v-if="item.report_type===1">
                     <div class="title" v-html="item.title"></div>
@@ -99,7 +164,10 @@ function goVideoDetail(item){
                     <div class="time">{{item.publish_time}}</div>
                 </div>
             </div>
+            <Pagination :pageSize="listState.pageSize" :page_no="listState.page"  style="display: flex;justify-content: flex-end;margin-top: 20px;" 
+                :total="listState.total" @handleCurrentChange="changePageNo" @handleSizeChange="changePageSize" v-if="!(width<768)"/>
         </div>
+
     </div>
 </template>
 
@@ -156,8 +224,9 @@ function goVideoDetail(item){
 }
 
 .report-list-wrap{
-    width: 600px;
+    max-width: 1200px;
     margin: 50px auto;
+    padding-bottom: 20px;
     .item{
         border-bottom: 1px solid #E6E6E6;
         padding: 20px 0;
@@ -165,23 +234,41 @@ function goVideoDetail(item){
             font-size: 20px;
             font-weight: 600;
             cursor: pointer;
-            .label{
-                display: inline-block;
-                background-image: url('@/assets/report_tag.png');
-                background-size: cover;
-                background-position: right center;
-                background-repeat: no-repeat;
-                color: #fff;
-                font-size: 12px;
-                padding-right: 20px;
-                padding-top: 3px;
-                padding-bottom: 3px;
-                box-sizing: border-box;
-                margin-right: 5px;
+            display: flex;
+            align-items: center;
+            line-height: 18px;
+            display: flex;
+            align-items: flex-start;
+            img{
+                height: 16px;
+                width: 16px;
+                margin: 2px 4px 0 0;
             }
+            // .label{
+            //     display: inline-block;
+            //     background-image: url('@/assets/report_tag.png');
+            //     background-size: cover;
+            //     background-position: right center;
+            //     background-repeat: no-repeat;
+            //     color: #fff;
+            //     font-size: 12px;
+            //     padding-right: 20px;
+            //     padding-top: 3px;
+            //     padding-bottom: 3px;
+            //     box-sizing: border-box;
+            //     margin-right: 5px;
+            // }
             span{
                 vertical-align: middle;
             }
+            .title-span{
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                // word-break: break-all;
+                -webkit-box-orient: vertical;
+            }
         }
         .intro{
             font-size: 14px;
@@ -215,8 +302,37 @@ function goVideoDetail(item){
                 }
         }
         .time{
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
             font-size: 14px;
-            color: #999;
+            color: #999;    
+            .time-time{
+                font-size: 14px;
+                color: #999;
+                margin-right: 20px;
+            }
+        }
+        .time-classify-name{
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            margin-bottom: -6px;
+            span{
+                display: inline-flex;
+                font-size: 14px;
+                color: #000;
+                background-color: #ECF4FF;
+                padding: 0 10px;
+                height: 24px;
+                box-sizing: border-box;
+                border-radius: 24px;
+                align-items: center;
+                justify-content: center;
+                min-width: 68px;
+                margin-right: 12px;
+                margin-bottom: 6;
+            }
         }
     }
 }
@@ -248,6 +364,14 @@ function goVideoDetail(item){
                     height: 50px;
                 }
             }
+            .time-classify-name{
+                margin-bottom: 0;
+                span{
+                    font-size: 12px;
+                    margin-bottom: 0;
+                    margin-top: 8px;
+                }
+            }
         }
     }
 }

src/views/roadShow/Detail.vue

@@ -7,6 +7,7 @@ import { useRoute, useRouter } from 'vue-router'
 import {goYBPCCN,userInfoGo} from '@/utils/common.js'
 import AvatarPopover from '../../components/AvatarPopover.vue';
 import NoAuthBox from '@/components/NoAuthBox.vue';
+import { ArrowRightBold } from '@element-plus/icons-vue';
 
 const route=useRoute()
 const router=useRouter()
@@ -86,21 +87,11 @@ let showFilter=ref(false)
 let filterSize=ref('30%')
 
 async function getReportNav(){
-    const res=await apiReportClassifyList({classify_type:0})
-    const videores=await apiReportClassifyList({classify_type:1})
+    const res=await apiReportClassifyList()
     if(res.code===200){
         const arr=res.data.list||[]
-        let videoResList=[]
-        if(videores.code===200){
-            videoResList=videores.data.list||[]
-        }
         navList.value=[
             ...arr,
-            {
-                id: -1,
-                classify_name: "ONLINE VEDIO",
-                child: videoResList
-            },
             {
                 id: 0,
                 classify_name: "ABOUT US",
@@ -110,7 +101,18 @@ async function getReportNav(){
     }
 }
 getReportNav()
-function handleChangeFirstClassify(item){
+
+const nodeClick=(rootItem,data,node)=>{
+    if(!data.child){
+        // 二级分类
+        handleChangeSecClassify(data,node.parent.data,rootItem)
+    }else{
+        // 一级分类
+        handleChangeFirstClassify(data,rootItem)
+    }
+}
+
+function handleChangeRootClassify(item){
     if(item.id==0){
         router.replace({
             path:'/'
@@ -118,17 +120,29 @@ function handleChangeFirstClassify(item){
     }    
 }
 
-function handleChangeSecClassify(item,pitem){
+function handleChangeFirstClassify(item,pitem){
         router.replace({
             path:'/report/index',
             query:{
-                firstclassifyid:pitem.id,
-                secclassifyid:item.id
+                firstclassifyid:item.id,
+                secclassifyid:0,
+                rootclassifyid:pitem.id
             }
         })
 
 }
 
+function handleChangeSecClassify(item,pitem,rootItem){
+        router.replace({
+            path:'/report/index',
+            query:{
+                firstclassifyid:pitem.id,
+                secclassifyid:item.id,
+                rootclassifyid:rootItem.id
+            }
+        })
+
+}
 </script>
 
 <template>
@@ -148,7 +162,7 @@ function handleChangeSecClassify(item,pitem){
         </div>
         <div class="mobile-header-wrap">
             <img class="menu-icon" @click="showFilter=true;filterSize='100%'" src="@/assets/menu.svg" alt="">
-            <span @click="$router.replace('/')">HORIZON INSIGHTS</span>
+            <span @click="$router.replace('/')" style="cursor: pointer;">HORIZON INSIGHTS</span>
             <img src="@/assets/icons/avatar.svg" class="user-info-avatar" @click="userInfoGo" />
         </div>
         <div class="detail-wrap" v-if="info">
@@ -171,8 +185,14 @@ function handleChangeSecClassify(item,pitem){
     >
         <div class="filter-wrap">
             <div class="item" v-for="item in navList" :key="item.id">
-                <span  class="title" @click="handleChangeFirstClassify(item)">{{item.classify_name}}</span>
-                <div class="text" v-for="_item in item.child" :key="_item.id" @click="handleChangeSecClassify(_item,item)">{{_item.classify_name}}</div>
+                <span  class="title" @click="handleChangeRootClassify(item)">{{item.classify_name}}</span>
+                <!-- <div class="text" v-for="_item in item.child" :key="_item.id" @click="handleChangeSecClassify(_item,item)">{{_item.classify_name}}</div> -->
+                <el-tree :data="item.child" node-key="id" :props="{label:'classify_name',children:'child'}" ref="treeRefList"
+                :icon="ArrowRightBold" :indent="0" @node-click="(data,node)=> nodeClick(item,data,node)" v-if="item.id!=0">
+                    <template #default="{ node, data }">
+                        <span>{{ data.classify_name }}</span>
+                    </template>
+                </el-tree>
             </div>
         </div>
     </el-drawer>
@@ -325,4 +345,13 @@ function handleChangeSecClassify(item,pitem){
         }
     }
 }
+.filter-wrap{
+    .el-tree-node__content{
+        height: 42px;
+        &:hover{
+            color: #00459F;
+            background-color: transparent;
+        }
+    }
+}
 </style>

src/views/verification/bindPhoneNo.vue

@@ -116,7 +116,7 @@ import { sendVerificationCode } from './utils/common';
 <template>
     <div class="bind-phone-container">
       <div class="fixed-header">
-        <span>
+        <span @click="$router.replace('/')" style="cursor: pointer;">
           HORIZON INSIGHTS
         </span>
       </div>

src/views/verification/mobileMyPage.vue

@@ -8,7 +8,7 @@ const userForm=localStorage.getItem('user_info')?JSON.parse(localStorage.getItem
 <template>
   <div class="user-container" id="user-container">
     <div class="fixed-header">
-      <span>
+      <span @click="$router.replace('/')" style="cursor: pointer;">
         HORIZON INSIGHTS
       </span>
     </div>

src/views/verification/passwordChange.vue

@@ -78,7 +78,7 @@ import { isMobile } from '../../utils/common';
 <template>
     <div class="psdChange-container">
       <div class="fixed-header">
-        <span>
+        <span @click="$router.replace('/')" style="cursor: pointer;">
           HORIZON INSIGHTS
         </span>
       </div>

src/views/verification/transitionPage.vue

@@ -51,7 +51,7 @@
 <template>
     <div class="hint-box" v-show="transitionType">
         <div class="fixed-header">
-            <span>
+            <span @click="$router.replace('/')" style="cursor: pointer;">
             HORIZON INSIGHTS
             </span>
         </div>