微信小程序个人等级今日收入页面样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<!--index.wxml-->
<view class="container">
<!--店铺头部信息-->
  <view class="topMsg">
    <view bindtap="toPartner" class="shop_msg">
			<view class="shop_photo"><image src="../../images/chanpin.png"></image></view>
			<view class="shop_msg_left">
				<view class="shop_name">
					<text>路路小朋友</text>
          <view class="shop_lv">
            <image src="../../images/member_bg02.png"></image><text class="shop_lv_num">1</text>
          </view>
          <text>★★</text>
				</view>
				<view class="shop_desc">你愁啥，瞅你咋地，再瞅试试！试试就试试！</view>
				<view class="shop_label"><image src="../../images/label_quanqiu.png"></image></view>
			</view>
			<view class="shop_msg_right">
				<view class="ul">
					<view class="li"><text>粉丝</text><text class="strong">5</text></view>
					<view class="li"><text>代卖</text><text class="strong">500</text></view>
					<view class="li"><text>商品</text><text class="strong">50</text></view>
				</view>
			</view>
		</view>
  </view>   <!--shop信息end-->
  <!--今日收入-->
  <view class="today_income"><view>今日收入</view><view>1200</view></view>
  <!--今日收入end-->

</view>

二、wxss样式文件代码如下：

/*店铺信息*/

.topMsg {
  width: 100%;
  height: 450rpx;
  background: url(../../images/test.jpg);
  background-size: 100% 100%;
  position: relative;
}

.shop_msg {
  position: absolute;
  left: 50%;
  top: 114px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
  width: 80%;
  height: 42%;
  background-color: rgba(225, 225, 225, 0.9);
  border-radius: 5px;
  padding: 1rem;
}

.shop_photo {
  position: absolute;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  top: -50rpx;
  left: 50rpx;
  overflow: hidden;
}

.shop_photo image {
  width: 100%;
  height: 100%;
}

.shop_msg_left {
  width: 80%;
  float: left;
  padding-top: 40rpx;
}

.shop_msg_left .shop_name {
  font-size: 40rpx;
  color: #515151;
  position: relative;
}

.shop_msg_left .shop_name .shop_lv {
  display: inline-block;
  position: relative;
}

.shop_msg_left .shop_name .shop_lv .shop_lv_num {
  position: absolute;
  left: 52rpx;
  font-size: 30rpx;
  top: 3rpx;
  color: white;
}

.shop_msg_left .shop_name image {
  width: 100rpx;
  height: 20px;
  vertical-align: text-bottom;
}


.shop_msg_left .shop_name text:nth-child(3) {
  font-size:24rpx;
  vertical-align: middle;
  color: red;
}

.shop_msg_left .shop_desc {
  font-size: 24rpx;
  color: #999;
}

/*.shop_msg_left .shop_label{font-size: 1.3rem;}*/

.shop_msg_left .shop_label image {
  width: 20%;
  height: 20px;
}

.shop_msg_right {
  float: right;
  width: 20%;
  font-size: 25rpx;
  transform: translateY(30%);
  -ms-transform: translateY(30%); /* IE 9 */
  -webkit-transform: translateY(30%); /* Safari and Chrome */
  color: #999;
}

.shop_msg_right text {
  margin-right: 0.5rem;
}

.shop_msg_right .li:nth-child(2) {
  border-top: 0.1rem solid #ccc;
  border-bottom: 1px solid #ccc;
}

.shop_msg_right .li {
  padding: 0.2rem 0;
}

三、js页面代码如下：

//index.js
//获取应用实例
var app = getApp()
Page({
    toPartner:function(){
        wx.navigateTo({
        url: '../partner/partner'
      })
    }
})

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