第一种风格

效果图：

js代码：无

json代码：

{ "navigationBarBackgroundColor": "#4ca1fb", "usingComponents": {} }

wxml代码：

<!--pages/jiaocheng/jiaocheng.wxml--> <view class='container'> <!-- 第1部分 --> <view class='top-container'> <image class='bg-img' src='../images/backmy.png'></image> </view> <!-- 第2部分 --> <view class='middle-container'> <view class="view_2"> <view class="view_tupianwenzi"> <image class="image_tupian" src="../images/badge.png"></image> <text class="text_1">打车</text> </view> <view class="view_tupianwenzi" bindtap="webViewAll" id="2"> <image class="image_tupian" src="../images/card.png"></image> <text class="text_1">门票</text> </view> <view class="view_tupianwenzi" bindtap="jianjie" bindtap="webViewAll" id="3"> <image class="image_tupian" src="../images/color.png"></image> <text class="text_1">酒店</text> </view> <view class="view_tupianwenzi" bindtap="webViewAll" id="6"> <image class="image_tupian" src="../images/flex.png"></image> <text class="text_1">更多</text> </view> </view> </view> <!-- 第3部分 --> <view class='container_3'> <view class='middle-item' hover-stay-time="150"> <image class="image_1" src="../images/saoyisao.png"></image> <text class='text_2'>扫一扫</text> <image class="image-jiantou" src="../images/saoyisao1.png"></image> </view> </view> <!-- 第4部分 --> <view class='container_4'> <view class='middle-item' hover-stay-time="150"> <image class="image_tupian_1" src="../images/setting.png"></image> <text class='text_2'>设置</text> <image class="image-jiantou" src="../images/jiantou.png"></image> </view> <view class="view_line"></view> <view class='middle-item' hover-class="opcity" hover-stay-time="150"> <image class="image_tupian_1" src="../images/progress.png"></image> <text class='text_2'>个人信息</text> <image class="image-jiantou" src="../images/jiantou.png"></image> </view> <view class="view_line"></view> <view class='middle-item' hover-class="opcity" hover-stay-time="150"> <image class="image_tupian_1" src="../images/share.png"></image> <text class='text_2'>消费记录</text> <image class="image-jiantou" src="../images/jiantou.png"></image> </view> </view> </view>

wxss代码：

