我是个攻城狮
718 lines
15 KiB
Vue
718 lines
15 KiB
Vue
<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>
|