.app { background-color: #F7F5F5; height: 100vh; width: 100%; color: #000000; padding-top: 20rpx; .orderitem { width: 96%; height: 383rpx; background: #FFFFFF; box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03); border-radius: 5rpx; margin: 0 auto; position: relative; margin-bottom: 20rpx; .tiemitem { width: 92%; font-size: 28rpx; font-family: Source Han Sans CN; font-weight: 400; color: #000000; position: absolute; // background: red; left: 35rpx; top: 30rpx; span:nth-child(2) { margin-left: 20rpx; } span:nth-child(3) { display: inline-block; position: absolute; right: 0; font-weight: 500; color: #26A888; } } .details { width: 96%; height: 200rpx; // background-color: #26A888; position: absolute; top: 97rpx; left: 50%; transform: translateX(-50%); image { width: 180rpx; height: 180rpx; border-radius: 5rpx; position: absolute; } .ppointment { // background: red; position: absolute; width: 71%; height: 100%; right: 0; .doctorname { font-family: Source Han Sans CN; font-weight: 600; color: #333333; span:nth-child(1) { font-size: 28rpx; } span:nth-child(2) { display: inline-block; position: absolute; font-size: 28rpx; right: 0; font-family: Source Han Sans CN; font-weight: 500; color: #333333; } } .reservation { font-size: 28rpx; font-family: Source Han Sans CN; font-weight: 400; color: #959595; position: absolute; top: 24%; } .hospital { width: 99rpx; // height: 29rpx; border: 1px solid #FFA115; border-radius: 5rpx; font-size: 18rpx; font-family: Source Han Sans CN; font-weight: 500; color: #FFA733; position: absolute; top: 67%; text-align: center; line-height: 29rpx; } } } .bottom { position: absolute; width: 96%; height: 20%; bottom: 4%; font-size: 28rpx; font-family: Source Han Sans CN; span:nth-child(1) { position: absolute; font-weight: 400; color: #959595; top: 50%; transform: translateY(-50%); left: 5%; } span:nth-child(2) { line-height: 30px; width: 169rpx; height: 61rpx; background: #26A888; border-radius: 5rpx; display: inline-block; font-size: 28rpx; font-weight: 400; color: #FFFFFF; position: absolute; right: 0; top: 50%; transform: translateY(-50%); text-align: center; } } } }