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-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-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; } /* 工具 */ .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; }