diff --git a/app.vue b/app.vue index 1e21bc9..518c0e6 100644 --- a/app.vue +++ b/app.vue @@ -31,7 +31,15 @@ onMounted(() => { if (!isProduction) { isNeedLogin.value = false // setTimeout(() => isGetLoginState.value = false, 10000) - + userInfo.value = { + "username": "", + "uid": 256624, + "uin": 4171117, + "avatar": "https://oss.x-php.com/avatar/97K4EWIMLrsbGTWXslC1XFxTFauOikN42jDKLNjtax7HLtRjKcKMSdU9oWFhY2E~/small?random=1739160957", + "messagenum": 0, + "newprompt": 1, + "todaysigned": 0, + } } else determineIsLogin() // determineIsLogin() @@ -51,6 +59,7 @@ onMounted(() => { }) let isNeedLogin = ref(true) // 是否需要登录状态 +let userInfo = ref({}) let isGetLoginState = ref(true) // 在获取登录状态 false 代表没有已经确定了 // 判断是否登录状态 @@ -60,7 +69,10 @@ const determineIsLogin = () => { if (Object.keys(window["userInfoWin"]).length !== 0) { clearInterval(timer) isGetLoginState.value = false - if (window["userInfoWin"]["uid"] || window["userInfoWin"]["uin"]) isNeedLogin.value = false + if (window["userInfoWin"]["uid"] || window["userInfoWin"]["uin"]) { + isNeedLogin.value = false + userInfo.value = window["userInfoWin"] + } } count++ if (count >= 30) { @@ -80,6 +92,7 @@ const goLogin = () => { } provide("isNeedLogin", isNeedLogin) +provide("userInfo", userInfo) provide("goLogin", goLogin) provide("isGetLoginState", isGetLoginState) diff --git a/assets/css/details.css b/assets/css/details.css new file mode 100644 index 0000000..7c1c6e2 --- /dev/null +++ b/assets/css/details.css @@ -0,0 +1,1569 @@ +@font-face { + font-family: "emojifont"; + src: url("https://oss.x-php.com/static/riposte/emojifont-sbix.ttf?t=mj"); +} +.content { + width: 1200px; + margin: 0 auto 60px; + background: #fff; + border-radius: 15px; + font-family: PingFangSC-Regular, PingFang SC, sans-serif; +} +.content .left { + width: 376px; + border-right: 16px solid #f6f6f6; + padding-top: 30px; + height: calc(100vh - 70px); + overflow: auto; + display: flex; + flex-direction: column; +} +.content .left .school-box { + flex-direction: column; + margin-bottom: 40px; + text-align: center; +} +.content .left .school-box .school-box-icon { + height: 52px; +} +.content .left .school-box .school-box-icon .school-icon { + width: 40px; + height: 40px; + margin-bottom: 12px; +} +.content .left .school-box .school-name { + font-weight: 650; + font-size: 15px; + color: #000000; + margin-bottom: 7px; + height: 28px; +} +.content .left .school-box .school-en-name { + color: #555555; + font-size: 13px; + height: 18px; +} +.content .left .mj-total { + color: #7f7f7f; + line-height: 22px; + font-size: 13px; + margin-bottom: 20px; + padding: 0 30px; +} +.content .left .mj-total .value { + font-weight: 650; + color: #000000; + margin: 0 5px; +} +.content .left .mj-list { + scrollbar-width: none; + -ms-overflow-style: none; + margin-right: 9px; + padding: 0 30px 15px; + flex: 1; + overflow: auto; +} +.content .left .mj-list::-webkit-scrollbar { + width: 0 !important; +} +.content .left .mj-list .mj-item { + flex-direction: column; + margin-bottom: 15px; + padding: 14px 12px; + z-index: 1; + cursor: pointer; + position: relative; +} +.content .left .mj-list .mj-item.recommend .mj-header { + display: inline-block; +} +.content .left .mj-list .mj-item.recommend .mj-header .label { + height: 20px; + background-color: rgba(253, 223, 109, 0.11764706); + border: 1px solid #e4c762; + border-radius: 5px; + font-size: 12px; + color: #e4c762; + text-align: center; + display: inline-flex; + margin-right: 10px; +} +.content .left .mj-list .mj-item.recommend .mj-header .label .label-text { + width: 20px; + height: 20px; + background-color: #e4c762; + border-radius: 5px; + font-size: 12px; + color: #ffffff; +} +.content .left .mj-list .mj-item.recommend .mj-header .label .label-title { + padding: 0 5px; + height: 100%; + display: flex; + align-items: center; +} +.content .left .mj-list .mj-item.recommend .mj-header h1 { + display: inline; + font-weight: 650; + font-size: 14px; + color: #000000; + line-height: 26px; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} +.content .left .mj-list .mj-item.recommend .thread-text { + color: #555555; + font-size: 13px; +} +.content .left .mj-list .mj-item.recommend .thread-text .ask-label { + color: #7f7f7f; +} +.content .left .mj-list .mj-item.recommend .vote-list { + color: #555555; + font-size: 13px; +} +.content .left .mj-list .mj-item.recommend .vote-list .vote-item:not(:last-of-type) { + margin-bottom: 6px; +} +.content .left .mj-list .mj-item:hover::after { + content: ""; + position: absolute; + background: #f6f6f6; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 10px; + z-index: -1; +} +.content .left .mj-list .mj-item.pitch::before, +.content .left .mj-list .mj-item.pitch::after { + content: ""; + position: absolute; + background: #72db86; +} +.content .left .mj-list .mj-item.pitch::after { + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 10px; + z-index: -1; +} +.content .left .mj-list .mj-item.pitch::before { + top: 50%; + left: 100%; + width: 10px; + height: 10px; + transform: translate(-64%, -50%) rotate(45deg); +} +.content .left .mj-list .mj-item.pitch .mj-header .user-name { + color: #fff; +} +.content .left .mj-list .mj-item.pitch .mj-header .time { + color: #fff; +} +.content .left .mj-list .mj-item.pitch .info-list .info-item .info-name { + color: #fff; +} +.content .left .mj-list .mj-item.pitch .info-list .info-item .info-value { + color: #fff; +} +.content .left .mj-list .mj-item .item-bj { + width: 100%; + height: 100%; + z-index: -1; + position: absolute; + top: 0; + left: 0; + display: none; +} +.content .left .mj-list .mj-item .mj-header { + font-size: 12px; + margin-bottom: 12px; +} +.content .left .mj-list .mj-item .mj-header .mj-avatar { + width: 20px; + height: 20px; + margin-right: 10px; + border-radius: 50%; +} +.content .left .mj-list .mj-item .mj-header .user-name { + color: #555; + margin-right: 10px; +} +.content .left .mj-list .mj-item .mj-header .time { + color: #aaa; +} +.content .left .mj-list .mj-item .info-list { + flex-direction: column; +} +.content .left .mj-list .mj-item .info-list .info-item { + line-height: 20px; +} +.content .left .mj-list .mj-item .info-list .info-item:not(:last-of-type) { + margin-bottom: 8px; +} +.content .left .mj-list .mj-item .info-list .info-item .info-name { + color: #7f7f7f; + font-size: 13px; + margin-right: 10px; +} +.content .left .mj-list .mj-item .info-list .info-item .info-value { + color: #333333; + font-size: 13px; +} +.content .right { + overflow: auto; + padding: 5px 0; + scrollbar-width: none; + -ms-overflow-style: none; + position: relative; +} +.content .right::-webkit-scrollbar { + width: 0 !important; +} +.content .right .header { + padding: 30px 30px 25px 45px; + border-bottom: 1px solid #ebebeb; +} +.content .right .header .titletitle { + font-size: 24px; + font-weight: 650; + color: #000000; + margin-bottom: 15px; +} +.content .right .header .mj-header-left { + position: relative; +} +.content .right .header .mj-header { + line-height: 22px; + font-size: 13px; + justify-content: space-between; +} +.content .right .header .mj-header .mj-avatar { + width: 24px; + height: 24px; + margin-right: 10px; + border-radius: 50%; +} +.content .right .header .mj-header .user-name { + color: #333333; + margin-right: 10px; +} +.content .right .header .mj-header .time { + color: #aaaaaa; +} +.content .right .header .mj-header .mj-header-right { + color: #333; + font-size: 14px; + cursor: pointer; +} +.content .right .header .mj-header .mj-header-right .original-icon { + width: 18px; + height: 16px; + margin-right: 7px; +} +.content .right .details-box { + border-bottom: 1px solid #ebebeb; + padding-top: 41px; +} +.content .right .details-box .details-item { + margin-bottom: 40px; +} +.content .right .details-box .details-item .details-top { + font-weight: 650; + font-size: 14px; + color: #000000; + padding-left: 60px; + position: relative; + margin-bottom: 21px; +} +.content .right .details-box .details-item .details-top::after { + content: ""; + width: 6px; + height: 10px; + position: absolute; + top: 5px; + left: 44px; + background-color: #62b1ff; + border-radius: 3px; +} +.content .right .details-box .details-item .details-list { + width: 733px; + margin-left: 60px; + padding: 20px; + background: inherit; + background-color: #f6f6f6; + border-radius: 10px; + font-size: 14px; +} +.content .right .details-box .details-item .details-list .details-list-item:not(:last-of-type) { + margin-bottom: 20px; +} +.content .right .details-box .details-item .details-list .details-list-item .details-name { + color: #555; + margin-right: 30px; +} +.content .right .details-box .details-item .details-list .details-list-item .details-value { + color: #000000; + white-space: break-spaces; + word-wrap: break-word; +} +.content .right .details-box .details-item .details-list .details-list-item .details-value.date { + font-weight: 900; + font-style: normal; + font-size: 16px; + color: #000000; + font-family: "Arial-Black", "Arial Black", sans-serif; +} +.content .right .details-box .details-item .details-list .details-list-item .details-value.describe { + font-size: 15px; + line-height: 30px; + position: relative; + width: 693px; +} +.content .right .details-box .details-item .details-list .details-list-item .details-value.describe .unlock-mask { + display: none; +} +.content .right .details-box .details-item .details-list .details-list-item .details-value.describe.unlock-unlock { + height: 180px; +} +.content .right .details-box .details-item .details-list .details-list-item .details-value.describe.unlock-unlock .text { + height: 180px; + overflow: hidden; +} +.content .right .details-box .details-item .details-list .details-list-item .details-value.describe.unlock-unlock .unlock-mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(to top, #f6f6f6 70%, transparent); + font-size: 14px; + color: #000000; + flex-direction: column; + align-items: center; + justify-content: flex-end; + padding-bottom: 38px; + line-height: normal; + display: flex; +} +.content .right .details-box .details-item .details-list .details-list-item .details-value.describe.unlock-unlock .unlock-mask .unlock-text-box { + flex-direction: column; + position: relative; +} +.content .right .details-box .details-item .details-list .details-list-item .details-value.describe.unlock-unlock .unlock-mask .unlock-text { + padding-top: 7px; + cursor: pointer; +} +.content .right .details-box .details-item .details-list .details-list-item .details-value.describe.unlock-unlock .unlock-mask .emphasis { + font-weight: 650; + color: #fa6b11; +} +.content .right .respond-area { + border-bottom: 1px solid #ebebeb; + padding: 40px 45px 30px; +} +.content .right .respond-area .respond-title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + color: #000000; + font-size: 16px; + line-height: 20px; + margin-bottom: 20px; +} +.content .right .respond-area .respond-title .value { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + color: #555555; + margin-left: 5px; + flex: 1; +} +.content .right .respond-area .respond-title .respond-list-btn { + font-weight: 400; + cursor: pointer; + color: #555555; + font-size: 13px; + display: flex; + align-items: center; +} +.content .right .respond-area .respond-title .respond-list-btn .respond-list-btn-amount { + font-weight: 650; + color: #333; + margin: 0 5px; +} +.content .right .respond-area .respond-title .respond-list-btn .respond-list-btn-icon { + width: 6px; + margin-left: 5px; +} +.content .right .respond-area .respond-no-box { + width: 382px; + height: 40px; + background-color: #ffffff; + border: 1px solid #ebebeb; + border-radius: 40px 208px 208px 40px; +} +.content .right .respond-area .respond-no-box /deep/ .respond-add { + margin: 5px; +} +.content .right .respond-area .respond-no-box .respond-no { + display: flex; + justify-content: space-around; +} +.content .right .respond-area .respond-no-box .respond-no .code { + margin-right: 4px; + line-height: 30px; + font-size: 16px; + font-family: "emojifont"; + cursor: pointer; + user-select: none; +} +.content .right .respond-area .respond-box { + display: flex; + flex-wrap: wrap; +} +.content .right .respond-area .respond-box .respond-item { + font-size: 12px; + color: #555555; + height: 30px; + border: 1px solid #d7d7d7; + background: #fff; + border-radius: 8px; + padding: 0 6px; + display: inline-flex; + margin-right: 10px; + margin-bottom: 10px; + cursor: pointer; + user-select: none; +} +.content .right .respond-area .respond-box .respond-item .code { + margin-right: 4px; + line-height: 30px; + font-size: 16px; + font-family: "emojifont"; + user-select: none; +} +.content .right .respond-area .respond-box .respond-item.pitch { + border: none; + background: #f6f6f6; +} +.content .right .respond-area .respond-box .respond-select { + width: 250px; + height: 30px; + background-color: #ffffff; + border: 1px solid #ebebeb; + border-radius: 208px; +} +.content .right .respond-area .respond-box .respond-select .respond-select-box { + justify-content: space-around; +} +.content .right .respond-area .respond-box .respond-select .respond-select-box .respond-select-item { + cursor: pointer; + font-size: 16px; + font-family: "emojifont"; + line-height: 30px; +} +.content .right .emoji-box-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} +.content .right .comment-box { + padding-top: 40px; + padding-left: 45px; +} +.content .right .comment-box .comment-title { + font-size: 16px; + line-height: 20px; + font-weight: 650; + color: #000000; + margin-bottom: 16px; +} +.content .right .comment-box .comment-title .value { + color: #555; + font-weight: 400; + margin-left: 5px; +} +.content .right .comment-box .post-comment { + width: 749px; + background-color: #ffffff; + border: 1px solid #d7d7d7; + border-radius: 6px; + margin-bottom: 30px; + transition: all 5s; + overflow: hidden; + position: relative; +} +.content .right .comment-box .post-comment.post-comment-focus .post-input /deep/ .el-textarea__inner { + min-height: 200px !important; + max-height: 80vh; + padding-bottom: 52px; +} +.content .right .comment-box .post-comment.post-comment-focus .post-input /deep/ .el-input__count { + display: block; + left: 10px; +} +.content .right .comment-box .post-comment.post-comment-focus .post-ok { + height: 32px; + bottom: 10px; + right: 10px; +} +.content .right .comment-box .post-comment.post-comment-focus .post-comment-input { + width: 749px; +} +.content .right .comment-box .post-comment .post-comment-input { + width: 690px; +} +.content .right .comment-box .post-comment .post-input { + height: 100%; + border: none; + outline: none; + background-color: transparent; + outline-color: #62b1ff; + font-size: 14px; + resize: none; + scrollbar-width: none; + -ms-overflow-style: none; +} +.content .right .comment-box .post-comment .post-input::placeholder { + color: #aaaaaa; +} +.content .right .comment-box .post-comment .post-input::-webkit-scrollbar { + width: 0 !important; +} +.content .right .comment-box .post-comment .post-input { + background-color: transparent; + font-size: 14px; + resize: none; + transition: all 0.5s; + scrollbar-width: none; + -ms-overflow-style: none; + border: none; +} +.content .right .comment-box .post-comment .post-input::placeholder { + color: #aaaaaa; +} +.content .right .comment-box .post-comment .post-input::-webkit-scrollbar { + width: 0 !important; +} +.content .right .comment-box .post-comment .post-input /deep/ .el-textarea__inner { + border: none; + box-shadow: none; + resize: none; + min-height: 60px !important; + padding: 10px; + transition: all 0.5s; +} +.content .right .comment-box .post-comment .post-input /deep/ .el-input__count { + display: none; +} +.content .right .comment-box .post-comment .post-ok { + width: 60px; + height: 62px; + background-color: #62b1ff; + color: #fff; + font-size: 14px; + cursor: pointer; + border-radius: 6px; + transition: all 0.5s; + position: absolute; + bottom: 0; + right: 0; +} +.content .right .comment-box .input-box { + background-color: #f6f6f6; + border-radius: 10px; + padding-top: 11px; + display: flex; + justify-content: space-between; + flex-direction: column; + margin-right: 30px; + position: relative; +} +.content .right .comment-box .input-box .top { + padding: 0 14px; + position: relative; +} +.content .right .comment-box .input-box .top .input-placeholder { + color: #7f7f7f; + pointer-events: none; + font-size: 14px; + position: absolute; + top: 0; + left: 14px; +} +.content .right .comment-box .input-box .top .avatar { + width: 24px; + height: 24px; + border-radius: 50%; + display: block; + margin-right: 10px; +} +.content .right .comment-box .input-box .top .input-textarea { + font-size: 14px; + border: none; + outline: none; + background-color: transparent; + min-height: 80px; + padding-bottom: 11px; +} +.content .right .comment-box .input-box .top .input-textarea * { + background: transparent !important; + color: #000 !important; + border: none !important; + outline: none !important; + font-size: 14px !important; + padding: 0 !important; + margin: 0 !important; + width: auto !important; + height: auto !important; + border-radius: 0 !important; +} +.content .right .comment-box .input-box .top .input-textarea img { + display: none !important; +} +.content .right .comment-box .input-box .picture-box { + padding-bottom: 10px; + border-bottom: 1px dotted rgba(215, 215, 215, 0.501961); + padding-left: 14px; +} +.content .right .comment-box .input-box .picture-box .picture { + position: relative; + width: fit-content; +} +.content .right .comment-box .input-box .picture-box .picture .img { + height: 60px; + border-radius: 5px; + display: block; +} +.content .right .comment-box .input-box .picture-box .picture .close { + width: 17px; + height: 17px; + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + cursor: pointer; +} +.content .right .comment-box .input-box .bottom { + height: 52px; + padding: 0 14px; + justify-content: space-between; +} +.content .right .comment-box .input-box .bottom .operate .item { + display: inline-flex; + margin-right: 20px; + position: relative; + z-index: 1; +} +.content .right .comment-box .input-box .bottom .operate .item.pitch .emoji-box { + display: flex; +} +.content .right .comment-box .input-box .bottom .operate .item.pitch::after { + content: ""; + width: 28px; + height: 28px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + border-radius: 5px; + z-index: -1; +} +.content .right .comment-box .input-box .bottom .operate .item .icon { + width: 16px; + height: 16px; + cursor: pointer; + /* 鼠标悬停时显示为可点击 */ +} +.content .right .comment-box .input-box .bottom .operate .item .emoji-box { + width: 581px; + border-radius: 8px; + background-color: #fff; + filter: drop-shadow(0 0 11px rgba(0, 0, 0, 0.1)); + top: 45px; + position: absolute; + z-index: 1; + left: -14px; + border: 1px solid #ebebeb; + display: none; + flex-wrap: wrap; + font-size: 22px; + padding: 8px; +} +.content .right .comment-box .input-box .bottom .operate .item .emoji-box::after { + content: ""; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-bottom: 8px solid #ffffff; + position: absolute; + top: -8px; + left: 15px; +} +.content .right .comment-box .input-box .bottom .operate .item .emoji-box .emoji-icon { + margin: 5px; + cursor: pointer; +} +.content .right .comment-box .input-box .bottom .operate .item .file { + opacity: 0; + /* 隐藏输入框 */ + background: transparent; + border: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + cursor: pointer; +} +.content .right .comment-box .input-box .bottom .operate .item .file::after { + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} +.content .right .comment-box .input-box .bottom .operate .item:hover .file-hint { + display: inline-block; +} +.content .right .comment-box .input-box .bottom .operate .item .file-hint { + font-weight: 400; + color: #ffffff; + text-align: center; + font-size: 13px; + height: 22px; + line-height: 22px; + background-color: #333333; + border-radius: 137px; + padding: 0 8px; + margin-left: 9px; + display: none; +} +.content .right .comment-box .input-box .bottom .btn { + font-size: 14px; + color: #333; + width: 80px; + height: 28px; + line-height: 28px; + text-align: center; + background-color: #fddf6d; + border-radius: 43px; + cursor: pointer; +} +.content .right .comment-box .input-box .cross { + cursor: pointer; + height: 12px; + position: absolute; + right: 8px; + top: 5px; + width: 12px; + z-index: 2; +} +.content .right .comment-box .empty-box { + padding: 80px 0 110px; +} +.content .right .comment-box .comment-list { + margin-bottom: 78px; + padding-top: 17px; +} +.content .right .comment-box .comment-list .comment-item { + padding-right: 30px; +} +.content .right .comment-box .comment-list .comment-item:not(:first-of-type) .comment-avatar { + margin-top: 10px; +} +.content .right .comment-box .comment-list .comment-item:not(:first-of-type) .comment-header { + padding-top: 10px; + border-top: 1px dotted #d7d7d7; +} +.content .right .comment-box .comment-list .comment-item .comment-avatar { + width: 20px; + height: 20px; + border-radius: 50%; + margin-right: 10px; + cursor: pointer; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comment-header { + display: flex; + justify-content: space-between; + padding-right: 30px; + margin-bottom: 10px; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-left { + font-size: 13px; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-left .comments-avatar { + width: 20px; + height: 20px; + margin-right: 10px; + border-radius: 50%; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-left .comments-username { + color: #555; + margin-right: 10px; + cursor: pointer; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-left .comments-time { + color: #aaaaaa; + margin-right: 10px; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-left .comments-identity { + font-size: 12px; + color: #7f7f7f; + padding: 0 3px; + height: 20px; + background-color: #f0f2f5; + border: 1px solid #d7d7d7; + border-radius: 5px; + margin-right: 10px; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box { + position: relative; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box:hover .report-box { + display: flex; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .menu-icon { + width: 14px; + height: 14px; + cursor: pointer; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .report-box { + display: none; + position: absolute; + top: 24px; + right: 0; + width: 60px; + height: 24px; + background-color: #f6f6f6; + border: 1px solid #d7d7d7; + border-radius: 5px; + font-size: 12px; + color: #7f7f7f; + cursor: pointer; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .report-box::after { + content: ""; + width: 58px; + height: 36px; + position: absolute; + top: -14px; + right: 0; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .comment-icon { + width: 14px; + height: 13px; + margin-left: 30px; + cursor: pointer; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .like-box { + font-size: 12px; + color: #aaa; + margin-left: 30px; + cursor: pointer; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .like-box .like-icon { + width: 14px; + height: 14px; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .like-box .like-quantity { + margin-left: 6px; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comment-text { + font-size: 14px; + line-height: 22px; + color: #333; + margin-bottom: 10px; + word-break: break-all; + min-height: 22px; + cursor: pointer; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comment-text .comments-reply { + color: #92a1bf; + display: inline; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comments-img { + width: 75px; + margin-bottom: 13px; + border-radius: 5px; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comments-input-masking { + width: 100vw; + height: 100vh; + min-width: 1200px; + position: fixed; + top: 0; + left: 0; + z-index: 10; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comments-input-box { + margin-top: 13px; + transition: all 0.3s; + position: relative; + z-index: 11; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comments-input-box.comments-input-box-show { + height: 184px; + margin-bottom: 10px; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comments-input-box.comments-input-box-show::after { + content: ""; + width: 20px; + height: 20px; + display: block; + background-color: #d7d7d7; + position: absolute; + top: -2px; + left: 21px; + transform: rotate(45deg); + z-index: -1; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comments-input-box.comments-input-box-show .comments-input { + border: 1px solid #d7d7d7; + background-color: #fff; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comments-input-box.comments-input-box-show .comments-input /deep/ textarea { + height: 140px; + padding: 10px; + min-height: 40px !important; + overflow: auto; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comments-input-box.comments-input-box-show .comments-input /deep/ .el-input__count { + display: block; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comments-input-box.comments-input-box-show .comments-input .operate-bottom { + display: flex; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comments-input-box .comments-input { + flex: 1; + border-color: #fff; + border-radius: 8px; + position: relative; + z-index: 1; + transition: all 0.3s; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comments-input-box .comments-input /deep/ textarea { + border: none; + outline: none; + resize: none; + padding: 10px; + border-radius: 8px; + font-size: 14px; + width: 100%; + height: 0; + padding: 0 10px; + min-height: 0 !important; + transition: all 0.2s; + overflow: hidden; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comments-input-box .comments-input /deep/ .el-textarea__inner { + box-shadow: none; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comments-input-box .comments-input /deep/ .el-input__count { + left: 10px; + bottom: -32px; + width: fit-content; + display: none; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comments-input-box .comments-input /deep/ .el-textarea { + display: block; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comments-input-box .comments-input .operate-bottom { + justify-content: flex-end; + display: none; + transition: all 0.3s; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comments-input-box .comments-input .operate-bottom .comments-btn { + width: 60px; + height: 32px; + border-radius: 6px; + background-color: #62b1ff; + font-size: 14px; + color: #ffffff; + cursor: pointer; + margin-right: 10px; + margin-bottom: 10px; +} +.content .right .comment-box .comment-list .comment-item .comment-content .comments-input-box .comments-input .operate-bottom .comments-btn.comments-btn-cancel { + border: 1px solid #cccccc; + color: #797979; + background-color: #fff; +} +.content .right .comment-box .comment-list .comment-item .child-comments .comment-avatar { + margin-top: 10px; +} +.content .right .comment-box .comment-list .comment-item .child-comments .comment-header { + padding-top: 10px; + border-top: 1px dotted #d7d7d7; +} +.content .right .comment-box .comment-list .comment-item .child-comments .comment-item { + padding-right: 0; +} +.content .right .comment-box .comment-list .comment-item .comments-also { + color: #62b1ff; + line-height: 22px; + font-size: 13px; + height: 46px; + margin-left: 30px; + cursor: pointer; + border-top: 1px dotted #d7d7d7; +} +.content .right .comment-box .comment-list .comment-item .comments-also .also-icon { + width: 10px; + height: 10px; + margin-left: 8px; +} +.content .right .comment-box .comment-list .input-box { + margin-bottom: 10px; +} +.content .right .comment-box .comment-end { + font-size: 12px; + color: #d7d7d7; + text-align: center; + margin-bottom: 118px; + padding-right: 30px; +} +.content .floor-area { + position: fixed; + left: 0; + bottom: 0; + width: 100vw; + min-width: 1200px; + height: 70px; + z-index: 11; + background-color: #ffffff; + -moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.19215686); + -webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.19215686); + box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.19215686); +} +.content .floor-area .floor-content { + width: 1200px; + height: 100%; + margin: 0 auto; + padding: 0 30px; + display: flex; + justify-content: space-between; +} +.content .floor-area .floor-content .floor-left { + height: 40px; + border-radius: 150px; + padding: 0 20px; +} +.content .floor-area .floor-content .floor-left .item { + cursor: pointer; + color: #aaaaaa; + font-size: 13px; +} +.content .floor-area .floor-content .floor-left .item:not(:last-of-type) { + margin-right: 40px; +} +.content .floor-area .floor-content .floor-left .item .icon { + margin-right: 5px; +} +.content .floor-area .floor-content .floor-left .item .icon.h16 { + height: 16px; +} +.content .floor-area .floor-content .floor-left .item .icon.h15 { + height: 15px; +} +.content .floor-area .floor-content .floor-left .item .icon.h8 { + height: 8px; +} +.content .floor-area .floor-content .floor-left .item.operate-item { + position: relative; + display: flex; + justify-content: center; +} +.content .floor-area .floor-content .floor-middle { + min-width: 247px; + height: 40px; + background-color: #f6f6f6; + border-radius: 150px; +} +.content .floor-area .floor-content .floor-middle .coin-content { + padding: 0 20px 0 16px; + height: 100%; +} +.content .floor-area .floor-content .floor-middle .coin-content .coin-icon { + width: 20px; + height: 24px; + margin-right: 5px; + margin-top: -2px; +} +.content .floor-area .floor-content .floor-middle .coin-content .coin-text { + font-size: 13px; + color: #333333; +} +.content .floor-area .floor-content .floor-middle .coin-content .coin-text .coin-value { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + margin: 0 5px; +} +.content .floor-area .floor-content .floor-middle .coin-btn { + width: 80px; + height: 40px; + background-color: #72db86; + border-radius: 150px; + color: #ffffff; + font-size: 13px; + cursor: pointer; +} +.content .floor-area .floor-content .floor-right { + color: #7f7f7f; + font-size: 13px; + cursor: pointer; +} +.content .floor-area .floor-content .floor-right .arrows-icon { + width: 12px; + height: 12px; + margin: 0 10px; +} +.content .floor-area .floor-content .floor-right .QR-code-ball { + width: 40px; + height: 40px; + background-color: #f6f6f6; + border-radius: 20px; + cursor: pointer; +} +.transmit-box { + width: 628px; + border-radius: 10px; + justify-content: space-between; + padding: 40px 35px 42px; + cursor: auto; +} +.transmit-box .cross-icon { + width: 22px; + height: 22px; + position: absolute; + top: 6px; + right: 6px; + cursor: pointer; + padding: 6px; +} +.transmit-box .transmit-title { + font-weight: 650; + font-size: 16px; + color: #000000; + line-height: 24px; + margin-bottom: 24px; +} +.transmit-box .transmit-content { + border: 1px solid #f2f2f2; + border-radius: 16px; +} +.transmit-box .transmit-web .transmit-content { + width: 300px; + font-size: 14px; + line-height: 24px; + padding: 14px 16px; + margin-bottom: 32px; +} +.transmit-box .transmit-web .transmit-content .transmit-headline { + color: #333333; +} +.transmit-box .transmit-web .transmit-content .transmit-url { + color: #aaaaaa; + word-wrap: break-word; +} +.transmit-box .transmit-web .transmit-web-btn { + width: 120px; + height: 38px; + background-color: #72db86; + border-radius: 8px; + font-size: 14px; + color: #fff; + cursor: pointer; +} +.transmit-box .transmit-mini .transmit-content { + flex-direction: column; + padding: 22px 44px; + color: #555555; + font-size: 13px; +} +.transmit-box .transmit-mini .transmit-content .transmit-mini-img { + width: 90px; + height: 90px; + margin-bottom: 21px; +} +.transmit-box .transmit-mini .transmit-content .give-sweep { + width: 12px; + height: 12px; + margin-right: 8px; +} +.examine-code { + width: 113px; + height: 113px; +} +.pop-masking { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.6); + z-index: 10; +} +.pop-masking * { + box-sizing: content-box; +} +.pop-masking .slit-pop-box { + width: 433px; + border: 1px solid #e5e5e5; + background-color: #fff; + border-radius: 20px; + padding: 60px 50px 48px 38px; + display: flex; + -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); +} +.pop-masking .slit-pop-box .slit-left-icon { + width: 50px; + height: 60px; +} +.pop-masking .slit-pop-box .slit-box { + flex: 1; + margin-left: 15px; +} +.pop-masking .slit-pop-box .slit-box .slit-head { + display: flex; + align-items: center; + justify-content: space-between; + height: 54px; +} +.pop-masking .slit-pop-box .slit-box .slit-head .slit-head-title { + font-weight: 650; + font-size: 20px; + color: #333; +} +.pop-masking .slit-pop-box .slit-box .slit-head .in-all { + font-size: 13px; + color: #7f7f7f; + font-weight: 400; +} +.pop-masking .slit-pop-box .slit-box .slit-head .in-all > span { + color: #000; + font-weight: 650; +} +.pop-masking .slit-pop-box .slit-box .coin-quantity { + display: flex; + align-items: center; + margin-bottom: 27px; + margin-top: 20px; +} +.pop-masking .slit-pop-box .slit-box .coin-quantity-item { + width: 78px; + height: 46px; + border: 1px solid #d7d7d7; + background-color: #f0f2f5; + border-radius: 5px; + font-size: 20px; + color: #000; + font-weight: 650; + line-height: 46px; + text-align: center; + cursor: pointer; + user-select: none; +} +.pop-masking .slit-pop-box .slit-box .coin-quantity-item > span { + color: #555; + font-weight: 400; + font-size: 14px; +} +.pop-masking .slit-pop-box .slit-box .coin-quantity-item:not(:last-of-type) { + margin-right: 16px; +} +.pop-masking .slit-pop-box .slit-box .coin-quantity-item.coin-pitch { + background-color: #333333; + border-color: #333333; + color: #fff; +} +.pop-masking .slit-pop-box .slit-box .coin-quantity-item.coin-pitch > span { + color: #fff; +} +.pop-masking .slit-pop-box .slit-box .slit-input { + width: 360px; + height: 38px; + padding-left: 8px; + border: 1px solid #d7d7d7; + outline: none; + border-radius: 8px; + /* 去掉number类型自带的加减按钮 */ + overflow: hidden; +} +.pop-masking .slit-pop-box .slit-box .slit-input::-webkit-outer-spin-button, +.pop-masking .slit-pop-box .slit-box .slit-input::-webkit-inner-spin-button { + -webkit-appearance: none; +} +.pop-masking .slit-pop-box .slit-box .slit-input[type="number"] { + -moz-appearance: textfield; +} +.pop-masking .slit-pop-box .slit-box .slit-input /deep/ .el-input__wrapper { + box-shadow: none; +} +.pop-masking .slit-pop-box .slit-box .message-box { + display: flex; + flex-direction: column; +} +.pop-masking .slit-pop-box .slit-box .message-box .message-hint { + color: #000; + font-size: 14px; + margin-top: 29px; + margin-bottom: 12px; +} +.pop-masking .slit-pop-box .slit-box .operation { + display: flex; + justify-content: flex-end; + margin-top: 48px; +} +.pop-masking .slit-pop-box .slit-box .operation .operation-item { + width: 120px; + height: 41px; + margin-left: 16px; + font-size: 16px; + color: #000; + border: 1px solid #797979; + border-radius: 45px; + cursor: pointer; +} +.pop-masking .slit-pop-box .slit-box .operation .operation-item.greenBj { + color: #fff; +} +.no-jituobi-pop-box { + width: 520px; + flex-direction: column; + border: 1px solid #e5e5e5; + background-color: #fff; + border-radius: 11px; + display: flex; + -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); + padding-bottom: 55px; + position: relative; +} +.no-jituobi-pop-box .no-jituobi-close { + width: 16px; + height: 16px; + cursor: pointer; + position: absolute; + top: 10px; + right: 10px; +} +.no-jituobi-pop-box .no-jituobi-head { + font-size: 15px; + color: #333; + margin: 38px auto 44px; +} +.no-jituobi-pop-box .no-jituobi-head .bi-icon { + width: 50px; + height: 60px; +} +.no-jituobi-pop-box .strategy-btn { + width: 198px; + height: 43px; + color: #fff; + font-size: 16px; + border-radius: 100px; + margin: 0 auto; + cursor: pointer; +} +.no-jituobi-pop-box .strategy-btn .strategy-icon { + width: 16px; + height: 16px; + margin-left: 8px; +} +.greenBj { + background-color: #72db86; + border-color: #72db86 !important; +} +.respond-pop-mask { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.6); + z-index: 10; + display: flex; + justify-content: center; + align-items: center; +} +.respond-pop-mask .respond-pop { + width: 600px; + height: 500px; + background-color: #fff; + border: 1px solid #e5e5e5; + border-radius: 20px; + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); + -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); +} +.respond-pop-mask .respond-pop .respond-pop-title { + height: 50px; + display: flex; + justify-content: center; + border-bottom: 1px dotted rgba(215, 215, 215, 0.5); + align-items: center; + color: #555555; + position: relative; +} +.respond-pop-mask .respond-pop .respond-pop-title .respond-pop-amount { + margin: 0 8px; + font-weight: 650; + color: #000000; +} +.respond-pop-mask .respond-pop .respond-pop-title .respond-title-icon { + position: absolute; + width: 20px; + right: 20px; + cursor: pointer; +} +.respond-pop-mask .respond-pop .respond-list { + overflow: auto; + height: 450px; +} +.respond-pop-mask .respond-pop .respond-list::-webkit-scrollbar-track { + border-radius: 10px; +} +.respond-pop-mask .respond-pop .respond-list::-webkit-scrollbar-thumb { + background-color: #0003; + border-radius: 10px; + transition: all 0.2s ease-in-out; +} +.respond-pop-mask .respond-pop .respond-list::-webkit-scrollbar { + width: 6px; +} +.respond-pop-mask .respond-pop .respond-list .respond-item { + display: flex; + padding: 20px 0 0 20px; +} +.respond-pop-mask .respond-pop .respond-list .respond-item:not(:last-of-type) .respond-content { + border-bottom: 1px dotted rgba(215, 215, 215, 0.5); +} +.respond-pop-mask .respond-pop .respond-list .respond-item .respond-code { + width: 60px; + height: 60px; + background-color: #f6f6f6; + border-radius: 10px; + font-family: "emojifont"; + font-size: 25px; + display: flex; + justify-content: center; + align-items: center; + margin-right: 20px; + cursor: pointer; + box-sizing: border-box; +} +.respond-pop-mask .respond-pop .respond-list .respond-item .respond-code.pitch { + background-color: #f6f6bd; + border: 1px solid #ccd003; +} +.respond-pop-mask .respond-pop .respond-list .respond-item .respond-content { + padding-bottom: 10px; +} +.respond-pop-mask .respond-pop .respond-list .respond-item .respond-content .respond-total { + font-size: 14px; + color: #7f7f7f; + margin-bottom: 10px; +} +.respond-pop-mask .respond-pop .respond-list .respond-item .respond-content .user-item { + font-size: 14px; + color: #555555; + display: inline-flex; + margin-right: 20px; + margin-bottom: 10px; + align-items: center; + cursor: pointer; +} +.respond-pop-mask .respond-pop .respond-list .respond-item .respond-content .user-item .user-avatar { + width: 26px; + height: 26px; + border-radius: 50%; + margin-right: 10px; +} +.respond-pop-mask .respond-pop .respond-pop-no { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: relative; +} +.respond-pop-mask .respond-pop .respond-pop-no .respond-title-icon { + position: absolute; + width: 20px; + top: 20px; + right: 20px; + cursor: pointer; +} +.respond-pop-mask .respond-pop .respond-pop-no .respond-pop-no-icon { + width: 90px; + margin-bottom: 15px; +} +.respond-pop-mask .respond-pop .respond-pop-no .respond-pop-no-text { + font-size: 13px; + color: #7f7f7f; + line-height: 22px; +} +.respond-list-box { + background: #f6f6f6; + border: 1px solid #ebebeb; + border-radius: 10px; + position: absolute; + top: 84px; + z-index: 1; +} +.respond-list-box::after { + content: ""; + background: #f6f6f6; + border: 1px solid #e4e7ed; + border-bottom-color: transparent !important; + border-right-color: transparent !important; + border-top-left-radius: 2px; + width: 10px; + height: 10px; + position: absolute; + top: -6px; + left: 50%; + transform: translateX(-50%) rotate(45deg); + z-index: 3000; +} +.respond-list-mask { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 1; +} +.detail-image-mask { + width: 100%; + height: 100%; + max-width: none; + max-height: none; + border: none; + position: fixed; + top: 0; + left: 0; + background-color: rgba(255, 255, 255, 0.8); + z-index: 100; +} +.detail-image-mask .detail-image { + width: 80vw; + height: 80vh; + border-radius: 8px; + background-color: #111; +} +.detail-image-mask .detail-image .detail-img { + max-width: 100%; + max-height: 100%; +} diff --git a/assets/css/details.less b/assets/css/details.less new file mode 100644 index 0000000..a8c8fe7 --- /dev/null +++ b/assets/css/details.less @@ -0,0 +1,1860 @@ +@font-face { + font-family: "emojifont"; + src: url("https://oss.x-php.com/static/riposte/emojifont-sbix.ttf?t=mj"); +} +.content { + width: 1200px; + margin: 0 auto 60px; + background: #fff; + border-radius: 15px; + font-family: PingFangSC-Regular, PingFang SC, sans-serif; + // position: sticky; + // top: 30px; + // left: 50%; + // transform: translateX(-50%); + .left { + width: 376px; + border-right: 16px solid #f6f6f6; + padding-top: 30px; + height: calc(100vh - 70px); + overflow: auto; + display: flex; + flex-direction: column; + + .school-box { + flex-direction: column; + margin-bottom: 40px; + text-align: center; + + .school-box-icon { + height: 52px; + + .school-icon { + width: 40px; + height: 40px; + margin-bottom: 12px; + } + } + .school-name { + font-weight: 650; + font-size: 15px; + color: #000000; + margin-bottom: 7px; + height: 28px; + } + + .school-en-name { + color: #555555; + font-size: 13px; + height: 18px; + } + } + + .mj-total { + color: #7f7f7f; + line-height: 22px; + font-size: 13px; + margin-bottom: 20px; + padding: 0 30px; + + .value { + font-weight: 650; + color: #000000; + margin: 0 5px; + } + } + + .mj-list { + // &::-webkit-scrollbar { + // width: 6px !important; + // } + + &::-webkit-scrollbar { + width: 0 !important; + } + + scrollbar-width: none; + -ms-overflow-style: none; + + margin-right: 9px; + padding: 0 30px 15px; + flex: 1; + overflow: auto; + + .mj-item { + flex-direction: column; + margin-bottom: 15px; + padding: 14px 12px; + position: relative; + z-index: 1; + cursor: pointer; + position: relative; + + &.recommend { + .mj-header { + display: inline-block; + .label { + // width: 60px; + height: 20px; + background-color: rgba(253, 223, 109, 0.117647058823529); + border: 1px solid rgba(228, 199, 98, 1); + border-radius: 5px; + font-size: 12px; + color: #e4c762; + text-align: center; + display: inline-flex; + margin-right: 10px; + + .label-text { + width: 20px; + height: 20px; + background-color: rgba(228, 199, 98, 1); + border-radius: 5px; + font-size: 12px; + color: #ffffff; + } + .label-title { + padding: 0 5px; + height: 100%; + // line-height: 20px; + display: flex; + align-items: center; + } + } + + h1 { + display: inline; + font-weight: 650; + font-size: 14px; + color: #000000; + line-height: 26px; + // display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } + } + + .thread-text { + color: #555555; + font-size: 13px; + .ask-label { + color: #7f7f7f; + } + } + + .vote-list { + color: #555555; + font-size: 13px; + .vote-item { + &:not(:last-of-type) { + margin-bottom: 6px; + } + } + } + } + + &:hover::after { + content: ""; + position: absolute; + background: #f6f6f6; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 10px; + z-index: -1; + } + + &.pitch { + &::before, + &::after { + content: ""; + position: absolute; + background: rgb(114, 219, 134); + } + + &::after { + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 10px; + z-index: -1; + } + + &::before { + top: 50%; + left: 100%; + width: 10px; + height: 10px; + transform: translate(-64%, -50%) rotate(45deg); + } + .mj-header { + .user-name { + color: #fff; + } + + .time { + color: #fff; + } + } + + .info-list { + .info-item { + .info-name { + color: #fff; + } + .info-value { + color: #fff; + } + } + } + } + .item-bj { + width: 100%; + height: 100%; + z-index: -1; + position: absolute; + top: 0; + left: 0; + display: none; + } + + .mj-header { + font-size: 12px; + margin-bottom: 12px; + + // justify-content: space-between; + + .mj-avatar { + width: 20px; + height: 20px; + margin-right: 10px; + border-radius: 50%; + } + + .user-name { + color: #555; + margin-right: 10px; + } + + .time { + color: #aaa; + } + } + + .info-list { + flex-direction: column; + + .info-item { + line-height: 20px; + &:not(:last-of-type) { + margin-bottom: 8px; + } + .info-name { + color: #7f7f7f; + font-size: 13px; + margin-right: 10px; + } + .info-value { + color: #333333; + font-size: 13px; + } + } + } + } + } + } + + .right { + // height: calc(100vh - 80px); + overflow: auto; + padding: 5px 0; + + &::-webkit-scrollbar { + width: 0 !important; + } + + scrollbar-width: none; + -ms-overflow-style: none; + position: relative; + + .header { + padding: 30px 30px 25px 45px; + border-bottom: 1px solid #ebebeb; + .titletitle { + font-size: 24px; + font-weight: 650; + color: #000000; + margin-bottom: 15px; + } + + .mj-header-left { + position: relative; + } + + .mj-header { + line-height: 22px; + font-size: 13px; + justify-content: space-between; + .mj-avatar { + width: 24px; + height: 24px; + margin-right: 10px; + border-radius: 50%; + } + .user-name { + color: #333333; + margin-right: 10px; + } + .time { + color: #aaaaaa; + } + + .mj-header-right { + color: #333; + font-size: 14px; + cursor: pointer; + .original-icon { + width: 18px; + height: 16px; + margin-right: 7px; + } + } + } + } + + .details-box { + border-bottom: 1px solid #ebebeb; + padding-top: 41px; + + .details-item { + margin-bottom: 40px; + .details-top { + font-weight: 650; + font-size: 14px; + color: #000000; + padding-left: 60px; + position: relative; + margin-bottom: 21px; + + &::after { + content: ""; + width: 6px; + height: 10px; + position: absolute; + top: 5px; + left: 44px; + background-color: rgba(98, 177, 255, 1); + border-radius: 3px; + } + } + + .details-list { + width: 733px; + margin-left: 60px; + padding: 20px; + background: inherit; + background-color: rgba(246, 246, 246, 1); + border-radius: 10px; + font-size: 14px; + + .details-list-item { + &:not(:last-of-type) { + margin-bottom: 20px; + } + .details-name { + color: #555; + margin-right: 30px; + } + + .details-value { + color: #000000; + white-space: break-spaces; + word-wrap: break-word; + // width: 693px; + &.date { + font-weight: 900; + font-style: normal; + font-size: 16px; + color: #000000; + font-family: "Arial-Black", "Arial Black", sans-serif; + } + + &.describe { + font-size: 15px; + line-height: 30px; + position: relative; + width: 693px; + // overflow: hidden; + + .unlock-mask { + display: none; + } + + &.unlock-unlock { + // overflow: hidden; + height: 180px; + .text { + height: 180px; + overflow: hidden; + } + + .unlock-mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(to top, rgba(246, 246, 246, 1) 70%, transparent); + font-size: 14px; + color: #000000; + flex-direction: column; + align-items: center; + justify-content: flex-end; + padding-bottom: 38px; + line-height: normal; + display: flex; + .unlock-text-box { + flex-direction: column; + position: relative; + } + + .unlock-text { + padding-top: 7px; + cursor: pointer; + } + + .emphasis { + font-weight: 650; + color: #fa6b11; + } + } + } + } + } + } + } + } + } + + .respond-area { + border-bottom: 1px solid #ebebeb; + padding: 40px 45px 30px; + + .respond-title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + color: #000000; + font-size: 16px; + line-height: 20px; + margin-bottom: 20px; + + .value { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + color: #555555; + margin-left: 5px; + flex: 1; + } + + .respond-list-btn { + font-weight: 400; + cursor: pointer; + color: #555555; + font-size: 13px; + display: flex; + align-items: center; + .respond-list-btn-amount { + font-weight: 650; + color: #333; + margin: 0 5px; + } + .respond-list-btn-icon { + width: 6px; + margin-left: 5px; + } + } + } + + .respond-no-box { + width: 382px; + height: 40px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 40px 208px 208px 40px; + + /deep/ .respond-add { + margin: 5px; + } + .respond-no { + display: flex; + justify-content: space-around; + + .code { + margin-right: 4px; + line-height: 30px; + font-size: 16px; + font-family: "emojifont"; + cursor: pointer; + user-select: none; + } + } + } + + .respond-box { + display: flex; + flex-wrap: wrap; + .respond-item { + font-size: 12px; + color: #555555; + height: 30px; + border: 1px solid #d7d7d7; + background: #fff; + border-radius: 8px; + padding: 0 6px; + display: inline-flex; + margin-right: 10px; + margin-bottom: 10px; + cursor: pointer; + user-select: none; + + .code { + margin-right: 4px; + line-height: 30px; + font-size: 16px; + font-family: "emojifont"; + user-select: none; + } + + &.pitch { + border: none; + background: #f6f6f6; + } + } + + .respond-select { + width: 250px; + height: 30px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 208px; + .respond-select-box { + justify-content: space-around; + .respond-select-item { + cursor: pointer; + font-size: 16px; + font-family: "emojifont"; + line-height: 30px; + } + } + } + } + } + + .emoji-box-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + } + + .comment-box { + padding-top: 40px; + padding-left: 45px; + .comment-title { + font-size: 16px; + line-height: 20px; + font-weight: 650; + color: #000000; + margin-bottom: 16px; + .value { + color: #555; + font-weight: 400; + margin-left: 5px; + } + } + .post-comment { + width: 749px; + // height: 60px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 6px; + margin-bottom: 30px; + + transition: all 5s; + overflow: hidden; + position: relative; + &.post-comment-focus { + .post-input { + /deep/ .el-textarea__inner { + // width: 468px; + min-height: 200px !important; + max-height: 80vh; + padding-bottom: 52px; + } + + /deep/ .el-input__count { + display: block; + left: 10px; + } + } + .post-ok { + height: 32px; + bottom: 10px; + right: 10px; + } + .post-comment-input { + width: 749px; + } + } + + .post-comment-input { + width: 690px; + } + + .post-input { + height: 100%; + border: none; + outline: none; + background-color: transparent; + outline-color: rgba(98, 177, 255, 1); + // padding: 10px; + font-size: 14px; + resize: none; + + &::placeholder { + color: #aaaaaa; + } + &::-webkit-scrollbar { + width: 0 !important; + } + + scrollbar-width: none; + -ms-overflow-style: none; + } + + .post-input { + background-color: transparent; + font-size: 14px; + resize: none; + transition: all 0.5s; + + &::placeholder { + color: #aaaaaa; + } + &::-webkit-scrollbar { + width: 0 !important; + } + + scrollbar-width: none; + -ms-overflow-style: none; + border: none; + + /deep/ .el-textarea__inner { + border: none; + box-shadow: none; + resize: none; + min-height: 60px !important; + // height: 60px !important; + padding: 10px; + transition: all 0.5s; + } + + /deep/ .el-input__count { + display: none; + } + } + + .post-ok { + width: 60px; + height: 62px; + background-color: rgba(98, 177, 255, 1); + color: #fff; + font-size: 14px; + cursor: pointer; + border-radius: 6px; + transition: all 0.5s; + position: absolute; + bottom: 0; + right: 0; + } + } + + .input-box { + background-color: rgba(246, 246, 246, 1); + border-radius: 10px; + padding-top: 11px; + display: flex; + justify-content: space-between; + flex-direction: column; + margin-right: 30px; + position: relative; + + .top { + padding: 0 14px; + position: relative; + + .input-placeholder { + color: #7f7f7f; + pointer-events: none; + font-size: 14px; + position: absolute; + top: 0; + left: 14px; + } + + .avatar { + width: 24px; + height: 24px; + border-radius: 50%; + display: block; + margin-right: 10px; + } + + .input-textarea { + font-size: 14px; + border: none; + outline: none; + background-color: transparent; + min-height: 80px; + padding-bottom: 11px; + // &.placeholder::after { + // content: "说说你的看法…"; + // color: #7f7f7f; + // pointer-events: none; + // } + + * { + background: transparent !important; + color: #000 !important; + border: none !important; + outline: none !important; + font-size: 14px !important; + padding: 0 !important; + margin: 0 !important; + width: auto !important; + height: auto !important; + border-radius: 0 !important; + } + + img { + display: none !important; + } + } + } + + .picture-box { + padding-bottom: 10px; + border-bottom: 1px dotted rgba(215, 215, 215, 0.501961); + padding-left: 14px; + + .picture { + position: relative; + width: fit-content; + + .img { + height: 60px; + border-radius: 5px; + display: block; + } + + .close { + width: 17px; + height: 17px; + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + cursor: pointer; + } + } + } + + .bottom { + height: 52px; + padding: 0 14px; + justify-content: space-between; + .operate { + .item { + display: inline-flex; + margin-right: 20px; + position: relative; + z-index: 1; + &.pitch { + .emoji-box { + display: flex; + } + &::after { + content: ""; + width: 28px; + height: 28px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + border-radius: 5px; + z-index: -1; + } + } + + .icon { + width: 16px; + height: 16px; + cursor: pointer; /* 鼠标悬停时显示为可点击 */ + } + + .emoji-box { + width: 581px; + border-radius: 8px; + background-color: #fff; + // box-shadow: 0 0 11px rgba(0, 0, 0, 0.1); + filter: drop-shadow(0 0 11px rgba(0, 0, 0, 0.1)); + top: 45px; + position: absolute; + z-index: 1; + left: -14px; + border: 1px solid rgb(235, 235, 235); + display: none; + flex-wrap: wrap; + font-size: 22px; + padding: 8px; + &::after { + content: ""; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-bottom: 8px solid #ffffff; + position: absolute; + top: -8px; + left: 15px; + } + .emoji-icon { + margin: 5px; + cursor: pointer; + } + } + + .file { + opacity: 0; /* 隐藏输入框 */ + background: transparent; + border: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + cursor: pointer; + + &::after { + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + } + } + + &:hover .file-hint { + display: inline-block; + } + + .file-hint { + font-weight: 400; + color: #ffffff; + text-align: center; + font-size: 13px; + height: 22px; + line-height: 22px; + background-color: rgba(51, 51, 51, 1); + border-radius: 137px; + padding: 0 8px; + margin-left: 9px; + display: none; + } + } + } + .btn { + font-size: 14px; + color: #333; + width: 80px; + height: 28px; + line-height: 28px; + text-align: center; + background-color: rgba(253, 223, 109, 1); + border-radius: 43px; + cursor: pointer; + } + } + + .cross { + cursor: pointer; + height: 12px; + position: absolute; + right: 8px; + top: 5px; + width: 12px; + z-index: 2; + } + } + + .empty-box { + padding: 80px 0 110px; + } + + .comment-list { + margin-bottom: 78px; + padding-top: 17px; + .comment-item { + // margin-top: 10px; + + &:not(:first-of-type) { + .comment-avatar { + margin-top: 10px; + } + + .comment-header { + padding-top: 10px; + border-top: 1px dotted #d7d7d7; + } + } + padding-right: 30px; + .comment-avatar { + width: 20px; + height: 20px; + border-radius: 50%; + margin-right: 10px; + cursor: pointer; + } + + .comment-content { + // padding-bottom: 12px; + + .comment-header { + display: flex; + justify-content: space-between; + padding-right: 30px; + margin-bottom: 10px; + + .comment-header-left { + font-size: 13px; + + .comments-avatar { + width: 20px; + height: 20px; + margin-right: 10px; + border-radius: 50%; + } + + .comments-username { + color: #555; + margin-right: 10px; + cursor: pointer; + } + + .comments-time { + color: #aaaaaa; + // margin-right: 8px; + margin-right: 10px; + } + + // .floor-left .comments-identity { + .comments-identity { + font-size: 12px; + color: #7f7f7f; + padding: 0 3px; + height: 20px; + background-color: rgba(240, 242, 245, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 5px; + margin-right: 10px; + } + } + .comment-header-right { + .menu-box { + position: relative; + + &:hover .report-box { + display: flex; + } + + .menu-icon { + width: 14px; + height: 14px; + cursor: pointer; + } + + .report-box { + display: none; + position: absolute; + top: 24px; + right: 0; + width: 60px; + height: 24px; + background-color: rgba(246, 246, 246, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 5px; + font-size: 12px; + color: #7f7f7f; + cursor: pointer; + + &::after { + content: ""; + width: 58px; + height: 36px; + position: absolute; + top: -14px; + right: 0; + } + } + } + + .comment-icon { + width: 14px; + height: 13px; + margin-left: 30px; + cursor: pointer; + } + + .like-box { + font-size: 12px; + color: #aaa; + margin-left: 30px; + cursor: pointer; + + .like-icon { + width: 14px; + height: 14px; + } + + .like-quantity { + margin-left: 6px; + } + } + } + } + + .comment-text { + font-size: 14px; + line-height: 22px; + color: #333; + margin-bottom: 10px; + word-break: break-all; + min-height: 22px; + cursor: pointer; + .comments-reply { + color: #92a1bf; + display: inline; + } + } + + .comments-img { + width: 75px; + margin-bottom: 13px; + border-radius: 5px; + } + + .comments-input-masking { + width: 100vw; + height: 100vh; + min-width: 1200px; + position: fixed; + top: 0; + left: 0; + z-index: 10; + } + + .comments-input-box { + margin-top: 13px; + // margin-bottom: 10px; + // height: 0; + // overflow: hidden; + transition: all 0.3s; + position: relative; + z-index: 11; + + &.comments-input-box-show { + height: 184px; + // overflow: visible; + margin-bottom: 10px; + &::after { + content: ""; + width: 20px; + height: 20px; + display: block; + background-color: rgba(215, 215, 215, 1); + position: absolute; + top: -2px; + left: 21px; + transform: rotate(45deg); + z-index: -1; + } + .comments-input { + border: 1px solid rgba(215, 215, 215, 1); + background-color: #fff; + + /deep/ textarea { + height: 140px; + padding: 10px; + min-height: 40px !important; + overflow: auto; + } + + /deep/ .el-input__count { + display: block; + } + + .operate-bottom { + display: flex; + } + } + } + + .comments-input { + // width: 519px; + flex: 1; + border-color: #fff; + // height: 60px; + // border: 1px solid rgba(215, 215, 215, 1); + // border-right: none; + border-radius: 8px; + // margin-right: 16px; + position: relative; + z-index: 1; + transition: all 0.3s; + + // background-color: #fff; + + // &::after { + // content: ""; + // width: 20px; + // height: 20px; + // display: block; + // background-color: rgba(215, 215, 215, 1); + // position: absolute; + // top: -2px; + // left: 21px; + // transform: rotate(45deg); + // z-index: -1; + // } + + /deep/ textarea { + border: none; + outline: none; + resize: none; + padding: 10px; + // border-radius: 7px 0 0 7px; + border-radius: 8px; + font-size: 14px; + width: 100%; + // height: 140px; + height: 0; + padding: 0 10px; + min-height: 0 !important; + transition: all 0.2s; + overflow: hidden; + } + + /deep/ .el-textarea__inner { + box-shadow: none; + } + + /deep/ .el-input__count { + left: 10px; + bottom: -32px; + width: fit-content; + display: none; + } + /deep/ .el-textarea { + display: block; + } + + .operate-bottom { + justify-content: flex-end; + display: none; + transition: all 0.3s; + .comments-btn { + width: 60px; + height: 32px; + border-radius: 6px; + + background-color: rgba(98, 177, 255, 1); + // border-radius: 0 7px 7px 0; + font-size: 14px; + color: #ffffff; + cursor: pointer; + margin-right: 10px; + margin-bottom: 10px; + + &.comments-btn-cancel { + border: 1px solid #cccccc; + color: #797979; + background-color: #fff; + } + } + } + } + + // .forkfork { + // width: 12px; + // height: 12px; + // cursor: pointer; + // } + } + } + + .child-comments { + .comment-avatar { + margin-top: 10px; + } + + .comment-header { + padding-top: 10px; + border-top: 1px dotted #d7d7d7; + } + + .comment-item { + padding-right: 0; + } + } + .comments-also { + color: #62b1ff; + line-height: 22px; + font-size: 13px; + height: 46px; + margin-left: 30px; + cursor: pointer; + border-top: 1px dotted #d7d7d7; + + .also-icon { + width: 10px; + height: 10px; + margin-left: 8px; + } + } + } + + .input-box { + margin-bottom: 10px; + } + } + + .comment-end { + font-size: 12px; + color: #d7d7d7; + text-align: center; + margin-bottom: 118px; + padding-right: 30px; + } + } + } + + .floor-area { + position: fixed; + left: 0; + bottom: 0; + width: 100vw; + min-width: 1200px; + height: 70px; + z-index: 11; + background-color: rgba(255, 255, 255, 1); + -moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098); + -webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098); + box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098); + .floor-content { + width: 1200px; + height: 100%; + margin: 0 auto; + padding: 0 30px; + display: flex; + justify-content: space-between; + // background: #000000; + + .floor-left { + // width: 373px; + height: 40px; + // background-color: rgba(98, 177, 255, 0.0980392156862745); + border-radius: 150px; + padding: 0 20px; + .item { + cursor: pointer; + color: #aaaaaa; + font-size: 13px; + &:not(:last-of-type) { + margin-right: 40px; + } + .icon { + // width: 16px; + &.h16 { + height: 16px; + } + &.h15 { + height: 15px; + } + &.h8 { + height: 8px; + } + margin-right: 5px; + } + + &.operate-item { + position: relative; + display: flex; + justify-content: center; + } + } + } + + .floor-middle { + min-width: 247px; + height: 40px; + background-color: rgba(246, 246, 246, 1); + border-radius: 150px; + .coin-content { + padding: 0 20px 0 16px; + height: 100%; + // cursor: pointer; + + .coin-icon { + width: 20px; + height: 24px; + margin-right: 5px; + margin-top: -2px; + } + + .coin-text { + font-size: 13px; + color: #333333; + .coin-value { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + margin: 0 5px; + } + } + } + + .coin-btn { + width: 80px; + height: 40px; + background-color: rgba(114, 219, 134, 1); + border-radius: 150px; + color: #ffffff; + font-size: 13px; + cursor: pointer; + } + } + + .floor-right { + color: #7f7f7f; + font-size: 13px; + cursor: pointer; + + .arrows-icon { + width: 12px; + height: 12px; + margin: 0 10px; + } + + .QR-code-ball { + width: 40px; + height: 40px; + background-color: rgba(246, 246, 246, 1); + border-radius: 20px; + cursor: pointer; + } + } + } + } +} + +.transmit-box { + width: 628px; + border-radius: 10px; + justify-content: space-between; + padding: 40px 35px 42px; + // z-index: 3; + cursor: auto; + + .cross-icon { + width: 22px; + height: 22px; + position: absolute; + top: 6px; + right: 6px; + cursor: pointer; + padding: 6px; + } + + .transmit-title { + font-weight: 650; + font-size: 16px; + color: #000000; + line-height: 24px; + margin-bottom: 24px; + } + + .transmit-content { + border: 1px solid rgba(242, 242, 242, 1); + border-radius: 16px; + } + + .transmit-web { + .transmit-content { + width: 300px; + font-size: 14px; + line-height: 24px; + padding: 14px 16px; + margin-bottom: 32px; + + .transmit-headline { + color: #333333; + } + + .transmit-url { + color: #aaaaaa; + word-wrap: break-word; + } + } + + .transmit-web-btn { + width: 120px; + height: 38px; + background-color: rgba(114, 219, 134, 1); + border-radius: 8px; + font-size: 14px; + color: #fff; + cursor: pointer; + } + } + + .transmit-mini { + .transmit-content { + flex-direction: column; + padding: 22px 44px; + + .transmit-mini-img { + width: 90px; + height: 90px; + margin-bottom: 21px; + } + + color: #555555; + // line-height: 22px; + font-size: 13px; + + .give-sweep { + width: 12px; + height: 12px; + margin-right: 8px; + } + } + } +} + +.examine-code { + width: 113px; + height: 113px; +} + +.pop-masking { + * { + box-sizing: content-box; + } + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.6); + z-index: 10; + + .slit-pop-box { + width: 433px; + border: 1px solid #e5e5e5; + background-color: #fff; + border-radius: 20px; + padding: 60px 50px 48px 38px; + display: flex; + -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); + + .slit-left-icon { + width: 50px; + height: 60px; + } + + .slit-box { + flex: 1; + margin-left: 15px; + + .slit-head { + display: flex; + align-items: center; + justify-content: space-between; + height: 54px; + + .slit-head-title { + font-weight: 650; + font-size: 20px; + color: #333; + } + .in-all { + font-size: 13px; + color: #7f7f7f; + font-weight: 400; + + & > span { + color: #000; + font-weight: 650; + } + } + } + + .coin-quantity { + display: flex; + align-items: center; + margin-bottom: 27px; + margin-top: 20px; + } + + .coin-quantity-item { + width: 78px; + height: 46px; + border: 1px solid #d7d7d7; + background-color: #f0f2f5; + border-radius: 5px; + font-size: 20px; + color: #000; + font-weight: 650; + line-height: 46px; + text-align: center; + cursor: pointer; + user-select: none; + & > span { + color: #555; + font-weight: 400; + font-size: 14px; + } + + &:not(:last-of-type) { + margin-right: 16px; + } + + &.coin-pitch { + background-color: #333333; + border-color: #333333; + color: #fff; + & > span { + color: #fff; + } + } + } + + .slit-input { + width: 360px; + height: 38px; + padding-left: 8px; + border: 1px solid #d7d7d7; + outline: none; + border-radius: 8px; + /* 去掉number类型自带的加减按钮 */ + overflow: hidden; + + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + } + + &[type="number"] { + -moz-appearance: textfield; + } + + /deep/ .el-input__wrapper { + box-shadow: none; + } + } + + .message-box { + display: flex; + flex-direction: column; + .message-hint { + color: #000; + font-size: 14px; + margin-top: 29px; + margin-bottom: 12px; + } + } + + .operation { + display: flex; + justify-content: flex-end; + margin-top: 48px; + .operation-item { + width: 120px; + height: 41px; + margin-left: 16px; + font-size: 16px; + color: #000; + border: 1px solid #797979; + border-radius: 45px; + cursor: pointer; + &.greenBj { + color: #fff; + } + } + } + } + } +} + +.no-jituobi-pop-box { + width: 520px; + flex-direction: column; + border: 1px solid #e5e5e5; + background-color: #fff; + border-radius: 11px; + display: flex; + -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); + padding-bottom: 55px; + position: relative; + .no-jituobi-close { + width: 16px; + height: 16px; + cursor: pointer; + position: absolute; + top: 10px; + right: 10px; + } + .no-jituobi-head { + font-size: 15px; + color: #333; + margin: 38px auto 44px; + .bi-icon { + width: 50px; + height: 60px; + } + } + + .strategy-btn { + width: 198px; + height: 43px; + color: #fff; + font-size: 16px; + border-radius: 100px; + margin: 0 auto; + cursor: pointer; + .strategy-icon { + width: 16px; + height: 16px; + margin-left: 8px; + } + } +} +.greenBj { + background-color: rgba(114, 219, 134, 1); + border-color: rgba(114, 219, 134, 1) !important; +} + +.respond-pop-mask { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.6); + z-index: 10; + display: flex; + justify-content: center; + align-items: center; + .respond-pop { + width: 600px; + height: 500px; + background-color: #fff; + border: 1px solid #e5e5e5; + border-radius: 20px; + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); + -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); + .respond-pop-title { + height: 50px; + display: flex; + justify-content: center; + border-bottom: 1px dotted rgba(215, 215, 215, 0.5); + align-items: center; + color: #555555; + position: relative; + .respond-pop-amount { + margin: 0 8px; + font-weight: 650; + color: #000000; + } + .respond-title-icon { + position: absolute; + width: 20px; + right: 20px; + cursor: pointer; + } + } + + .respond-list { + overflow: auto; + height: 450px; + + &::-webkit-scrollbar-track { + border-radius: 10px; + } + + &::-webkit-scrollbar-thumb { + background-color: #0003; + border-radius: 10px; + transition: all 0.2s ease-in-out; + } + + &::-webkit-scrollbar { + width: 6px; + } + .respond-item { + display: flex; + padding: 20px 0 0 20px; + + &:not(:last-of-type) .respond-content { + border-bottom: 1px dotted rgba(215, 215, 215, 0.5); + } + .respond-code { + width: 60px; + height: 60px; + background-color: rgba(246, 246, 246, 1); + border-radius: 10px; + font-family: "emojifont"; + font-size: 25px; + display: flex; + justify-content: center; + align-items: center; + margin-right: 20px; + cursor: pointer; + box-sizing: border-box; + &.pitch { + background-color: #f6f6bd; + border: 1px solid #ccd003; + } + } + + .respond-content { + padding-bottom: 10px; + .respond-total { + font-size: 14px; + color: #7f7f7f; + margin-bottom: 10px; + } + + .user-item { + font-size: 14px; + color: #555555; + display: inline-flex; + margin-right: 20px; + margin-bottom: 10px; + align-items: center; + cursor: pointer; + + .user-avatar { + width: 26px; + height: 26px; + border-radius: 50%; + margin-right: 10px; + } + } + } + } + } + + .respond-pop-no { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: relative; + .respond-title-icon { + position: absolute; + width: 20px; + top: 20px; + right: 20px; + cursor: pointer; + } + .respond-pop-no-icon { + width: 90px; + margin-bottom: 15px; + } + .respond-pop-no-text { + font-size: 13px; + color: #7f7f7f; + line-height: 22px; + } + } + } +} + +.respond-list-box { + background: #f6f6f6; + border: 1px solid #ebebeb; + border-radius: 10px; + position: absolute; + top: 84px; + z-index: 1; + &::after { + content: ""; + background: #f6f6f6; + border: 1px solid #e4e7ed; + border-bottom-color: transparent !important; + border-right-color: transparent !important; + border-top-left-radius: 2px; + width: 10px; + height: 10px; + position: absolute; + top: -6px; + left: 50%; + transform: translateX(-50%) rotate(45deg); + z-index: 3000; + } +} + +.respond-list-mask { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 1; +} + +.detail-image-mask { + width: 100%; + height: 100%; + max-width: none; + max-height: none; + border: none; + position: fixed; + top: 0; + left: 0; + background-color: rgba(255, 255, 255, 0.8); + z-index: 100; + + .detail-image { + width: 80vw; + height: 80vh; + border-radius: 8px; + background-color: #111; + + .detail-img { + max-width: 100%; + max-height: 100%; + } + } +} diff --git a/assets/css/detailsPop.css b/assets/css/detailsPop.css new file mode 100644 index 0000000..32c2a5f --- /dev/null +++ b/assets/css/detailsPop.css @@ -0,0 +1,42 @@ +.respond-list-box { + width: 470px; +} +.respond-list-box .respond-list-title { + font-size: 14px; + line-height: 22px; + color: #333333; + padding-top: 16px; + padding-left: 20px; + padding-bottom: 25px; +} +.respond-list-box .respond-list { + display: flex; + flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(10, 1fr); +} +.respond-list-box .respond-list .respond-item { + font-size: 20px; + font-family: "emojifont"; + text-align: center; + margin-bottom: 20px; +} +.respond-list-box .respond-list .respond-item .respond-item-key { + cursor: pointer; + font-family: "emojifont"; + position: relative; + z-index: 1; +} +.respond-list-box .respond-list .respond-item .respond-item-key:hover::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: block; + width: 35px; + height: 35px; + background-color: #eee; + border-radius: 4px; + z-index: -1; +} diff --git a/assets/css/detailsPop.less b/assets/css/detailsPop.less new file mode 100644 index 0000000..35ca42d --- /dev/null +++ b/assets/css/detailsPop.less @@ -0,0 +1,48 @@ +.respond-list-box { + width: 470px; + + .respond-list-title { + font-size: 14px; + line-height: 22px; + color: #333333; + padding-top: 16px; + padding-left: 20px; + padding-bottom: 25px; + } + + .respond-list { + display: flex; + flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(10, 1fr); + + .respond-item { + font-size: 20px; + font-family: "emojifont"; + text-align: center; + margin-bottom: 20px; + .respond-item-key { + cursor: pointer; + font-family: "emojifont"; + position: relative; + z-index: 1; + + &:hover { + &::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: block; + width: 35px; + height: 35px; + background-color: #eee; + border-radius: 4px; + z-index: -1; + } + } + } + } + } +} diff --git a/assets/img/close-icon.png b/assets/img/close-icon.png new file mode 100644 index 0000000..9834c9a Binary files /dev/null and b/assets/img/close-icon.png differ diff --git a/assets/img/picture-icon.png b/assets/img/picture-icon.png new file mode 100644 index 0000000..c00bc93 Binary files /dev/null and b/assets/img/picture-icon.png differ diff --git a/assets/img/smiling-face.png b/assets/img/smiling-face.png new file mode 100644 index 0000000..d27a841 Binary files /dev/null and b/assets/img/smiling-face.png differ diff --git a/composables/api.js b/composables/api.js index 7ca5f62..7f294bb 100644 --- a/composables/api.js +++ b/composables/api.js @@ -1,4 +1,4 @@ -import Http from "@/utils/http"; +import Http from "@/utils/http" // 获取列表 export const getListHttp = params => { return Http.post("/api/lists", params) @@ -92,6 +92,11 @@ export const commentReportHttp = query => { return Http.post("/api/operate/report", query) } +// 评论相关 - 上传图片 +export const commonUploadHttp = query => { + return Http.post("https://oss.gter.net/upload/base64", query) +} + // 数据操作 - 获取投币配置,我的寄托币数量 export const coinHttp = query => { return Http.post("/api/operate/coin", query) diff --git a/composables/utils.js b/composables/utils.js index 242b36b..402b846 100644 --- a/composables/utils.js +++ b/composables/utils.js @@ -19,9 +19,9 @@ export const handleDate = (dateTimeStamp = new Date()) => { let Y = date.getFullYear() + "-" let M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-" let D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " " - // let h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":" - // let m = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes() - result = "" + Y + M + D + let h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":" + let m = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes() + result = "" + Y + M + D + " " + h + m } else if (dayC >= 1) result = "" + Math.round(dayC) + "天前" else if (hourC >= 1) result = "" + Math.round(hourC) + "小时前" else if (minC >= 1) result = "" + Math.round(minC) + "分钟前" diff --git a/pages/details/[id].vue b/pages/details/[id].vue index 388432f..9ee0a1c 100644 --- a/pages/details/[id].vue +++ b/pages/details/[id].vue @@ -126,10 +126,10 @@
-
+
作者设置了浏览限制
-
“评论/回应”
+
“评论/点赞”
后即可查看完整内容
+ diff --git a/utils/http.js b/utils/http.js index 6b39c40..57eaff3 100644 --- a/utils/http.js +++ b/utils/http.js @@ -10,7 +10,7 @@ axios.defaults.withCredentials = true axios.interceptors.request.use( //响应拦截 async config => { // 开发时登录用的，可以直接替换小程序的 authorization - config['headers']['authorization'] = process.env.NODE_ENV !== "production" && "0aej1kx1phbkzuks3c77xtect8s7qq47" + config['headers']['authorization'] = process.env.NODE_ENV !== "production" && "c1fb97e6994539d87922b1b60c09d43c" // config['headers']['authorization'] = "2lfrtq7h3ge634pl4ptlu2pbh2" return config; },