page { background-color: #f6f6f6; } /* 用户 */ .linearBack { background-image: linear-gradient(to top, #f6f6f6 20%, #fbe2e1); padding: 30rpx; box-sizing: border-box; } .head { position: relative; } .head-img { width: 120rpx; height: 120rpx; border-radius: 50%; border: 4rpx solid #ffffff; } .head-cont { position: absolute; left: 0; top: 0; width: 100%; padding: 15rpx 30rpx 0 160rpx; box-sizing: border-box; } .head-name { font-size: 34rpx; font-weight: 600; } .head-text { line-height: 70rpx; font-size: 26rpx; color: #111111; } .head-text text{ background: #da2b54; color: white; padding: 0 20rpx; border-radius: 30rpx; line-height: 40rpx; display: inline-block; color: white; font-size: 24rpx; } .head-name image, .head-text image{ width: 90rpx; height: 34rpx; vertical-align: middle; } .head-edit { position: absolute; right: 0; top: 0; line-height: 120rpx; font-size: 28rpx; } /* 订单 */ .userCont { padding: 15rpx 30rpx; box-sizing: border-box; } .white { background-color: white; border-radius: 20rpx; box-sizing: border-box; } .order-top { display: flex; line-height: 40rpx; padding: 30rpx 30rpx 15rpx; box-sizing: border-box; } .order-title { flex: 1; font-size: 32rpx; } .order-more { font-size: 28rpx; color: #666666; } .order-list { display: flex; padding: 0 0 10rpx; } .order-item { width: 25%; float: left; text-align: center; position: relative; margin: 20rpx 0; } .order-number{ position: absolute; right: 25%; top: 0; background: #da2b54; color: white; font-size: 22rpx; min-width: 30rpx; height: 30rpx; line-height: 30rpx; border-radius: 15rpx; } .order-icon { width: 52rpx; } .order-label { font-size: 26rpx; color: #333; } .order--number { border-radius: 50%; color: #ffffff; background-color: #da2b54; position: absolute; top: -10rpx; right: 40rpx; font-size: 24rpx; width: 30rpx; height: 30rpx; line-height: 30rpx; border: 4rpx solid #ffffff; } .parent-user { display: flex; padding: 30rpx; box-sizing: border-box; position: relative; } .parent-icon { width: 68rpx; height: 68rpx; margin-top: 4rpx; } .parent-cont { width: calc(100% - 68rpx); padding: 0 20rpx; box-sizing: border-box; color: #000000; } .parent-cont-no { line-height: 72rpx; } .parent-cont-name { font-weight: 600; margin-bottom: 6rpx; font-size: 28rpx; display: flex; } .parent-cont-tips { border: 2rpx solid #da2b54; color: #da2b54; font-weight: normal; font-size: 22rpx; border-radius: 20rpx; padding: 0 13rpx; height: 28rpx; line-height: 28rpx; margin-left: 15rpx; margin-top: 4rpx; } .parent-cont-tel { font-size: 26rpx; color: #333; } .parent-tel, .parent-bd { position: absolute; right: 30rpx; top: 32rpx; font-size: 24rpx; text-align: center; } .parent-bd { font-size: 26rpx; border: 2rpx solid #da2b54; color: #da2b54; border-radius: 10rpx; line-height: 64rpx; padding: 0 15rpx; } .parent-tel-icon { width: 36rpx; height: 36rpx; margin: 0 auto; } /* 工具 */ .tool-list { overflow: hidden; padding: 15rpx 0; } .tool-icon { width: 52rpx; } /* 推荐 */ .goods { padding: 30rpx; box-sizing: border-box; } .goods-title { text-align: center; margin-bottom: 30rpx; } .goods-title-name { position: relative; color: #da2b54; font-size: 32rpx; width: 260rpx; margin: 0 auto; } .goods-title text { display: inline-block; } .goods-title-left::after, .goods-title-right::after { position: absolute; top: calc(50% - 6rpx); content: ''; width: 10rpx; height: 10rpx; border-radius: 50%; background-color: #ffffff; border: 4rpx solid #da2b54; z-index: 9; } .goods-title-left::after { right: 30rpx; } .goods-title-right::after { left: 30rpx; } .goods-title-left::before, .goods-title-right::before { position: absolute; top: calc(50% - 0rpx); content: ''; width: 60rpx; height: 4rpx; } .goods-title-left::before { left: -20rpx; background-image: linear-gradient(to right, #f6f6f6, #da2b54); } .goods-title-right::before { right: -20rpx; background-image: linear-gradient(to right, #da2b54, #f6f6f6); } .goodsList { flex-wrap: wrap; justify-content: flex-start; } .goodsItem { margin: 0 15rpx 20rpx; width: calc(50% - 30rpx); display: inline-block; background-color: white; border-radius: 30rpx; overflow: hidden; } .goodsItem-img { width: 100%; position: relative; padding-top: 100%; } .goodsItem-img image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .goodsItem-cont { padding: 30rpx 20rpx; box-sizing: border-box; } .goodsItem-text { color: #ff9b26; font-size: 26rpx; line-height: 54rpx; } .goodsItem-tips { margin-top: 20rpx; display: flex; line-height: 40rpx; } .goodsItem-price { flex: 1; color: #da2b54; font-size: 32rpx; font-weight: 600; } .goodsItem-sales { font-size: 26rpx; color: #999999; } /* 邀请码弹出 */ .namePop { position: fixed; background-color: rgba(0, 0, 0, .5); left: 0; top: 0; height: 100vh; width: 100vw; z-index: 100000; display: none; } .namePop.active { display: block; } .nameCont { -webkit-box-orient: vertical; -webkit-box-pack: center; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 100000; padding: 0 15%; box-sizing: border-box; display: none; } .nameCont.active { display: -webkit-box; } .nameCont-white { background-color: #ffffff; border-radius: 15rpx; overflow: hidden; } .nameCont-top { padding: 30rpx; box-sizing: border-box; } .nameCont-title { font-size: 34rpx; margin-bottom: 30rpx; } .nameCont-input { height: 90rpx; line-height: 90rpx; position: relative; background-color: #f3f3f3; border-radius: 10rpx; overflow: hidden; padding: 0 25rpx; box-sizing: border-box; } .nameCont-input input { width: calc(100% - 40rpx); height: 100%; background-color: transparent; } .nameCont-colse { width: 40rpx; height: 40rpx; top: 25rpx; right: 20rpx; position: absolute; z-index: 9; } .nameCont-btn { line-height: 100rpx; background-color: #f3f3f3; display: flex; margin-top: 30rpx; border-top: 2rpx solid #dfdfdf; } .nameCont-btn-go { text-align: center; flex: 2; } .nameCont-btn-go:last-child { position: relative; color: #ff9951; } .nameCont-btn-go:last-child::after { position: absolute; content: ''; left: 0; top: 0; width: 2rpx; height: 100%; background-color: #dfdfdf; }