page { background: #e9e9e9; .infomation { display: flex; flex-direction: column; align-items: center; padding-bottom: 10rpx; margin: 0 30rpx; margin-top: 20rpx; border-radius: 10rpx; border-top: 4rpx solid #333; background: #fff; box-shadow: 0 5rpx 10rpx rgb(0 0 0 / 50%); .title { width: 100%; height: 60rpx; line-height: 60rpx; text-align: center; color: #fff; background: #46a9a4; } .name, .mobile, .address { display: flex; align-items: center; width: 100%; .key { width: 200rpx; height: 80rpx; margin-left: 30rpx; text-align: center; line-height: 80rpx; border-bottom: 1rpx solid #f6f6f6; } .value { flex: 1; height: 80rpx; margin-right: 30rpx; border-bottom: 1rpx solid #f6f6f6; .ipt { width: 100%; height: 100%; border: none; outline: none; } } } } .goodsList { position: relative; margin: 0 30rpx; margin-top: 20rpx; padding: 15rpx; border-radius: 10rpx; border-top: 5rpx solid #333; background: #fff; box-shadow: 0 5rpx 10rpx rgb(0 0 0 / 50%); overflow: hidden; .status { position: absolute; top: -2rpx; right: -2rpx; padding: 5rpx 20rpx; color: #fff; font-size: 28rpx; border-radius: 0 0 0 15rpx; background: #46a9a4; } .store { display: flex; align-items: center; height: 80rpx; padding-left: 10rpx; border-bottom: 1rpx solid #e9e9e9; .img { width: 64rpx; height: 64rpx; border-radius: 50%; overflow: hidden; image { width: 100%; height: 100%; } } .storeName { margin-left: 20rpx; color: #222; } } .goods { display: flex; align-items: center; padding: 10rpx; border-bottom: 1rpx solid #f6f6f6; .img { width: 128rpx; height: 128rpx; image { width: 100%; height: 100%; } } .info { flex: 1; display: flex; flex-direction: column; justify-content: space-around; margin: 0 15rpx; .name { font-weight: bold; color: #000; } .desc { color: #999; font-size: 26rpx; } } .data { display: flex; flex-direction: column; justify-content: space-around; align-items: center; font-size: 26rpx; .price { font-weight: bold; color: #000; } .originalPrice { text-decoration: line-through; color: #999; } .count { color: #222; } } } .totalPrice { display: flex; justify-content: space-between; align-items: center; height: 60rpx; border-top: 1rpx solid #e9e9e9; .value { color: #000; font-weight: bold; } } .refund { height: 80rpx; margin: 0 30rpx; margin-top: 20rpx; color: #fff; text-align: center; line-height: 80rpx; border-radius: 10rpx; background: #fe4a4a; box-shadow: 0 5rpx 10rpx rgb(0 0 0 / 50%); } .active { background: #cc4040; } } .purchase { position: absolute; bottom: 30rpx; left: 30rpx; display: flex; align-items: center; width: calc(100% - 60rpx); height: 90rpx; border-radius: 60rpx; border: 6rpx solid #fff; box-sizing: border-box; background: #46a9a4; box-shadow: 0 5rpx 10rpx rgb(0 0 0 / 50%); overflow: hidden; .totalPrice { flex: 1; height: 90rpx; padding-left: 30rpx; line-height: 90rpx; color: #fff; } .pay { width: 200rpx; height: 90rpx; text-align: center; color: #fff; font-weight: bold; line-height: 90rpx; border-radius: 60rpx; background: #f14747; box-shadow: -10rpx 0 25rpx rgb(70 169 164); } } }