.box { width: 100vw; height: 100vh; background-color: #F5F5F5; padding: 2% 3% 0 3%; } .box-size { box-sizing: border-box; } .level { display: flex; } /* 垂直、水平居中 */ .vertically_center { display: grid; place-items: center; } .top { width: 710rpx; height: 176rpx; background-color: #FFFFFF; padding: 1% 2%; font-size: 22rpx; display: grid; justify-content: space-between; } .top_left { width: 520rpx; height: auto; display: flex; justify-content: space-between; padding-top: 20rpx; } .text1 { color: #FF2A2A; font-size: 25rpx; } .top_bottom { /* background-color: aqua; */ margin-left: 10rpx; color: #999999; } .top-button { width: 132rpx; height: 54rpx; border: 1rpx solid #FFBF60; color: #FFBF60; display: grid; justify-content: center; line-height: 54rpx; position: absolute; top: 30rpx; right: 30rpx; } .information { width: 710rpx; height: 300rpx; background-color: #FFFFFF; /* background-color: pink; */ margin-top: 2%; padding: 0 3%; } .time { width: 650rpx; /* background-color: gray; */ padding: 0 2%; margin-top: 50rpx; display: flex; justify-content: space-between; } .service { width: 710rpx; height: auto; background-color: #FFFFFF; margin-top: 2%; padding: 0 3% 3% 3%; } .horizontal_distribution { display: flex; justify-content: space-between; } .flex { display: flex; } .service_top { width: 670rpx; } .text2 { width: auto; height: 20rpx; margin-top: 45rpx; font-size: 22rpx; color: #999999; } .pet_information { width: 670rpx; height: auto; /* background-color: pink; */ padding: 5% 0 0 3%; } .pet_item { color: #999999; font-size: 28rpx; } .img image { width: 140rpx; height: 140rpx; border-radius: 100rpx; margin-right: 20rpx; } .name { margin-bottom: 15rpx; } .name image { width: 35rpx; height: 35rpx; border-radius: 35rpx; background-color: red; margin-left: 15rpx; } .name_text { color: #000 !important; font-size: 30rpx !important; } .pet- { height: 40rpx; line-height: 40rpx; color: #999999; font-size: 28rpx; margin: 20rpx 0 20rpx 0; } .pet- text { margin: 0 8rpx 0 30rpx; color: #000; } .money_total { width: 670rpx; height: 45rpx; /* background-color: pink; */ margin: 60rpx 0 20rpx 0; justify-content: space-between; font-size: 30rpx; } .money_text { color: red !important; font-size: 34rpx !important; } .other_information { width: 710rpx; height: 350rpx; background-color: #FFFFFF; /* background-color: pink; */ margin-top: 20rpx; padding: 0 1% 0 3%; } .text3 { margin: 40rpx 15rpx 0 15rpx; } .bottom { width: 100vw; height: 163rpx; background-color: #FFFFFF; margin-top: 20rpx; position: relative; } .bottom_button { width: 594rpx; height: 94rpx; background-color: #FFBF60; color: #FFFFFF; font-size: 30rpx; line-height: 94rpx; justify-content: center; position: absolute; top: 19%; left: 11%; } .success { width: 310rpx; height: 370rpx; background-color: #FFFFFF; } .pop_top { width: 310rpx; height: 100rpx; background-image: linear-gradient(to bottom, #FFBF60, #FFD494) } .code { width: 250rpx; height: 50rpx; background-color: #F3F3F3; margin: 30rpx 0 0 30rpx; } .pop_image { display: grid; place-items: center; margin-top: 20rpx; } .copy { width: 260rpx; height: 50rpx; background-color: #FFBF60; margin: 30rpx 0 0 25rpx; } .cancel { width: 40rpx; height: 40rpx; background-color: #FFFFFF; position: absolute; top: -20rpx; right: -17rpx; }