.boxbox { width: 1200px; background-color: #fbfbfb; border-radius: 12px; position: relative; margin-bottom: 20px; } .boxbox::after { content: ""; position: absolute; top: -5px; left: 0; width: 100%; height: 66px; background: -webkit-linear-gradient(0deg, #7b8cd3 0%, #dae3fd 99%); background: -moz-linear-gradient(90deg, #7b8cd3 0%, #dae3fd 99%); background: linear-gradient(90deg, #7b8cd3 0%, #dae3fd 99%); border-radius: 18px; z-index: -1; } .boxbox .tab { height: 60px; font-size: 14px; color: #7f7f7f; border-bottom: 1px dotted #ebebeb; padding-left: 24px; } .boxbox .tab .img { width: 6px; height: 10px; margin: 0 15px; } .boxbox .tab a { color: #7f7f7f; } .boxbox .tab .current { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 14px; color: #000000; } .boxbox .details { padding: 31px 60px; } .boxbox .details .logo { width: 120px; height: 120px; position: relative; z-index: 1; padding-right: 10px; padding-bottom: 7px; margin-right: 39px; display: inline-flex; } .boxbox .details .logo .bj { width: 120px; height: 120px; position: absolute; top: 0; left: 0; z-index: -1; } .boxbox .details .logo .img { width: 65px; } .boxbox .details .right .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 32px; color: #000000; margin-bottom: 6px; } .boxbox .details .right .name-en { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 16px; color: #555555; margin-bottom: 22px; } .boxbox .details .right .world { width: 423px; padding-bottom: 15px; margin-bottom: 27px; border-bottom: 1px solid #ebebeb; } .boxbox .details .right .world .head { width: 100%; position: relative; margin-bottom: 9px; } .boxbox .details .right .world .head::after { content: ""; position: absolute; top: 50%; width: 100%; height: 1px; background-color: #ebebeb; } .boxbox .details .right .world .head .icon { width: 90px; background-color: #fbfbfb; position: relative; z-index: 1; } .boxbox .details .right .world .head .icon .img { width: 64px; height: 22px; } .boxbox .details .right .world .list .item { text-align: center; flex-direction: column; } .boxbox .details .right .world .list .item .quantity { font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; font-style: normal; font-size: 18px; color: #000000; margin-bottom: 9px; } .boxbox .details .right .world .list .item .ranking-name { font-family: "HelveticaNeue", "Helvetica Neue", sans-serif; font-weight: 400; font-style: normal; font-size: 16px; color: #555555; position: relative; } .boxbox .details .right .world .list .item .ranking-name .ranking-icon { position: absolute; right: -10px; bottom: 0; width: 8px; height: 8px; transform: rotate(270deg); } .boxbox .details .right .brief { height: 40px; background-color: #f6f6f6; border-radius: 6px; font-size: 14px; color: #7f7f7f; line-height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 6px; } .boxbox .details .right .brief .brief-dom { color: transparent; pointer-events: none; position: fixed; top: -100000%; width: 898px; word-break: keep-all; } .boxbox .details .right .brief.brief-show { transition: all 0.3s; height: auto; flex-direction: column; } .boxbox .details .right .brief.brief-show .text { white-space: break-spaces; margin-right: 0; margin-bottom: 15px; } .boxbox .details .right .brief.brief-show .img { transform: rotate(180deg); } .boxbox .details .right .brief .text { margin-right: 15px; width: 878px; } .boxbox .details .right .brief .img { width: 16px; height: 16px; cursor: pointer; } .hot { background-color: #ffffff; border-radius: 12px; padding: 24px; margin-bottom: 20px; } .hot .header { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 18px; color: #000000; margin-bottom: 15px; } .hot .header .icon { border-radius: 50%; width: 40px; height: 40px; background-color: #fbe3ea; margin-right: 13px; } .hot .header .icon .img { width: 24px; height: 24px; } .hot .list { width: 1152px; margin-bottom: 10px; overflow: hidden; } .hot .list .list-item { width: 1152px; grid-column-gap: 66px; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: min-content; } .hot .list .list-item .item { padding: 22px 5px 22px 0; width: 510px; height: 90px; margin-left: 33px; } .hot .list .list-item .item:not(:nth-last-child(-n + 2)) { border-bottom: 1px dotted #ebebeb; } .hot .list .list-item .item .left .name { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 16px; color: #000000; margin-bottom: 6px; position: relative; } .hot .list .list-item .item .left .name::after { content: ""; width: 8px; height: 8px; background-color: #f2f2f2; border: 1px solid #d7d7d7; border-radius: 39px; position: absolute; top: 50%; left: -20px; transform: translateY(-50%); box-sizing: border-box; } .hot .list .list-item .item .left .text { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; color: #7f7f7f; font-size: 14px; } .hot .list .list-item .item .left .text .ranking { color: #555555; } .hot .list .list-item .item .left .text .vertical { color: #d7d7d7; margin: 0 8px; } .hot .list .list-item .item .left .text .number { font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; color: #000000; margin-left: 8px; } .hot .list .list-item .item .operate { position: relative; } .hot .list .list-item .item .operate .circle { position: relative; z-index: 1; cursor: pointer; width: 28px; height: 28px; background-color: #dbe3fd; border: 1px solid #afb5ca; border-radius: 20px; } .hot .list .list-item .item .operate .circle .img-add { width: 12px; height: 12px; } .hot .list .list-item .item .operate .circle .img-dot { width: 18px; height: 8px; } .hot .list .list-item .item .operate .select-mask { position: fixed; width: 100%; height: 100%; z-index: 2; top: 0; left: 0; } .hot .list .list-item .item .operate .select { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); background-color: #fbfbfb; border-radius: 8px; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216); -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216); transition: all 0.3s; overflow: hidden; opacity: 0; height: 0; width: 324px; padding-top: 10px; flex-direction: column; align-items: center; } .hot .list .list-item .item .operate .select.show { height: 90px; opacity: 1; } .hot .list .list-item .item .operate .select .title { font-size: 14px; color: #7f7f7f; margin-bottom: 14px; } .hot .list .list-item .item .operate .select .title .dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #cab157; background-color: #fddf6d; margin-right: 5px; } .hot .list .list-item .item .operate .select .btn { cursor: pointer; width: 144px; height: 36px; background: -webkit-linear-gradient(194.03624347deg, #dbe3fd 0%, #eef7f5 100%); background: -moz-linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%); background: linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%); border-radius: 158px; font-size: 14px; color: #333333; } .hot .list .list-item .item .operate .select .btn .img { width: 16px; height: 16px; margin-right: 8px; } .hot .list .list-item .item .operate .already { font-size: 14px; color: #7f7f7f; } .hot .list .list-item .item .operate .already .tick-box { width: 20px; height: 20px; background-color: #f6f6f6; border: 1px solid #d7d7d7; border-radius: 20px; margin-right: 5px; } .hot .list .list-item .item .operate .already .tick-box .img-tick { width: 10px; height: 8px; } .hot .indicate { line-height: 12px; } .hot .indicate .icon { width: 7px; height: 12px; cursor: pointer; } .hot .indicate .icon.btn-right { transform: rotate(180deg); } .hot .indicate .text { color: #555555; font-size: 13px; margin: 0 12px; } .content { background-color: #ffffff; border: 1px solid #f2f2f2; border-radius: 12px; margin-bottom: 20px; } .content .header { height: 88px; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 24px; color: #000000; text-align: center; } .content .body .left { width: 200px; font-size: 16px; color: #333333; border-right: 1px solid #ebebeb; } .content .body .left .item { height: 56px; padding-left: 34px; cursor: pointer; } .content .body .left .item .img { width: 18px; height: 18px; margin-right: 12px; } .content .body .left .item .img.img-pitch { display: none; } .content .body .left .item.pitch { background-color: #fbfbfb; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; width: 200px; position: relative; color: #000000; font-weight: 650; } .content .body .left .item.pitch .img { display: none; } .content .body .left .item.pitch .img.img-pitch { display: block; } .content .body .left .item.pitch::after { content: ""; width: 5px; height: 56px; background-color: #6fc16d; position: absolute; top: 0; left: 0; } .content .body .right { background-color: #fbfbfb; border-top: 1px solid #ebebeb; padding: 0 32px; border-radius: 0 0 12px 0; } .content .body .right .screen .title { font-size: 15px; color: #555555; padding-top: 27px; margin-bottom: 20px; } .content .body .right .screen .list { flex-wrap: wrap; justify-content: left; } .content .body .right .screen .list .item { width: fit-content; height: 36px; line-height: 36px; padding: 0 17px; background-color: rgba(251, 251, 251, 0); border: 1px solid #ebebeb; border-radius: 12px; font-size: 14px; color: #333333; margin-bottom: 10px; margin-right: 10px; cursor: pointer; } .content .body .right .screen .list .item.pitch { background-color: #7b8cd3; color: #ffffff; border: none; } .content .body .right .h { justify-content: space-between; padding-top: 27px; margin-bottom: 24px; } .content .body .right .h .total { font-size: 14px; color: #7f7f7f; } .content .body .right .h .sort { font-size: 14px; color: #000000; cursor: pointer; position: relative; } .content .body .right .h .sort .img { width: 20px; height: 20px; margin-left: 8px; } .content .body .right .h .sort .sort-mask { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 101; } .content .body .right .h .sort .sort-list { width: 100%; background-color: #ffffff; border: 1px solid #e4e7ed; border-radius: 10px; box-shadow: 0 0 12px rgba(0, 0, 0, 0.078); position: absolute; top: 25px; left: 50%; z-index: 102; transform: translateX(-50%); animation: sortShow 0.3s; overflow: hidden; } @keyframes sortShow { 0% { height: 0; } 100% { height: 150px; } } .content .body .right .h .sort .sort-list .sort-item { height: 50px; line-height: 50px; text-align: center; } .content .body .right .h .sort .sort-list .sort-item:not(:last-of-type) { border-bottom: 1px solid #e4e7ed; } .content .body .right .h .sort .sort-list .sort-item.pitch { color: #9a9d02; font-weight: 650; } .content .body .right .list { flex-wrap: wrap; justify-content: space-between; } .content .body .right .list .item { width: 460px; background-color: #ffffff; border: 1px solid #f2f2f2; border-radius: 12px; padding: 21px 15px; margin-bottom: 20px; position: relative; } .content .body .right .list .item .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 16px; color: #000000; margin-bottom: 12px; } .content .body .right .list .item .english { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; color: #555555; margin-bottom: 12px; } .content .body .right .list .item .introduce { color: #555555; font-size: 14px; margin-bottom: 12px; flex-wrap: wrap; } .content .body .right .list .item .introduce .quantity { font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; color: #000000; margin-left: 8px; } .content .body .right .list .item .introduce .line { color: #d7d7d7; margin: 0 10px; } .content .body .right .list .item .word { background-color: #f9f8f8; border-radius: 3px; padding: 10px 15px; font-size: 14px; color: #7f7f7f; margin-bottom: 12px; } .content .body .right .list .item .operate { position: absolute; top: 18px; right: 24px; } .content .body .right .list .item .operate .circle { position: relative; z-index: 3; cursor: pointer; width: 28px; height: 28px; background-color: #dbe3fd; border: 1px solid #afb5ca; border-radius: 20px; } .content .body .right .list .item .operate .circle .img-add { width: 12px; height: 12px; } .content .body .right .list .item .operate .circle .img-dot { width: 18px; height: 8px; } .content .body .right .list .item .operate .select-mask { position: fixed; width: 100%; height: 100%; z-index: 2; top: 0; left: 0; } .content .body .right .list .item .operate .select { position: absolute; top: -18px; right: -24px; background-color: #fbfbfb; border-radius: 8px; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216); -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216); flex-direction: column; transition: all 0.3s; overflow: hidden; opacity: 0; width: 0; height: 0; align-items: center; padding-top: 68px; z-index: 2; } .content .body .right .list .item .operate .select.show { width: 285px; height: 171px; opacity: 1; } .content .body .right .list .item .operate .select .title { font-size: 14px; color: #7f7f7f; margin-bottom: 19px; } .content .body .right .list .item .operate .select .title .dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #cab157; background-color: #fddf6d; margin-right: 5px; } .content .body .right .list .item .operate .select .btn { cursor: pointer; width: 144px; height: 36px; background: -webkit-linear-gradient(194.03624347deg, #dbe3fd 0%, #eef7f5 100%); background: -moz-linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%); background: linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%); border-radius: 158px; font-size: 14px; color: #333333; } .content .body .right .list .item .operate .select .btn .img { width: 16px; height: 16px; margin-right: 8px; } .content .body .right .list .item .operate .already { font-size: 14px; color: #7f7f7f; } .content .body .right .list .item .operate .already .tick-box { width: 20px; height: 20px; background-color: #f6f6f6; border: 1px solid #d7d7d7; border-radius: 20px; margin-right: 5px; } .content .body .right .list .item .operate .already .tick-box .img-tick { width: 10px; height: 8px; }