.content { margin: -36px auto 0; position: relative; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; } .content .header { margin-bottom: 20px; } .content .header .top { width: 1200px; height: 65px; background: -webkit-linear-gradient(356.89950855deg, #fdda55 0%, #e5d7be 50%, #cbfebf 100%); background: -moz-linear-gradient(93.10049145deg, #fdda55 0%, #e5d7be 50%, #cbfebf 100%); background: linear-gradient(93.10049145deg, #fdda55 0%, #e5d7be 50%, #cbfebf 100%); border-radius: 16px 16px 0 0; padding: 0 30px; position: relative; } .content .header .top .brand-name { height: 22px; background-color: #806c24; border-radius: 8px; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; color: #fdda55; padding: 0 11px; margin-top: 12px; margin-right: 10px; font-size: 14px; } .content .header .top .brand-abstract { color: #806c24; font-size: 14px; padding-top: 13px; } .content .header .top .brand-abstract .item { cursor: pointer; } .content .header .top .brand-abstract .item:not(:last-of-type):hover { color: #333333; text-decoration: underline; } .content .header .top .brand-abstract .arrow { margin: 0 13px; width: 7px; height: 10px; } .content .header .top .arc-bj { position: absolute; bottom: 20px; right: 0; width: 20px; z-index: 1; } .content .header .top .arc-bj .arc { width: 100%; height: 100%; background: #ccfdbf; border-radius: 0 0 100% 0; } .content .header .header-content { background-color: #fff; padding: 25px 30px; margin-top: -20px; border-radius: 16px 0 16px 16px; position: relative; } .content .header .header-content .header-left { width: 511px; } .content .header .header-content .header-left .slideshow { position: relative; margin-bottom: 8px; } .content .header .header-content .header-left .slideshow ::v-deep .el-carousel .el-carousel__container { width: 511px; height: 340px; } .content .header .header-content .header-left .slideshow ::v-deep .el-carousel .el-carousel__item { width: 511px; height: 340px; display: flex; align-items: center; border-radius: 8px; } .content .header .header-content .header-left .slideshow ::v-deep .el-carousel .el-carousel__item .img { width: 100%; object-fit: cover; height: 340px; display: block; cursor: pointer; } .content .header .header-content .header-left .slideshow .indicate-type { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); height: 24px; background-color: #ffffff; border-radius: 36px; font-size: 16px; color: #ffffff; } .content .header .header-content .header-left .slideshow .indicate-type .indicate-item { height: 100%; padding: 0 11px; font-size: 14px; color: #555555; line-height: 24px; cursor: pointer; } .content .header .header-content .header-left .slideshow .indicate-type .indicate-item.pitch { border-radius: 36px; color: #ffffff; background-color: #f95d5d; } .content .header .header-content .header-left .slideshow .indicate { font-size: 13px; color: #ffffff; height: 20px; line-height: 20px; background-color: rgba(0, 0, 0, 0.49411765); border-radius: 36px; padding: 0 7px; position: absolute; bottom: 10px; right: 10px; } .content .header .header-content .header-left .slideshow-across { width: 511px; height: 70px; background-color: #f6f6f6; border: 1px solid #ebebeb; border-radius: 4px; } .content .header .header-content .header-left .slideshow-across .slideshow-btn { width: 32px; height: 100%; cursor: pointer; user-select: none; } .content .header .header-content .header-left .slideshow-across .box { width: 360px; overflow: auto; } .content .header .header-content .header-left .slideshow-across .box .item { height: 60px; margin-right: 6px; position: relative; cursor: pointer; border-radius: 6px; } .content .header .header-content .header-left .slideshow-across .box .item::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.50196078); transition: all 0.3s; transform: scale(1); } .content .header .header-content .header-left .slideshow-across .box .item:hover::after { transform-origin: center; transform: scale(0); } .content .header .header-content .header-left .slideshow-across .box .item.pitch::after { transform-origin: center; transform: scale(0); } .content .header .header-content .header-left .slideshow-across .box .item .video-icon { width: 44px; height: 44px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .content .header .header-content .header-left .slideshow-across .box .item .img { height: 100%; border-radius: 6px; } .content .header .header-content .header-left .slideshow-across .arrow { width: 10px; height: 17px; } .content .header .header-content .header-right { margin-left: 59px; position: relative; z-index: 1; } .content .header .header-content .header-right .header-bj, .content .header .header-content .header-right .header-shade { width: 601px; height: 338px; position: absolute; bottom: -25px; right: -30px; z-index: -1; border-radius: 0 0 16px 0; } .content .header .header-content .header-right .tab-box { flex-wrap: wrap; margin-bottom: 9px; } .content .header .header-content .header-right .tab-box .tab-item { background: -webkit-linear-gradient(145.82977204deg, #e0f0ff 0%, #62b1ff 297%); background: -moz-linear-gradient(-55.82977204deg, #e0f0ff 0%, #62b1ff 297%); background: linear-gradient(-55.82977204deg, #e0f0ff 0%, #62b1ff 297%); border-radius: 8px; font-size: 14px; color: #447eb3; line-height: 24px; padding: 0 7px; margin-bottom: 12px; margin-right: 10px; } .content .header .header-content .header-right .apartment-name { margin-bottom: 20px; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 32px; color: #000000; } .content .header .header-content .header-right .label-list { flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid #ebebeb; } .content .header .header-content .header-right .label-list .label-item { color: #434343; text-align: center; height: 22px; line-height: 22px; background-color: #eeeeee; border-radius: 8px; padding: 0 8px; font-size: 13px; margin-right: 10px; margin-bottom: 10px; } .content .header .header-content .header-right .label-list .label-item .safety-icon { width: 14px; height: 14px; margin-right: 5px; } .content .header .header-content .header-right .label-list .label-item.blue { color: #ffffff; background-color: #62b1ff; } .content .header .header-content .header-right .label-list .label-item.violet { color: #ffffff; background-color: #8080ff; } .content .header .header-content .header-right .label-list .label-item.red { color: #ffffff; background-color: #f95d5d; } .content .header .header-content .header-right .introduce { padding-top: 20px; border-bottom: 1px solid #ebebeb; } .content .header .header-content .header-right .introduce .introduce-head { margin-bottom: 12px; } .content .header .header-content .header-right .introduce .introduce-head .icon { width: 18px; height: 18px; } .content .header .header-content .header-right .introduce .introduce-head .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 16px; color: #000000; margin-left: 12px; margin-right: 11px; } .content .header .header-content .header-right .introduce .introduce-head .full-name { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; color: #555; font-size: 14px; } .content .header .header-content .header-right .introduce .introduce-head .more { color: #333333; font-size: 14px; cursor: pointer; } .content .header .header-content .header-right .introduce .introduce-head .more .icon { width: 6px; height: 10px; margin-left: 10px; } .content .header .header-content .header-right .introduce .synopsis { font-size: 14px; color: #7f7f7f; line-height: 24px; margin-bottom: 21px; white-space: pre-wrap; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; padding-left: 29px; } .content .header .header-content .header-right .place { padding-top: 20px; flex-direction: column; } .content .header .header-content .header-right .place .place-head { font-size: 14px; color: #333333; margin-bottom: 6px; } .content .header .header-content .header-right .place .place-head .icon { width: 18px; height: 18px; margin-right: 10px; } .content .header .header-content .header-right .place .place-head .more { color: #555555; line-height: 24px; cursor: pointer; } .content .header .header-content .header-right .place .place-head .more .icon { width: 6px; height: 10px; margin-left: 10px; } .content .header .header-content .header-right .place .figure { font-size: 14px; color: #555555; text-align: right; line-height: 26px; padding-left: 28px; margin-bottom: 7px; } .content .header .header-content .header-right .place .figure .school { font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif; font-weight: 700; font-style: normal; color: #000000; margin: 0 3px; } .content .header .header-content .header-right .place .figure .btn { font-size: 14px; color: #62b1ff; cursor: pointer; margin-left: 10px; } .content .header .header-content .header-right .place .vehicle { padding-left: 28px; } .content .header .header-content .header-right .place .vehicle .item { height: 22px; border: 1px solid #7f7f7f; border-radius: 30px; font-size: 12px; color: #333333; padding: 0 8px; width: fit-content; margin-right: 6px; } .content .header .header-content .header-right .place .vehicle .item .icon { width: 14px; height: 14px; margin-right: 3px; } .content .operate-box-bj { position: fixed; bottom: 0; z-index: 1002; min-width: 1200px; width: 100%; left: 0; border: 1px solid #ebebeb; background: #fff; -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706); } .content .operate-box-bj .operate-box { width: 1200px; height: 70px; font-size: 14px; justify-content: space-between; } .content .operate-box-bj .operate-box .nav-box .nav-item { height: 40px; background-color: #f6f6f6; border-radius: 8px; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-size: 14px; color: #7f7f7f; padding: 0 12px; cursor: pointer; } .content .operate-box-bj .operate-box .nav-box .nav-item:hover { color: #494848; } .content .operate-box-bj .operate-box .nav-box .nav-item.pitch { background-color: #000; font-weight: 650; color: #fff; } .content .operate-box-bj .operate-box .nav-box .nav-item:not(:last-of-type) { margin-right: 10px; } .content .operate-box-bj .operate-box .btn-box .btn-item { width: 100px; height: 40px; border-radius: 50px; cursor: pointer; } .content .operate-box-bj .operate-box .btn-box .btn-item.transmit-btn { border: 1px solid #ebebeb; color: #333333; margin-right: 10px; } .content .operate-box-bj .operate-box .btn-box .btn-item.transmit-btn .transmit-icon { width: 20px; height: 20px; margin-right: 4px; } .content .operate-box-bj .operate-box .btn-box .btn-item.consult-btn { width: 138px; background: -webkit-linear-gradient(324.8544545deg, #62b1ff -11%, #80ffff 135%); background: -moz-linear-gradient(125.1455455deg, #62b1ff -11%, #80ffff 135%); background: linear-gradient(125.1455455deg, #62b1ff -11%, #80ffff 135%); font-size: 16px; color: #ffffff; } .content .operate-box-bj .operate-box .btn-box .btn-item.consult-btn:hover { background: -webkit-linear-gradient(324.8544545deg, #80ffff -11%, #62b1ff 135%); background: -moz-linear-gradient(125.1455455deg, #80ffff -11%, #62b1ff 135%); background: linear-gradient(125.1455455deg, #80ffff -11%, #62b1ff 135%); } .content .details-box { justify-content: space-between; align-items: flex-start; position: relative; } .content .details-box .details-left { transition: bottom 0.5s; } .content .details-box .details-left.fixed { position: fixed; } .content .details-box .details-left .special-offer { width: 876px; position: relative; padding-top: 46px; padding-left: 30px; background-color: #fdb231; border-radius: 10px; margin-top: 8px; margin-bottom: 20px; } .content .details-box .details-left .special-offer .special-bj { width: 876px; height: 100px; position: absolute; top: 0; left: 0; object-fit: cover; border-radius: 10px; } .content .details-box .details-left .special-offer .head { width: 125px; height: 30px; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); } .content .details-box .details-left .special-offer .gift { width: 50px; height: 50px; position: absolute; top: 10px; left: 37px; z-index: 1; } .content .details-box .details-left .special-offer .star1 { width: 45px; height: 45px; position: absolute; top: 0; left: 87px; } .content .details-box .details-left .special-offer .star2 { width: 158px; height: 47px; position: absolute; top: 0; left: 190px; } .content .details-box .details-left .special-offer .star3 { width: 240px; height: 47px; position: absolute; top: 0; left: 526px; } .content .details-box .details-left .special-offer .fireworks { width: 84px; height: 70px; position: absolute; top: 0; left: 747px; } .content .details-box .details-left .special-offer .board { width: 816px; background-color: #ffffff; border-radius: 4px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.22745098); padding: 5px 5px 0; position: relative; } .content .details-box .details-left .special-offer .board .gray { background-color: #f2f2f2; border-radius: 2px; padding: 5px 20px 50px; } .content .details-box .details-left .special-offer .board .gray .text { font-size: 15px; color: #000000; line-height: 41px; white-space: pre-wrap; position: relative; background-image: url(~@/assets/img/publicImage/dotted-line.png); background-size: 100% 41px; background-repeat: repeat-y; background-position: 0 0; display: block; } .content .details-box .details-left .special-offer .bottom-white { width: 892px; height: 54px; position: absolute; bottom: -5px; left: -8px; } .content .details-box .details-left .special-offer .bottom-orange { width: 876px; height: 38px; position: absolute; bottom: 0; left: 0; } .content .details-box .details-left .remark { width: 876px; background-color: #ffffff; border: 1px solid #ebebeb; border-radius: 16px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706); padding: 24px 30px 28px; margin-bottom: 20px; cursor: pointer; word-break: break-word; } .content .details-box .details-left .remark .head { justify-content: space-between; margin-bottom: 15px; } .content .details-box .details-left .remark .head .text { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 16px; color: #000000; } .content .details-box .details-left .remark .head .more { font-size: 14px; color: #555555; } .content .details-box .details-left .remark .head .more .icon { width: 10px; height: 6px; margin-left: 8px; transform: rotate(270deg); } .content .details-box .details-left .remark .info { line-height: 28px; margin-bottom: 6px; } .content .details-box .details-left .remark .info .avatar { width: 28px; height: 28px; border-radius: 50%; margin-right: 10px; } .content .details-box .details-left .remark .info .username { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; color: #555555; font-size: 14px; margin-right: 5px; } .content .details-box .details-left .remark .info .label { height: 16px; } .content .details-box .details-left .remark .explain { font-size: 14px; color: #333333; line-height: 23px; padding-left: 38px; padding-right: 10px; } .content .details-box .details-left .remark .inspect { background-color: #f6f6f6; border-radius: 8px; padding-left: 20px; align-items: flex-start; } .content .details-box .details-left .remark .inspect .left { padding: 18px 0; } .content .details-box .details-left .remark .inspect .inspect-img { width: 120px; height: 120px; object-fit: cover; border-radius: 0 8px 8px 0; } .content .details-box .details-left .remark .return-visit .item { background-color: #f6f6f6; border-radius: 8px; padding: 18px 20px; } .content .details-box .details-left .remark .return-visit .item:not(:last-of-type) { margin-right: 16px; } .content .details-box .details-left .remark .return-visit .item .info .label { color: #50e3c2; font-size: 13px; height: 20px; line-height: 20px; background-color: rgba(246, 246, 246, 0); border: 1px solid #50e3c2; border-radius: 30px; padding: 0 6.5px; width: fit-content; } .content .details-box .details-left .type-box { border-radius: 16px; width: 876px; } .content .details-box .details-left .type-box .item { background-color: #ffffff; border: 1px solid #ebebeb; border-radius: 16px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706); margin-bottom: 20px; padding: 24px 30px; } .content .details-box .details-left .type-box .item .media { width: 110px; height: 110px; object-fit: cover; border-radius: 16px; margin-right: 20px; position: relative; cursor: pointer; } .content .details-box .details-left .type-box .item .media .icon { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; } .content .details-box .details-left .type-box .item .media .play { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .content .details-box .details-left .type-box .item .info { align-self: flex-start; } .content .details-box .details-left .type-box .item .info .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 18px; color: #000000; margin-bottom: 16px; } .content .details-box .details-left .type-box .item .info .tags { margin-bottom: 16px; margin-bottom: 5px; flex-wrap: wrap; } .content .details-box .details-left .type-box .item .info .tags .tags-item { width: fit-content; height: 24px; line-height: 24px; background-color: #f2f2f2; border: 1px solid #f2f2f2; border-radius: 4px; padding: 0 9px; font-size: 14px; color: #7f7f7f; margin-right: 8px; margin-bottom: 8px; } .content .details-box .details-left .type-box .item .info .tags .tags-item.green { background: #fff; border-color: #50e3c2; } .content .details-box .details-left .type-box .item .info .price { font-family: "Arial", "Arial-Black", "Arial Black", sans-serif; font-size: 13px; } .content .details-box .details-left .type-box .item .info .price .unit { font-weight: 900; color: #000000; font-family: "Arial", "Arial-Black", "Arial Black", sans-serif; line-height: 30px; } .content .details-box .details-left .type-box .item .info .price .number { font-weight: 900; font-size: 20px; color: #f95d5d; font-family: "Arial", "Arial-Black", "Arial Black", sans-serif; margin: 0 8px; } .content .details-box .details-left .type-box .item .info .price .month { line-height: 30px; color: #555555; } .content .details-box .details-left .type-box .item .info .price .original { font-size: 14px; text-decoration: line-through; font-weight: 400; font-style: normal; color: #aaaaaa; margin-left: 16px; line-height: 28px; } .content .details-box .details-left .type-box .item .btn .collect { width: 96px; height: 36px; border: 1px solid #d7d7d7; border-radius: 36px; font-size: 15px; color: #000000; text-align: center; margin-right: 10px; cursor: pointer; } .content .details-box .details-left .type-box .item .btn .collect.red { background-color: #ffeff3; border-color: #f4dbe1; } .content .details-box .details-left .type-box .item .btn .collect .icon { width: 18px; height: 17px; margin-right: 6px; } .content .details-box .details-left .type-box .item .btn .consult { width: 100px; height: 36px; background-color: #fff7dd; border: 1px solid #e6dfc7; border-radius: 36px; cursor: pointer; } .content .details-box .details-left .type-box .item .btn .consult .icon { width: 20px; height: 20px; margin-right: 8px; } .content .details-box .details-left .type-box .item .btn .full-rent { width: 100px; height: 36px; font-size: 15px; color: #aaaaaa; background-color: #f2f2f2; border-radius: 36px; } .content .details-box .details-left .item-title { padding: 0 11px; height: 26px; background-color: #333333; border-radius: 8px; font-size: 14px; color: #ffffff; line-height: 26px; display: inline-block; } .content .details-box .details-left .details-item { width: 876px; background-color: #ffffff; border: 1px solid #ebebeb; border-radius: 16px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706); font-size: 14px; margin-bottom: 20px; } .content .details-box .details-left .details-item.location .details-header .icon { width: 20px; height: 24px; } .content .details-box .details-left .details-item.apartment-facilities .details-header .icon, .content .details-box .details-left .details-item.special-offer .details-header .icon { width: 20px; height: 20px; } .content .details-box .details-left .details-item.company .details-header .icon, .content .details-box .details-left .details-item.life .details-header .icon { width: 22px; height: 22px; } .content .details-box .details-left .details-item .details-header { height: 62px; padding: 0 30px; border-bottom: 1px solid #ebebeb; font-size: 16px; color: #000000; } .content .details-box .details-left .details-item .details-header .icon { width: 20px; height: 22px; margin-right: 4px; } .content .details-box .details-left .details-item .text { font-weight: 400; font-size: 15px; color: #555555; line-height: 30px; padding: 20px 30px; white-space: pre-line; word-break: break-word; } .content .details-box .details-left .details-item .traffic-box { margin-top: 40px; padding: 0 30px; font-weight: 400; font-size: 15px; color: #555555; line-height: 30px; white-space: pre-line; padding-bottom: 30px; } .content .details-box .details-left .details-item .traffic-box .traffic-title { margin-bottom: 16px; } .content .details-box .details-left .details-item.apartment-facilities { transition: all 0.3s; position: relative; } .content .details-box .details-left .details-item.apartment-facilities.hide { height: 820px; overflow: hidden; } .content .details-box .details-left .details-item.apartment-facilities .facility-box { padding: 30px 30px 30px 46px; } .content .details-box .details-left .details-item.apartment-facilities .facility-box .item:not(:last-of-type) { margin-bottom: 40px; } .content .details-box .details-left .details-item.apartment-facilities .facility-box .item .head { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 16px; color: #000000; margin-bottom: 20px; position: relative; } .content .details-box .details-left .details-item.apartment-facilities .facility-box .item .head::after { content: ""; width: 6px; height: 14px; background-color: #fddf6d; border: 1px solid #cab157; border-radius: 4px; position: absolute; top: 50%; transform: translateY(-50%); left: -16px; box-sizing: border-box; } .content .details-box .details-left .details-item.apartment-facilities .facility-box .item .label { flex-wrap: wrap; } .content .details-box .details-left .details-item.apartment-facilities .facility-box .item .label .label-item { font-size: 14px; line-height: 28px; height: 28px; background-color: #f2f2f2; border-radius: 40px; padding: 0 10px; margin-right: 10px; margin-bottom: 13px; } .content .details-box .details-left .details-item.apartment-facilities .facility-box .item .label .label-item .icon { width: 16px; height: 16px; margin-right: 10px; } .content .details-box .details-left .details-item.apartment-facilities .facility-box .item .img-box { margin-top: 7px; } .content .details-box .details-left .details-item.apartment-facilities .facility-box .item .img-box .img-item { width: 110px; height: 110px; margin-right: 10px; position: relative; cursor: pointer; } .content .details-box .details-left .details-item.apartment-facilities .facility-box .item .img-box .img-item .icon { width: 110px; height: 110px; border-radius: 10px; object-fit: cover; } .content .details-box .details-left .details-item.apartment-facilities .facility-box .item .img-box .img-item .name { position: absolute; left: 0; bottom: 0; width: 100%; height: 32px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)); font-size: 14px; color: #ffffff; line-height: 32px; border-radius: 0 0 10px 10px; padding-left: 10px; } .content .details-box .details-left .details-item.details-message { transition: all 0.3s; position: relative; } .content .details-box .details-left .details-item.details-message.hide { height: 820px; overflow: hidden; } .content .details-box .details-left .details-item .bottom-btn { position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; border-top: 1px solid #ebebeb; background-color: #f2f2f2; border-radius: 0 0 16px 16px; cursor: pointer; } .content .details-box .details-left .details-item .bottom-btn .icon { width: 10px; height: 6px; margin-left: 6px; } .content .details-box .details-left .details-item.company .company-img { width: 420px; height: 254px; margin: 10px auto 0; } .content .details-box .details-left .details-item.hint-box { color: #7f7f7f; line-height: 24px; font-size: 13px; padding: 30px; } .content .details-box .details-left .details-item.hint-box .hint-item { min-height: 24px; } .content .details-box .details-left .details-item.hint-box .hint-item a { cursor: pointer; color: #7f7f7f; text-decoration: underline; } .content .details-box .details-left .details-item.cost .cost-box { padding: 25px 30px 0; } .content .details-box .details-left .details-item.cost .cost-box .item .head { height: 36px; background-color: #f2f2f2; border-radius: 4px; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 16px; color: #000000; padding: 0 15px; margin-bottom: 15px; } .content .details-box .details-left .details-item.cost .cost-box .item .head .icon { height: 18px; margin-right: 10px; } .content .details-box .details-left .details-item.cost .cost-box .item .explain { font-size: 15px; color: #555555; line-height: 30px; padding: 0 15px; margin-bottom: 20px; white-space: pre-line; } .content .details-box .details-right { width: 304px; flex-direction: column; } .content .details-box .details-right .same-brand-title { user-select: none; margin-bottom: 20px; font-size: 18px; color: #000000; background: linear-gradient(99.65183347deg, #fdda55 0%, #e5d7be 50%, #cbfebf 100%); border-radius: 12px; width: 304px; height: 60px; border: 5px solid #fff; position: relative; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706); } .content .details-box .details-right .same-brand-title.like { background: linear-gradient(-80.34816653deg, #d6dcf0 0%, #dae6f2 19%, #eff2cc 62%, #eff9f1 100%); } .content .details-box .details-right .same-brand-title.like .same-brand-icon { width: 24px; height: 24px; } .content .details-box .details-right .same-brand-title::after { content: ""; position: absolute; width: 0; height: 0; left: 50%; bottom: -12px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid #fff; transform: translateX(-50%); } .content .details-box .details-right .same-brand-title .same-brand-icon { width: 22px; height: 22px; margin-right: 7px; } .add-customer-mask { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.7); z-index: 1002; } .add-customer-mask .add-customer-box { width: 460px; height: 460px; background: -webkit-linear-gradient(315deg, #fdda55 0%, #e5d7be 50%, #cbfebf 100%); background: -moz-linear-gradient(135deg, #fdda55 0%, #e5d7be 50%, #cbfebf 100%); background: linear-gradient(135deg, #fdda55 0%, #e5d7be 50%, #cbfebf 100%); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.23529412); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.23529412); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.23529412); position: relative; } .add-customer-mask .add-customer-box.two { width: 799px; height: 460px; } .add-customer-mask .add-customer-box.two .add-customer-violet { display: none; } .add-customer-mask .add-customer-box.two .add-customer-violet.violet2 { display: block; } .add-customer-mask .add-customer-box.two .add-customer-interior { width: 700px; } .add-customer-mask .add-customer-box.two .add-customer-interior .title { width: 189px; height: 31px; } .add-customer-mask .add-customer-box.two .add-customer-interior .add-customer-interior-bj { display: none; } .add-customer-mask .add-customer-box.two .add-customer-interior .add-customer-interior-bj.bj2 { display: block; } .add-customer-mask .add-customer-box .close { position: absolute; top: 16px; right: 16px; width: 16px; height: 16px; cursor: pointer; } .add-customer-mask .add-customer-box .add-customer-violet { position: absolute; bottom: 0; left: 0; top: 0; right: 0; width: 421px; height: 460px; } .add-customer-mask .add-customer-box .add-customer-violet.violet2 { width: 579px; height: 460px; display: none; } .add-customer-mask .add-customer-box .add-customer-interior { width: 368px; height: 368px; position: relative; z-index: 1; flex-direction: column; align-items: center; padding-top: 35px; } .add-customer-mask .add-customer-box .add-customer-interior .add-customer-interior-bj { position: absolute; top: 0; left: 0; z-index: -1; } .add-customer-mask .add-customer-box .add-customer-interior .add-customer-interior-bj.bj2 { display: none; } .add-customer-mask .add-customer-box .add-customer-interior .title { width: 159px; height: 26px; margin-bottom: 35px; } .add-customer-mask .add-customer-box .add-customer-interior .QR-code-list .QR-code-item:not(:last-child) { margin-right: 160px; } .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box { margin-bottom: 17px; padding: 15px; position: relative; } .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box::after { width: 15px; height: 5px; } .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box::before { width: 5px; height: 15px; } .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box::before, .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box::after { content: ""; background-color: #ffd649; border-radius: 11px; position: absolute; top: 0; left: 0; } .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box .top-right-corner::after { width: 15px; height: 5px; } .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box .top-right-corner::before { width: 5px; height: 15px; } .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box .top-right-corner::before, .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box .top-right-corner::after { content: ""; background-color: #ffd649; border-radius: 11px; position: absolute; top: 0; right: 0; } .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box .bottom-left-corner::after { width: 15px; height: 5px; } .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box .bottom-left-corner::before { width: 5px; height: 15px; } .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box .bottom-left-corner::before, .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box .bottom-left-corner::after { content: ""; background-color: #ffd649; border-radius: 11px; position: absolute; bottom: 0; left: 0; } .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box .bottom-right-corner::after { width: 15px; height: 5px; } .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box .bottom-right-corner::before { width: 5px; height: 15px; } .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box .bottom-right-corner::before, .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box .bottom-right-corner::after { content: ""; background-color: #ffd649; border-radius: 11px; position: absolute; bottom: 0; right: 0; } .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box .QR-code-chunk { width: 130px; height: 130px; background-color: #ffffff; border-radius: 15px; -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156863); -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156863); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156863); } .add-customer-mask .add-customer-box .add-customer-interior .QR-code-box .QR-code-chunk .QR-code-img { width: 110px; height: 110px; } .add-customer-mask .add-customer-box .add-customer-interior .name { margin-bottom: 6px; } .add-customer-mask .add-customer-box .add-customer-interior .name, .add-customer-mask .add-customer-box .add-customer-interior .hint { color: #555555; font-size: 14px; } a:-webkit-any-link { color: #806c24; }