首页 > 小程序教程 > 微信小程序移动互联网开发定制公司首页样式制作设计教程下载

微信小程序移动互联网开发定制公司首页样式制作设计教程下载

上一篇 下一篇
本文给大家带来的是微信小程序移动互联网开发定制公司首页样式制作设计教程,制作好以后效果图如下:
一、wxml页面代码如下:
<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>
 
二、wxss样式文件代码如下:
.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;
}
三、js页面代码如下:
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);
    }
});

模板简介:该模板名称为【微信小程序移动互联网开发定制公司首页样式制作设计教程下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 18,582次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-26
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
表格式简历模板 html5 微信模板 微信素材 微信公众平台 自适应 微信文章 单页式简历模板 企业网站 微信图片
您可能会喜欢的其他模板