Goodgame_web/pages/actDetails.vue

<template>
	<Layout :index="-1" :banner="0"  :img="'/static/img/news_banner.png'" :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>
				<view class="market-title pointer" :class="{'market-title-active':category_id==4}" @tap="active(4)">
					资方信息
				</view>
				<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" >
			      <!-- <view class="goback" @tap="active(1)"><text class="iconfont icon-fanhui"></text>返回</view> -->
				  <view class="news_titile">{{detail.article_title}}</view>
			      <view class="titile_desc">
					 <text>{{detail.form}}</text>
					 <text class="mg-100-l">{{$mUtils.removeTime(detail.create_time)}}</text>
				  </view>
				  <view class="news_content text-wihte" >
			      	<rich-text :nodes="detail.article_content"></rich-text>
			      </view>
			      <view class="next_news">下一篇：</view>
		   			<a class="news-item" :href="'/actDetails?index='+category_id+'&id='+nextdetail.article_id" v-if="nextdetail.article_id>0">
		   				<image class="news_fm" :src="nextdetail.image.file_path" v-if="nextdetail.image_id>0"></image>
						<view class="news-item-content">
							<view class="news-item-title pointer">
								<text>{{nextdetail.form}}</text>
								<view class="news-item-time">
									<text>{{$mUtils.removeTime(nextdetail.create_time)}}</text>
								</view>
							</view>
							<view class="news_desc">
								{{nextdetail.article_title}}</text>
							</view>
							<view class="news-xian">
								<view class="news-item-text">{{nextdetail.desc}}
								</view>
							</view>
							<view class="godetai">
								查看详情
							    <view class="go_img"></view>
							</view>
						</view>
		   			</a>
					<view class="nodetail" v-else>
						已经是最后一篇了
					</view>
		   </view>
		  
		</view>
		</view>
	</Layout>
</template>

<script>
	import Layout from './part/layouts.vue';
	export default {
		components:{
			Layout
		},
		data(){
			return {
				page: 1,
				list_rows: 10,
				listData: [],
				total: 0,
				detail: [],
				nextdetail: [],
				id: '',
				category_id:2
			}
		},
		created() {
			// this.getNewData();
			// this.getData();
			let obj = this.$Route.query;
			this.id = obj.id;
			if(obj.hasOwnProperty('index')){
				this.category_id = Number(obj.index);
				//this.banner = Number(obj.index);
			}
			 this.getdetail();
		},
		watch: {
		  //监听路由
		  $route(to, from) {
			let obj = this.$Route.query;
			this.id = obj.id;
			if(obj.hasOwnProperty('index')){
				this.category_id = Number(obj.index);
				//this.banner = Number(obj.index);
			}
		  }
		},
		methods:{
			active(index){
				this.$router.push({
					path: 'news',
					query: {
						index: index
					}
				})
			},
			getdetail(){
				this._get('plus.article.article/detail',{
					article_id: this.id,
				},res=>{
					this.detail = res.data.detail;
					this.nextdetail = res.data.nextdetail;
				});
			},
			/*每页多少条*/
			handleSizeChange(val){
				this.list_rows = val;
				this.getData();
			},
			/*选择第几页*/
			handleCurrentChange(val){
				this.page = val;
				this.getData();
			},
			getData(){
				this._get('article.article/index',{
					page: this.page,
					list_rows: this.list_rows,
					category_id: this.category_id,
				},res=>{
					this.listData = res.data.list.data;
					this.total = res.data.list.total;
				});
			},
			goDetail(e){
				this.$router.push({
					path: 'actDetails',
					query: {
						id: e.article_id,
						index: 5
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.nodetail{
		text-align: center;
		    color: #9E9E9E;
	}
	.bg{
		background-image: url('../static/img/index/gbgs.png');
		background-size: cover;
		background-repeat: no-repeat;
		padding-top: 79px;
		min-height: 800px;
	}
	.news_content{
		width: 1383px;
		margin-bottom: 40px;
		margin: 0 auto;
	}
	.next_news{
		width: 100%;
		border-bottom: 1px solid #9E9E9E;
		margin-bottom: 29px;
		padding-bottom: 20px;
		font-size: 21px;
		font-weight: 400;
		color: #9E9E9E;
	}
	.goback{
		font-size: 21px;
		font-weight: 400;
		color: #9E9E9E;
		line-height: 32px;
		margin-bottom: 42px;
	}
	.news_titile{
		width: 80%;
		margin: 0 auto;
		font-size: 27px;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 32px;
		white-space: nowrap;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  margin-bottom: 20px;
	}
	.titile_desc{
		text-align: center;
		font-size: 19px;
		font-weight: 400;
		color: #9E9E9E;
		line-height: 32px;
		padding-bottom: 10px;
		border-bottom: 1px solid #9E9E9E;
		margin-bottom: 40px;
	}
	.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;
		// }
	}
</style>