diancan/pages/user/index/index.wxss

/**index.wxss**/
.wrap{
	width: 750rpx;
	min-height: 100vh;
	/* background: #f6f6f6; */
}
.banner_wrap .banner{
	width: 750rpx;
	height: 501rpx;
}
.wrap_nr{
	padding: 0 30rpx;
	/* margin-top: -200rpx; */
	position: relative;
}
.banner_wenzi{
	width: 675rpx;
	height: 193rpx;
	position: absolute;
	top: -170rpx;
	left: 50%;
	transform: translateX(-50%);
}
.user_wrap{
	padding: 20rpx 40rpx;
	position: absolute;
	left: 0;
	/* background: #FFFFFF;
	border-radius: 15rpx; */
}
.user_info{
	display: flex;
	align-items: center;
	/* justify-content: space-between; */
}
.user_info .user_name{
	font-size: 40rpx;
	color: #FFFFFF;
}
.user_info .user_tips{
	padding-top: 16rpx;
	font-size: 26rpx;
	color: rgba(255,255,255,.8);
}
.user_info .user_thumb{
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}
.user_level{
	margin-top: 26rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.user_level .level_l{
	width: 98rpx;
	height: 46rpx;
	background: linear-gradient(90deg, #E4BC88, #D2901E);
	border-radius: 23rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.user_level .level_l .level_icon{
	width: 27rpx;
	height: 24rpx;
}
.user_level .level_l .level_num{
	font-size: 29rpx;
	font-weight: 600;
	font-style: italic;
	color: #FFFFFF;
}
.user_level .level_r{
	width: 490rpx;
}
.user_level .level_wenzi{
	padding-top: 10rpx;
	font-size: 22rpx;
	color: #333333;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.section_wrap{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.section{
	width: 335rpx;
	height: 158rpx;
	border-radius: 10rpx;
	padding: 0 34rpx 0;
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	font-size: 30rpx;
	color: #000000;
	/* background: #FFFFFF; */
	background: #FFD761;
	position: relative;
}
.section .sec_icon{
	width: 75rpx;
	height: 76rpx;
}
.section .sec_r{
	padding-left: 15rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #295C56;
}
.section .sec_num{
	font-size: 36rpx;
	font-weight: 600;
	color: rgba(0,0,0,.8);
	padding-top: 8rpx;
}
.section .sec_tip{
	font-size: 24rpx;
	color: rgba(0,0,0,.54);
}
.section .sec_logo{
	width: 36rpx;
	height: 36rpx;
	position: absolute;
	bottom: 30rpx;
	right: 30rpx;
}
/* 底图 */
.tu_wrap{
	width: 100%;
	padding: 100rpx 0 40rpx;
}
.tu_wrap .tu{
	width: 124rpx;
	height: 57rpx;
	display: block;
	margin: 0 auto;
}
/* 版本号 */
.version{
	text-align: center;
	color: #333333;
	font-size: 20rpx;
	padding-top: 20rpx;
}
/* 商户角色切换 */
.banner_wrap{
	position: fixed;
}
.tag{
	width:130rpx;
	height:45rpx;
	background: linear-gradient(-90deg,#295C56,rgba(255,255,255,.3));
	border-radius:23rpx 0rpx 0rpx 23rpx;
	font-size:28rpx;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 160rpx;
	right: 0;
	z-index: 1;
}
/* 订单 */
.order_wrap{
	/* background: #FFFFFF;
	border-radius: 10rpx;
	color: #000000;
	font-size: 28rpx;
	padding: 30rpx 0;
	position: relative;
	z-index: 1; */
	width: 690rpx;
	height: 256rpx;
	position: relative;
}
.order_wrap .order_wrap_bg{
	position: absolute;
	top: 0;
	left: 0;
}
.order_wrap .order_wrap_bg .bg_tu{
	width: 690rpx;
	height: 256rpx;
}
.order_wrap .order_wrap_con{
	width: 690rpx;
	height: 256rpx;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
    flex-direction: column;
    justify-content: center;
}
.order_wrap .order_t{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	color: #FFFFFF;
}
.order_wrap .order_t .order_t_l{
	font-size: 30rpx;
	display: flex;
    align-items: center;
}
.order_wrap .order_t .order_t_l .order_icon{
	width: 30rpx;
	height: 30rpx;
	margin-right: 6rpx;
}
.order_wrap .order_t .order_t_r{
	font-size: 26rpx;
	/* color: rgba(0,0,0,.54); */
}
.order_wrap .order_list{
	display: flex;
	margin-top: 30rpx;
}
.order_wrap .order_item{
	/* flex: 1; */
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.order_wrap .order_item .item_icon{
	position: relative;
}
.order_wrap .order_item .item_icon .icon{
	width: 90rpx;
	height: 90rpx;
}
.order_wrap .order_item .item_icon .num{
	min-width: 34rpx;
	height: 34rpx;
	border-radius: 50%;
	background: #FFD102;
    display: flex;
    align-items: center;
    justify-content: center;
	position: absolute;
	top: -14rpx;
	right: -12rpx;
	font-size: 24rpx;
	font-weight: bold;
	color: #000000;
}
.order_wrap .order_item .item_name{
	/* padding-top: 10rpx; */
}
/* 开通会员 */
.user_vip{
	width: 648rpx;
	height: 82rpx;
	position: relative;
	left: 20rpx;
    top: 0rpx;
	margin-top: 20rpx;
}
.user_vip .vip_bg{
	width: 648rpx;
	height: 82rpx;
	position: absolute;
	top: 0;
	left: 0;
}
.user_vip .vip_con{
	width: 648rpx;
	height: 82rpx;
	padding: 0 40rpx 0 116rpx;
	font-size: 24rpx;
	color: #F3D4B3;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.user_vip .vip_con.flex_end{
	justify-content: flex-end;
}
.user_vip .con_btn{
	width: 135rpx;
	height: 48rpx;
	background: #FFD1A2;
	border-radius: 24rpx;
	font-size: 24rpx;
	color: #5D3921;
	display: flex;
	align-items: center;
	justify-content: center;
}