<template>
	<Layout :index="0" :banner="0">
		<view class="content_index">
			   <view class="news_index">
			   	   <view class="index_swiper">
					   <swiper class="index_swipers" :current="currentIndex" :autoplay="true" :interval="5000" :duration="1000" indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#F48612">
					   	<swiper-item v-for="(item,index) in list" :key="index">
					   		<view class="banner-swiper-item">
					   			<image class="banner-imgs" :src="item.image['file_path']" mode="widthFix"></image>
					   		</view>
					   		<view class="gname">
					   		   <view class="names">{{item.article_title}}</view>
					   		</view>
					   	</swiper-item>
					   </swiper>
				   </view>
				   <view class="index_news">
					   <a class="index_news_list " :class="{'news_one':index==0}" v-for="(item,index) in newsList" :key="index" :href="'/articleDetails?index=2&id='+item.article_id">
						   <view class="index_news_name ">
							  <view class="news_dian" v-if="index>0"></view>
						       <view class="news_name">{{item.article_title}}</view>
						   </view>	   
					      <view class="news_date" v-if="index>0">{{$mUtils.removeTime(item.create_time)}}</view>
					   </a>
					   
					   <view class="more_news" @tap="goPath('/news')">
					   	更多新闻>>
					   </view>
				   </view>
			   </view>
			   <view class="good_game bgc-02">
			   	   <view class="c_game"  @tap="goPath('/game')">
			   	   	   <image class="tj" src="../static/img/index/tj.png"></image>
					  <view class="more">更多>></view>
			   	   </view>
				   <view class="game_content">
				   	   <view class="game_list" :class="{game_list2:index%3 === 1}" v-for="(item,index) in listData" :key="index"  @tap="goPath('/gameDtail?id='+item.id)">
						    <image class="game_img" :src="item.image[0].file_path" mode="heightFix"></image> 
							<view class="game_name">{{item.name}}</view>
							<view class="game_spec">
								<!-- 使用v-html渲染富文本 -->
								  <view v-html="item.desc"></view>
							    <!-- <rich-text :nodes="item.desc"></rich-text> -->
							</view>
							<view class="gamex"></view>
							<view class="game_stars">
								<view class="game_star">
								   <text class="iconfont icon-star" :class="{'icon-h':item.score>0}"></text>
								   <text class="iconfont icon-star" :class="{'icon-h':item.score>1}"></text>
								   <text class="iconfont icon-star" :class="{'icon-h':item.score>2}"></text>
								   <text class="iconfont icon-star" :class="{'icon-h':item.score>3}"></text>
								   <text class="iconfont icon-star" :class="{'icon-h':item.score>4}"></text>
								   <text class="star_text">{{item.score+'.0'}}</text>
								</view>
								<view class="go_url" @tap="goPath('/gameDtail?id='+item.id)">
								   <!-- 进入官网>> -->
								   查看详情
								</view>
							</view>
					   </view>
					   
				   </view>
			   </view>
		</view>
	</Layout>
</template>

<script>
	import Layout from './part/layout.vue';
	export default {
		components:{
			Layout
		},
		data(){
			return {
				list: [],
				listData: [],
				
				newsList: [],
				currentIndex: 0,
			}
		},
		created() {
			 this.getArticle();
			 this.getArticleH();
			 this.getGame();
		},
		beforeDestroy() {
		},
		methods:{
			getArticleH(category_id=2,list_rows=4){
				this._get('plus.article.article/index',{
					page: 1,
					list_rows: list_rows,
					category_id: category_id,
					is_home: 1,
				},res=>{
					if(res.code==1){
						this.list = res.data.list.data;
						 console.log(this.list,22)
					}
				})
			},
			getArticle(category_id=2,list_rows=4){
				this._get('plus.article.article/index',{
					page: 1,
					list_rows: list_rows,
					category_id: category_id,
				},res=>{
					if(res.code==1){
						this.newsList = res.data.list.data;
					}
				})
			},
			getGame(category_id=2,list_rows=6){
				this._get('game.index/index',{
					page: 1,
					list_rows: list_rows,
				},res=>{
					if(res.code==1){
						this.listData = res.data.list.game.data;
						// this.list = res.data.list.top.data;
						// console.log(this.list,222)
					}
				})
			},
			
			// 鼠标移入事件
			mouseover(e){
				this.is_xuan = false;
			},
			// 鼠标移出事件
			mouseleave(e){
				this.is_xuan = true;
			},
			change(e){
				this.currentIndex = e.detail.current;
			},
			changeSub(){
				if(this.currentIndex<=0){
					this.currentIndex = this.storeList.length-1;
				}else{
					this.currentIndex--;
				}
			},
			changeAdd(){
				if(this.currentIndex>=(this.storeList.length-1)){
					this.currentIndex = 0;
				}else{
					this.currentIndex++;
				}
			},
		}
	}
