.orderPage { .orderBox { width: 100%; height: calc(100% - 44px); overflow: auto; overflow-x: hidden; background-color: #f5f5f5; .main3 { // width: 100%; height: 54px; background: rgba(255, 255, 255, 1) url("../../assets/home/line.png") bottom center no-repeat; background-size: 100% auto; background-color: #f5f5f5; .group4 { width: 100%; height: 17px; padding: 0 14px; .ImageText1 { height: 16px; margin-top: 1px; width: 87px; .outer2 { width: 87px; height: 16px; .block1 { width: 16px; height: 18px; 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; } } } } .main5 { width: auto; cursor: pointer; .label2 { width: 20px; height: 20px; margin-right: 5px; } } } } .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: auto; height: 20px; padding-right: 21px; 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: -20px; 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: 50px; margin-top: 10px; margin-bottom: 10px; width: 100%; background: rgba(255, 255, 255, 1) url("../../assets/home/line.png") bottom center no-repeat; background-color: #fff; .main9 { width: 100%; padding: 2.5px 10px; height: 30px; display: flex; align-items: center; .wrap1 { width: 100%; height: 30px; padding: 0 12px 5px; align-items: center; .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: 12px; display: block; } } } } .ImageText8 { height: 18px; margin-top: 1px; width: 79px; .bd3 { height: 16px; .info4 { height: 14px; overflow-wrap: break-word; color: #2c87c8; font-size: 14px; 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%; height: 150px; position: relative; padding: 2.5px 10px; background-color: #f5f5f5; .van-card { height: 140px; background-color: #ffff; display: flex; align-items: center; border-radius: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .van-card__thumb { margin-top: 15px; } .van-image__img { object-fit: contain !important; } .sugerPhto { width: 10%; } .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: 12px; text-align: left; white-space: nowrap; line-height: 14px; display: block; // margin-top: 50px; } .van-card__footer { position: absolute; top: 112px; right: 15px; width: 60px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 13px; white-space: nowrap; line-height: 14px; display: block; } .info5 { height: 16px; 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.2em; } .word12 { height: 23px; width: auto; overflow-wrap: break-word; color: rgba(77, 193, 147, 1); font-size: 20px; font-family: PingFangSC-Semibold; text-align: left; white-space: nowrap; line-height: 30px; display: block; padding-right: 0.3em; } .word14 { width: 60px; height: 12px; overflow-wrap: break-word; color: rgba(229, 154, 109, 1); font-size: 12px; font-family: PingFangSC-Medium; text-align: left; white-space: nowrap; line-height: 14px; display: block; padding-right: 0.5em; } .word11 { // height: 14px; width: 4.5rem; // overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 12px; // white-space: nowrap; line-height: 18px; // margin-top: 5px; // overflow: hidden; // text-overflow: ellipsis; display: block; } .van-card__bottom { height: 80px; width: 200px; } .word13 { // height: 14px; width: 4.375rem; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 12px; line-height: 15px; margin-top: 5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .time_01 { height: 13px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 12px; text-align: left; white-space: nowrap; line-height: 12px; display: block; } .main11 { position: absolute; top: 12px; right: 12px; width: 60px; height: 60px; &.orderSuccess { background: url('../../assets/order/paySuccess.png') top center no-repeat; background-size: 100%; } &.coinOrderSuccess { background: url('../../assets/order/coinPay.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: 2px; 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: 425px; 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: 300px; height: 18px; margin: 8px 0 0 15px; // overflow: auto; .word2 { width: 90px; height: 14px; 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: 230px; height: 18px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 13px; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; 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; } } } } } .btnFooter { display: flex; justify-content: space-between; align-items: center; .checkAllBtn { width: 40%; padding-left: 15px; padding-top: 5px; height: 30px; } .totalRefund { color: #df5e4c; font-size: 20px; font-family: PingFangSC-Semibold; } } .refundBox { display: block; justify-content: flex-end; /* 水平方向上右对齐 */ align-items: center; /* 垂直方向上居中对齐 */ flex-direction: column; /* 垂直方向上排列子元素 */ .van-card { background-color: #ffff; width: 95%; margin: 0 5px; } .van-card__thumb { margin-top: 10px; width: 60px; height: 60px; } .van-image__img { object-fit: contain !important; } .van-card__title { width: 100px; } .van-card__footer { position: absolute; top: 35px; right: 15px; // width: 20px; overflow-wrap: break-word; // color: rgba(64, 77, 116, 1); font-size: 13px; white-space: nowrap; line-height: 14px; display: block; } .card01 { display: flex; margin: 0 15px; width: 90%; height: auto; } .van-card__content { height: 50px; } .van-card__bottom { margin-bottom: 15px; } .inputAmount { width: 100%; } } .van-button--primary { border-color: #2c87c8; background-color: #2c87c8; } }