* { margin: 0; padding: 0; box-sizing: border-box; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; word-break: break-word; } a { text-decoration: none; color: unset; } body { background-color: #eef2f5; } /* 公共的 css 样式 */ .flexflex { display: flex; } .flexcenter { display: flex; justify-content: center; align-items: center; } .flexjcenter { display: flex; justify-content: center; } .flexacenter { display: flex; align-items: center; } .flex1 { flex: 1; } .flexcolumn { display: flex; flex-direction: column; } .one-line-display { word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .one-line-display-v2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; } .two-line-display { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .item-box { max-width: 897px; width: 100%; background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; padding: 18px 20px 0; display: block; } .item-box .item-head { margin-bottom: 14px; position: relative; } .item-box .item-head .user-box { cursor: pointer; } .item-box .item-head .avatar { width: 28px; height: 28px; border-radius: 50%; margin-right: 8px; } .item-box .item-head .name { font-style: normal; color: #555555; font-size: 14px; margin-right: 8px; } .item-box .item-head .group { height: 15px; margin-right: 8px; } .item-box .item-head .time { font-size: 13px; color: #aaaaaa; } .item-box .item-head .anonymous-box { background-color: #f2f2f2; border-radius: 30px; font-size: 14px; color: #333; height: 28px; padding: 0 10px; cursor: pointer; margin-right: 15px; } .item-box .item-head .circlePen { border-radius: 50%; background-color: #f2f2f2; margin-right: 10px; width: 28px; height: 28px; cursor: pointer; } .item-box .item-head .circlePen .icon { width: 20px; height: 20px; } .item-box .item-head .isPublicityBox { width: 120px; background-color: #fff; position: absolute; top: 34px; left: 0; border-radius: 8px; box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.2); z-index: 89; } .item-box .item-head .isPublicityBox .isPublicity-item { height: 40px; line-height: 40px; text-align: center; padding: 0 10px; color: #555555; font-size: 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .item-box .item-head .isPublicityBox .isPublicity-item:first-child { border-bottom: 1px dotted #e3e3e3; } .item-box .item-head .isPublicityBox .isPublicity-item.green { color: #26d79f; } .item-box .item-head .isPublicityBox .isPublicity-item .isPublicityIcon { width: 12px; } .item-box .item-head .view { font-size: 12px; color: #aaaaaa; margin-right: 15px; } .item-box .item-head .view .icon { width: 13px; height: 8px; margin-right: 5px; } .item-box .item-head .btn { width: 24px; height: 16px; background-color: #f2f2f2; border-radius: 150px; cursor: pointer; } .item-box .item-head .btn .icon { width: 18px; height: 18px; } .item-box .item-head .mask { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2; } .item-box .item-head .operate { position: absolute; top: 23px; right: 0; width: 80px; background-color: #f2f2f2; border-radius: 8px; padding: 5px; z-index: 2; } .item-box .item-head .operate::after { content: ""; width: calc(100% - 10px); height: calc(100% - 10px); position: absolute; top: 50%; left: 50%; display: block; transform: translate(-50%, -50%); background-color: #fbfbfb; z-index: -1; } .item-box .item-head .operate .item { text-align: center; font-size: 14px; color: #333333; padding: 14px 0; cursor: pointer; } .item-box .item-head .operate .item:first-of-type { padding-top: 14px; } .item-box .item-head .operate .item:last-of-type { padding-top: 14px; } .item-box .item-head .operate .item:not(:last-of-type) { border-bottom: 1px dotted #d7d7d7; } .item-box .label { flex-wrap: wrap; } .item-box .label .item { font-size: 14px; color: #555555; padding: 0 9px; height: 24px; line-height: 24px; background-color: #f2f2f2; border-radius: 6px; margin-bottom: 10px; cursor: pointer; } .item-box .label .item.icon { padding: 0; } .item-box .label .item:not(:last-child) { margin-right: 10px; } .item-box .label .item.blue { color: #ffffff; background-color: #04b0d5; } .item-box.item-forum .title { font-weight: 650; font-size: 20px; color: #000000; line-height: 36px; margin-bottom: 7px; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; display: flex; } .item-box.item-forum .message { font-size: 14px; color: #555555; white-space: pre-wrap; margin-bottom: 15px; } .item-box.item-forum .picture { overflow-x: auto; display: flex; flex-wrap: nowrap; gap: 10px; margin-bottom: 15px; max-width: 100%; } .item-box.item-forum .picture .picture-videos { position: relative; } .item-box.item-forum .picture .picture-videos .icon-play { position: absolute; left: calc(50% - 5px); top: 50%; transform: translate(-50%, -50%); width: 40px; } .item-box.item-forum .picture .picture-item { height: 100px; border-radius: 10px; display: block; flex-shrink: 0; } .item-box.item-offer { font-size: 14px; color: #333333; } .item-box.item-offer .school { height: 45px; border-bottom: 1px dotted #d7d7d7; } .item-box.item-offer .school .icon { height: 20px; margin-right: 10px; } .item-box.item-offer .school .text { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 20px; color: #000000; line-height: 36px; } .item-box.item-offer .major { height: 45px; border-bottom: 1px dotted #d7d7d7; } .item-box.item-offer .major .key { font-size: 14px; color: #7f7f7f; margin-right: 20px; } .item-box.item-offer .info { height: 45px; border-bottom: 1px dotted #d7d7d7; margin-bottom: 12px; } .item-box.item-offer .info .line { width: 1px; height: 14px; background: #aaaaaa; margin: 0 10px; } .item-box.item-offer .info .results { font-size: 13px; color: #ffffff; height: 20px; padding: 0 9px; border-radius: 37px; } .item-box.item-offer .message { color: #555555; margin-bottom: 15px; display: block; } .item-box.item-summary .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 20px; color: #000000; line-height: 36px; margin-bottom: 7px; } .item-box.item-summary .message { font-size: 14px; color: #555555; margin-bottom: 20px; width: 100%; } .item-box.item-summary .total { font-size: 14px; color: #555555; margin-bottom: 12px; } .item-box.item-summary .total .num { font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif; font-weight: 700; color: #000000; margin: 0 5px; } .item-box.item-summary .list { overflow: auto; margin-bottom: 16px; max-width: 100%; } .item-box.item-summary .list .item-content { width: 280px; flex-direction: column; justify-content: space-between; padding: 10px; flex: 1; } .item-box.item-summary .list .item { width: 280px; flex-shrink: 0; height: 110px; background-color: rgba(242, 242, 242, 0); border: 1px solid #ebebeb; border-radius: 10px; color: #333333; font-size: 14px; cursor: pointer; margin-right: 10px; } .item-box.item-summary .list .item .school .icon { height: 24px; margin-right: 10px; } .item-box.item-summary .list .item .school .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 16px; color: #000000; line-height: 24px; } .item-box.item-summary .list .item .info .results { font-size: 13px; color: #ffffff; height: 20px; padding: 0 9px; border-radius: 37px; } .item-box.item-summary .list .item .info .line { width: 1px; height: 14px; background: #aaaaaa; margin: 0 10px; } .item-box.item-summary .list .item.more { color: #026277; } .item-box.item-summary .list .item.more .item-content { vertical-align: top; flex-direction: row; justify-content: center; } .item-box.item-summary .list .item.more .icon { width: 15px; height: 15px; margin-left: 5px; } .item-box.item-vote .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 20px; color: #000000; line-height: 36px; margin-bottom: 7px; display: block; } .item-box.item-vote .message { font-size: 14px; color: #555555; margin-bottom: 15px; display: block; } .item-box.item-vote .info { font-size: 14px; color: #7f7f7f; } .item-box.item-vote .info .status { height: 22px; line-height: 22px; background-color: rgba(211, 81, 16, 0.09803922); border-radius: 24px; font-size: 13px; color: #d35110; padding: 0 7px; } .item-box.item-vote .info .line { width: 1px; height: 14px; background-color: #aaaaaa; margin: 0 10px; } .item-box.item-vote .info .num { font-weight: 650; color: #000000; } .item-box.item-vote .list { margin: 4px 20px 20px; overflow: hidden; max-height: 138px; display: block; } .item-box.item-vote .list.voted { max-height: 178px; } .item-box.item-vote .list.voted .list-item { height: 75px; } .item-box.item-vote .list.voted .list-item .list-bottom { display: flex; } .item-box.item-vote .list .list-item { height: 55px; flex-direction: column; } .item-box.item-vote .list .list-item:not(:last-of-type) { border-bottom: 1px dotted #d7d7d7; } .item-box.item-vote .list .list-item .list-top { margin-bottom: 1px; width: 100%; } .item-box.item-vote .list .list-item .list-top .list-serial { width: 18px; height: 18px; line-height: 18px; background-color: #333333; border-radius: 50%; color: #ffffff; font-size: 13px; margin-right: 12px; } .item-box.item-vote .list .list-item .list-top .list-tick { width: 18px; height: 18px; margin-right: 12px; } .item-box.item-vote .list .list-item .list-top .list-text { font-size: 15px; line-height: 24px; color: #333333; width: 400px; } .item-box.item-vote .list .list-item .list-bottom { color: #026277; font-size: 13px; padding: 2px; justify-content: flex-end; width: 100%; display: none; } .item-box.item-vote .list .list-item .list-bottom .list-length { width: 100%; height: 4px; background-color: #cff7ff; border-radius: 66px; margin-right: 6px; } .item-box.item-mj .school { height: 45px; border-bottom: 1px dotted #d7d7d7; } .item-box.item-mj .school .icon { height: 20px; margin-right: 10px; } .item-box.item-mj .school .text { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 20px; color: #000000; line-height: 36px; } .item-box.item-mj .major { height: 45px; border-bottom: 1px dotted #d7d7d7; } .item-box.item-mj .major .key { font-size: 14px; color: #7f7f7f; margin-right: 20px; } .item-box.item-mj .major .time { font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif; font-weight: 700; font-style: normal; font-size: 14px; color: #026277; } .item-box.item-mj .message { margin-top: 13px; margin-bottom: 15px; font-size: 14px; color: #555555; display: block; } .item-box.item-tenement .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 20px; color: #000000; line-height: 36px; margin-bottom: 10px; display: block; } .item-box.item-tenement .site-box { margin-bottom: 10px; } .item-box.item-tenement .site-box .site-item { font-size: 15px; color: #555555; } .item-box.item-tenement .site-box .site-item .site-icon { width: 18px; height: 18px; margin-right: 4px; } .item-box.item-tenement .price-section { font-size: 14px; color: #7f7f7f; margin-bottom: 21px; } .item-box.item-tenement .price-section .unit { font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; color: #000000; margin-right: 6px; } .item-box.item-tenement .price-section .price { font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; font-size: 20px; color: #f95d5d; margin-right: 7px; } .item-box.item-tenement .price-section .text { color: #555555; margin-right: 21px; } .item-box.item-tenement .picture { overflow: auto; } .item-box.item-tenement .picture .picture-item { height: 100px; border-radius: 10px; } .item-box.item-tenement .picture .picture-item:not(:last-child) { margin-right: 10px; } .item-box.item-project { padding-bottom: 18px; } .item-box.item-project .school { color: #333333; font-size: 14px; margin-top: 2px; margin-bottom: 5px; } .item-box.item-project .school .icon { width: 18px; height: 20px; margin-right: 8px; } .item-box.item-project .name { word-break: break-word; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 20px; color: #000000; line-height: 36px; } .item-box.item-project .en { font-size: 14px; color: #7f7f7f; margin-top: 4px; word-break: break-all; } .item-box.item-project .introduce { font-size: 14px; color: #555555; margin-top: 8px; flex-wrap: wrap; } .item-box.item-project .introduce .line { color: #d7d7d7; margin: 0 8px; } .item-box.item-project .introduce .q { font-family: "Arial", "Arial-Black", "Arial Black", sans-serif; font-weight: 900; color: #000000; margin-left: 8px; } .item-box.item-project .word { font-size: 14px; color: #7f7f7f; padding: 0 10px; height: 46px; line-height: 46px; background-color: #f6f6f6; border-radius: 10px; margin-top: 10px; word-break: break-all; display: inherit; } .item-box.item-project .tag { flex-wrap: wrap; } .item-box.item-project .tag .tag-item { font-size: 14px; color: #555555; padding: 0 8px; width: fit-content; height: 24px; line-height: 24px; background-color: #f2f2f2; border-radius: 6px; margin-bottom: 10px; } .item-box.item-project .tag .tag-item.admissions { background-color: #04b0d5; border: none; color: #fff; } .item-box.item-project .tag .tag-item.gray { border: none; color: #fff; background-color: #333333; } .item-box.item-project .tag .tag-item.gray.semester { background-color: #f95d5d; } .item-box.item-project .tag .tag-item:not(:last-child) { margin-right: 10px; } .item-box.item-project .tag .tag-item.blue { color: #ffffff; background-color: #04b0d5; } .item-box.item-project .tag .tag-item.icon { height: 24px; width: 94px; padding: 0; margin-right: 10px; } .item-box .comment { height: 40px; background-color: #f6f6f6; border-radius: 10px; padding: 0 10px; width: 100%; } .item-box .comment .icon { width: 20px; height: 20px; border-radius: 50%; margin-right: 10px; } .item-box .comment .text { font-size: 14px; color: #7f7f7f; flex: 1; width: 0; } .item-box .bottom { height: 55px; justify-content: flex-end; } .item-box .bottom .bottom-item { height: 100%; cursor: pointer; position: relative; } .item-box .bottom .bottom-item:not(:last-child) { margin-right: 60px; } .item-box .bottom .bottom-item .icon { width: 20px; height: 20px; margin-right: 8px; } .item-box .bottom .bottom-item .text { color: #aaaaaa; font-size: 13px; } .item-box .bottom .bottom-item.like .icon { width: 18px; height: 18px; } .item-box .bottom .bottom-item.share:hover .share-box { display: flex; } .item-box .bottom .bottom-item .share-box { z-index: 2; position: absolute; left: 50%; transform: translateX(-50%); bottom: 48px; width: 130px; height: 100px; background-color: #ffffff; border-radius: 6px; filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.16862745)); flex-direction: column; display: none; } .item-box .bottom .bottom-item .share-box::after { content: ""; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #ffffff; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); } .item-box .bottom .bottom-item .share-box .share-item { width: 100%; height: 40px; color: #333; font-size: 14px; } .item-box .bottom .bottom-item .share-box .share-item:hover { background-color: #f0fafd; } .item-box .bottom .bottom-item .share-box .share-item .share-icon { width: 18px; height: 18px; margin-right: 13px; } .item-box .bottom .bottom-item .share-box .share-item.wenxin:hover .QRcode-box { display: flex; } .item-box .bottom .bottom-item .share-box .share-item .QRcode-box { z-index: 1; display: none; position: absolute; top: 48px; left: 100%; width: 140px; height: 166px; background-color: #ffffff; border-radius: 6px; padding: 20px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745); flex-direction: column; } .item-box .bottom .bottom-item .share-box .share-item .QRcode-box.right { left: -140px; } .item-box .bottom .bottom-item .share-box .share-item .QRcode-box .QRcode { width: 100px; height: 100px; margin-bottom: 4px; } .item-box .bottom .bottom-item .share-box .share-item .QRcode-box .QRcode .load { width: 50px; height: 50px; animation: loadingRotate 1s linear infinite; } .item-box .bottom .bottom-item .share-box .share-item .QRcode-box .text { color: #555555; font-size: 14px; } /* offer 录取结果 */ .results.r1 { background-color: #76c45e; } .results.r2 { background-color: #50e3c2; } .results.r3 { background-color: #81d3f8; } .results.r4 { background-color: #d35110; } .results.r5 { background-color: #f59a23; } .results.r6 { background-color: #8080ff; } .alert-form { display: block; position: fixed; z-index: 999; left: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.7); } .alert-form .reports { height: 440px; } .alert-form .reports .radio-area { margin-bottom: 40px; } .alert-form .reports .radio-area .radio-area-item { color: #606266; font-size: 14px; margin-right: 10px; cursor: pointer; } .alert-form .reports .radio-area .radio-area-item.pitch .radio-area-frame { background-color: #50e3c2; border-color: #50e3c2; } .alert-form .reports .radio-area .radio-area-item.pitch .radio-area-frame::after { -webkit-transform: rotate(45deg) scaleY(1); transform: rotate(45deg) scaleY(1); } .alert-form .reports .radio-area .radio-area-item .radio-area-frame { border: 1px solid #dcdfe6; border-radius: 2px; width: 14px; height: 14px; -webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); position: relative; margin-right: 10px; } .alert-form .reports .radio-area .radio-area-item .radio-area-frame::after { -webkit-box-sizing: content-box; box-sizing: content-box; content: ""; border: 1px solid #fff; border-left: 0; border-top: 0; height: 7px; left: 4px; position: absolute; top: 1px; -webkit-transform: rotate(45deg) scaleY(0); transform: rotate(45deg) scaleY(0); width: 3px; -webkit-transition: -webkit-transform 0.15s ease-in 0.05s; transition: -webkit-transform 0.15s ease-in 0.05s; transition: transform 0.15s ease-in 0.05s; transition: transform 0.15s ease-in 0.05s, -webkit-transform 0.15s ease-in 0.05s; -webkit-transform-origin: center; transform-origin: center; } .alert-form .el-checkbox-group { font-size: 0; } .alert-form .comments { display: block; position: fixed; z-index: 11; left: 50%; top: 50%; width: 740px; height: 440px; max-width: 90vw; max-height: 90vh; transform: translate(-50%, -50%); background-color: #ffffff; border: none; border-radius: 8px 8px 6px 6px; } .alert-form .comments .text-box { position: relative; } .alert-form .comments .text-num { position: absolute; right: 10px; bottom: 10px; color: #999; font-size: 12px; } .alert-form .comments .form { display: block; width: 100%; padding: 34px 30px 40px; } .alert-form .comments .form textarea { height: 172px; margin-bottom: 30px; display: block; width: 100%; background: #f7f7f7; padding: 18px; font-size: 14px; border: 1px solid #f7f7f7; border-radius: 5px; outline: none; resize: none; line-height: 22px; } .alert-form .head { padding: 0 18px 0 30px; display: flex; height: 56px; align-items: center; justify-content: space-between; background: #333333; color: #fff; font-size: 17px; border-radius: 6px 6px 0 0; } .alert-form .head .close { color: #b3b3b3; font-size: 14px; cursor: pointer; } .alert-form .footer { display: flex; justify-content: center; align-items: center; } .alert-form .footer button[type="button"] { margin-right: 20px; } .alert-form .footer button { border: 1px #999999 solid; border-radius: 5px; background-color: #ffffff; width: 128px; height: 38px; color: #333; font-size: 14px; outline: none; cursor: pointer; } .alert-form .footer button[type="submit"] { background-color: #50e3c2; border-color: #50e3c2; color: #fff; } .side-box { width: 100%; padding: 17px 0px 10px; margin-bottom: 12px; width: 272px; border-radius: 10px; box-sizing: border-box; } .side-box * { margin: 0; padding: 0; box-sizing: border-box; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; text-decoration: none !important; } .side-box a { text-decoration: none; } .side-box .side-header { justify-content: space-between; margin-bottom: 11px; } .side-box .side-header .left .title { font-weight: 650; font-size: 16px; color: #000000; padding: 0; height: auto; line-height: normal; } .side-box .side-header .left .header-icon { width: 22px; height: 22px; margin-right: 8px; } .side-box .side-header .more { color: #333; font-size: 13px; cursor: pointer; position: relative; padding-right: 13px; } .side-box .side-header .more .more-icon { width: 5px; height: 8px; margin-left: 8px; position: absolute; right: 0; top: 58%; transform: translateY(-50%); } .side-box .box .add-btn { cursor: pointer; height: 62px; border-top: 1px solid #ebebeb; font-size: 13px; color: #333; } .side-box .box .add-btn:hover { color: #000000; } .side-box .box .add-btn:hover .add-icon { transform: rotate(90deg); } .side-box .box .add-btn .add-icon { width: 16px; height: 16px; margin-right: 10px; transition: all 0.3s; } .side-box .box { width: 272px; background-color: #ffffff; border-radius: 0; } .side-box.thread-side-box .box .item { padding-top: 16px; padding-left: 11px; cursor: pointer; display: block; } .side-box.thread-side-box .box .item:not(:nth-last-child(2)) .answer .text { border-bottom: 1px solid #ebebeb; } .side-box.thread-side-box .box .item .dot { width: 18px; height: 18px; border-radius: 3px; font-weight: 650; font-size: 14px; margin-top: 2px; margin-right: 11px; } .side-box.thread-side-box .box .item .text { line-height: 22px; font-size: 14px; padding-right: 11px; } .side-box.thread-side-box .box .item .question { margin-bottom: 9px; align-items: flex-start; } .side-box.thread-side-box .box .item .question .dot { background-color: #333333; color: #ffffff; } .side-box.thread-side-box .box .item .question .text { color: #000000; } .side-box.thread-side-box .box .item .answer { align-items: flex-start; } .side-box.thread-side-box .box .item .answer .dot { background-color: #fddf6d; color: #333333; } .side-box.thread-side-box .box .item .answer .text { font-weight: 400; color: #555555; padding-bottom: 16px; } .side-box.thread-side-box .box .item .answer .text .texttext { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .side-box.offer-side-box .box .item { padding-top: 19px; padding-left: 10px; } .side-box.offer-side-box .box .item:not(:nth-last-child(2)) .school-detail .school-offer { border-bottom: 1px solid #ebebeb; } .side-box.offer-side-box .box .item .school-img { height: 24px; margin-right: 7px; } .side-box.offer-side-box .box .item .school-detail { flex-direction: column; } .side-box.offer-side-box .box .item .school-detail .school-name { font-weight: 650; font-size: 14px; color: #000000; margin-bottom: 7px; width: 215px; } .side-box.offer-side-box .box .item .school-detail .school-brief { font-size: 14px; color: #333333; margin-bottom: 7px; width: 215px; } .side-box.offer-side-box .box .item .school-detail .school-offer { font-size: 14px; color: #7f7f7f; padding-bottom: 19px; } .side-box.offer-side-box .box .item .school-detail .school-offer .long-string { color: #d7d7d7; margin: 0 10px; } .side-box.interviewexperience-side-box .box { padding-top: 22px; padding-bottom: 1px; } .side-box.interviewexperience-side-box .box .item { margin: 0 0 20px; padding: 0 10px; flex-direction: column; } .side-box.interviewexperience-side-box .box .item:not(:nth-last-child(2)) { border-bottom: 1px dotted #ebebeb; padding-bottom: 24px; } .side-box.interviewexperience-side-box .box .item .school { font-weight: 650; font-size: 14px; color: #000000; margin-bottom: 6px; } .side-box.interviewexperience-side-box .box .item .major { font-size: 14px; color: #333333; margin-bottom: 8px; } .side-box.interviewexperience-side-box .box .item .info { background-color: #f7f7f7; border-radius: 6px; padding: 10px; position: relative; } .side-box.interviewexperience-side-box .box .item .info .icon { width: 20px; height: 20px; vertical-align: bottom; position: absolute; border-radius: 50%; } .side-box.interviewexperience-side-box .box .item .info .text { font-weight: 400; color: #555555; line-height: 20px; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-indent: 32px; } .side-box.newest-side-box { padding: 20px 6px 14px !important; } .side-box.newest-side-box .box { background: #ffffff; } .side-box.newest-side-box .bounding { width: 42px; height: 41px; position: absolute; top: 0; right: 0; } .side-box.newest-side-box .side-header { margin-bottom: 21px !important; } .side-box.newest-side-box .box .item { margin-bottom: 12px; } .side-box.newest-side-box .box .item .dot { width: 6px; height: 6px; margin-right: 10px; } .side-box.newest-side-box .box .item .dot.dot-green { background-image: url(../img/dot-green.svg); background-repeat: no-repeat; } .side-box.newest-side-box .box .item .text { font-size: 14px; color: #555555; cursor: pointer; flex: 1; } .side-box.newest-side-box .box .item .text:hover { color: #000; } .side-box.essence-side-box { padding: 20px 6px 14px !important; } .side-box.essence-side-box .box { background: #ffffff; } .side-box.essence-side-box .bounding { width: 42px; height: 41px; position: absolute; top: 0; right: 0; } .side-box.essence-side-box .side-header { margin-bottom: 21px !important; } .side-box.essence-side-box .box .item { margin-bottom: 12px; } .side-box.essence-side-box .box .item .dot { width: 6px; height: 6px; margin-right: 10px; background-image: url(../img/dot-blue.svg); background-repeat: no-repeat; } .side-box.essence-side-box .box .item .text { font-size: 14px; color: #555555; cursor: pointer; flex: 1; } .side-box.essence-side-box .box .item .text:hover { color: #000; } .side-box.vote-side-box .box .item { padding-top: 19px; margin-left: 27px; flex-direction: column; position: relative; } .side-box.vote-side-box .box .item::after { content: ""; width: 6px; height: 12px; background-color: #48d88a; border-radius: 3px; display: block; position: absolute; top: 23px; left: -16px; } .side-box.vote-side-box .box .item:not(:nth-last-child(2)) { border-bottom: 1px solid #ebebeb; } .side-box.vote-side-box .box .item .name { font-size: 14px; color: #000000; line-height: 20px; margin-bottom: 8px; padding-left: 17px; position: relative; padding-right: 10px; } .side-box.vote-side-box .box .item .name, .side-box.vote-side-box .box .item .brief { padding-left: 0; } .side-box.vote-side-box .box .item .brief { font-size: 13px; color: #555555; line-height: 20px; margin-bottom: 20px; padding-left: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; } .main-new { width: 1200px; display: flex; margin: 0 auto; } .main-new .wp { width: 890px; min-width: 890px; margin-right: 19px; } .main-new .wp #modmenu { border-bottom: 1px solid #d4d4d4 !important; } .main-new .page-box { height: 45px; padding-bottom: 0 !important; padding-top: 10px; box-sizing: border-box; } .main-new .page-box .pg { margin-top: 0px !important; } .main-new .page-box .pgb { margin-top: 0px !important; } .main-new .page-box .pgb a { margin-left: 0; } .main-new .rightright { width: 291px; } .main-new .mtw.mbw { width: 689px; background-color: #f5fbfb; border: 1px solid #dcf0f3; border-radius: 5px 10px 10px 10px; position: relative; } .main-new .mtw.mbw::after { content: ""; position: absolute; top: 0; left: 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FJREFUeNrsnF9S2lAUxs/JZAFMK6nAi0uw02mrFUR3gEtgBZYVKDuQFTQraHEFje+dKS7AMTP2pQ+diSug54aIBHLhXv4kN8n5FC8EiMzP73yce0lE0NTw4U+HhjYiHNJ4hvQD6Sv6DhWOGG593TbZOHd7siW6a+b5OHP/y+Nxbv+ve8O5/cX3n/z6EKfPHdEQhCPiM75cT3rNKoB+PDxVaPhKT7uksbLqhRgKyqebIxrvaX8eXfc/OG98HaPYqx7w/eHpmoZL+qUVlb+YQaDIHSGUO7p4H9+9DWBD2UsgiTL7Rr/0UNXamYOilKDhlkbv8/6eD1uWLQF1JqoPRcmZDyoEJOL0qLYXwA5lJ4DqRKDAYFDCNQMB6Li2fQfJhAml99NgR4kMGpzUq0PIQDgDSgT4b9pwYCAoFyeQRpChZsvwykBQLl3rN+tVHwwQRn3UAQ2PBoHyaEuvmbGTZM66MgSUcFC3VXc8MFBI0xeRVY8GdOb9VsO5BoMlnNXJGJQXuqnh+GC47GhSnBWo3mnDuYGcyI5WD9IGJYK7S6BGkCNZEM790gMleia6nOcN1MRZ6YLqthuOCzmVnRIoMcE9b+fQTfEy3D0oAeh93kFNy3DHoISjAiiALAal66ztg3IJUhcKJotBacDaQen1oKCyOKN0A35zUH7RQU2ctZ2G86LooCJnbTyFuShCw7lGZmmD6hEoD0oiawNQw3aO1qK2tZ61znqUCPQulEzWGqAgWrgLSgdrDVA3pyXKqcWAVwclyq8PJZWl83FVWcsvYT1r5ed6bquk5bcY8MtBBUWeIOsF/KpjDwAGrRKXX0KfJQGF4LfqZn+snnIZSkEJ3/UZ08LcMBGU36xXXcYUmxtKj7hjV8WcJQfFrpKWYRxUeLwU45EFfByUaBOGjEc6N8TZFsI9qVcDxjPXZ0nOXBgwGkkHPwdq9KVmxqHUxmbWzIopu2pZZs2dXcXBLu+z4qCOd3xmVQHKcJpbt4xk2apD/MwKj5GsnBtO3gWP9tM7dy/nmcWuUp/uAN4xjpWZNQ14dpZSwCOMPm3hVP7ilyFO/2sGS2nVAeCeUagHPDtLRb/+/hszBeU+CznYNcqQS1Aj4NlZGs7id0LN1oGl1pQiZxZnFpdh9h08S7kpZQgazmJaOpnF74aKwvGY59Gq+i/AANckqSkymazNAAAAAElFTkSuQmCC); background-repeat: no-repeat; width: 18px; height: 18px; display: inline-block; background-size: cover; } .main-new .mtw.mbw h3.bbda { height: 40px; font-weight: 650; font-style: normal; color: #000000; line-height: 22px; font-size: 13px; border-bottom: 1px solid #dcf0f3; display: flex; align-items: center; padding-left: 16px; box-sizing: border-box; padding-bottom: 0 !important; } .main-new .mtw.mbw .xl.xl2.cl { padding: 0 16px 10px; } .main-new .mtw.mbw .xl2 li { display: inline-flex; align-items: center; margin: 0; height: 22px; float: none; } .main-new .mtw.mbw .xl2 li:not(:nth-last-child(1)):not(:nth-last-child(2)) { margin-bottom: 6px; } .main-new .mtw.mbw .xl2 li a { line-height: 22px; font-size: 13px; color: #333333; width: 294px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; margin: 0; display: inline-block; margin-left: 10px; } .box-box.box-thread { background: -webkit-linear-gradient(297.35551882deg, #f9e6a3 1%, #f9f2d8 100%); background: -moz-linear-gradient(152.64448118deg, #f9e6a3 1%, #f9f2d8 100%); background: linear-gradient(152.64448118deg, #f9e6a3 1%, #f9f2d8 100%); } .box-box.box-offer { background: -webkit-linear-gradient(295.87227768deg, #c7edf2 1%, #d3f2f5 100%); background: -moz-linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%); background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%); } .box-box.box-interviewexperience { background: -webkit-linear-gradient(291.35671123deg, #d3e1fb 1%, #dee6f9 100%); background: -moz-linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%); background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%); } .box-box.box-vote { background: -webkit-linear-gradient(298.22437861deg, #c6f4d9 1%, #d9f7e5 100%); background: -moz-linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%); background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%); } .slideshow-box { padding: 17px 10px 0px; } .slideshow-box .tab-list { padding-top: 2px; padding-bottom: 18px; } .slideshow-box .tab-list .tab-item { font-size: 16px; color: #555555; margin-right: 25px; position: relative; cursor: pointer; } .slideshow-box .tab-list .tab-item:not(:last-of-type):after { content: ""; position: absolute; right: -12px; top: 3px; width: 1px; height: 16px; background-color: #c3cad7; } .slideshow-box .tab-list .tab-item.pitch { font-weight: 650; font-size: 16px; color: #000000; } .slideshow-box .tab-list .tab-item.pitch::before { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 30px; height: 4px; border-radius: 95px; background-color: #f6c106; } .box-ask .slideshow-box .tab-list .tab-item.pitch::before { background-color: #f6c106; } .box-offer .slideshow-box .tab-list .tab-item.pitch::before { background-color: #04e1fe; } .box-vote .slideshow-box .tab-list .tab-item.pitch::before { background-color: #48d88a; } .box-interviewexperience .slideshow-box .tab-list .tab-item.pitch::before { background-color: #789feb; } .posts-box .box-newest-head { font-weight: 650; font-size: 16px; color: #000000; padding: 0; height: auto; line-height: normal; padding: 20px 16px 0; } .posts-box .box-newest-head .icon { width: 22px; height: 22px; margin-right: 8px; } .posts-box .slideshow-content { margin-left: 10px; transition: all 0.3s; } .posts-box.box-essence .slideshow-content { margin-left: -266px; } .box-newest .slideshow-box .tab-list .tab-item.pitch::before { background: linear-gradient(to right, #6ac83e, #6ad2cb); } .box-essence .slideshow-box .tab-list .tab-item.pitch::before { background: #3ea1e0; } .slideshow-content { overflow: hidden; align-items: flex-start; } .posts-box, .box-box { display: flex; flex-direction: column; justify-content: center; margin-bottom: 20px; border-radius: 10px; transition: all 0.3s; width: 291px; } .box-box .side-box { padding-top: 11px; } .posts-box { background: #ffffff; position: relative; margin-bottom: 12px; overflow: hidden; } .box-essence .newest-side-box .bounding, .box-newest .essence-side-box .bounding { display: none; } .slideshow-content { margin: 0 10px; } .posts-box .slideshow-box { border-bottom: 1px solid #ebebeb; padding-bottom: 10px; } .side-box.newest-side-box .box, .side-box.essence-side-box .box { width: 260px; overflow: hidden; } .offer-side-box.side-box .box { width: 271px; } .thread-side-box.side-box .box, .offer-side-box.side-box .box, .interviewexperience-side-box .box, .vote-side-box.side-box .box { border-radius: 8px; } .head-navigation { margin-bottom: 20px; } .head-navigation .icon { width: 16px; height: 16px; } .head-navigation .arrows { width: 7px; height: 12px; margin: 0 5px; } .head-navigation .text { padding: 0 5px; font-size: 14px; color: #000000; text-decoration: none; max-width: 300px; } .head-navigation .text.textA:hover { text-decoration: underline; } .head-top { position: relative; z-index: 4; } .head-top .logo { height: 52px; margin-right: 10px; } .head-top .input-box { width: 370px; height: 40px; background-color: #ebebeb; border: 2px solid #d7d7d7; border-radius: 11px; padding: 0 15px; justify-content: space-between; margin-right: 20px; transition: all 0.3s; position: relative; } .head-top .input-box.pitch { border-color: #000; } .head-top .input-box .placeholder { width: 370px; height: 36px; overflow: hidden; position: absolute; top: 0; left: 0; width: calc(100% - 33px); height: 100%; z-index: 1; } .head-top .input-box .placeholder .placeholder-box .item { height: 36px; line-height: 36px; padding: 0 15px; color: #7f7f7f; font-size: 14px; } .head-top .input-box .input { border: none; outline: none; height: 100%; background-color: transparent; font-size: 14px; z-index: 2; } .head-top .input-box .icon { width: 18px; height: 18px; margin-left: 15px; cursor: pointer; } .head-top .input-box .search-box-history { display: none; width: 460px; /* height: 267px; */ background-color: #ffffff; border: 1px solid #ebebeb; border-radius: 10px; position: absolute; top: 50px; left: 0; padding: 16px; z-index: 1; } .head-top .input-box .search-box-history .search-box-history-title { font-size: 13px; color: #aaaaaa; margin-bottom: 14px; } .head-top .input-box .search-box-history .search-box-history-list { color: #333; font-size: 14px; } .head-top .input-box .search-box-history .search-box-history-list .search-box-history-item { margin-bottom: 10px; cursor: pointer; display: block; } .head-top .sign-in { width: 192px; height: 40px; border-radius: 83px; cursor: pointer; display: none; } .head-top .sign-in .sign-in-already-box { display: none; } .head-top .sign-in.sign-in-already { background-color: #ffffff; font-size: 14px; color: #333; } .head-top .sign-in.sign-in-already .sign-in-already-box { display: flex; align-items: center; justify-content: center; width: 192px; height: 40px; } .head-top .sign-in.sign-in-already .sign-icon { width: 20px; height: 20px; margin-right: 10px; } .head-top .sign-in.sign-in-already .sign-in-no-box { display: none; } .head-top .sign-in.sign-in-no { position: relative; z-index: 1; padding-right: 8px; } .head-top .sign-in.sign-in-no .sign-in-no-box { display: flex; align-items: center; justify-content: center; width: 192px; height: 40px; } .head-top .sign-in.sign-in-no .sign-in-bj { position: absolute; top: 0; left: 0; z-index: -1; width: 190px; height: 40px; } .head-top .sign-in.sign-in-no .coin-bj { position: absolute; width: 157px; height: 33px; top: 4px; left: 29px; } .head-top .sign-in.sign-in-no .coin-icon { width: 43px; height: 51px; align-self: flex-end; z-index: 1; margin-left: -2px; } .head-top .sign-in.sign-in-no .text { text-align: center; text-shadow: 1px 1px 2px #a63603; -webkit-text-shadow: 1px 1px 2px #a63603; -moz-text-shadow: 1px 1px 2px #a63603; font-size: 15px; color: #fff; } .head-top .sign-in.sign-in-no .sign-go { width: 30px; height: 30px; font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif; font-weight: 700; font-size: 12px; color: #710600; position: relative; } .head-top .sign-in.sign-in-no .sign-go .sign-go-bj { width: 100%; height: 100%; position: absolute; z-index: -1; } .head-top .sign-in.sign-in-no .petal1, .head-top .sign-in.sign-in-no .petal2, .head-top .sign-in.sign-in-no .petal3 { position: absolute; } .head-top .sign-in.sign-in-no .petal1 { width: 24px; height: 10px; top: 3px; left: 55px; } .head-top .sign-in.sign-in-no .petal2 { width: 16px; height: 14px; top: 25px; left: 92px; } .head-top .sign-in.sign-in-no .petal3 { width: 17px; height: 12px; top: 25px; left: 136px; } .head-top .post-list { display: none; } .head-top .post-list .post-item { width: 84px; height: 34px; cursor: pointer; } .head-top .post-list .post-item:not(:last-child) { margin-right: 10px; } .head-top .head-more { display: none; padding: 5px; } .hot-tag { background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; padding: 21px 10px 15px 21px; margin-bottom: 12px; } .hot-tag .hot-tag-title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 16px; color: #000000; position: relative; margin-bottom: 15px; } .hot-tag .hot-tag-title .icon { position: absolute; top: 50%; transform: translateY(-50%); left: -21px; width: 10px; height: 18px; } .hot-tag .list { flex-wrap: wrap; } .hot-tag .list .item { line-height: 36px; color: #333333; font-size: 14px; line-height: 32px; padding: 0 14px; background-color: #f6f6f6; border: 1px solid #f2f2f2; border-radius: 16px; margin-bottom: 14px; margin-right: 9px; cursor: pointer; text-decoration: none; } table { empty-cells: show; border-collapse: collapse; } .t_l, .t_c, .t_r, .m_l, .m_r, .b_l, .b_c, .b_r { overflow: hidden; background: #000; opacity: 0.2; filter: alpha(opacity=20); } .t_l, .t_c, .t_r, .m_l, .m_r, .b_l, .b_c, .b_r { overflow: hidden; background: #000; opacity: 0.2; filter: alpha(opacity=20); } td { display: table-cell; vertical-align: inherit; unicode-bidi: isolate; } .t_l { -moz-border-radius: 8px 0 0 0; -webkit-border-radius: 8px 0 0 0; border-radius: 8px 0 0 0; } .t_c, .b_c { height: 8px; } .t_l, .t_r, .b_l, .b_r { width: 8px; height: 8px; } .t_r { -moz-border-radius: 0 8px 0 0; -webkit-border-radius: 0 8px 0 0; border-radius: 0 8px 0 0; } .templateValue { display: none; } .list-load-box { width: 100%; height: 0; background-color: #ffffff; border: 0 solid #e9eef2; border-radius: 10px; flex-direction: column; transition: all 0.3s ease-in-out; overflow: hidden; } .list-load-box.show { height: 100px; border-width: 1px; margin-bottom: 30px; } .list-load-box.show .list-load-icon { width: 30px; height: 30px; } .list-load-box.show .list-load-text { font-size: 14px; } .list-load-box .list-load-icon { width: 0; height: 0; animation: loadingRotate 1s linear infinite; transition: all 0.3s ease-in-out; } .list-load-box .list-load-text { color: #999999; font-size: 0; margin-top: 6px; transition: all 0.3s ease-in-out; } @keyframes loadingRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #pre-loader { height: 70vh; display: flex; justify-content: center; align-items: center; } #pre-loader .three-bounce > div { display: inline-block; width: 18px; height: 18px; border-radius: 100%; top: 50%; margin-top: -9px; background: #aeadba; animation: bouncedelay 1.4s infinite ease-in-out; animation-fill-mode: both; } #pre-loader .three-bounce .one { animation-delay: -0.32s; } #pre-loader .three-bounce .two { animation-delay: -0.16s; } @keyframes bouncedelay { 0%, 100%, 80% { transform: scale(0); -webkit-transform: scale(0); } 40% { transform: scale(1); -webkit-transform: scale(1); } } .head-pop { position: fixed; top: 0; left: 100%; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.70588235); z-index: 100; } .head-pop.head-pop-show { left: 0; display: block !important; } .head-pop.head-pop-show .head-more-pop { animation: slide-in-left 0.5s ease-out forwards; } .head-pop .head-more-pop { position: absolute; top: 0; height: 100vh; width: 80vw; right: 0; background-color: #fff; overflow: auto; transition: all 0.2s; right: -100%; opacity: 0; z-index: 100; } @keyframes slide-in-left { 0% { right: -100%; opacity: 0; } 100% { right: 0; opacity: 1; } } .head-pop .head-more-pop .head-more-userinfo { height: 108px; margin-left: 24px; padding-right: 27px; box-sizing: border-box; border-bottom: 0.5px solid #ebebeb; justify-content: space-between; } .head-pop .head-more-pop .head-more-userinfo .head-more-left .head-more-userinfo-avatar { margin-right: 9px; width: 48px; height: 48px; border-radius: 50%; } .head-pop .head-more-pop .head-more-userinfo .head-more-left .head-more-userinfo-username { font-size: 13.5px; color: #333333; } .head-pop .head-more-pop .head-more-userinfo .head-more-right { width: 84px; height: 30px; display: none; } .head-pop .head-more-pop .head-more-userinfo .head-more-right .information-box { position: relative; width: 16.5px; height: 16.5px; } .head-pop .head-more-pop .head-more-userinfo .head-more-right .information-box .information-icon { width: 16.5px; height: 16.5px; } .head-pop .head-more-pop .head-more-userinfo .head-more-right .red-dot { position: absolute; right: -7.5px; top: -7.5px; width: 13.5px; height: 13.5px; color: #fff; border-radius: 24px; background-color: #fd3f5d; font-size: 9.75px; } .head-pop .head-more-pop .head-more-userinfo .head-more-right .loginBtn { width: 84px; height: 30px; border-radius: 117px; background-color: #62b1ff; color: #fff; font-size: 12.75px; } .head-pop .head-more-pop .tab-list { padding-right: 27px; margin-left: 24px; border-bottom: 0.5px solid #ebebeb; } .head-pop .head-more-pop .tab-list .tab-item { height: 54px; margin: 12.3px 0; border-radius: 8.25px; padding-left: 24px; font-size: 13.5px; color: #555555; text-decoration: none; } .head-pop .head-more-pop .tab-list .tab-item.pitch { background-color: #50e3c2; font-weight: 650; color: #000; } .head-pop .head-more-pop .head-more-post { color: #000; font-size: 15px; margin: 48px 0 100px; } .head-pop .head-more-pop .head-more-post .head-more-post-icon { width: 18px; height: 18px; margin-right: 5px; background-color: #fddf6d; border-radius: 50%; } .head-pop .head-more-pop .head-more-post .head-more-post-icon .head-more-post-img { width: 9px; height: 9px; } .head-pop .head-more-pop .cross-icon { width: 12px; height: 12px; padding: 15px; position: fixed; bottom: 11.25px; left: calc(50% + 45px); transform: translateX(-50%); display: flex; align-items: center; justify-content: center; margin: 0 auto; box-sizing: content-box; } @media screen and (max-width: 1200px) { header.page-header { min-width: auto !important; } header.page-header .box { width: 100vw; } .head-top.flexacenter { max-width: 1200px !important; width: initial !important; margin: 20px 10px 30px !important; } .head-top.flexacenter .input-box { margin-right: 10px; } .index-footer { min-width: inherit !important; } } @media screen and (max-width: 768px) { header.page-header { display: none !important; } .head-top .head-more { display: flex; } .index-footer { display: none !important; } .head-top .post-list { display: none !important; } #search .search-box { width: auto !important; margin: 0 10px 20px; height: 40px !important; } #search .classify { margin-left: 10px; margin-right: 10px; } #search .matter .matter-content { margin: 0 10px; } #search .matter .sidebar-box { display: none; } #search .matter .search-box { margin-left: 10px; margin-right: 10px; } .item-box { padding: 18px 10px 0; } .item-box .comment .text { width: calc(100vw - 122px); } .item-box .bottom .bottom-item:not(:last-child) { margin-right: 30px; } } @media screen and (max-width: 500px) { #search .classify .item { min-width: inherit; font-size: 13px; height: 28px; line-height: 28px; border-radius: 8px; } } @media screen and (max-width: 480px) { .head-top.flexacenter { margin-bottom: 10px !important; } .item-box .bottom { height: 55px; justify-content: space-between; } .item-box .bottom .bottom-item:not(:last-child) { margin-right: 0; } } @media screen and (max-width: 450px) { #search .classify .item { padding: 0 5px; } } .huddle-box { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.70588235); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; animation: slidebj 0.5s forwards; z-index: 10002; } .huddle-box .box { width: 100vw; height: 719px; border-radius: 20px 20px 0 0; box-shadow: 0 0 15px rgba(0, 0, 0, 0.10196078); animation: slideUp 0.5s forwards; background: linear-gradient(0.0796881deg, #c1a75a 0%, #15a3dc 100%); position: relative; flex-direction: column; align-items: center; padding-top: 32px; z-index: 1; } .huddle-box .box .code { width: 100vw; } .huddle-box .box .bj { width: 100vw; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1; } .huddle-box .box .bj-bottom { width: 126px; height: 134px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .huddle-box .box .top { width: 199px; height: 36px; margin-bottom: 13px; } .huddle-box .box .title { width: 311px; height: 86px; margin-bottom: 4px; } .huddle-box .box .text { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 20px; color: #ffffff; text-align: center; line-height: 30px; margin-bottom: 25px; } .huddle-box .box .case { width: 360px; height: 400px; background: linear-gradient(180deg, #f2f2f2 0%, #ebebeb 100%); border-radius: 15px; flex-direction: column; align-items: center; padding-top: 50px; margin: 0 auto; } .huddle-box .box .case .QRcode { width: 240px; height: 240px; background-color: #ffffff; border-color: #f2f2f2; border-radius: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.18431373); margin-bottom: 26px; } .huddle-box .box .case .QRcode .img { width: 218px; height: 218px; } .huddle-box .box .case .hint .img { width: 32px; height: 32px; } .huddle-box .box .case .hint .img.img-left { transform: rotate(180deg); } .huddle-box .box .case .hint .hint-text { font-size: 18px; color: #000000; text-align: center; line-height: 28px; margin: 0 15px; } @media screen and (max-width: 600px) { .huddle-box .box { width: 100vw; height: calc(719 / 600 * 100vw); padding-top: calc(32 / 600 * 100vw); box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.10196078); animation-name: slideUp; } .huddle-box .box .code { width: 100vw; } .huddle-box .box .bj-bottom { width: calc(126 / 600 * 100vw); height: calc(134 / 600 * 100vw); } .huddle-box .box .top { width: calc(199 / 600 * 100vw); height: calc(36 / 600 * 100vw); margin-bottom: calc(13 / 600 * 100vw); } .huddle-box .box .title { width: calc(311 / 600 * 100vw); height: calc(86 / 600 * 100vw); margin-bottom: calc(4 / 600 * 100vw); } .huddle-box .box .text { font-size: calc(20 / 600 * 100vw); line-height: calc(30 / 600 * 100vw); margin-bottom: calc(25 / 600 * 100vw); } .huddle-box .box .case { width: calc(360 / 600 * 100vw); height: calc(400 / 600 * 100vw); padding-top: calc(50 / 600 * 100vw); border-radius: calc(15 / 600 * 100vw); } .huddle-box .box .case .QRcode { width: calc(240 / 600 * 100vw); height: calc(240 / 600 * 100vw); margin-bottom: calc(26 / 600 * 100vw); border-radius: calc(10 / 600 * 100vw); box-shadow: 0 0 calc(5 / 600 * 100vw) rgba(0, 0, 0, 0.18431373); } .huddle-box .box .case .QRcode .img { width: calc(218 / 600 * 100vw); height: calc(218 / 600 * 100vw); } .huddle-box .box .case .hint .img { width: calc(32 / 600 * 100vw); height: calc(32 / 600 * 100vw); } .huddle-box .box .case .hint .hint-text { font-size: calc(18 / 600 * 100vw); line-height: calc(28 / 600 * 100vw); margin: 0 calc(15 / 600 * 100vw); } } @keyframes slidebj { 0% { background-color: rgba(0, 0, 0, 0); } 100% { background-color: rgba(0, 0, 0, 0.71764706); } } .helper-pop { width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.71764706); position: fixed; top: 0; left: 0; z-index: 1004; align-items: flex-end; box-sizing: border-box; animation: slidebj 0.5s forwards; display: flex; justify-content: center; overflow: hidden; } .helper-pop .helper-box { animation: slideUp 0.5s forwards; box-sizing: border-box; flex-direction: column; width: 100vw; background: linear-gradient(179.80708565deg, #c1cefa 0%, #e2edfb 28%, #ffffff 60%); border: none; border-radius: 20px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.10196078); position: relative; padding-top: 59px; display: flex; align-items: center; } .helper-pop .helper-box .cross-grey { width: 16px; height: 16px; position: absolute; top: 13px; right: 13px; padding: 7px; cursor: pointer; } .helper-pop .helper-box .helper-text { box-sizing: border-box; height: 103px; margin: 0 auto 24px; } .helper-pop .helper-box .helper-box-box { box-sizing: border-box; width: 280px; background: linear-gradient(139.427577deg, #6589f2 0%, #74b1f0 100%); border: none; border-radius: 20px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.17647059); flex-direction: column; align-items: center; padding: 20px 0; z-index: 1; margin-bottom: 80px; display: flex; } .helper-pop .helper-box .helper-box-box .helper-box-text { box-sizing: border-box; font-size: 16px; color: #ffffff; text-align: center; line-height: 28px; margin-top: 20px; } .helper-pop .helper-box .helper-QRcode-box { box-sizing: border-box; width: 240px; height: 240px; background-color: #ffffff; border-radius: 6px; position: relative; display: flex; justify-content: center; align-items: center; } .helper-pop .helper-box .helper-QRcode-box .helper-QRcode-box-icon { width: 24px; height: 24px; position: absolute; } .helper-pop .helper-box .helper-QRcode-box .left-top { top: 0; left: 0; transform: rotate(-90deg); } .helper-pop .helper-box .helper-QRcode-box .left-bottom { bottom: 0; left: 0; transform: rotate(180deg); } .helper-pop .helper-box .helper-QRcode-box .right-top { right: 0; top: 0; } .helper-pop .helper-box .helper-QRcode-box .right-bottom { right: 0; bottom: 0; transform: rotate(90deg); } .helper-pop .helper-box .helper-QRcode-box .helper-QRcode-img { width: 220px; height: 220px; box-sizing: border-box; } .helper-pop .helper-box .helper-bottom { position: absolute; bottom: 0; left: 0; width: 100vw; height: 151px; } @media screen and (max-width: 600px) { .helper-pop .helper-box { width: 100vw; padding-top: calc(59 / 600 * 100vw); border-radius: calc(20 / 600 * 100vw); border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; box-shadow: 0px 0px calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.10196078); } .helper-pop .helper-box .cross-grey { width: calc(16 / 600 * 100vw); height: calc(16 / 600 * 100vw); top: calc(13 / 600 * 100vw); right: calc(13 / 600 * 100vw); padding: calc(7 / 600 * 100vw); } .helper-pop .helper-box .helper-text { height: calc(103 / 600 * 100vw); margin: 0 auto calc(24 / 600 * 100vw); } .helper-pop .helper-box .helper-box-box { width: calc(280 / 600 * 100vw); border-radius: calc(20 / 600 * 100vw); box-shadow: 0px 0px calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.17647059); padding: calc(20 / 600 * 100vw) 0; margin-bottom: calc(80 / 600 * 100vw); } .helper-pop .helper-box .helper-box-box .helper-box-text { font-size: calc(16 / 600 * 100vw); line-height: calc(28 / 600 * 100vw); margin-top: calc(20 / 600 * 100vw); } .helper-pop .helper-box .helper-QRcode-box { width: calc(240 / 600 * 100vw); height: calc(240 / 600 * 100vw); border-radius: calc(6 / 600 * 100vw); } .helper-pop .helper-box .helper-QRcode-box .helper-QRcode-box-icon { width: calc(24 / 600 * 100vw); height: calc(24 / 600 * 100vw); } .helper-pop .helper-box .helper-QRcode-box .helper-QRcode-img { width: calc(220 / 600 * 100vw); height: calc(220 / 600 * 100vw); } .helper-pop .helper-box .helper-bottom { height: calc(151 / 600 * 100vw); } } @keyframes slideUp { 0% { top: 100%; } 100% { top: 0; } }