|
|
@@ -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>
|
hbchen
