|
|
@@ -0,0 +1,290 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <pcNav></pcNav>
|
|
|
+ <view style="height: 72px;"></view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="gotop" @click="gotoTop">
|
|
|
+ <image src="../../static/pcimg/btn_top@2x.png" mode="" class="gotopImg"></image>
|
|
|
+ </view>
|
|
|
+ <view class="top">
|
|
|
+ <view class="topName">{{name}}</view>
|
|
|
+ <view class="comment">{{title}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="main">
|
|
|
+
|
|
|
+ <view class="cont2">
|
|
|
+ <view class="contf" v-if="qhIndex==2">
|
|
|
+ <view class="mainwzline" v-for="(wz,wzindex) in list" :class="{'mainwzlineR':(wzindex+1)%4==0&&wzindex!=0}" @click="goDetail(wz)">
|
|
|
+ <view class="mainwzImgBox">
|
|
|
+ <img :src="wz.LogoImg" alt="" class="mainwzImg">
|
|
|
+ </view>
|
|
|
+ <view class="wztitle">{{wz.Title}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="contL" v-if="qhIndex==1">
|
|
|
+ <view class="wxLine" v-for="(wz,wzindex) in list" @click="goDetail(wz)">
|
|
|
+ <view class="wzLineLeft">
|
|
|
+ <image :src="wz.LogoImg" class="wzLeftIMg"></image>
|
|
|
+ </view>
|
|
|
+ <view class="wzLineRight">
|
|
|
+ <view class="wzTitle">{{wz.Name}}</view>
|
|
|
+ <view class="wzComment">{{wz.Comment}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="nodata" v-show="list.length==0">
|
|
|
+ <image src="../../static/pcimg/pic_empty_search@2x.png" mode="" class="nodataImg"></image>
|
|
|
+ <view class="nodataTitle">暂无数据</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- -->
|
|
|
+ <view class="pageView" v-show="TotalSize>0">
|
|
|
+ <page-pagination :pageSize="pageSize" :total="TotalSize" :numAround="true" @change="pageChange"></page-pagination>
|
|
|
+ </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 {
|
|
|
+ list:[],
|
|
|
+ title:'',
|
|
|
+ name:'',
|
|
|
+ parentCode:'',
|
|
|
+ topCode:'',
|
|
|
+ page:1,
|
|
|
+ dynamicCol:[],
|
|
|
+ qhIndex:1,
|
|
|
+ tabIndex:0,
|
|
|
+ TotalSize:0,
|
|
|
+ pageSize:20,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ this.name=opt.name;
|
|
|
+ this.title=opt.title;
|
|
|
+ this.parentCode=opt.parentCode;
|
|
|
+
|
|
|
+ this.getgroupPageData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goDetail(wz){
|
|
|
+ // 1分类2文章
|
|
|
+ if (wz.Type == 1) {
|
|
|
+
|
|
|
+ }else{
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'detail?id='+wz.ID+'&topName='+this.topName+'&twoName='+this.dynamicCol[this.tabIndex].name
|
|
|
+ })
|
|
|
+ }
|
|
|
+ //console.log(wz)
|
|
|
+ },
|
|
|
+ gotoTop(){
|
|
|
+ uni.pageScrollTo({
|
|
|
+ scrollTop: 0, duration: 300
|
|
|
+ });
|
|
|
+ },
|
|
|
+ tabBtn(index,item){
|
|
|
+ this.tabIndex=index;
|
|
|
+ //console.log(item)
|
|
|
+ this.parentCode=item.code;
|
|
|
+ this.getcategoryPageData()
|
|
|
+ },
|
|
|
+ pageChange(e){
|
|
|
+ console.log(e)
|
|
|
+ this.page=e;
|
|
|
+ this.getcategoryPageData()
|
|
|
+
|
|
|
+ },
|
|
|
+ getgroupPageData(){
|
|
|
+ var params={
|
|
|
+ parentCode:this.parentCode,
|
|
|
+ limit:this.pageSize,
|
|
|
+ page:this.page,
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ })
|
|
|
+ this.$http('/trainingOpenApi/categoryPageData', params, 'GET').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.list=res.data.Items;
|
|
|
+ this.TotalSize=res.data.TotalSize;
|
|
|
+ var arr=[
|
|
|
+ {
|
|
|
+ 'name':'全部','code':'',
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ this.dynamicCol=arr.concat(res.data.dynamicCol);
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+ *{
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .gotopImg{
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ }
|
|
|
+ .gotop{
|
|
|
+ position: fixed;
|
|
|
+ right:15vh ;
|
|
|
+ bottom: 100px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .topName{
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3C3C3C;
|
|
|
+ line-height: 33px;
|
|
|
+ padding-top: 30px;
|
|
|
+ }
|
|
|
+ .comment{
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 20px;
|
|
|
+ width: 500px;
|
|
|
+ padding-top: 10px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .main{
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-top: 30px;
|
|
|
+ }
|
|
|
+ .dynamicColLeft{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .dynamicColLIne{
|
|
|
+ padding-right: 44px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #3C3C3C;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .qhImg{
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ margin-left: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .dynamicCol{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .activeTab{
|
|
|
+ color: #FF4F00;
|
|
|
+ }
|
|
|
+ .mainwzImg{
|
|
|
+ width: 276px;
|
|
|
+ height: 184px;
|
|
|
+ }
|
|
|
+ .mainwzImgBox{
|
|
|
+ border-radius: 15px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .contf{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .mainwzline{
|
|
|
+ width: 276px;
|
|
|
+ height: 260px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ margin-right: 32px;
|
|
|
+ padding-top: 33px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .mainwzlineR{
|
|
|
+ margin-right: 0px;
|
|
|
+ }
|
|
|
+ .wztitle{
|
|
|
+ width: 250px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 22px;
|
|
|
+ height: 44px;
|
|
|
+ text-overflow: -o-ellipsis-lastline;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ padding-top: 16px;
|
|
|
+ padding:0 13px ;
|
|
|
+ }
|
|
|
+ .wzLeftIMg{
|
|
|
+ width: 200px;
|
|
|
+ height: 132px;
|
|
|
+ }
|
|
|
+ .wxLine{
|
|
|
+ display: flex;
|
|
|
+ padding-top: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .wzLineLeft{
|
|
|
+ border-radius: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 200px;
|
|
|
+ height: 132px;
|
|
|
+ }
|
|
|
+ .wzLineRight{
|
|
|
+ padding-left: 16px;
|
|
|
+ }
|
|
|
+ .wzTitle{
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3C3C3C;
|
|
|
+ }
|
|
|
+ .wzComment{
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 17px;
|
|
|
+ padding-top: 10px;
|
|
|
+ width: 1000px;
|
|
|
+ }
|
|
|
+ .pageView{
|
|
|
+ margin-top: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
+ .nodataImg{
|
|
|
+ width: 300px;
|
|
|
+ height: 203px;
|
|
|
+ }
|
|
|
+ .nodata{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .nodataTitle{
|
|
|
+ font-size: 16px;
|
|
|
+ padding-top: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+</style>
|
