<template>
	<Layout :index="4" :titles="'我要版号'" :title_content="'我要版号'">
 <view >
  <view class="content">
       <view class="content_top">
          <view class="banner">
			   <image class="banner_img" src="../static/imgs/need/bh_banner.png"></image>
			   <image class="banner_title" src="../static/imgs/need/bh_title.png"></image>
			   <image class="pr" src="../static/imgs/p_r.png"></image>
			   <image class="pl" src="../static/imgs/p_l.png"></image>
			   <view class="banner_desc">“COG 好游戏计划”充分发挥网络游戏属地管理试点(四川)政策优势用好四川网络游戏预审服务点，运行四川游戏研发出版运营综合服务平台，利用区块链等新技术及全新服务模式，面向全国游戏企业提供一站式 ICP 经营许可证快速申请、属地管理试点版号快速申请办理、小程序游戏备案、软著申请办理版权登记存证、补贴奖励申领;提高申报效率，缩短审批周期。</view>
           </view>
		  </view>
	   <!--content_bottom -->
        <view class="content_bottom">
			 <view class="content_box">
					<view class="title_box">
						<view class="index_title">
							<view><image class="t_l" src="../static/imgs/tl.png"></image></view>
							<h5>扶持服务</h5>
							<view><image class="t_l" src="../static/imgs/tr.png"></image></view>
						</view> 
					</view>
					<view class="one_serve">
						<view class="serve_list">
							<view class="serve_item">
								<image class="serve_img" src="../static/imgs/need/item1.png"></image>
								<view class="serve_title">
									游戏出版<br/>前置辅导
								</view>
							</view>
							<view class="serve_item">
								<image class="serve_img" src="../static/imgs/need/item2.png"></image>
								<view class="serve_title">
									游戏内容<br/>整改调优
								</view>
							</view>
							<view class="serve_item">
								<image class="serve_img" src="../static/imgs/need/item3.png"></image>
								<view class="serve_title serve_title_44">
									游戏版号申请
								</view>
							</view>
							<view class="serve_item">
								<image class="serve_img" src="../static/imgs/need/item4.png"></image>
								<view class="serve_title">
									自助提交游戏<br/>版号进程查询
								</view>
							</view>
							<view class="serve_item">
								<image class="serve_img" src="../static/imgs/need/item5.png"></image>
								<view class="serve_title">
									游戏小程序<br/>审核备案
								</view>
							</view>
							<view class="serve_item">
								<image class="serve_img" src="../static/imgs/need/item6.png"></image>
								<view class="serve_title">
									技术测试备案等<br/>一站式扶持服务
								</view>
							</view>
						</view>
					</view> 
					
					<view class="apply" @tap="need()">了解更多</view>
					<view class="b20"></view>
			 </view>
			 
			
        </view>

    </view>
	</view>
	</Layout>
</template>

