.quantifyContainer{ display: flex; flex-direction: column; align-items: center; background-color: #f2f2f2; height: 100vh; } .tip{ display: flex; align-self: flex-start; margin: 3%; width: 100%; } .tip text{ color: #fbac15; margin-left: 3%; } .quantifyBox{ display: flex; flex-direction: column; width: 90%; } .oilInfoBox{ display: flex; align-items: center; background-color: #FFFFFF; border-radius: 10rpx; height: 18vh; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .oilInfoBox image { width: 200rpx; height: 200rpx; } .oilInfo{ display: flex; flex-direction: column; margin-left: 10%; } .oil{ font-weight: 600; font-size: x-large; } .price{ border: #d81e07 solid 1rpx; background-color: #ffebec; border-radius: 18rpx; margin-top: 5%; } .inputBox{ display: flex; flex-direction: column; background-color: #FFFFFF; border-radius: 10rpx; height: 30vh; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-top: 5%; padding: 5%; } .input{ display: flex; justify-content: space-between; margin-bottom: 3%; } .input input{ text-align: end; } .line{ width: 100%; background-color: #8a8989; height: 1rpx; margin-bottom: 5%; } .fastInput{ display: flex; flex-wrap: wrap; height: 50%; } .fastItem{ flex:1 1 25%; box-sizing: border-box; text-align: center; border: #f2f2f2 solid 2rpx; background-color: #f2f2f2; border-radius: 30rpx; margin: 1%; height: 100rpx; line-height: 100rpx; color: #acacac; } .typeSelect{ display: flex; margin-top: 5%; } .typeSelect radio{ margin: 3% 3% 0% 3%; } .anthorization{ background-color: #d81e07; color: #FFFFFF; margin-top: 5%; width: 90%; height: 7vh; display: flex; align-items: center; justify-content: center; border-radius: 20rpx; }