<template>
	<view>
		<view class="top">
			<image src="../../static/images/bg.jpg" mode="widthFix"></image>
			<div class="text">
				<h2>分站开通·拥有属于自己的网站</h2>
				<h5>网站完全独立控制，管理操作简单，全天24小时自动售单，无需人工干预。</h5>
				<button @click="call(custom_tel)">立即联系客服</button>
			</div>		
		</view>
		<view class="advantage">
			<h2>产品优势</h2>
			<view class="item">
				<image src="../../static/images/ys1.png" mode="widthFix"></image>
				<view>提供技术支持</view>
				<view>24小时技术在线维护</view>
			</view>
			<view class="item">
				<image src="../../static/images/ys2.png" mode="widthFix"></image>
				<view>独立域名</view>
				<view>独立后台 自由管理</view>
			</view>
			<view class="item">
				<image src="../../static/images/ys3.png" mode="widthFix"></image>
				<view>分站成本低</view>
				<view>提供服务器、域名</view>
				<view>维护、升级服务</view>
			</view>
			<view class="item">
				<image src="../../static/images/ys4.png" mode="widthFix"></image>
				<view>建站速度快</view>
				<view>10分钟即可实现建站</view>
				<view>推广运营网站</view>
			</view>
			<view class="item">
				<image src="../../static/images/ys5.png" mode="widthFix"></image>
				<view>网站API接口</view>
				<view>免费提供 无需任何费用</view>
			</view>
			<view class="item">
				<image src="../../static/images/ys6.png" mode="widthFix"></image>
				<view>提供稳定安全</view>
				<view>低价的快递费 礼品货源</view>
			</view>
			<view class="item">
				<image src="../../static/images/ys7.png" mode="widthFix"></image>
				<view>利润直达账户</view>
				<view>提现 24小时内到账</view>
			</view>
			<view class="item">
				<image src="../../static/images/ys8.png" mode="widthFix"></image>
				<view>前景可观</view>
				<view>客源稳定 收入稳定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		siteResouce
	} from '@/api/api.js';
	export default {
		data() {
			return {
				custom_tel: '',
			}
		},
		onLoad() {
			siteResouce().then(res => {
				this.custom_tel = res.data.custom_tel;
			});
		},
		methods: {
			call: function(number){
				uni.makePhoneCall({
					phoneNumber: number		
				});
			}
		},
	}
</script>

<style scoped lang="scss">
	.top{
		position: relative;
		image{
			width:100%;
			vertical-align: bottom;
		}
		.text{
			position: absolute;
			top:80rpx;
			color:#fff;
			padding: 0 30rpx;
			h2{
				text-align: center;
				margin-bottom: 20rpx;
			}
			button{
				width:360rpx;
				color: #fb3434;
				font-size: 32rpx;
				border-radius: 60rpx;
				padding: 15rpx 0;
				margin: 40rpx auto 0 auto;
			}
		}
	}
	.advantage{
		background: #fff;
		overflow: hidden;
		h2{
			text-align: center;
			margin: 40rpx 0;
		}
		.item{
			width:50%;
			float:left;
			text-align: center;
			margin-bottom: 40rpx;
			image{
				width:100rpx;
			}
		}
	}
</style>
