筛选修改

README.md

@@ -2,4 +2,4 @@
  
 1. 该项目为弘则研报英文版，包含移动端适配
 2. 测试服前端地址：http://8.136.199.33:8301/report/index
-
+3. 正式服前端地址：https://ybpcen.hzinsights.com/report/index

src/views/report/Detail.vue

@@ -62,6 +62,54 @@ function handlePreviewImg(e){
     showPreViewImg.value=true
 }
 
+//分类
+let navList=ref([])
+let showFilter=ref(false)
+async function getReportNav(){
+    const res=await apiReportClassifyList({classify_type:0})
+    const videores=await apiReportClassifyList({classify_type:1})
+    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",
+                child: []
+            },
+        ]
+    }
+}
+getReportNav()
+
+function handleChangeFirstClassify(item){
+    if(item.id==0){
+        router.replace({
+            path:'/'
+        })
+    }    
+}
+
+function handleChangeSecClassify(item,pitem){
+        router.replace({
+            path:'/report/index',
+            query:{
+                firstclassifyid:pitem.id,
+                secclassifyid:item.id
+            }
+        })
+
+}
+
 onMounted(()=>{
     wwidth.value=window.innerWidth
 })
@@ -77,6 +125,7 @@ onMounted(()=>{
             <div style="color:#00459F;cursor: pointer;" @click="$router.replace('/')">ABOUT US</div>
         </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>
         </div>
         <div class="no-select-text detail-wrap">
@@ -110,8 +159,31 @@ onMounted(()=>{
         @close="showPreViewImg=false"
         :url-list="preViewImgs"
     />
+    <!-- 筛选 -->
+    <el-drawer
+        v-model="showFilter"
+        direction="ltr"
+        size="100%"
+        class="self-drawer-box"
+    >
+        <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>
+            </div>
+        </div>
+    </el-drawer>
 </template>
 
+<style lang="scss">
+.self-drawer-box{
+
+    .el-drawer__header{
+        margin-bottom: 0;
+    }
+}
+</style>
+
 <style lang="scss" scoped>
 .report-detail-page{
     padding: 0 20px;
@@ -150,6 +222,14 @@ onMounted(()=>{
     background-color: #fff;
     z-index: 99;
     display: none;
+    position: relative;
+    .menu-icon{
+        position: absolute;
+        left: 20px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 17px;
+    }
 }
 @media (max-width: 768px){
     .header-wrap{
@@ -258,4 +338,25 @@ onMounted(()=>{
     }
 }
 
+.filter-wrap{
+    .item{
+        margin-bottom: 50px;
+        .title{
+            font-size: 28px;
+            font-weight: bold;
+            margin-bottom: 30px;
+            display: block;
+            cursor: pointer;
+        }
+        .text{
+            cursor: pointer;
+            font-size: 18px;
+            margin-bottom: 20px;
+            &:hover{
+                color: var(--el-color-primary);
+            }
+        }
+    }
+}
+
 </style>

src/views/report/Index.vue

@@ -24,22 +24,33 @@ async function getReportClassify(){
             videoResList=videores.data.list||[]
         }
         navList.value=[
-            {
-                id: 0,
-                classify_name: "ABOUT US",
-                child: []
-            },
             ...arr,
             {
                 id: -1,
                 classify_name: "ONLINE VEDIO",
                 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)
+                        }
+                    })
+                }
+            });
+            return
+        }
         if(route.query.firstclassifyid){
-            arr.forEach(item => {
+            navList.value.forEach(item => {
                 if(item.id==route.query.firstclassifyid){
                     handleChangeFirstClassify(item)
                 }