<import src="../../common/tpl/banner-swiper.wxml"/>
<view>
    <template is="bannerSwiper" data="{{...bannerSwiperConfig}}"/>
    <view class="block-title">
        <text class="block-title-value"><text>六</text>大服务 <text>全</text>线开发</text>
        <text class="block-title-assist"></text>
    </view>
    <view class="service-list">
        <view class="service-item" wx:for="{{serviceList}}">
            <image src="{{item.icon}}"></image>
            <text>{{item.title}}</text>
        </view>
    </view>
    <view class="dingzhi">
        <view class="flow-process">
            <block wx:for="{{flowProcessList}}">
                <view class="flow-process-item">
                    <view class="flow-process-con">
                        <text class="flow-process-index">{{index}}</text>
                        <text class="flow-process-title">{{item}}</text>
                    </view>
                </view>
                <view class="flow-process-arrow" wx:if="{{index < flowProcessList.length-1}}"></view>                
            </block>
        </view>
        <navigator class="dz-btn" url="../dingzhi/dingzhi">立即定制</navigator>
    </view>
</view>

.block-title {
    text-align: center;
    line-height: 110rpx;
    font-size: 42rpx;
    font-weight: bold;
}

.block-title-value {
    padding-left: 42px;
    background: url("../../assets/img/block_title_bg.png") no-repeat left center;
}

.block-title-value text {
    color: #61a1ff;
}

.block-title-assist {
    padding-left: 42px;
    background: url("../../assets/img/block_title_bg.png") no-repeat right center;
}

.service-list {
    background: white;
    border-top: 1px solid #e3e3e3;
}

.service-item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    
    display: -webkit-inline-flex;
    display: inline-flex;
    align-items: center;
    width:50%;
    height: 116rpx;
    padding-left: 68rpx;
    border-bottom: 1px solid #e3e3e3;
}

.service-item:nth-of-type(2n + 1) {
    border-right: 1px solid #e3e3e3;
}

.service-item > image {
    width: 58rpx;
    height: 58rpx;
    margin-right: 18rpx;
}

.service-item > text {
    font-size: 24rpx;
    color: #7f7f7f;
}

.dingzhi{
    margin-top: 24rpx;
    padding: 60rpx 50rpx;
    background: url("http://www.gzyueyun.com/m/yueyun-mini-app/assets/img/dz_bg.png") no-repeat bottom center/contain white;
}

.flow-process {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flow-process-item {
    flex-grow: 3;
    text-align: center;
    padding: 12rpx 0;
    background: #fafafa;
    border-radius: 4px;
    box-shadow: 0 0 1px 1px #e4e4e4;
}

.flow-process-index {
    display: block;
    font-size: 48rpx;
    color: #61a1ff;
}

.flow-process-title {
    display: block;
    font-size: 24rpx;
    color: #7f7f7f;
}

.flow-process-arrow {
    flex-grow: 1.5;
    width: 17rpx;
    height: 34rpx;
    background: url("http://www.gzyueyun.com/m/yueyun-mini-app/assets/img/flow_process_right_arrow.png") no-repeat center/contain;
}

Page({
    data: {
        bannerSwiperConfig: getApp().globalData.bannerSwiperConfig,
        serviceList: [
            {
                icon:"http://www.gzyueyun.com/m/yueyun-mini-app/assets/img/service_icon_01.png",
                title:"移动APP定制开发"
            },
            {
                icon:"http://www.gzyueyun.com/m/yueyun-mini-app/assets/img/service_icon_02.png",
                title:"网站定制开发"
            },
            {
                icon:"http://www.gzyueyun.com/m/yueyun-mini-app/assets/img/service_icon_03.png",
                title:"微信定制开发"
            },
            {
                icon:"http://www.gzyueyun.com/m/yueyun-mini-app/assets/img/service_icon_04.png",
                title:"O2O定制开发"
            },
            {
                icon:"http://www.gzyueyun.com/m/yueyun-mini-app/assets/img/service_icon_05.png",
                title:"物联网软件开发"
            },
            {
                icon:"http://www.gzyueyun.com/m/yueyun-mini-app/assets/img/service_icon_06.png",
                title:"云服务"
            }
        ],
        flowProcessList: ["需求评估","视觉设计","程序开发","测试上线"]
    },
    onLoad: function () {
        getApp().getBannerList(this);
    }
});