<template>
	<Layout :index="3" :banner="0" :titles="'我要出海'" :title_content="'我要出海'">
 <view >
  <view class="content">
       
	   
        <view class="content_bottom">
			<view class="content_top">
			   <view class="banner">
						   <image class="banner_img" src="../static/imgs/banner3x.png"></image>
							 <image class="banner_title" src="../static/imgs/t_ch.png"></image>
							 <view class="banner_desc">“COG 好游戏计划”联合 Google Ads 及知名海外发行团队等，为游戏企业提供专项服务;依托中国(四川)自由贸易试验区，四川省商务厅，联合成都服务贸易协会提供出海参展等服务。</view>
			    </view>
					  </view>
			<view class="one-stop">
				<view class="content_title">
					<h5>纳入<span class="color-cs">“COG 好游戏计划”</span>的企业:推荐进人<span class="color-cs">“川行天下”</span>等游戏出海参展、游戏收益税收等政府政策补助扶持 获得 Google Ads 及知名海外发行团队一对一<span class="color-cs">出海免费辅导扶持服务。</span></h5>
					<image class="yhl" src="../static/imgs/yhl.png"></image>
					<image class="yhr" src="../static/imgs/yhr.png"></image>
				</view>
				
				<view class="one-stops">
					<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-stop_list">
						<view class="one-stop_item Google_bg">
							<image class="c_logo" src="../static/imgs/Google.png"></image>
							<view class="one-stop-title">谷歌出海新客扶持计划</view>
							<view class="one-stop-qy"><image class="qy_icon" src="../static/imgs/qy_i.png"></image>权益1</view>
							<view class="qy_text">规划出海策略，助力产品立项</view>
							<view class="one-stop-qy push-t-15"><image class="qy_icon" src="../static/imgs/qy_i.png"></image>权益2</view>
							<view class="qy_text">量身打造投放方案，广告调整及优化</view>
							<view class="one-stop-qy push-t-15"><image class="qy_icon" src="../static/imgs/qy_i.png"></image>权益3</view>
							<view class="qy_text">Google服务一站对接，为高潜客户提供跨平台专项扶持</view>
						</view>
						<view class="one-stop_item Amazon_bg">
							<image class="c_logo" src="../static/imgs/Amazon.png"></image>
							<view class="one-stop-title">亚马逊云海外发行支持</view>
							<view class="one-stop-qy"><image class="qy_icon" src="../static/imgs/qy_i.png"></image>权益1</view>
							<view class="qy_text">遍布全球的可靠基础设施满足游戏发行需求</view>
							<view class="one-stop-qy push-t-15"><image class="qy_icon" src="../static/imgs/qy_i.png"></image>权益2</view>
							<view class="qy_text">一致的技术架构和运维体验加速游戏在国际市场的发布</view>
							<view class="one-stop-qy push-t-15"><image class="qy_icon" src="../static/imgs/qy_i.png"></image>权益3</view>
							<view class="qy_text">免费享用 40 项核心云服务，最长 12 个月</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 {
				 imgList: [
				        '../static/imgs/hy2.png',  
						'../static/imgs/hy2.png',  
						'../static/imgs/hy2.png',  
				      ],
						 selectedIndex: -1,  
						activeIndex: 0, // 当前激活的选项卡索引
						Customer_service:false,
						comment:false,
				Inv:0,
				codeTime:0,
				FormData: {
					phone: '', 
					name:'',
					content:'',
				},
				close:true,
				msg: '',
				ideaForm:{
					phone:'',
					Contentmessage:''
				},
				// 自定义表单校验规则
				customRules: { 
					phone: {
						rules: [{
							required: true,
							errorMessage: '请填写手机号'
						},{
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = (
										/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/
									); //手机号码
								if (!iphoneReg.test(value)) {
										callback('手机号码格式不正确，请重新填写')
									}
							}
						}
						]
					},
					Contentmessage:{
						rules: [{
							required: true,
							errorMessage: '请填写留言内容'
						}]
					},
				password: {
					rules: [{
						required: true,
						errorMessage: '请填写密码'
					},{
						validateFunction: function(rule, value, data, callback) {
															if (value.length<6||value.length>10) {
																callback('密码长度在6-10个字符')
															}
															return true
														}
						}
					
					]
				},
				new_password: {
					rules: [{
						required: true,
						errorMessage: '请填写密码'
					},{
						validateFunction: function(rule, value, data, callback) {
															if (value.length<6||value.length>10) {
																callback('密码长度在6-10个字符')
															}
															return true
														}
					}
					]
				},
				verify_password: {
					rules: [{
						required: true,
						errorMessage: '请填写密码'
					}]
				},
				phone_code:{
					rules: [{
						required: true,
						errorMessage: '验证码不能为空'
					}, 
					
					]
				}
				},
			}
		},
		onLoad() {
			// const eventChannel = this.getOpenerEventChannel()
			// eventChannel.on('pageData', data => {
			// 	console.log(data,3333)
			// 	// data即传过来的参数
			// })
		},
		
		onPageScroll(res) {
			uni.$emit('onPageScroll', res.scrollTop); 
		},
		onShow(params) {
			uni.$emit('page', 0); 
		},
		methods: {
			onClickItem(index){
				console.log(index)
				   this.selectedIndex = index;
				   if(index==0){
					   this.Customer_service=true
					   this.comment=false
				   }
				   if(index==1){
					    this.Customer_service=false
						this.comment=true
				   }
			},
			del_btn(){
				this.Customer_service=false
			},
			del_comment(){
				this.comment=false
			},
			need(){
				uni.navigateTo({
					url: '/apply'
				})
			},
			goNews(e){
				uni.navigateTo({
					url: '/pages/News_information?type='+e
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		font-family:"Source Han Sans CN", sans-serif;
		background-color: #ffffff;
	}
	.banner_title{
		width: 290px !important;
		height: 60px !important;
		position: absolute;
		top: 160px;
		left: 342px;
	}
	.banner_desc{
		width: 424px;
		position: absolute;
		top: 259px;
		left: 351px;
		font-weight: 400;
		font-size: 14px;
		color: #3D3D3D;
		line-height: 22px;
	}
	.need_content{
		width: 470px;
		height: 453px;
		background-color: #FFFFFF;
		border-radius: 14px;
	}
	.need_input{
		margin:4px 53px 16px;
	}
	::v-deep.uni-easyinput__content{
		background-color: #F2F3F5 !important;
		height: 32px;
	}
	::v-deep .ms .uni-easyinput__content{
		height: 92px;
	}
	.need_confirm{
		width: 68px;
		height: 32px;
		background: #1271ED;
		border-radius: 8px 8px 8px 8px;
		font-weight: 400;
		font-size: 14px;
		color: #FFFFFF;
		text-align: center;
		line-height: 32px;
		margin: 0 auto;
		cursor: pointer;
	}
	.need_title{
		width: 100%;
		height: 71px;
		background: #F0F5FD;
		border-radius: 14px 14px 0px 0px;
		font-weight: bold;
		font-size: 18px;
		color: #3D3D3D;
		text-align: center;
		line-height: 71px;
	}
	.need_title image{
		width: 20px;
		height: 20px;
		position: absolute;
		right: 13px;
		top: 13px;
		cursor: pointer;
	}
	
	.push-t-15{
		margin-top: 15px;
	}
	.content{
	    width:100%;
	    margin: 0 auto;
	}
	.content_top{
	    width: 1920px;
	    display: flex;
	    margin:0 auto;
	}
	.banner{
	    width: 100%;
	    height: 504px;
		position: relative;
	}
	.banner uni-swiper {
	    display: block;
	      height: 504px;
	}
	.banner .banner_img{
		width: 100%;
		height: 504px;
	}
	.slide-image {
	  width: 100%;
		height: 504px;
	}
	.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; 
	}
	
	.content_bottom{
	    width: 100%;
	    margin:  0 auto;
	}


  .one-stop{
	  width: 100%;
	  height: 1025px;
	  margin: 0 auto;
	 padding-top: 46px;
	 background: url(../static/imgs/ch_bg.png);
	 background-size: cover;
  }
  .one-stops{
  	  width: 1084px;
  	  margin: 0 auto;
	  margin-top: 90px;
  }
  .title_box{
		margin-bottom: 50px;
  }
  .index_title {
	  height: 40px;
	  line-height: 40px;
	
	  display: flex;
	  justify-content: center;
  }
    .index_title h5{
		font-weight: 700;
		font-size: 30px;
		color: #3D3D3D;
		margin: 0 15px;
	}
	.index_title view{
		height: 40px;
		line-height: 40px;
		
	}
 .index_title .t_l{
 	  width: 39px;
 	  height: 39px;
 	  vertical-align: middle;
 }
  .one-stop_list{
	  width: 878px;
	  display: flex; 
	  flex-wrap: wrap;
	  justify-content: space-between;
	  margin: 0 auto;
  }
  .one-stop_item{
	width: 286px;
	height: 463px;
	box-shadow: 0px 8px 16px 0px rgba(192,199,218,0.3);
	border-radius: 14px 14px 14px 14px;
	  cursor: pointer;
	  position: relative;
	  display: flex;
	  // justify-content: center;
	  align-items: center;
	  flex-direction: column;
	  padding: 0 50px;
	  padding-top: 10px;
  }
  .one-stop-title{
	  font-weight: 600;
	  font-size: 18px;
	  color: #3D3D3D;
	  text-align: center;
	  margin-bottom: 24px;
  }
    .one-stop_item:hover{
		background-color: #F7F7F7 !important;
		opacity: 0.9;
	}
	.apply{
		width: 130px;
		height: 42px;
		border: 1.6px solid #FD7403;
		line-height: 42px;
		border-radius: 42px;
		font-weight: 500;
		font-size: 16px;
		color: #FD7403;
		text-align: center;
		margin: 0px auto;
		cursor: pointer;
		margin-bottom: 93px;
		margin-top: 60px;
	}
	.apply:hover{
			 color: #ffffff;
			 background-color: #FD7403;
	}
  .one-stop_list .one-stop_item:nth-child(5n+1){
	  margin-left: 0;
  }
  .Amazon_bg{
	  background:url(../static/imgs/xxk.png)no-repeat;
	  background-size: 100% 100%;
  }
  .Google_bg{
  	  background:url(../static/imgs/xxk.png)no-repeat;
	  background-size: 100% 100%;
  }
  .one-stop_item .c_logo{
  	width: 142px;
  	height: 142px;
  }
  .one-stop_item .one-stop-img{
	width: 104px;
	height: 104px;
	background: linear-gradient( 180deg, #5F97EA 0%, rgba(110,150,243,0.23) 100%);
	box-shadow: 2px 3px 4px 1px rgba(165,176,202,0.45);
	border: 1px solid #95BEFF;
	 border-radius: 100%;
	 text-align: center;
	 margin-bottom: 20px;
  }

  .one-stop_item .one-stop-qy{
	font-weight: 400;
	font-size: 14px;
	color: #828590;
	 width: 100%;
	 padding-left: 1px;
	 overflow: hidden;
	 display: flex;
	 align-items: center;
  }
  .one-stop_item .one-stop-qy .qy_icon{
  	 width: 16px;
  	 height: 16px;
	 margin-right: 6px;
  }
  .one-stop_item .qy_text{ 
	 font-weight: 400;
	 font-size: 16px;
	 color: #3D3D3D;
	 line-height: 24px;
	 width: 100%;
	 padding-left: 110px;
	 padding-right: 69px;
	 margin-top: 10px;
  } 
  
  
 
  .right_menu{
	  width: auto;
	  position: fixed;
	  top: 50vh;
	  right: 20px; 
	  background-color: red;
  }
  .float-menu{
		width: 60px;
	  height: 260px; 
	  position: absolute;
	  right: 0;
	  top: 0;
  }
  .Customer_service{
	  width: 294px;
	  height: 298px;
	  background: #FFFFFF;
	  box-shadow: 0px 8px 16px 0px rgba(192,199,218,0.45);
	  border-radius: 12px 12px 12px 12px;
	  position: absolute;
	  right:  70px;
	  top: 0;
  }
  
  .servic_title{
	  width: 50%;
	 height: 71px;
	 text-align: center;
	 font-size: 18px;
	 color: #3D3D3D;
	 line-height: 71px!important;
  }
  .servic_img{
	  width: 166px;
	  height: 123px;
	  position: absolute;
	  top: -53px;
	  right: 0;
  }
  .del_img{
	  width: 20px;
	  height: 20px;
	  position: absolute;
	  top: -53px;
	  cursor: pointer;
	  right: 0;
  }
  .Customer_content{
	  width: 122px;
	  margin: 35px auto 0;
	  text-align: center; 
  }
  .Customer_content>image{
	  width: 90px;
	  height: 90px;
  }
    .tel_phone {
		height: 30px;
		line-height: 30px;
		
	}
  .tel_phone image{
	 width: 17px;
	 height: 16px;
	 vertical-align: middle;
  }
  .tel_phone text{
	  color: #006FFF;
  }
   .float-menu .menu-item:first-child{
	   border-radius: 60px 60px 0px 0px;  
   }
  .menu-item{
	  width: 60px;
	  height: 130px;
	 font-size: 15px;
	 color: #1D222C;
	  background: #FFFFFF;
	  box-shadow: 0px 8px 16px 0px rgba(192,199,218,0.48);
	  border-radius: 0px 0px 60px 60px; 
	  text-align: center;
	  cursor: pointer;
  }
  .menu-item image{
	  width: 23px;
	  height: 22px;
	  margin-top: 35px;
  }
  .menu-item view{
	  width: 40px;
	  margin: 0 auto;
	 font-size: 15px;
	 display:block;white-space: pre-line;
	 color: #1D222C;  
		margin-top: 5px;
  overflow-wrap: break-word; /* 标准属性 */
  }
  .active_menu{
	background: #006FFF!important; 
  }
   .active_menu  view{ 
	color: #fff!important;
  }
  .ideaForm_box{
	  width: 195px!important;
	  margin: 0 auto; 
  }
  .ideaForm{
	margin-top: 10px;
  }
 ::v-deep.ideaForm .uni-forms-item__label{
	  width: 100%!important;
	  display: block;
	  height: 25px;
  }
  .ideaForm  .uni-forms-item{
	  display: block;
	  margin-bottom: 20px;
  }

/* add */	
	.content_title{     width: 1280px;
     height: 118px;
     border-radius: 16px 16px 16px 16px;
      border: 1px solid transparent;      background-clip: padding-box, border-box;      background-origin: padding-box, border-box;      background-image: linear-gradient(to right, #fff, #fff),linear-gradient(to right, #fff7f4, #ffaa93);
	  margin: 20px auto;
	  position: relative;
	  overflow: hidden;    }
	.content_title h5{
		width: 982px;
		height: 64px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 550;
		font-size: 20px;
		color: #3D3D3D;
		line-height: 32px;
		text-align: center;
		margin: 25px auto;
	}
	.color-cs{
		color: #EE6E04;
	}
	.yhl{
		width: 44px;
		height: 31px;
		position: absolute;
		left: 90px;
		top: 22px;
	}
	.yhr{
		width: 44px;
		height: 31px;
		position: absolute;
		right: 70px;
		top: 66px;
	}
	@media screen and (max-width: 768px) {
		  .banner_desc{
			  line-height: 12px !important;
			  width: 160px !important;
		  }
		.banner{
		    height: 130px !important;
		}
		.banner uni-swiper {
		       height: 130px !important;
		}
		.banner .banner_img{
			  height: 130px !important;
		}
		.content_title{
			height: auto !important;
		}
		.content_title h5{
			line-height: 14px !important;
			font-size: 10px !important;
			height: auto !important;
		}
		.one-stop{
			height: auto !important;
		}
		.one-stops{
			 width: 180px !important;
		}
		.index_title{
			 width: 180px !important;
		}
		.index_title h5{
			font-size: 10px !important;
		}
		.one-stop_list{
			flex-direction: column;
		}
		.one-stop_item{
			 width: 160px !important;
			 height: 291px !important;
			 padding: 0 10px !important;
			 margin-bottom: 10px;
		}
		.one-stop_item .c_logo{
			width: 70px !important;
			height: 70px !important;
		}
		.one-stop-title{
			font-size: 12px ;
			
		}
		.one-stop-qy{
			margin-top: 10px;
			font-size: 10px !important;
			margin-bottom: 3px;
		}
		.qy_text{
			line-height: 14px !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> 
