* { margin: 0; padding: 0; box-sizing: border-box; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; } 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; } #sectionIndex { width: 1200px; margin: 0 auto; } #sectionIndex .head-top { margin-bottom: 30px; } #sectionIndex .head-top .logo { height: 52px; } #sectionIndex .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; } #sectionIndex .head-top .input-box .input { border: none; outline: none; height: 100%; background-color: transparent; } #sectionIndex .head-top .input-box .icon { width: 18px; height: 18px; margin-left: 15rpx; cursor: pointer; } #sectionIndex .head-top .sign-in { width: 192px; height: 40px; border-radius: 83px; cursor: pointer; } #sectionIndex .head-top .sign-in.sign-in-already { background-color: #ffffff; font-size: 14px; color: #333; } #sectionIndex .head-top .sign-in.sign-in-already .sign-icon { width: 20px; height: 20px; margin-right: 10px; } #sectionIndex .head-top .sign-in.sign-in-no { position: relative; z-index: 1; padding-right: 8px; } #sectionIndex .head-top .sign-in.sign-in-no .sign-in-bj { position: absolute; top: 0; left: 0; z-index: -1; width: 190px; height: 40px; } #sectionIndex .head-top .sign-in.sign-in-no .coin-bj { position: absolute; width: 157px; height: 33px; top: 4px; left: 29px; } #sectionIndex .head-top .sign-in.sign-in-no .coin-icon { width: 43px; height: 51px; align-self: flex-end; z-index: 1; margin-left: -2px; } #sectionIndex .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; } #sectionIndex .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; } #sectionIndex .head-top .sign-in.sign-in-no .sign-go .sign-go-bj { width: 100%; height: 100%; position: absolute; z-index: -1; } #sectionIndex .head-top .sign-in.sign-in-no .petal1, #sectionIndex .head-top .sign-in.sign-in-no .petal2, #sectionIndex .head-top .sign-in.sign-in-no .petal3 { position: absolute; } #sectionIndex .head-top .sign-in.sign-in-no .petal1 { width: 24px; height: 10px; top: 3px; left: 55px; } #sectionIndex .head-top .sign-in.sign-in-no .petal2 { width: 16px; height: 14px; top: 25px; left: 92px; } #sectionIndex .head-top .sign-in.sign-in-no .petal3 { width: 17px; height: 12px; top: 25px; left: 136px; } #sectionIndex .head-navigation { margin-bottom: 20px; } #sectionIndex .head-navigation .icon { width: 16px; height: 16px; } #sectionIndex .head-navigation .arrows { width: 7px; height: 12px; margin: 0 5px; } #sectionIndex .head-navigation .text { padding: 0 5px; font-size: 14px; color: #000000; cursor: pointer; } #sectionIndex .head-navigation .text:hover { text-decoration: underline; } #sectionIndex .matter .sidebar { width: 150px; height: 1225px; background-color: #08353e; border: 1px solid #e9eef2; border-radius: 10px; margin-right: 15px; } #sectionIndex .matter .sidebar .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 17px; color: #badee6; padding-top: 29px; padding-bottom: 27px; border-bottom: 1px solid rgba(255, 255, 255, 0.24705882); margin-left: 20px; margin-right: 20px; } #sectionIndex .matter .sidebar .list { padding-top: 10px; padding-bottom: 10px; margin-left: 20px; margin-right: 20px; } #sectionIndex .matter .sidebar .list:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.24705882); } #sectionIndex .matter .sidebar .list .item { height: 50px; font-size: 14px; color: rgba(255, 255, 255, 0.8); z-index: 1; } #sectionIndex .matter .sidebar .list .item .text { z-index: 1; position: relative; } #sectionIndex .matter .sidebar .list .item.pitch { position: relative; } #sectionIndex .matter .sidebar .list .item.pitch .text { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 14px; color: #08353e; } #sectionIndex .matter .sidebar .list .item.pitch::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 20px); height: 32px; background: inherit; background-color: #ecf9fa; border: none; border-radius: 16px; z-index: -1; } #sectionIndex .matter .matter-content .info { width: 1035px; background: -webkit-linear-gradient(270.53908529deg, #ffffff 2%, #ebf8f9 98%); background: -moz-linear-gradient(179.46091471deg, #ffffff 2%, #ebf8f9 98%); background: linear-gradient(179.46091471deg, #ffffff 2%, #ebf8f9 98%); border: 1px solid #e9eef2; border-radius: 10px; padding-left: 30px; padding-top: 30px; padding-bottom: 34px; margin-bottom: 20px; } #sectionIndex .matter .matter-content .info .img { width: 80px; height: 80px; border-radius: 10px; margin-right: 20px; } #sectionIndex .matter .matter-content .info .right .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 24px; color: #000000; margin-bottom: 15px; margin-top: 4px; } #sectionIndex .matter .matter-content .info .right .link { flex-wrap: wrap; border-top: 1px dotted #d7d7d7; border-bottom: 1px dotted #d7d7d7; margin-right: 20px; margin-bottom: 28px; width: fit-content; } #sectionIndex .matter .matter-content .info .right .link .item { padding: 12px 0; } #sectionIndex .matter .matter-content .info .right .link .item:not(:last-child) { margin-right: 72px; } #sectionIndex .matter .matter-content .info .right .link .item .text { font-size: 14px; color: #333333; margin-right: 8px; } #sectionIndex .matter .matter-content .info .right .link .item .icon { width: 12px; height: 12px; } #sectionIndex .matter .matter-content .info .right .bottom { justify-content: space-between; margin-right: 20px; } #sectionIndex .matter .matter-content .info .right .bottom .data { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; color: #555555; font-size: 13px; } #sectionIndex .matter .matter-content .info .right .bottom .data .sum { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; color: #000000; margin: 0 5px; } #sectionIndex .matter .matter-content .info .right .bottom .btn { width: 125px; height: 32px; background-color: #50e3c2; border-radius: 8px; font-size: 14px; color: #333; } #sectionIndex .matter .matter-content .info .right .bottom .btn .icon { width: 16px; height: 16px; margin-right: 3px; } #sectionIndex .matter .matter-content .details-box .content-box { margin-right: 12px; } #sectionIndex .matter .matter-content .details-box .content-box .selectives-box { width: 100%; height: 320px; background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; padding: 19px 14px; margin-bottom: 20px; } #sectionIndex .matter .matter-content .details-box .content-box .selectives-box .head-top { width: 64px; height: 24px; border-radius: 20px 20px 20px 0; margin-bottom: 13px; background-color: #f68251; } #sectionIndex .matter .matter-content .details-box .content-box .selectives-box .head-top .icon { width: 15px; height: 12px; margin-right: 3px; } #sectionIndex .matter .matter-content .details-box .content-box .selectives-box .head-top .text { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; color: #ffffff; font-size: 14px; } #sectionIndex .matter .matter-content .details-box .content-box .selectives-box .list { flex-wrap: wrap; padding: 0 50px 0 5px; justify-content: space-between; } #sectionIndex .matter .matter-content .details-box .content-box .selectives-box .list .item { font-size: 14px; color: #555555; line-height: 20px; margin-bottom: 12px; position: relative; cursor: pointer; } #sectionIndex .matter .matter-content .details-box .content-box .selectives-box .list .item:hover { color: #000000; } #sectionIndex .matter .matter-content .details-box .content-box .selectives-box .list .item .dot { width: 6px; height: 6px; border-radius: 50%; background-color: #f68251; margin-right: 10px; } #sectionIndex .matter .matter-content .details-box .content-box .selectives-box .list .item .text { width: 265px; } #sectionIndex .matter .matter-content .details-box .content-box .red-tag { width: 732px; background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; padding-top: 21px; padding-bottom: 8px; margin-bottom: 12px; } #sectionIndex .matter .matter-content .details-box .content-box .red-tag .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 16px; color: #000000; padding: 0 21px; margin-bottom: 12px; position: relative; } #sectionIndex .matter .matter-content .details-box .content-box .red-tag .title .icon { width: 10px; height: 18px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } #sectionIndex .matter .matter-content .details-box .content-box .red-tag .list { flex-wrap: wrap; display: flex; padding: 0 21px; } #sectionIndex .matter .matter-content .details-box .content-box .red-tag .list .item { height: 32px; background-color: #f6f6f6; border: 1px solid #f2f2f2; border-radius: 16px; line-height: 36px; font-size: 14px; color: #333333; padding: 0 21px; margin-right: 10px; margin-bottom: 14px; cursor: pointer; } #sectionIndex .matter .matter-content .details-box .content-box .list-box { width: 732px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box { width: 100%; background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; padding: 18px 20px 0; margin-bottom: 12px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head { margin-bottom: 14px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .avatar { width: 28px; height: 28px; border-radius: 50%; margin-right: 8px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .name { font-style: normal; color: #555555; font-size: 14px; margin-right: 8px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .group { height: 15px; margin-right: 8px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .time { font-size: 13px; color: #aaaaaa; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .view { font-size: 12px; color: #aaaaaa; margin-right: 15px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .view .icon { width: 13px; height: 8px; margin-right: 5px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .btn { width: 24px; height: 16px; background-color: #f2f2f2; border-radius: 150px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .btn .icon { width: 18px; height: 18px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .label { margin-bottom: 10px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .label .item { font-size: 14px; color: #555555; padding: 0 9px; height: 24px; line-height: 24px; background-color: #f2f2f2; border-radius: 6px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .label .item.icon { padding: 0; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .label .item:not(:last-child) { margin-right: 10px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .label .item.blue { color: #ffffff; background-color: #04b0d5; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .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; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .message { font-size: 14px; color: #555555; white-space: pre-wrap; margin-bottom: 15px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .comment { height: 40px; background-color: #f6f6f6; border-radius: 10px; padding: 0 10px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .comment .icon { width: 20px; height: 20px; border-radius: 50%; margin-right: 10px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .comment .text { font-size: 14px; color: #7f7f7f; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom { height: 55px; justify-content: flex-end; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom .bottom-item { cursor: pointer; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom .bottom-item:not(:last-child) { margin-right: 60px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom .bottom-item .icon { width: 20px; height: 20px; margin-right: 8px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom .bottom-item .text { color: #aaaaaa; font-size: 13px; } #sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom .bottom-item.like .icon { width: 18px; height: 18px; } #sectionIndex .matter .matter-content .details-box .side-box { width: 291px; height: 300px; background-color: #ecf9fa; border-radius: 10px; }