首页 > 小程序教程 > 微信小程序我的奖品红色纯文字页面样式模板制作设计下载

微信小程序我的奖品红色纯文字页面样式模板制作设计下载

上一篇 下一篇
今天给大家带来我的奖品红色纯文字页面样式,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container">
  <view class="header">
    <view class="header-top">
      <view class="setbtn" bindtap="setTap">
        <image src="{{img_url}}mine/set.png" class="pic"></image>
      </view>
    </view>
    <view class="userinfo">
      <image src="{{img_url}}mine/user.jpg" class="img"></image>
    </view>
    <view class="nickname">
      <text class="name">汇汇</text>
      <view class="level"></view>
    </view>
    <view class="account-info">
      <view class="list">
        <view class="info" bindtap="voucherTap">
          <text class="num">1</text>
          <text class="type">代金券(张)</text>
        </view>
        <view class="info" bindtap="WalletTap">
          <text class="num">9.80</text>
          <text class="type">汇汇钱包(元)</text>
        </view>
        <view class="info" bindtap="hWalletTap">
          <text class="num">88</text>
          <text class="type">汇币(个)</text>
        </view>
      </view>
    </view>
  </view>
  <view class="nav">
    <view class="nav-ul">
      <view class="right-before bottom-after" bindtap="prizeTap">
        <view class="nav-li">
          <image class="label" src="{{img_url}}mine/icon1.png" />
          <text class="label-name">我的奖品</text>
        </view>
      </view>
      <view class="right-before bottom-after" bindtap="collectionTap">
        <view class="nav-li">
          <image class="label" src="{{img_url}}mine/icon2.png" />
          <text class="label-name">我的收藏</text>
        </view>
      </view>
      <view class="bottom-after" bindtap="contactTap">
        <view class="nav-li">
          <image class="label" src="{{img_url}}mine/icon3.png" />
          <text class="label-name">联系客服</text>
        </view>
      </view>  
    </view>
  </view>
</view>
 
二、wxss样式文件代码如下:
page {
  height: 100%;
  background-color: #f2f2f2;
}

.container {
  height: 100%;
}

.header {
  width: 100%;
  background: #df2b2a;
}

.header-top {
  position: relative;
  width: 100%;
  height: 96rpx;
}

.title {
  position: absolute;
  left: 0px;
  width: 100%;
  padding: 0;
  margin: 0;
  line-height: 96rpx;
  text-align: center;
  font-size: 30rpx;
  font-weight: normal;
  color: #fff;
  z-index: 1;
}

.setbtn {
  top: 20rpx;
  right: 30rpx;
  background-size: auto 40rpx;
  background-position: -140px 0;
  display: block;
  position: absolute;
  width: 50rpx;
  height: 50rpx;
  z-index: 9;
}

.pic {
  width: 50rpx;
  height: 50rpx;
}

.userinfo {
  width: 252rpx;
  padding: 12rpx;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.4) !important;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  text-decoration: none;
}

.img {
  display: block;
  width: 240rpx;
  height: 240rpx;
  border: #fff solid 6rpx;
  border-radius: 50%;
}

.nickname {
  margin: 30rpx auto;
  text-align: center;
}

.name {
  display: inline-block;
  max-width: 76%;
  padding-right: 4rpx;
  font-size: 30rpx;
  line-height: 40rpx;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.level {
  position:absolute;
  background-position: 0 1px;
  display: inline-block;
  margin-top: 4rpx;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  background: url(http://appuat.huihuishenghuo.com/img/mine/vip-icon.png) no-repeat 0 0 / 40rpx auto;
}

.account-info {
  width: 100%;
  overflow: hidden;
}

.list {
  width: 100%;
  padding: 24rpx 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
}

.info {
  float: left;
  width: 33.333%;
  display: block;
  line-height: 48rpx;
  text-align: center;
  color: #fff;
}

.num {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.type {
  padding-top: 4rpx;
  display: block;
  font-size: 32rpx;
  font-family: Courier New, Courier, monospace;
}

.nav {
  width: 100%;
  margin-top: 20rpx;
  background: #fff;
  overflow: hidden;
}

.nav-ul {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
}

.left-before, .right-before, .top-after, .bottom-after {
  float: left;
  padding: 32rpx 0;
  width: 33.333%;
  position: relative;
}

.right-before:before {
  right: 0;
  border-right: #dedede solid 1rpx;
}

.bottom-after:after {
  bottom: 0;
  border-bottom: #dedede solid 1rpx;
}

.left-before:before, .right-before:before {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  content: '';
  overflow: hidden;
}

.top-after:after, .bottom-after:after {
  position: absolute;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 1rpx;
  content: '';
  overflow: hidden;
}

.nav-li {
  display: block;
}

.label {
  display: block;
  width: 100rpx;
  height: 100rpx;
  margin: 0 auto;
  border: 0;
}

.label-name {
  display: block;
  margin-top: 10rpx;
  text-align: center;
  line-height: 38rpx;
  font-size: 30rpx;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
  color: #333;
}
三、js页面代码如下:
var app = getApp();
var server = require('../../utils/server');
Page({
	data: {
		img_url: 'http://appuat.huihuishenghuo.com/img/'
	},
	onLoad: function () {
	},
	onShow: function () {
		this.setData({
			userInfo: app.globalData.userInfo
		});
	},
	setTap: function () {
		wx.navigateTo({
			url: 'account',
			success: function (res) {
				// success
			},
			fail: function () {
				// fail
			},
			complete: function () {
				// complete
			}
		})
	},
	voucherTap: function () {
		wx.navigateTo({
			url: 'voucher',
			success: function (res) {
				// success
			},
			fail: function () {
				// fail
			},
			complete: function () {
				// complete
			}
		})
	},
	WalletTap: function () {
		wx.navigateTo({
			url: 'wallet?type=1',
			success: function (res) {

			},
			fail: function () {
				// fail
			},
			complete: function () {
				// complete
			}
		})
	},
	hWalletTap: function () {
		wx.navigateTo({
			url: 'wallet?type=2',
			success: function (res) {

			},
			fail: function () {
				// fail
			},
			complete: function () {
				// complete
			}
		})
	},
	collectionTap: function () {
		wx.navigateTo({
			url: 'collection',
			success: function (res) {
				// success
			},
			fail: function () {
				// fail
			},
			complete: function () {
				// complete
			}
		})
	},
	prizeTap: function () {
		wx.navigateTo({
			url: 'prize',
			success: function (res) {
				// success
			},
			fail: function () {
				// fail
			},
			complete: function () {
				// complete
			}
		})
	},
	contactTap: function () {
		wx.makePhoneCall({
			phoneNumber: '13553835046'
		})
	}
});


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

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