.orderPage { .orderBox { width: 100%; height: calc(100% - 44px); overflow: auto; overflow-x: hidden; .main3 { width: 100%; height: 54px; background: rgba(255, 255, 255, 1) url("../../assets/home/line.png") bottom center no-repeat; background-size: 100% auto; margin-bottom: 21px; .outer1 { width: 100%; .group4 { width: 100%; height: 17px; padding: 0 14px; .ImageText1 { height: 16px; margin-top: 1px; width: 87px; .outer2 { width: 87px; height: 16px; .block1 { width: 14px; height: 16px; background: url("../../assets/home/titleIcon.png") top center no-repeat; background-size: 100%; } .TextGroup1 { height: 14px; margin-top: 2px; width: 65px; .txt1 { width: 65px; height: 14px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 15px; font-family: PingFangSC-Semibold; text-align: left; white-space: nowrap; line-height: 15px; display: block; } } } } .ImageText2 { height: 16px; width: 39px; .group5 { width: 39px; height: 16px; .icon2 { width: 14px; height: 14px; margin-top: 1px; } .TextGroup2 { height: 16px; width: 22px; .txt2 { width: 22px; height: 16px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 11px; text-align: center; white-space: nowrap; line-height: 16px; display: block; } } } } } } } .outer5 { background: url("../../assets/home/outer.png") top center no-repeat; background-size: 100% 100%; width: 100%; margin-top: 20px; .block5 { width: 100%; padding: 0 30px; .outerBox { margin: 21px 0; } .main4 { width: 33%; height: 58px; .main5 { width: 100%; height: 30px; .word8 { width: 14px; height: 20px; overflow-wrap: break-word; color: rgba(223, 94, 76, 1); font-size: 14px; font-family: PingFangSC-Semibold; text-align: center; white-space: nowrap; line-height: 20px; margin-top: 8px; display: block; } .word9 { // width: 49px; height: 30px; overflow-wrap: break-word; color: rgba(223, 94, 76, 1); font-size: 22px; font-family: PingFangSC-Semibold; text-align: center; white-space: nowrap; line-height: 30px; margin-left: -1px; display: block; } } .info5 { width: 100%; height: 17px; overflow-wrap: break-word; color: rgba(135, 135, 166, 1); font-size: 12px; text-align: center; white-space: nowrap; line-height: 17px; display: block; margin-top: 11px; } } .TextGroup7 { height: 58px; width: 33%; .mod3 { width: 100%; height: 58px; align-items: center; .txt8 { height: 30px; overflow-wrap: break-word; color: rgba(223, 94, 76, 1); font-size: 22px; font-family: PingFangSC-Semibold; text-align: center; white-space: nowrap; line-height: 30px; display: block; } .info6 { height: 17px; overflow-wrap: break-word; color: rgba(135, 135, 166, 1); font-size: 12px; text-align: center; white-space: nowrap; line-height: 17px; margin-top: 11px; display: block; } } } .TextGroup8 { height: 58px; width: 33%; .outer6 { width: 100%; height: 58px; align-items: center; .txt9 { height: 30px; overflow-wrap: break-word; color: rgba(223, 94, 76, 1); font-size: 22px; font-family: PingFangSC-Semibold; text-align: center; white-space: nowrap; line-height: 30px; display: block; } .word10 { height: 17px; overflow-wrap: break-word; color: rgba(135, 135, 166, 1); font-size: 12px; text-align: center; white-space: nowrap; line-height: 17px; margin-top: 11px; display: block; } } } } } .group7 { height: 54px; margin-top: 10px; width: 100%; background: rgba(255, 255, 255, 1) url("../../assets/home/line.png") bottom center no-repeat; background-size: 100% auto; .main9 { width: 100%; .wrap1 { width: 100%; height: 19px; padding: 0 14px; .ImageText7 { height: 18px; margin-top: 1px; width: 79px; .mod5 { width: 79px; height: 18px; .block3 { width: 16px; height: 18px; background: url('../../assets/order/orderIcon.png') top center no-repeat; background-size: 100%; } .TextGroup7 { height: 14px; margin-top: 3px; width: 56px; .info3 { width: 56px; height: 14px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; font-family: PingFangSC-Semibold; text-align: left; white-space: nowrap; line-height: 14px; display: block; } } } } .ImageText8 { height: 16px; .bd3 { height: 16px; .info4 { height: 16px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 11px; text-align: center; white-space: nowrap; line-height: 16px; display: block; } .outer3 { width: 16px; height: 16px; background: url('../../assets/order/gotoRight.png') top center no-repeat; background-size: 100%; } } } } } } .section1 { width: 100%; .group8 { background-color: rgba(255, 255, 255, 1); margin-top: -1px; width: 100%; position: relative; .section4 { width: 100%; margin-top: 13px; .section5 { width: 100%; padding: 14px; position: relative; .sugerPhto { width: 20%; } .sugerImg { width: 100%; } .main10 { width: 16px; height: 16px; background: url('../../assets/order/time.png') top center no-repeat; background-size: 100%; } .TextGroup9 { height: 71px; width: 236px; margin: 31px 0 0 -70px; .outer4 { width: 236px; height: 71px; .txt10 { width: 236px; height: 13px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; white-space: nowrap; line-height: 14px; display: block; } } } .txt11 { overflow-wrap: break-word; color: rgba(135, 135, 166, 1); font-size: 13px; text-align: left; white-space: nowrap; display: block; margin-left: 6px; } .pricBox { padding-right: 20px; &.orderError { .info5 { color: #df5e4c; } .word12 { color: #df5e4c; } .word14 { color: #df5e4c; } } } .txt9 { height: 13px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; white-space: nowrap; line-height: 14px; display: block; } .info5 { height: 20px; overflow-wrap: break-word; color: rgba(77, 193, 147, 1); font-size: 14px; font-family: PingFangSC-Semibold; text-align: center; white-space: nowrap; line-height: 20px; display: block; padding-right: 0.5em; } .word12 { height: 30px; overflow-wrap: break-word; color: rgba(77, 193, 147, 1); font-size: 22px; font-family: PingFangSC-Semibold; text-align: left; white-space: nowrap; line-height: 30px; display: block; } .word14 { width: 65px; height: 13px; overflow-wrap: break-word; color: rgba(229, 154, 109, 1); font-size: 14px; font-family: PingFangSC-Medium; text-align: left; white-space: nowrap; line-height: 14px; display: block; } .word11 { height: 13px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; white-space: nowrap; line-height: 14px; margin-top: 30px; margin-bottom: 10px; display: block; } .word13 { height: 14px; width: 50%; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; // white-space: nowrap; line-height: 14px; display: block; margin-top: 30px; margin-bottom: 10px; margin-left: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main11 { position: absolute; top: 10px; right: 10px; width: 60px; height: 60px; &.orderSuccess { background: url('../../assets/order/paySuccess.png') top center no-repeat; background-size: 100%; } &.orderError { background: url('../../assets/order/payError.png') top center no-repeat; background-size: 100%; } &.refunding { background: url('../../assets/order/refunding.png') top center no-repeat; background-size: 100%; } &.refunded { background: url('../../assets/order/refunded.png') top center no-repeat; background-size: 100%; } } } .section6 { width: 100%; height: 1px; background: url('../../assets/order/itemLine.png') top center no-repeat; background-size: 100%; } .section7 { width: 338px; height: 44px; margin: 13px 0 0 14px; .group9 { width: 236px; height: 38px; margin-top: 6px; .outer5 { width: 140px; height: 16px; .layer7 { width: 16px; height: 16px; background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf0fedb3fc3dbdc10a886621868873208ec0ecef570507ef8726e6b5d46cc8da2) 100% no-repeat; } .word15 { width: 119px; height: 13px; overflow-wrap: break-word; color: rgba(135, 135, 166, 1); font-size: 13px; text-align: left; white-space: nowrap; line-height: 13px; margin-top: 1px; display: block; } } .word16 { width: 236px; height: 13px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; white-space: nowrap; line-height: 14px; margin-top: 9px; display: block; } } .group10 { background-color: rgba(255, 255, 255, 1); border-radius: 50%; height: 40px; border: 1px solid rgba(77, 193, 147, 1); width: 40px; .outer6 { background-color: rgba(255, 255, 255, 1); border-radius: 50%; width: 36px; height: 36px; border: 1px solid rgba(77, 193, 147, 0.5); margin: 2px 0 0 2px; } } } .section8 { width: 337px; height: 14px; margin: 10px 0 0 14px; .info6 { width: 134px; height: 13px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; white-space: nowrap; line-height: 14px; display: block; } .info7 { width: 182px; height: 13px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; white-space: nowrap; line-height: 14px; margin-top: 1px; display: block; } } .section9 { width: 298px; height: 30px; margin: 4px 0 0 14px; .word17 { width: 70px; height: 13px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; white-space: nowrap; line-height: 14px; margin-top: 11px; display: block; } .info8 { width: 14px; height: 20px; overflow-wrap: break-word; color: rgba(77, 193, 147, 1); font-size: 14px; font-family: PingFangSC-Semibold; text-align: center; white-space: nowrap; line-height: 20px; display: block; margin: 8px 0 0 2px; } .txt12 { width: 53px; height: 30px; overflow-wrap: break-word; color: rgba(77, 193, 147, 1); font-size: 22px; font-family: PingFangSC-Semibold; text-align: left; white-space: nowrap; line-height: 30px; display: block; } .txt13 { width: 73px; height: 13px; overflow-wrap: break-word; color: rgba(229, 154, 109, 1); font-size: 14px; font-family: PingFangSC-Medium; text-align: left; white-space: nowrap; line-height: 14px; display: block; margin: 11px 0 0 86px; } } .section10 { width: 375px; height: 1px; background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a) 0px -1px no-repeat; margin-top: 20px; } .section11 { width: 338px; height: 102px; margin: 13px 0 0 14px; .group11 { width: 16px; height: 16px; background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf0fedb3fc3dbdc10a886621868873208ec0ecef570507ef8726e6b5d46cc8da2) 100% no-repeat; margin-top: 6px; } .word18 { width: 56px; height: 13px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; white-space: nowrap; line-height: 14px; display: block; margin: 83px 0 0 -16px; } .TextGroup10 { height: 71px; width: 236px; margin: 31px 0 0 -56px; .group12 { width: 236px; height: 71px; .info9 { width: 236px; height: 13px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; white-space: nowrap; line-height: 14px; display: block; } .info10 { width: 134px; height: 13px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; white-space: nowrap; line-height: 14px; margin-top: 10px; display: block; } .word19 { width: 49px; height: 30px; overflow-wrap: break-word; color: rgba(223, 94, 76, 1); font-size: 22px; font-family: PingFangSC-Semibold; text-align: left; white-space: nowrap; line-height: 30px; display: block; margin: 5px 0 0 68px; } } } .word20 { width: 119px; height: 13px; overflow-wrap: break-word; color: rgba(135, 135, 166, 1); font-size: 13px; text-align: left; white-space: nowrap; line-height: 13px; display: block; margin: 7px 0 0 -215px; } .word21 { width: 14px; height: 20px; overflow-wrap: break-word; color: rgba(223, 94, 76, 1); font-size: 14px; font-family: PingFangSC-Semibold; text-align: center; white-space: nowrap; line-height: 20px; display: block; margin: 80px 0 0 -86px; } .txt14 { width: 182px; height: 13px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; white-space: nowrap; line-height: 14px; display: block; margin: 55px 0 0 87px; } .word22 { width: 65px; height: 13px; overflow-wrap: break-word; color: rgba(223, 94, 76, 1); font-size: 14px; font-family: PingFangSC-Medium; text-align: left; white-space: nowrap; line-height: 14px; display: block; margin: 83px 0 0 -112px; } .group13 { background-color: rgba(255, 255, 255, 1); border-radius: 50%; height: 40px; border: 1px solid rgba(223, 94, 76, 1); margin-left: 8px; width: 40px; .group14 { background-color: rgba(255, 255, 255, 1); border-radius: 50%; width: 36px; height: 36px; border: 1px solid rgba(223, 94, 76, 0.5); margin: 2px 0 0 2px; } } } .section12 { width: 375px; height: 1px; background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a) 0px -1px no-repeat; margin-top: 20px; } } .section14 { background-color: rgba(255, 255, 255, 1); border-radius: 1px; z-index: 131; height: 27px; border: 1px solid rgba(77, 193, 147, 1); width: 50px; position: absolute; left: 307px; top: 156px; .txt15 { width: 42px; height: 23px; overflow-wrap: break-word; color: rgba(77, 193, 147, 1); font-size: 10px; text-align: left; line-height: 14px; overflow: hidden; text-overflow: ellipsis; display: block; margin: 2px 0 0 4px; } } .section15 { background-color: rgba(255, 255, 255, 1); border-radius: 1px; z-index: 148; height: 27px; border: 1px solid rgba(223, 94, 76, 1); width: 50px; position: absolute; left: 307px; top: 292px; .word24 { width: 32px; height: 21px; overflow-wrap: break-word; color: rgba(223, 94, 76, 1); font-size: 10px; text-align: left; line-height: 14px; overflow: hidden; text-overflow: ellipsis; display: block; margin: 3px 0 0 8px; } } } } } .refundBox { width: 100%; .section1 { background-color: rgba(255, 255, 255, 1); border-radius: 8px 8px 0px 0px; height: 395px; width: 100%; .group3 { width: 100%; height: 335px; padding: 30px 15px; .TextGroup1 { height: 71px; width: 100%; .outer1 { width: 98px; height: 71px; .txt4 { width: 98px; height: 13px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; font-family: PingFangSC-Medium; text-align: left; white-space: nowrap; line-height: 14px; display: block; } .info1 { width: 28px; height: 13px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; font-family: PingFangSC-Medium; text-align: left; white-space: nowrap; line-height: 14px; display: block; margin: 10px 0 0 35px; } .txt5 { width: 68px; height: 30px; overflow-wrap: break-word; color: rgba(223, 94, 76, 1); font-size: 22px; font-family: PingFangSC-Semibold; text-align: center; white-space: nowrap; line-height: 30px; display: block; margin: 5px 0 0 15px; } } } .layer1 { background-color: rgba(215, 215, 226, 1); border-radius: 2px; width: 100%; height: 1px; margin-top: 18px; } .layer2 { width: 250px; height: 18px; margin: 30px 0 0 15px; .info2 { width: 52px; height: 18px; overflow-wrap: break-word; color: rgba(135, 135, 166, 1); font-size: 13px; text-align: left; white-space: nowrap; line-height: 18px; display: block; } .txt6 { width: 158px; height: 18px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 13px; text-align: left; white-space: nowrap; line-height: 18px; display: block; } } .layer3 { width: 183px; height: 18px; margin: 8px 0 0 15px; .word2 { width: 26px; height: 18px; overflow-wrap: break-word; color: rgba(135, 135, 166, 1); font-size: 13px; text-align: left; white-space: nowrap; line-height: 18px; display: block; } .info3 { width: 91px; height: 18px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 13px; text-align: left; white-space: nowrap; line-height: 18px; display: block; } } .layer4 { width: 251px; height: 18px; margin: 8px 0 0 15px; .word3 { width: 52px; height: 18px; overflow-wrap: break-word; color: rgba(135, 135, 166, 1); font-size: 13px; text-align: left; white-space: nowrap; line-height: 18px; display: block; } .word4 { width: 159px; height: 18px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 13px; text-align: left; white-space: nowrap; line-height: 18px; display: block; } } .layer5 { width: 131px; height: 18px; margin: 8px 0 0 15px; .txt7 { width: 26px; height: 18px; overflow-wrap: break-word; color: rgba(135, 135, 166, 1); font-size: 13px; text-align: left; white-space: nowrap; line-height: 18px; display: block; } .word5 { width: 39px; height: 18px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 13px; text-align: left; white-space: nowrap; line-height: 18px; display: block; } } .layer6 { width: 144px; height: 18px; margin: 8px 0 0 15px; .word6 { width: 52px; height: 18px; overflow-wrap: break-word; color: rgba(135, 135, 166, 1); font-size: 13px; text-align: left; white-space: nowrap; line-height: 18px; display: block; } .word7 { width: 52px; height: 18px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 13px; text-align: left; white-space: nowrap; line-height: 18px; display: block; } } .layer7 { width: 221px; height: 18px; margin: 8px 0 0 15px; .word8 { width: 52px; height: 18px; overflow-wrap: break-word; color: rgba(135, 135, 166, 1); font-size: 13px; text-align: left; white-space: nowrap; line-height: 18px; display: block; } .info4 { width: 129px; height: 18px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 13px; text-align: left; white-space: nowrap; line-height: 18px; display: block; } } .Button1 { background-color: rgba(77, 106, 221, 1); border-radius: 17px; height: 34px; width: 120px; margin: 33px 0 0 113px; text-align: center; .info5 { width: 60px; overflow-wrap: break-word; color: rgba(255, 255, 255, 1); font-size: 15px; font-family: PingFangSC-Medium; text-align: center; white-space: nowrap; line-height: 34px; display: block; } } } } } .cust_vantBorder { display: flex; justify-content: flex-end; /* 水平方向上右对齐 */ align-items: center; /* 垂直方向上居中对齐 */ flex-direction: column; /* 垂直方向上排列子元素 */ .inputAmount { width: 100%; } } }