.app { background-color: #F7F5F5; height: 100vh; width: 100%; color: #000000; padding-top: 20rpx; // overflow: scroll; .buy { background: #FFFFFF; position: fixed; bottom: 0; height: 100rpx; width: 100%; height: 125rpx; background: #FFFFFF; box-shadow: 0rpx -3rpx 13rpx 0rpx rgba(0,0,0,0.1); border-radius: 20rpx; .logistics{ width: 216rpx; height: 68rpx; text-align: center; color: #ffffff; border-radius: 5rpx; font-size: 36rpx; line-height: 68rpx; position: absolute; right: 260rpx; top: 50%; background: #E1AE3C; transform: translateY(-50%); z-index: 999; } .pay { width: 216rpx; height: 68rpx; text-align: center; color: #ffffff; background:#26A888; border-radius: 5rpx; font-size: 36rpx; line-height: 68rpx; position: absolute; right: 20rpx; top: 50%; transform: translateY(-50%); } } .time{ height: 80rpx; width: 95%; text-align: center; line-height: 80rpx; background-color: #fff; margin: 30rpx auto 30rpx; border-radius: 20rpx; } .OrderStatus{ text-align: center; width: 300rpx; height: 70rpx; margin: 30rpx auto 30rpx; line-height: 70rpx; background-color:#26A888 ; border-radius: 50rpx; // color: #26A888; color: #FFFFFF; border: 1rpx solid #26A888; } .u-navbar { display: block; image { margin: 0 4% 0 4%; width: 20rpx; height: 30rpx; } .title { width: 31%; font-size: 34rpx; font-weight: 500; color: #FFFFFF; } .inputs { position: relative; // margin-left: 4%; box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03); width: 60%; height: 65rpx; border-radius: 31rpx; z-index: 999; background: #65c0a9; color: #FFFFFF; .placeholder { color: #FFFFFF; } .input { margin: 0 auto; position: absolute; height: 65rpx; // top: 8%; left: 18%; width: 80%; font-size: 26rpx; color: #FFFFFF; } .icon { background: url(@/pagesB/static/sousuo.png) no-repeat; width: 30rpx; height: 28rpx; background-size: cover; position: absolute; top: 28%; left: 4%; } } } .content { width: 95%; height: 100%; background: #FFFFFF; box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03); border-radius: 5rpx; margin: 0 auto; .service { width: 50%; // top: 4%; position: absolute; height: 35px; left: 6%; image { width: 29rpx; height: 35rpx; position: absolute; top: 50%; transform: translateY(-50%); } span { height: 30rpx; font-size: 32rpx; font-family: Source Han Sans CN; font-weight: 600; color: #333333; line-height: 38rpx; position: absolute; top: 50%; transform: translateY(-50%); left: 13%; } } .orderitem { width: 96%; height: 383rpx; position: relative; top: 2%; .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 { width: 100%; font-family: Source Han Sans CN; font-weight: 400; color: #959595; position: absolute; top: 24%; font-size: 28rpx; span:nth-child(2) { display: inline-block; margin-left: 50rpx; } } .hospital { width: 99rpx; 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; } } } } .doctordetails { width: 90%; height: 130rpx; position: relative; font-family: Source Han Sans CN; // background: red; left: 6%; font-size: 28rpx; .doctorphone { position: absolute; font-weight: 400; color: #000000; width: 80%; } .phone { font-family: Source Han Sans CN; font-weight: 400; color: #959595; line-height: 38rpx; position: absolute; top: 52%; left: 5%; } .advice { letter-spacing: 0.2em; } } .doctordetailstwo { width: 85%; position: relative; font-family: Source Han Sans CN; left: 6%; font-size: 28rpx; .doctorphonetwo { font-weight: 400; color: #000000; width: 80%; margin-bottom: 5%; } .phonetwo { font-family: Source Han Sans CN; font-weight: 400; color: #959595; line-height: 38rpx; top: 52%; left: 5%; margin-left: 5%; } .advicetwo { letter-spacing: 0.2em; } } .amount { position: relative; left: 6%; top: 2%; width: 90%; font-size: 28rpx; margin-bottom: 8%; span:nth-child(2) { display: inline-block; position: absolute; right: 0; // font-size: 28rpx; font-family: Source Han Sans CN; font-weight: 500; color: #F44B2F; } } } .bottom { width: 100%; height: 125rpx; background: #FFFFFF; box-shadow: 0rpx -3rpx 13rpx 0rpx rgba(0, 0, 0, 0.1); border-radius: 20rpx; position: fixed; bottom: 0; span:nth-child(1) { display: inline-block; position: absolute; font-size: 28rpx; font-family: Source Han Sans CN; font-weight: 400; color: #959595; line-height: 125rpx; left: 5%; } span:nth-child(3) { display: inline-block; position: absolute; font-size: 28rpx; font-weight: 400; color: #FFFFFF; width: 169rpx; height: 61rpx; line-height: 61rpx; background: #26A888; border-radius: 5rpx; text-align: center; right: 5%; top: 50%; transform: translateY(-50%); } span:nth-child(2) { display: inline-block; position: absolute; font-size: 28rpx; font-weight: 400; border: 1px solid #959595; width: 169rpx; height: 61rpx; line-height: 61rpx; border-radius: 5rpx; text-align: center; right: 5%; top: 50%; transform: translateY(-50%); } } .evaluate{ width: 100%; font-size: 38rpx; color: #000000; line-height: 120rpx; text-align: center; ::v-deep .u-close{ top: 8% !important; } } .star{ position: relative; top: 15%; left: 11%; span{ display: block; font-size: 36rpx; font-family: Source Han Sans CN; font-weight: 400; color: #333333; margin-top: 5%; letter-spacing: 0.2em; } } .submits{ position: relative; width: 496rpx; height: 61rpx; line-height: 61rpx; background: #26A888; border-radius: 5rpx; text-align: center; font-size: 31rpx; font-family: Source Han Sans CN; font-weight: 500; color: #FFFFFF; top: 35%; left: 50%; transform: translateX(-50%); } }