|
|
@@ -0,0 +1,433 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <!-- <pcNav :data="'index'"></pcNav> -->
|
|
|
+ <view style="height: 72px;"></view>
|
|
|
+ <view class="swiperBox">
|
|
|
+ <view class="swiperCont">
|
|
|
+ <view class="tuijbox">
|
|
|
+ <image src="../../static/pcimg/icon_tuijian@2x.png" mode="" class="tuijImg"></image>
|
|
|
+ <span class="tuijTitle">推荐文章</span>
|
|
|
+ </view>
|
|
|
+ <swiper class="swiper" :autoplay="false" :circular="true" :current="swpIndex">
|
|
|
+ <swiper-item v-for="(item,index) in recommendList" v-if="(index+1)%2!=0">
|
|
|
+ <view class="swpCont">
|
|
|
+ <view class="swiper-item" @click="goDetail(item)">
|
|
|
+ <view class="swpimgBox swpBr">
|
|
|
+ <image :src="item.logoImg" mode="" class="swpimg"></image>
|
|
|
+ </view>
|
|
|
+ <view class="swpTitleBox">
|
|
|
+ <view class="swpTitle">{{item.title}}</view>
|
|
|
+ <view class="categoryName" @click.stop="goList(item)">{{item.categoryName.substring(0,5)}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="swiper-item" v-if="(index+1)<recommendList.length" @click="goDetail(recommendList[index+1])">
|
|
|
+ <view class="swpimgBox swpBr">
|
|
|
+ <image :src="recommendList[index+1].logoImg" mode="" class="swpimg"></image>
|
|
|
+ </view>
|
|
|
+ <view class="swpTitleBox">
|
|
|
+ <view class="swpTitle">{{recommendList[index+1].title}}</view>
|
|
|
+ <view class="categoryName">{{recommendList[index+1].categoryName.substring(0,5)}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </swiper-item>
|
|
|
+
|
|
|
+ </swiper>
|
|
|
+ <image src="../../static/pcimg/icon_arrow_zuo_sel@2x.png" mode="" class="swpImgleft" @click="swpBtnLeft"></image>
|
|
|
+ <image src="../../static/pcimg/legtspx.png" mode="" class="swpImgright" @click="swpBtnRight"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="main">
|
|
|
+ <view class="mainCont">
|
|
|
+ <view class="mainline" :class="{'mainline1':index==0}" v-for="(item,index) in indexData.categoryList" v-if="item.children.length>0">
|
|
|
+ <view class="mainlineTop">
|
|
|
+ <view class="mainlineTopleft">
|
|
|
+ <view class="mainlineTitle">{{item.name}}</view>
|
|
|
+ <view class="mainlinecount">共{{item.count}}篇文章</view>
|
|
|
+ </view>
|
|
|
+ <view class="mainlineMore" @click="mainMore(item)">查看更多
|
|
|
+ <image src="../../static/pcimg/icon_list_arrow_def@2x.png" mode="" class="linegdImg1"></image>
|
|
|
+ <image src="../../static/pcimg/icon_list_arrow_sel@2x.png" mode="" class="linegdImg2"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mainwzbox" v-if="item.children.length>0">
|
|
|
+ <view class="mainwzline" v-for="(wz,wzindex) in item.children" @click="goDetail2(wz,item)" v-if="wzindex<4" :class="{'mainwzlineR':wzindex!=3}">
|
|
|
+ <view class="mainwzImgBox">
|
|
|
+ <img :src="wz.logoImg" alt="" class="mainwzImg">
|
|
|
+ </view>
|
|
|
+ <view class="wztitle">{{wz.title}}</view>
|
|
|
+ <view class="wztime">2022-3-30</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="gotop" @click="gotoTop">
|
|
|
+ <image src="../../static/pcimg/btn_top@2x.png" mode="" class="gotopImg"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <view>
|
|
|
+ <a class="table-btn" href="http://phone.66km.cn:8088/marketing/training/940C4BF0A2E04542A1A1AD244EAFB6E2.xlsx" target='_blank'>下载入口</a>
|
|
|
+ </view> -->
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import pcNav from '../../components/pcNav/pcNav.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ pcNav,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: 'Hello',
|
|
|
+ allCategory:[],
|
|
|
+ navMoret:false,
|
|
|
+ swpIndex:0,
|
|
|
+ indexData:'',
|
|
|
+ recommendList:[],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+
|
|
|
+ this.getindexData()
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.getindexData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goList(item){
|
|
|
+ console.log(item)
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'list?code='+item.code+'&topName='+item.categoryName//+'&comment='+item.comment
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goDetail(item){
|
|
|
+ console.log(item)
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'detail?id='+item.id+'&topName='+item.categoryName+"&comment="+item.comment+'&parentCode='+item.code
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goDetail2(wz,item){
|
|
|
+ /* console.log(item)
|
|
|
+ console.log(wz) */
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'detail?id='+wz.id+'&topName='+item.name+"&comment="+item.comment+'&parentCode='+item.code
|
|
|
+ })
|
|
|
+ },
|
|
|
+ gotoTop(){
|
|
|
+ uni.pageScrollTo({
|
|
|
+ scrollTop: 0, duration: 300
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ swpBtnRight(){
|
|
|
+ var length=this.recommendList.length
|
|
|
+ var num=Math.ceil(length/2)
|
|
|
+ if(this.swpIndex<num){
|
|
|
+ this.swpIndex++
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ swpBtnLeft(){
|
|
|
+ if(this.swpIndex==0){
|
|
|
+
|
|
|
+ }else{
|
|
|
+ this.swpIndex--
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ getindexData(){
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ })
|
|
|
+ this.$http('/trainingOpenApi/indexData', {}, 'GET').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.indexData = res.data;
|
|
|
+ this.recommendList=this.indexData.recommendList
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mainMore(item){
|
|
|
+ console.log(item)
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'list?code='+item.code+'&topName='+item.name+'&comment='+item.comment
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .content{
|
|
|
+ background: #F4F5F7;
|
|
|
+ min-height: 100vh;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ }
|
|
|
+ .swiperBox{
|
|
|
+ /* height: 280px; */
|
|
|
+ /* background: #F3F8FF; */
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .swiperCont{
|
|
|
+ width: 1236px;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .tuijImg{
|
|
|
+ width: 24px;height: 24px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .tuijbox{
|
|
|
+ display: flex;padding-top: 32px;padding-bottom: 20px;
|
|
|
+ padding-left: 15px;
|
|
|
+ }
|
|
|
+ .tuijTitle{
|
|
|
+ font-size: 22px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3C3C3C;
|
|
|
+ padding-left: 7px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .swpImgleft{
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ position: absolute;
|
|
|
+ top: 145px;
|
|
|
+ left: -60px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .swpImgright{
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ position: absolute;
|
|
|
+ top: 145px;
|
|
|
+ right: -60px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .swiper-item{
|
|
|
+ width: 590px;
|
|
|
+ height: 163px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ margin-left: 16px;
|
|
|
+ margin-right: 12px;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-top: 14px;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .swiper-item:hover{
|
|
|
+ box-shadow: 0px 0px 16px 0px rgba(153, 153, 153, 0.25);
|
|
|
+ }
|
|
|
+ .swpCont{
|
|
|
+ display: flex;
|
|
|
+ height: 210px;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .swpimg{
|
|
|
+ width: 284px;
|
|
|
+ height: 160px;
|
|
|
+ }
|
|
|
+ .swpimgBox{
|
|
|
+ width: 284px;
|
|
|
+ height: 160px;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: -14px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .swpBr{
|
|
|
+ width: 284px;
|
|
|
+ height: 160px;
|
|
|
+ border-radius: 7px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .swiper{
|
|
|
+ height: 190px;
|
|
|
+ }
|
|
|
+ .swpTitleBox{
|
|
|
+ padding-left: 304px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 140px;
|
|
|
+ padding-top: 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .swpTitle{
|
|
|
+ width: 240px;
|
|
|
+ height: 44px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #3C3C3C;
|
|
|
+ line-height: 22px;
|
|
|
+ text-overflow: -o-ellipsis-lastline;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ .swpTitleBox:hover .swpTitle{
|
|
|
+ color: #FF4F00;
|
|
|
+ }
|
|
|
+ .categoryName{
|
|
|
+ line-height: 24px;
|
|
|
+ width: 84px;
|
|
|
+ height: 24px;
|
|
|
+ background: rgba(63, 144, 247, 0.1);
|
|
|
+ border-radius: 14px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #3F90F7;
|
|
|
+ text-align: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .mainCont{
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
+ .mainline{
|
|
|
+ padding-top: 34px;
|
|
|
+ }
|
|
|
+ .mainlineTop{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .mainlineTopleft{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .mainlineTitle{
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3C3C3C;
|
|
|
+ line-height: 33px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ }
|
|
|
+ .mainlinecount{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 33px;
|
|
|
+ padding-left: 16px;
|
|
|
+ }
|
|
|
+ .mainlineMore{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .mainwzbox{
|
|
|
+ display: flex;
|
|
|
+ padding-top: 20px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .mainwzImg{
|
|
|
+ width: 284px;
|
|
|
+ height: 160px;
|
|
|
+ }
|
|
|
+ .mainwzImgBox{
|
|
|
+ border-top-left-radius: 6px;
|
|
|
+ border-top-right-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 160px;
|
|
|
+ border: 1px solid #eeeeee;
|
|
|
+ }
|
|
|
+ .mainwzline{
|
|
|
+ width: 284px;
|
|
|
+ height: 244px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
+ .mainwzlineR{
|
|
|
+ margin-right: 22px;
|
|
|
+ }
|
|
|
+ .wztitle{
|
|
|
+ width: 256px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 22px;
|
|
|
+ height: 22px;
|
|
|
+ text-overflow: -o-ellipsis-lastline;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ line-clamp: 1;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ padding:0 13px ;
|
|
|
+ padding-top: 16px;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .wztime{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999;
|
|
|
+ padding-left: 14px;
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+ .mainwzline:hover{
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 16px 0px rgba(153, 153, 153, 0.2);
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .mainwzline:hover .wztitle{
|
|
|
+ color: #FF4F00;
|
|
|
+ }
|
|
|
+ .mainlineMore:hover{
|
|
|
+ color: #FF4F00;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .gotopImg{
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ }
|
|
|
+ .gotop{
|
|
|
+ position: fixed;
|
|
|
+ right:5vh ;
|
|
|
+ bottom: 60px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .linegdImg1{
|
|
|
+ width: 6px;
|
|
|
+ height: 10px;
|
|
|
+ margin-top: 5px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ .linegdImg2{
|
|
|
+ width: 6px;
|
|
|
+ height: 10px;
|
|
|
+ display: none;
|
|
|
+ margin-top: 5px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ .mainlineMore{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .mainlineMore:hover .linegdImg1{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .mainlineMore:hover .linegdImg2{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .mainline1{
|
|
|
+ padding-top: 20px;
|
|
|
+ }
|
|
|
+</style>
|