<script>
	/**
	 * 程序启动页
	 * */
	import Layout from './part/layouts.vue';
	export default {
		components: {
			Layout, 
		},
		data() {
			return {  
				activeIndex: 0, // 当前激活的选项卡索引
				Customer_service:false,
				comment:false,
				Inv:0,
				codeTime:0,
				FormData: {
					phone: '', 
					name:'',
					content:'',
				},
				close:true,
				articles:[],
				msg: '',
				active_num:0,
				
			}
		},
		onLoad() {
			// const eventChannel = this.getOpenerEventChannel()
			// eventChannel.on('pageData', data => {
			// 	console.log(data,3333)
			// 	// data即传过来的参数
			// })
		},
		
		onPageScroll(res) {
			uni.$emit('onPageScroll', res.scrollTop); 
		},
		onShow(params) {
			// this.getIndex();
		},
		methods: {
			onClickItem(index){
				   this.active_num = index;
			},
			handleMouseEnter(index){
				   this.activeIndex = index;
			},
			handleMouseLeave(){
				 this.activeIndex = 0;
			},
			del_btn(){
				this.Customer_service=false
			},
			del_comment(){
				this.comment=false
			},
			need(){
				window.open('https://gisp.scszsj.com/', '_blank');
			},		
			goNews(e){
				uni.navigateTo({
					url: '/news'
				})
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	page{
		font-family:"Source Han Sans CN", sans-serif;
		background-color: #ffffff;
	}
	.banner_title{
		width: 317px !important;
		height: 144px !important;
		position: absolute;
		top: 100px;
		left: 331px;
	}
	.pr{
		width: 40px !important;
		height: 36px !important;
		position: absolute;
		top: 200px;
		left: 324px;
	}
	.pl{
		width: 40px !important;
		height: 36px !important;
		position: absolute;
		top: 112px;
		left: 627px;
	}
	.banner_desc{
		width: 602px;
		position: absolute;
		top: 285px;
		left: 331px;
		font-weight: 400;
		font-size: 14px;
		color: #3D3D3D;
		line-height: 22px;
	}
	.content_box{
		overflow: hidden;
	}
	
	.content{
	    width:100%;
	    margin: 0 auto;
	}
	.content_top{
	    width: 100%;
	    display: flex;
	    margin:0 auto;
	}
	.banner{
	    width: 100%;
	    height: 480px;
		overflow: hidden;
		position: relative;
	}
	.banner uni-swiper {
	    display: block;
	      height: 480px;
	}
	.banner .banner_img{
		width: 100%;
		height: 480px;
	}
	.slide-image {
	  width: 100%;
		height: 480px;
	}
	.index_title{
	    text-align: center;
	}
	.index_title h4{
	    font-size: 36px;
	    font-weight: inherit;
	    color: #333333;
	    margin: 40px auto 0;
	}
	.title_box p{
	    font-size: 16px;
	    color: #666;
		text-align: center;
	}
	
	>>>.uni-list-item__container{
		    padding:0!important; 
			padding-left: 0!important; 
	}
	.index_title {
		  height: 40px;
		  line-height: 40px;
		  display: flex;
		  justify-content: center;
		  margin-top: 49px;
	}
	  .index_title h5{
			font-weight: 700;
			font-size: 30px;
			color: #3D3D3D;
			margin: 0 10px;
		}
		.index_title view{
			height: 40px;
			line-height: 40px;
		}
	.index_title .t_l{
		  width: 39px;
		  height: 39px;
		  vertical-align: middle;
	}
	.content_bottom{
	    width: 100%;
	    margin:  0 auto;
		background: url(../static/imgs/need/bq_bg.png) no-repeat;
		background-size: 100% 100%;
	}
	/* add */
	.one_serve{
		width: 1285px;
		 height: 197px;
		 margin: 0 auto;
		 display: flex;
		 align-items: center;
		 justify-content: space-between;
		 margin: 0 auto;
		 margin-top:77px;
	}
	.serve_list{
		width: 1285px;
		 height: 197px;
		 margin: 0 auto;
		 display: flex;
		 justify-content: space-between;
	}
	.serve_item{
		width: 166px;
		height: 197px;
		background: url(../static/imgs/need/bh_item.png) no-repeat;
		background-size: 100% 100%;
		box-shadow: 0px 8px 16px 0px rgba(229,217,212,0.4);
		border-radius: 14px 14px 14px 14px;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #262C37;
		cursor: pointer;
	}
    .serve_item:hover{
		background: url(../static/imgs/need/bh_itemx.png) no-repeat;
		background-size: 100% 100%;
		color: #ffffff;
	}
	.serve_img{
		width: 82px;
		height: 82px;
		margin-top: 28px;
	}
	.serve_title{
		width: 98px;
		height: 44px;
		font-weight: 400;
		font-size: 14px;
		line-height: 22px;
		text-align: center;
		margin-top: 11px;
	}
	.serve_title_44{
		line-height: 44px !important;
	}
   .apply{
   	width: 134px;
   	height: 46px;
   	background: url(../static/imgs/need/bq_more.png) no-repeat;
   	background-size: 100% 100%;
	font-weight: 400;
	font-size: 16px;
	color: #ED6300;
	text-align: center;
	line-height: 46px;
	cursor: pointer;
	margin: 0 auto;
	margin-bottom: 48px;
	margin-top: 71px;
   }
   .apply:hover{
   		opacity: 0.8;
   }
   @media screen and (max-width: 768px) {
   	  .banner_desc{
   		  line-height: 12px !important;
   		  width: 290px !important;
   	  }
   	.banner{
   	    height: 130px !important;
   	}
   	.banner uni-swiper {
   	       height: 130px !important;
   	}
   	.banner .banner_img{
   		  height: 130px !important;
   	}
   .index_title{
	  margin-top: 20px; 
   }
   .index_title h5{
   	font-size: 14px !important;
   }
   .one_serve{
	   width: 166px !important;
	   height: 1300px !important;
	   align-items: normal;
   }
   .serve_list{
   	 flex-direction: column;
   }
   .serve_item{
   	width: 166px !important;
   	min-height: 197px !important;
	margin-bottom: 20px;
	border-radius: 14px;
   }
   .serve_img{
   	width: 60px !important;
   	height: 60px !important;
   	margin-top: 32px !important;
   }
   .serve_title{
   	width: 98px !important;
   	height: 44px !important;
   	font-size: 10px !important;
   	line-height: 14px !important;
   	margin-top: 11px  !important;
   }
   	.apply{
   		width: 100px;
   		height: 22px;
   		border-radius: 22px;
   		line-height: 22px;
   		font-size: 10px !important;
   		margin-bottom: 0;
   	}
   	.b20{
   		width: 100%;
   		height: 20px;
   	}
   }
</style> 
