From 34301769bbcb4b54782cc08decf89c9ecbf44899 Mon Sep 17 00:00:00 2001 From: A1300399510 Date: Mon, 10 Feb 2025 19:03:44 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=AE=A8=E8=AE=BA=E5=8A=A0?= =?UTF-8?q?=E5=9B=BE=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.vue | 17 +- assets/css/details.css | 1569 +++++++++++++++++++++++++++ assets/css/details.less | 1860 +++++++++++++++++++++++++++++++++ assets/css/detailsPop.css | 42 + assets/css/detailsPop.less | 48 + assets/img/close-icon.png | Bin 0 -> 3027 bytes assets/img/picture-icon.png | Bin 0 -> 1224 bytes assets/img/smiling-face.png | Bin 0 -> 2243 bytes composables/api.js | 7 +- composables/utils.js | 6 +- pages/details/[id].vue | 1976 ++++++----------------------------- utils/http.js | 2 +- 12 files changed, 3864 insertions(+), 1663 deletions(-) create mode 100644 assets/css/details.css create mode 100644 assets/css/details.less create mode 100644 assets/css/detailsPop.css create mode 100644 assets/css/detailsPop.less create mode 100644 assets/img/close-icon.png create mode 100644 assets/img/picture-icon.png create mode 100644 assets/img/smiling-face.png 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 0000000000000000000000000000000000000000..9834c9ac5bf57606beada0042de21cc049113e96 GIT binary patch literal 3027 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 VPmi$}aH{|S002ovPDHLkV1lpdtE&J2 literal 0 HcmV?d00001 diff --git a/assets/img/picture-icon.png b/assets/img/picture-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..c00bc93734de3010609ab0fbdace51953de14676 GIT binary patch literal 1224 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 { 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; },