微信小程序——个人中心——view在最前面——一行四个排列、边框弧度

第一种风格

效果图：

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;