</script>

<style lang="scss">
	.content_index{
		min-height: 500px;
		.news_index{
			position: absolute;
			width: 1366px;
			height: 462px;
			margin-top: -462px;
			margin-left: 279px;
			display: flex;
		}
		.index_swiper{
			width: 625px;
			height: 463px;
		    .index_swipers{
				width: 100%;
				height: 463px;
			}
			.banner-imgs{
				width: 624px;
				height: 463px;
			}
			.gname{
				width:625px;
				height: 53px;
				background: #131313;
				opacity: 0.78;
				position: absolute;
				bottom: 0;
				.names{
					width:80%;
					color: #ffffff;
					line-height: 53px;
					margin-left: 27px;
					white-space: nowrap;
					  overflow: hidden;
					  text-overflow: ellipsis;
				}
			}
			::v-deep .uni-swiper-dots { // 指示点整个区域
				left: 90% !important;
				bottom: 18px !important;
			}
			::v-deep .uni-swiper-dot{
				width: 9px;
				height: 9px;
				border-radius: 0 !important;
			}
			
		}
		
		.index_news{
			width: 640px;
			background: #3C3C3C;
			opacity: 0.88;
			padding: 40px 60px 40px 40px;
			
			.index_news_list{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #727272;
				cursor: pointer;
				.index_news_name{
					width: 501px;
					height: 77px;
					font-size: 21px;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 40px;
					display: flex;
					align-items: center;
					.news_name{
						margin-left: 10px;
						width: 301px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.news_dian{
					width: 9px;
					height: 9px;
					background: #F48612;
				}
				.news_date{
					width: 120px;
					font-size: 19px;
					font-weight: 400;
					color: #E4E4E4;
					line-height: 40px;
					text-align: right;
					margin-right: 10px;
				}
				
			}
			.news_one .index_news_name{
				width: 740px !important;
			}
		    .news_one .news_name{
				width: 640px !important;
				margin-bottom: 28px;
				font-size: 24px;
				font-weight: bold;
				color: #F48612;
				line-height: 40px;
				white-space: inherit !important;
				  overflow: hidden;
				  text-overflow: ellipsis;
				  display: -webkit-box;
				  -webkit-line-clamp: 2;
				  -webkit-box-orient: vertical;
			}	
			.more_news{
				width: 144px;
				height: 33px;
				border: 1px solid #F48612;
				border-radius: 17px;
				margin: 40px auto;
				text-align: center;
				line-height: 33px;
				color: #ffffff;
				cursor: pointer;
			}
		}
	    .good_game{
			width: 100%;
			min-height: 800px;
			.c_game{
				padding: 71px 160px 47px 160px;
				display: flex;
				align-items:center;
				justify-content: space-between;
				.tj{
					width: 284px;
					height: 78px;
				}
				.more{
					width: 124px;
					height: 33px;
					border: 1px solid #F48612;
					border-radius: 17px;
					font-size: 19px;
					font-weight: 400;
					color: #F48612;
					line-height: 33px;
					text-align: center;
					cursor: pointer;
				}
			}
		}
		.game_content{
			display: flex;
			padding: 0 160px;
			width:1600px;
			flex-wrap: wrap;
			padding-bottom: 80px;
			min-height: 1200px;
			.game_list{
				width: 509px;
				height: 486px;
				background: #3C3C3C;
				border-radius: 8px;
				margin-bottom: 37px;
				cursor: pointer;
				text-align: center;
			}
			.game_list2{
				margin: 0 36px;
			}
			.game_img{
				width: 509px;
				height: 286px;
				// background-image: url('/static/img/index/news.png');
				// background-size: cover;
				transition: transform 0.3s ease;
			}
			.game_img:hover {
			    transform: scale(1.05) translate(0%, 0%);
				z-index: 999;
			}
			.game_name{
				margin-top: 12px;
				padding:0 25px;
				font-size: 24px;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: left;
			}
			.game_spec{
				margin:0 25px;
				height: 46px;
				font-size: 19px;
				font-weight: 400;
				color: #9E9E9E;
				line-height: 24px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				
			}
			.gamex{
				width: 100%;
				padding-bottom: 27px;
				border-bottom: 1px solid #727272;
			}
			.game_stars{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin:12px 25px;
				.game_star{
					.icon-star{
						color: #727272;
						font-size: 20px;
					}
					.icon-h{
						color: #F48612 !important;
					}
					.star_text{
						font-size: 19px;
						font-weight: 400;
						color: #F48612;
						line-height: 24px;
						margin-left: 12px;
					}
				}
				.go_url{
					width: 124px;
					height: 33px;
					border: 1px solid #F48612;
					border-radius: 17px;
					font-size: 19px;
					font-weight: 400;
					color: #F48612;
					line-height: 33px;
					text-align: center;
					cursor: pointer;
				}
			}
		}
	}
</style>
