.listBox{ position: relative; z-index: 1; } .content { width: 100%; } .my-top{ background-color: #fff; display: flex; justify-content: space-between; align-items: center; .user-info{ display: flex; align-items: center; padding: 30rpx 30rpx 0 30rpx; .portrait{ width: 120rpx; height: 120rpx; margin-right: 20rpx; image{ width: 120rpx; height: 120rpx; border-radius: 20rpx; } } .info{ display: flex; flex-direction: column; justify-content: center; width: 74%; height: 100%; color: #000; .nickname{ width: 100%; padding: 10rpx 0; text{ font-size: 46rpx; font-weight: bold; } } .rank{ display: flex; align-items: center; .rank-img { width: 25rpx; height: 25rpx; margin-left: 10rpx; } image{ width: 35rpx; height: 35rpx; margin-right: 10rpx; } text{ font-size: 24rpx; } } } } .user-right { display: flex; padding-right: 30rpx; .user-right-img { image { width: 184rpx; height: 48rpx; } } .user-right-text { position: absolute; color: #fff; font-size: 26rpx; font-weight: bold; line-height: 48rpx; margin-left: 25rpx; } } } .coupon-tab { height: 100rpx; display: flex; align-items: center; width: 100%; background-color: #ffffff; .tab { position: relative; display: flex; align-items: center; justify-content: center; width: 25%; height: 100%; text { font-size: 28rpx; color: #7C7C7C; } } .action { text { color: #222222; } .line { position: absolute; left: 50%; bottom: 0; width: 25%; height: 8rpx; border-radius: 20rpx 20rpx 0 0; background-color: #667FFF; transform: translate(-50%, 0); } } } /* 订单列表 */ .order-list{ width: 100%; padding-bottom: 10rpx; .list{ padding: 0 4%; min-height: 400rpx; background-color: #FFFFFF; border-radius: 20rpx; margin: 25rpx; .title-status{ display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100rpx; .title{ display: flex; align-items: center; text{ font-size: 26rpx; color: #A7A7A7; } image { width: 18rpx; height: 18rpx; margin-left: 10rpx; } } .status{ display: flex; align-items: center; text{ font-size: 26rpx; color: #EE8952; } } } .goods-list{ width: 100%; border-top: 2rpx dashed #F1F1F1; border-bottom: 2rpx dashed #F1F1F1; .goods{ display: flex; align-items: center; width: 100%; height: 180rpx; .item{ display: flex; align-items: center; width: 100%; .goods-name{ width: 100%; font-size: 26rpx; color: #A7A7A7; .goods-name-title { font-size: 30rpx; color: #3d3d3d; font-weight: bold; margin-bottom: 40rpx; } .red { color: #FA5D52; } .big { font-size: 36rpx; } .goods-name-bottom { display: flex; justify-content: space-between; .goods-name-bottom-bold { font-size: 30rpx; color: #3d3d3d; font-weight: bold; } } } } } } .status-btn{ display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100rpx; font-size: 28rpx; font-weight: bold; .btn{ width: 200rpx; height: 58rpx; position: relative; text{ font-size: 28rpx; color: #fff; position: absolute; width: 200rpx; line-height: 58rpx; text-align: center; z-index: 1; } image { width: 200rpx; height: 58rpx; position: absolute; z-index: 0; } } .btn-green { image { box-shadow: 5rpx 10rpx 20rpx 0 #b5f4d5; border-radius: 100rpx; } } .btn-blue { image { box-shadow: 5rpx 10rpx 20rpx 0 #b7c8ff; border-radius: 100rpx; } } } } }