page { width: 100%; height: 100%; } .container { width: 100%; height: 100%; position: relative; background-color: rgb(240, 240, 240); z-index: -2; } /* 第1部分 */ .top-container { height: 440rpx; position: relative; display: flex; flex-direction: column; } .bg-img { position: absolute; width: 100%; height: 440rpx; z-index: -1; } /* 第2部分--打车，门票，酒店，更多 begin*/ .middle-container { height: 200rpx; display: flex; /* flex-direction: column; */ align-items: center; border-radius: 20rpx; background-color: #FFFFFF; margin: -80rpx 30rpx 26rpx 30rpx; box-shadow: 0 15rpx 10rpx -15rpx #efefef; } .view_2 { display: flex; flex-direction: row; align-items: center; justify-content: center; } .view_tupianwenzi { display: flex; flex-direction: column; width: 130rpx; align-items: center; margin-left: 25rpx; margin-right: 25rpx; } .image_tupian { display: flex; width: 80rpx; height: 80rpx; } .text_1 { font-size: 30rpx; } /* 第2部分--打车，门票，酒店，更多 end*/ /* 第3部分--扫一扫 begin*/ .container_3 { height: 100rpx; display: flex; border-radius: 15rpx; background-color: #FFFFFF; margin: 0rpx 30rpx 26rpx 30rpx; box-shadow: 0 15rpx 10rpx -15rpx #efefef; } .image_1 { display: flex; width: 50rpx; height: 50rpx; margin-left: 40rpx; } .image-jiantou { width: 32rpx; height: 32rpx; position: absolute; /* 要约束所在位置的子元素的位置要设置成绝对 */ right: 30rpx; /* 靠右调节 */ margin-right: 35rpx } .middle-item { height: 100%; display: flex; flex-direction: row; align-items: center; } .text_2 { /* margin: 0rxp 200rpx 0rpx 200rpx; */ font-size: 33rpx; color: #505050; line-height: 28rpx; font-weight: bold; padding-left: 20rpx; } /* 第3部分--扫一扫 end*/ /* 第4部分--消费记录，我的积分，我的欢乐豆 begin*/ .container_4 { /* width: 100%; */ height: 320rpx; display: flex; flex-direction: column; border-radius: 15rpx; background-color: #FFFFFF; margin: 0rpx 30rpx 100rpx 30rpx; /* box-shadow: 0 15rpx 10rpx -15rpx #efefef; */ } .middle-tag { margin: 0rxp 200rpx 0rpx 200rpx; font-size: 28rpx; color: #333333; line-height: 28rpx; font-weight: bold; padding-left: 22rpx; } .image_tupian_1 { display: flex; width: 50rpx; height: 50rpx; margin-left: 40rpx; } /* 线 */ .view_line { width: 90%; height: 5rpx; background: #f3f3f3; /* margin: 0rxp 5% 0rxp 5%; */ margin: 0 auto; text-align: center; } /* 第4部分--消费记录，我的积分，，我的欢乐豆 end*/

图片的话可以自己找点图片放上去

那些小图标大家可以找自己喜欢的放上去

第二种风格

.js

var that const app = getApp() Page({ /** * 页面的初始数据 */ data: { avatarUrl: '../image/user-unlogin.png', nickName: '点击头像登录', userInfo: {}, radioChecked: '1' //推荐码，游客码，创客码 选中 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { that = this }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 点头像后，再点运行或者拒绝都会进入这里 */ onGetUserInfo: function (e) { console.log(e) that.setData({ avatarUrl: e.detail.userInfo.avatarUrl, nickName: e.detail.userInfo.nickName }) }, })

.wxml

<view class="view_contain_mine"> <view class="view_userinfo_1"> <!-- 用户头像昵称 openid --> <view class="userinfo"> <open-data class="image_radius" type="userAvatarUrl"></open-data> <view class="view_1"> <!-- 昵称 --> <text class="text_nickname">{{nickName}}</text> <!-- 身份：普通游客，创客，boss --> <view class="view_shenfen" bindtap="bt_upgrade"> <!-- <text>{{userInfo.userRole}}</text> --> <text>游客</text> <image class="image_upgrade" src="../image/upgrade.png"></image> </view> </view> </view> <!-- 积分的部分 --> <view class="view_contain_jifen"> <text class="text_jifen1">当前积分：</text> <text class="text_jifen2">{{userInfo.userPoints}}</text> <view class="bt_connect" hover-class="hover-class-1" bindtap="connect">提现</view> <image class="image_about" src="../image/about1.png" /> </view> </view> <!-- 3个好看的按钮 推荐码 游客码 创客码--> <view class="view-center-1"> <view class="view-1 background1 {{radioChecked=='1'?'checked_view':''}}" hover-class="hover-class-1" bindtap='bt_createCode' id="1"> <text class="text_1" style="color:#ff7341"> 推荐码</text> </view> <view class="view-1 background2 {{radioChecked=='2'?'checked_view':''}}" hover-class="hover-class-1" bindtap='bt_createCode' id="2"> <text class="text_1" style="color:#c58268"> 游客码</text> </view> <view class="view-1 background3 {{radioChecked=='3'?'checked_view':''}}" hover-class="hover-class-1" bindtap='bt_createCode' id="3"> <text class="text_1" style="color:#48a4fe"> 创客码</text> </view> </view> </view>

.wxss

pages { width: 100%; height: 100%; } .view_contain_mine { width: 100%; height: 100%; background-color: #f1f1f1; } /* *********1、顶上的框框部分* 头像 昵称 身份**************** begin*/ .view_userinfo_1 { width: 100%; height: 300rpx; /* 背景渐变色 */ background: linear-gradient(#9999ff, #b8bdfd, #f8f8f8); } .userinfo { width: 92%; height: 300rpx; background-color: #fff; border-radius: 25rpx; margin: 0rpx 4% 0rpx 4%; display: flex; flex-direction: row; border: 1rpx solid #E0E3DA; box-shadow: 0rpx 4rpx 0rpx 0rpx #E0E3DA; } /* 微信头像 */ .image_radius { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 150rpx; width: 150rpx; border-radius: 50px; margin: 30rpx 0rpx 0rpx 30rpx; } /* 包裹昵称 身份 */ .view_1 { width: 80%; height: 150rpx; display: flex; flex-direction: column; margin: 30rpx 0rpx 10rpx 40rpx; } /* 微信昵称 */ .text_nickname { font-size: 40rpx; color: #000; font-weight: 550; } /* 身份 */ .view_shenfen { width: 250rpx; height: 55rpx; background-color: #e0f6ff; border-radius: 80rpx; margin: 25rpx 0rpx 0rpx 0rpx; padding: 0rpx 10rpx 0rpx 10rpx; font-size: 35rpx; display: flex; /* flex-direction: column; */ align-items: center; justify-content: center; color: rgb(2, 116, 168); } /* 升级图标 */ .image_upgrade { width: 40rpx; height: 40rpx; margin-left: 30rpx; } /* *********1、顶上的框框部分* 头像 昵称 身份**************** begin*/ /* **********2、积分的部分**************** begin*/ .view_contain_jifen { width: 100%; height: 100rpx; margin: -130rpx 0rpx 0rpx 0rpx; display: flex; justify-content: center; align-items: center; } .text_jifen1 { font-size: 35rpx; margin-right: 30rpx; color: rgb(138, 138, 138); } .text_jifen2 { font-size: 50rpx; color: rgb(228, 1, 1); } .bt_connect { width: 130rpx; height: 50rpx; color: #6699FF; border: 3rpx solid #6699FF; border-radius: 80rpx; font-size: 35rpx; display: flex; justify-content: center; align-items: center; margin: 0rpx 10rpx 0rpx 50rpx; } /* 问号图片 */ .image_about { width: 50rpx; height: 50rpx; } /* **********2、积分的部分**************** end*/ /* **********二维码的部分**************** begin*/ /* 3个按钮 begin*/ .view-center-1 { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; margin: 20rpx 0rpx 0rpx 0rpx; } .view-1 { width: 42%; height: 100rpx; display: flex; margin: 20rpx 10rpx 0rpx 10rpx; border-radius: 15rpx; padding: 10rpx; align-items: center; justify-content: center; } .background1 { background-color: #ffede6; } .background2 { background-color: #fdf4d5; } .background3 { background-color: #d3f5ff; } /* view的点击效果 */ .hover-class-1 { background-color: #e7f5ff; } /* view选中 */ .checked_view { /* 边框 */ border: 3rpx solid #237bff; } /* 3个按钮 end*/

边框弧度

border-radius: 0rpx 0rpx 40% 40% / 0rpx 0rpx 50rpx 50rpx !important;