首页 > 小程序教程 > 微信小程序红色风格加盟合伙人样式模板制作设计下载

微信小程序红色风格加盟合伙人样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下:
一、wxml页面代码如下:
<view class="wraper">
    <view class="banner">
        <image src="http://ojhq3mgil.bkt.clouddn.com/web/478/20170208/201702081000316987.jpg"></image>
    </view>
     <view class="title">
        <image src="../../images/partner_02.png"></image>
    </view>
    <!--加盟特权内容-->
    <view class="content">
        <view class="listItems">
            <view class="leftImg">
                <image src="../../images/partner_kaidian.png"></image>
            </view>
            <view class="rightTxt">
                <text class="red">开店0门槛</text>
                <text class="txtDesc">开店0门槛 轻松赚钱一键分销,一件代发,支持全渠道推广。</text>
            </view>
        </view>
        <view class="listItems">
            <view class="leftImg">
                <image src="../../images/partner_baozhang.png"></image>
            </view>
            <view class="rightTxt">
                <text class="orange">货源有保障</text>
                <text class="txtDesc">精选商品,品质保证,众安承保,正品保障,厂家直供,丰厚佣金。</text>
            </view>
        </view>
        <view class="listItems">
            <view class="leftImg">
                <image src="../../images/partner_yi.png"></image>
            </view>
            <view class="rightTxt">
                <text class="yellow">一对一指导</text>
                <text class="txtDesc">手把手教你成交订单,给你专业知识培训,朋友圈素材免费提供,小白也能开店赚钱!</text>
            </view>
        </view>
        <view class="btnGroup">
            <button class="btn">成为合伙人</button>
        </view>
    </view>
</view>
 
二、wxss样式文件代码如下:
.wraper{
    width: 100%;
}
.wraper .banner{
    width: 100%;
    height: 500rpx;
}
.wraper .title{
    width: 100%;
    height: 116rpx;
}
.wraper image{
    width: 100%;
    height: 100%;
}
.wraper .content{
    background: #fff;
    width: 100%;
}
.wraper .content .listItems{
    width: 88%;
    margin: 0 auto;
    height: 150rpx;
    border-bottom: 1px dashed #ededed;
}
.wraper .content .listItems .leftImg{
    width: 120rpx;
    height:120rpx;
    margin-top: 15rpx;
    float: left;
}
.wraper .content .listItems .rightTxt{
    width: 500rpx;
    float: left;
    margin-left: 30rpx;
    margin-top: 15rpx;
    display: flex;
    flex-direction: column;
}
.wraper .content .listItems .rightTxt .red{
    color: #ff6662;
}
.wraper .content .listItems .rightTxt .orange{
    color: #ff8e62;
}
.wraper .content .listItems .rightTxt .yellow{
    color: #ffbe62;
}
.wraper .content .listItems .rightTxt .txtDesc{
    font-size: 26rpx;
    color: #888;
}
.wraper .content .btnGroup{
    padding: 30rpx 0;
}
.wraper .content .btnGroup .btn{
    width: 88%;
    height: 100rpx;
    line-height: 100rpx;
    border-radius: 50rpx;
    background: #ff6662;
    color: #fff;
}
三、js页面代码如下:
Page({
  data:{},
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  tosearch:function(){
    wx.navigateTo({
        url: '../searchProduct/searchProduct'
      })
  }
})

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

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