<template>
	<Layout :index="-1" :banner="0"  :img="'/static/img/about.jpg'" :titles="'关于我们'" :title_content="'寻找您心仪的游戏'">
		<view class="bg ptm-80">
		<view class="max-width d-b-s">
			<view class="news_nav">
				<view class="market-title pointer" :class="{'market-title-active':category_id==1}" @tap="active(1)">
					平台简介
				</view>
				<block v-for="(item,index) in classData">
					<view class="market-title pointer" :class="{'market-title-active':category_id==item.category_id}" @tap="active(item.category_id)" >
						{{item.name}}
					</view>
				</block>
				<!-- <view class="market-title pointer" :class="{'market-title-active':category_id==2}" @tap="active(2)">
					新闻中心
				</view>
				<view class="market-title pointer" :class="{'market-title-active':category_id==3}" @tap="active(3)">
					帮助中心
				</view> -->
			</view>
			<view class="news_content text-wihte" v-if="category_id==1">
				<rich-text :nodes="content"></rich-text>
			</view>
		   <view class="news_content" v-if="category_id==2">
		   			<a class="news-item" v-for="(item,index) in listData" :key="index" :href="'/articleDetails?index=2&id='+item.article_id">
		   				<image class="news_fm" :src="item.image.file_path" v-if="item.image_id>0"></image>
						<view class="news-item-content" :class="{'w100':!item.image_id}">
							<view class="news-item-title pointer">
								<text>{{item.form}}</text>
								<view class="news-item-time">
									<text>{{$mUtils.removeTime(item.create_time)}}</text>
								</view>
							</view>
							<view class="news_desc">
								{{item.article_title}}
							</view>
							<view class="news-xian">
								<view class="news-item-text">{{item.dec}}
								</view>
							</view>
							<view class="godetai">
								查看详情
							    <view class="go_img"></view>
							</view>
						</view>
		   			</a>
					<view v-if="total==0" class="nocontent">
						暂无数据
					</view>
		   			<el-pagination background layout="prev, pager, next" :total="total" :current-page="page" :page-size="list_rows" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
		   </view>
		   <view class="news_content" v-if="category_id==3">
		   			<a class="news-item" v-for="(item,index) in listData" :key="index" :href="'/articleDetails?index=3&id='+item.article_id">
		   				<image class="news_fm" :src="item.image.file_path" v-if="item.image_id>0"></image>
		   				<view class="news-item-content" :class="{'w100':!item.image_id}">
		   					<view class="news-item-title pointer">
		   						<text>{{item.form}}</text>
		   						<view class="news-item-time">
		   							<text>{{$mUtils.removeTime(item.create_time)}}</text>
		   						</view>
		   					</view>
		   					<view class="news_desc">
		   						{{item.article_title}}
		   					</view>
		   					<view class="news-xian">
		   						<view class="news-item-text">{{item.dec}}
		   						</view>
		   					</view>
		   					<view class="godetai">
		   						查看详情
		   					    <view class="go_img"></view>
		   					</view>
		   				</view>
		   			</a>
					<view v-if="total==0" class="nocontent">
						暂无数据
					</view>
		   			<el-pagination background layout="prev, pager, next" :total="total" :current-page="page" :page-size="list_rows" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
		   </view>
		<view class="news_content" v-if="category_id==4">
					<a class="news-item" v-for="(item,index) in listData" :key="index" :href="'/articleDetails?index=4&id='+item.article_id">
						<image class="news_fm" :src="item.image.file_path" v-if="item.image_id>0"></image>
						<view class="news-item-content" :class="{'w100':!item.image_id}">
							<view class="news-item-title pointer">
								<text>{{item.form}}</text>
								<view class="news-item-time">
									<text>{{$mUtils.removeTime(item.create_time)}}</text>
								</view>
							</view>
							<view class="news_desc">
								{{item.article_title}}
							</view>
							<view class="news-xian">
								<view class="news-item-text">{{item.dec}}
								</view>
							</view>
							<view class="godetai">
								查看详情
							    <view class="go_img"></view>
							</view>
						</view>
					</a>
					<view v-if="total==0" class="nocontent">
						暂无数据
					</view>
					<el-pagination background layout="prev, pager, next" :total="total" :current-page="page" :page-size="list_rows" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
		</view>
				<view class="news_content" v-if="category_id==5">
							<a class="news-item" v-for="(item,index) in listData" :key="index" :href="'/articleDetails?index=5&id='+item.article_id">
								<image class="news_fm" :src="item.image.file_path" v-if="item.image_id>0"></image>
								<view class="news-item-content" :class="{'w100':!item.image_id}">
									<view class="news-item-title pointer">
										<text>{{item.form}}</text>
										<view class="news-item-time">
											<text>{{$mUtils.removeTime(item.create_time)}}</text>
										</view>
									</view>
									<view class="news_desc">
										{{item.article_title}}
									</view>
									<view class="news-xian">
										<view class="news-item-text">{{item.dec}}
										</view>
									</view>
									<view class="godetai">
										查看详情
									    <view class="go_img"></view>
									</view>
								</view>
							</a>
							<view v-if="total==0" class="nocontent">
								暂无数据
							</view>
							<el-pagination background layout="prev, pager, next" :total="total" :current-page="page" :page-size="list_rows" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
				</view>
		</view>
		</view>
	</Layout>
