college/pages/pc/index.vue

<template>
	<view class="content">
		<pcNav></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" >
								<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">{{item.categoryName}}</view>
								</view>
								
							</view>
							<view class="swiper-item" v-if="(index+1)<recommendList.length">
								<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}}</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" v-for="(item,index) in indexData.categoryList">
					<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)">查看更多></view>
					</view>
					<view class="mainwzbox" >
						<view class="mainwzline" v-for="(wz,wzindex) in item.children" 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>
						
					</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()
		},
		methods: {
			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>
	
	.swiperBox{
		height: 356px;
		background: #F3F8FF;
		width: 100%;
	}
	.swiperCont{
		width: 1200px;
		margin: 0 auto;
		position: relative;
	}
	.tuijImg{
		width: 24px;height: 24px;
	}
	.tuijbox{
		display: flex;padding-top: 44px;padding-bottom: 30px;
	}
	.tuijTitle{
		font-size: 24px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #111111;
		padding-left: 7px;
		line-height: 24px;
	}
	.swpImgleft{
		width: 44px;
		height: 44px;
		position: absolute;
		top: 150px;
		left: -50px;
		cursor: pointer;
	}
	.swpImgright{
		width: 44px;
		height: 44px;
		position: absolute;
		top: 150px;
		right: -50px;
		cursor: pointer;
	}
	.swiper-item{
		width: 576px;
		height: 184px;
		background: #FFFFFF;
		box-shadow: 0px 0px 16px 0px rgba(153, 153, 153, 0.2);
		border-radius: 9px;
		margin-top: 14px;
		position: relative;
		cursor: pointer;
	}
	.swpCont{
		display: flex;
		height: 200px;
		justify-content: space-between;
	}
	.swpimg{
		width: 276px;
		height: 184px;
	}
	.swpimgBox{
		width: 276px;
		height: 184px;
		position: absolute;
		left: 0;
		top: -14px;
		
	}
	.swpBr{
		width: 276px;
		height: 184px;
		border-radius: 10px;
		overflow: hidden;
	}
	.swiper{
		height: 200px;
	}
	.swpTitleBox{
		padding-left: 296px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 160px;
		padding-top: 10px;
		
	}
	
	.swpTitle{
		width: 260px;
		height: 44px;
		font-size: 16px;
		font-weight: 500;
		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: 12px;
		color: #3F90F7;
		text-align: center;
		white-space: nowrap; 
		overflow: hidden; 
		text-overflow: ellipsis; 
	}
	.mainCont{
		width: 1200px;
		margin: 0 auto;
	}
	.mainline{
		padding-top: 48px;
	}
	.mainlineTop{
		display: flex;
		justify-content: space-between;
	}
	.mainlineTopleft{
		display: flex;
	}
	.mainlineTitle{
		font-size: 24px;
		font-weight: 500;
		color: #111111;
		line-height: 33px;
	}
	.mainlinecount{
		font-size: 14px;
		font-weight: 400;
		color: #999999;
        line-height: 33px;
		padding-left: 16px;
	}
	.mainlineMore{
		font-size: 14px;
		color: #333333;
	}
	.mainwzbox{
		display: flex;
		padding-top: 30px;
		
	}
	.mainwzImg{
		width: 276px;
		height: 184px;
	}
	.mainwzImgBox{
		border-radius: 15px;
	    overflow: hidden;
	}
	.mainwzline{
		width: 276px;
		height: 260px;
		background: #FFFFFF;
	}
	.mainwzlineR{
	  margin-right: 32px;	
	}
	.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 ;
	}
	.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:15vh ;
		bottom: 100px;
		cursor: pointer;
	}
</style>