首页 > 小程序教程 > 微信小程序绿色背景易打卡邀请码样式模板制作设计下载

微信小程序绿色背景易打卡邀请码样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下:
一、wxml页面代码如下:
<!-- 创建成功 -->
<view class="success">
    
    <view class="panel">
        <view class="task-name">
            <text>邀请码</text>
        </view>
        <view class="intro">
            <image class="pic" src="../../../image/pic.png"></image>
        </view>
        <view class="tips">
            <text>长按下方口令,复制并发送给你的好友,邀请他到易打卡参加此任务!</text>
        </view>
        <view class="dot-line">
            <image src="../../../image/dot-line.png"></image>
        </view>
        <view class="code">
            <input type="text" value="{{command}}"/>
        </view>
    </view>

    <view class="close" bindtap="bindClose">
        <image src="../../../image/success-close.png"></image>
    </view>
</view>
 
二、wxss样式文件代码如下:
.success{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #2fcc85;
}

.tit{
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 40rpx;
  color: #fff;
  height: 118rpx;
}

.panel{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 600rpx;
  height: 800rpx;
  background-color: #fff;
  border-radius: 10rpx;
  color: #676767;
}
.task-name{
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 36rpx;
}
.intro{
  padding: 20rpx 0  30rpx;
}
.intro .pic{
  width: 520rpx;
  height: 380rpx;
}
.dot-line image{
  width: 600rpx;
  height: 30rpx;
}

.tips{
  font-size: 32rpx;
  padding: 0 45rpx;
}
.code{
  padding: 28rpx 0 40rpx;
}
.code input{
  height: 72rpx;
  border: 6rpx solid #2ecb84;
  border-radius: 10rpx;
  color: #2ecb84;
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  width: 480rpx;
  padding: 0 10rpx
}

.close{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
  color: #fff;
  margin-top: 20rpx;
}
.close image{
  width: 88rpx;
  height: 88rpx;
}
三、js页面代码如下:
Page({
  data: {
    command: ''
  },
  bindClose: function () {
    wx.navigateBack({
      delta: 1, // 回退前 delta(默认为1) 页面
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
  
  onLoad: function (options) {
    this.setData({
      command: options.taskID
    })
  }
  
});

Page({
  data: {
    command: ''
  },
  bindClose: function () {
    wx.navigateBack({
      delta: 1, // 回退前 delta(默认为1) 页面
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
  
  onLoad: function (options) {
    this.setData({
      command: options.taskID
    })
  }
  
});

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

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