</template>

<script>
	import Layout from './part/layout.vue';
	export default {
		components:{
			Layout
		},
		data(){
			return {
				page: 1,
				list_rows: 10,
				listData: [],
				total: 0,
				newData: [],
				classData:[],
				category_id: 1,
				content:''
			}
		},
		created() {
			const width = window.innerWidth;
			const height = window.innerHeight;
			const mobileWidth = 768; // 可以根据需要调整这个值
			const isMobile = width <= mobileWidth || height <= mobileWidth;
			if(isMobile){
				this.list_rows = 30;
			}
			let obj = this.$Route.query;
			if(obj.hasOwnProperty('index')){
				this.category_id = Number(obj.index);
				 console.log(this.category_id,222222222)
				//this.banner = Number(obj.index);
			}
			this.getData();
			this.getcData();
			
			
		},
		onShow() {
			this.getData();
		},
		
		methods:{
			active(index){
				if(this.category_id==index)return;
				this.category_id = index;
				this.page = 1;
				this.getData();
			},
			
			/*每页多少条*/
			handleSizeChange(val){
				this.list_rows = val;
				this.getData();
			},
			/*选择第几页*/
			handleCurrentChange(val){
				this.page = val;
				this.getData();
			},
			getcData(){
				this._get('plus.article.article/category',{},res=>{
					// console.log(res.data.category,222)
					this.classData = res.data.category;
				});
			},
			getData(){
				this._get('plus.article.article/index',{
					page: this.page,
					list_rows: this.list_rows,
					category_id: this.category_id,
				},res=>{
					if(this.category_id==1){
						this.content = res.data.list.content;
					}else{
						this.listData = res.data.list.data;
						this.total = res.data.list.total;
					}
					
				});
			},
			goDetail(e){
				this.$router.push({
					path: 'articleDetails',
					query: {
						id: e.article_id,
						index: 3
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.nocontent{
		height: 240px;color: #ffffff;text-align: center;margin-top: 10px;
	}
	.w100{
		width: 100% !important;
	}
	.bg{
		background-image: url('../static/img/index/gbgs.png');
		background-size: 100%;
		background-repeat: no-repeat;
		padding-top: 79px;
		min-height: 800px;
	}
	.news_content{
		width: 1341px;
	}
	.text-wihte{
		font-size: 21px;
		font-weight: 400;
		color: #9E9E9E;
		line-height: 32px;
	}
	.news_nav{
		display: flex;
		flex-direction: column;
		width: 168px;
		height: 293px;
		background: #383838;
		border-radius: 8px;
		padding: 32px 0;
	}
	.market-title{
		width: 168px;
		font-size: 21px;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		position: relative;
		margin-bottom: 27px;
	}
	.market-title-active{
		color: #F48612;
		&::before{
			content: '';
			width: 2px;
			height: 20px;
			background: linear-gradient(to bottom,#F48612,#F48612);
			position: absolute;
			left: 0;
			top: 4px;
		}
		// .shu{
		// 	color: #F48612;
		// }
	}
	
	@media screen and (max-width: 768px) {
	 .text-wihte{
		 line-height: 18px;
		 font-size: 10px !important;
		 width: 100%;
		 margin-top: 10px;
	 }
	 .market-title-active::before {
		 display: none;
	 }
	 .news_nav{
	     flex-direction: row;
	     width: 100%;
	     height: 30px;
	     line-height: 30px;
		 margin: 0 auto;
		 justify-content: center;
	 }
	 .market-title{
		 font-size: 16px;
		 width: 20%;
		 margin: 0 2%;
	 }
	 .d-b-s{
		 flex-direction: column;
		 margin: 0 auto;
	 }
	 .bg{
		 min-height: 400px;
		 background-repeat: repeat;
		 background-size: 100% 100%;
	 }
	 .news_content{
		 width: 100%;
		 margin-top: 20px;
	 }
	 .news-item{
		 width: 100%;
	 }
	 .news-item-content{
		 width: 70%;
		 margin-top: 8px;
	 }
	 .news-item-title{
		font-size: 10px; 
	 }
	 .news_desc{
		 font-size: 10px;
		 height: 12px;
		 line-height: 12px;
	 }
	 .news-item-text{
		 font-size: 8px;
		 height: 12px;
		 line-height: 12px;
	 }
	 .godetai{
		 width: 100%;
		 margin-top: 8px;
	 }
	 .news_fm{
		 width: 25%;
		 height: 70px;
	 }
	 
	 .nocontent{
		 font-size: 12px;
		 margin-top: 60px;
	 }
	 .el-pagination{
		 display: none;
	 }
	}
</style>
