From 21ed7d94ef220c4d4b992594b263c84713d8df91 Mon Sep 17 00:00:00 2001 From: A1300399510 Date: Fri, 26 Jul 2024 18:49:40 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8A=95=E5=B8=81=E5=92=8C?= =?UTF-8?q?=E5=9B=9E=E5=BA=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.vue | 363 +++++++++++++++++++++++------- components/RespondAdd.vue | 44 ++++ components/RespondPop.vue | 66 ++++++ img/arrowsRight.svg | 6 + img/bi-icon.png | Bin 0 -> 16971 bytes img/plus-sign.svg | 6 + index.css | 397 ++++++++++++++++++++++++++++++++- index.less | 448 +++++++++++++++++++++++++++++++++++++- 8 files changed, 1241 insertions(+), 89 deletions(-) create mode 100644 components/RespondAdd.vue create mode 100644 components/RespondPop.vue create mode 100644 img/arrowsRight.svg create mode 100644 img/bi-icon.png create mode 100644 img/plus-sign.svg diff --git a/app.vue b/app.vue index 5851865..633b19d 100644 --- a/app.vue +++ b/app.vue @@ -205,11 +205,14 @@ {{ detailsInfo["viewnum"] || 0 }} -
- - - {{ detailsInfo["collectionnum"] > 0 ? detailsInfo["collectionnum"] : "收藏" }} -
+ +
+ + + {{ detailsInfo["collectionnum"] > 0 ? detailsInfo["collectionnum"] : "收藏" }} +
+ +
转发 @@ -246,6 +249,10 @@
+
+ +
+
-
-
- +
+
+ +
+
讨论 19
+
投币 19
-
+
- {{ item["commentnum"] }} -
+
-->
@@ -319,6 +327,47 @@
+
+
+ +
该回答已获 0 个寄托币
+
给TA投币
+
+
+
+
{{ index + 1 }}
+
+ +
君语
+
+
+
12
+ 币 +
+
+
+
+
+
+
+ {{ it.num }} +
+
+ + +
+ +
+ +
+ 共 + {{ item.ripostecount?.user }} + 人回应 + +
+
@@ -727,7 +764,7 @@
-
+
{{ s }}
@@ -742,6 +779,8 @@
+ +
@@ -757,9 +796,8 @@ // "todaysigned": 0 // } -import { onMounted, onUnmounted, ref, nextTick, watchEffect, watch } from "vue" +import { onMounted, onUnmounted, ref, nextTick, watchEffect, watch, provide } from "vue" import axios from "axios" - export default { name: "#answer-app", async setup() { @@ -771,8 +809,7 @@ export default { emulateJSON: true, withCredentials: true, headers: { - authorization: process.env.NODE_ENV !== "production" && "223fe8a4ea0ede029244b3b01f0bdaad", // 头部标记 ada - // "7a89997c2ccd8cb5ed8cb20d843dafdd", // 头部标记 ada + authorization: process.env.NODE_ENV !== "production" && "c5438975031a43a61c13252623753fc5", // 头部标记 }, }) .then(function (res) { @@ -806,8 +843,7 @@ export default { emulateJSON: true, withCredentials: true, headers: { - authorization: process.env.NODE_ENV !== "production" && "223fe8a4ea0ede029244b3b01f0bdaad", // 头部标记 - // "7a89997c2ccd8cb5ed8cb20d843dafdd", // 头部标记 + authorization: process.env.NODE_ENV !== "production" && "c5438975031a43a61c13252623753fc5", // 头部标记 }, }) .then(function (res) { @@ -884,6 +920,8 @@ export default { const params = route.query + // console.log(params); + // getDetails(params.uniqid) // 是否直接打开提问 setTimeout(() => { if (params["ispublish"]) questionsInit() @@ -1290,14 +1328,22 @@ export default { let data = res.data data.data.forEach((element, index) => { - element["commentList"] = [] - if (element["commentnum"] > 0) { - element["showOneCommentState"] = true + console.log("element", element) - nextTick(() => { - openCommentState(index) - }) - } else element["commentState"] = true + // element["commentList"] = [] + // if (element["commentnum"] > 0) { + // element["showOneCommentState"] = true + // nextTick(() => { + // openCommentState(index) + // }) + // } else element["commentState"] = true + + if (element.ripostes > 0) { + nextTick(() => getRiposte(index)) + } else { + element["ripostelist"] = [] + element["ripostecount"] = {} + } }) // console.log("data.data", data.data) showOneCommentState @@ -1663,7 +1709,6 @@ export default { targetAnswerList[index]["commentList"][ind]["child"] = merged1 answerList.value = targetAnswerList - }) } @@ -2304,6 +2349,7 @@ export default { // 用于发送某个URL的PV统计请求 if (window._czc) window._czc.push(["_trackPageview", contentUrl]) } + // 删除 url 参数的key const deleteState = (keys = []) => { if (typeof window === "undefined") return @@ -2581,40 +2627,8 @@ export default { replaceState({ uniqid: params["uniqid"] }) seo.value = data.seo - // handleInsertRelatedlist(params["uniqid"]); }) .catch(error => console.error(error)) - - // if (process.server) { - // await $ajax("/api/details", {uniqid: params["uniqid"]}) - // .then(res => { - // if (res.code != 200) return - // let data = res.data - - // detailsInfo.value = data["info"] || {} - // detailsIsanswered.value = data["isanswered"] || 0 - // detailsIscollection.value = data["iscollection"] || 0 - // detailsIsmyself.value = data["ismyself"] || 0 - // detailsToken = data["token"] || "" - // detailShare.value = data["share"] || {} - - // type.value = "details" - - // calculateListIndex(data.info, params["uniqid"]) - - // answerList.value = [] - // answerPage.value = 1 - // getAnswerList() - - // closeAllTransmitState() - - // replaceState({uniqid: params["uniqid"]}) - // seo.value = data.seo - // }) - // .finally(() => { - // detailLoading.value = false - // }) - // } } await $ajax("/api/lists", { @@ -2786,7 +2800,6 @@ export default { // 点击发送信息 const sendMessage = uin => { - console.log("uin", uin) if (uin && typeof messagePrivateItem == "function") { messagePrivateItem({ uin: uin }) return @@ -2836,7 +2849,211 @@ export default { answerList.value[index]["showOneCommentState"] = false } - return { handleLookOnly, zeroreply, replaceNumberObj, closeMyModel, myModelList, myModelState, listHeight, bottomTpsStyle, TAHomePage, sendMessage, avatarState, openUserInfo, isNeedLogin, handleInputYou, openListIAnswer, isListEmptyState, cutYourAnswerAnonymous, handleYourAnswer, yourAnswer, handleLogo, inTheEndState, setItemUrl, seo, originUrl, handleMenuState, reasonList, checkList, alertShow, alertText, selectRadio, alertSubmit, cutType, dialogSrc, answerPage, handleDetailsScroll, replaceState, copyText, boxClass, questionPlaceholderState, yourAnswerPlaceholderState, handleInput, handlePaste, itemStyle, listStyle, listBoxStyle, myType, type, pitchIndex, cut, list, keyword, keywordText, getList, total, typeList, typePitch, getDetails, detailsInfo, detailsIsanswered, detailsIscollection, detailsIsmyself, detailShare, detailLoading, answerList, operateLike, operateCollect, IAnswerState, IAnswerEditState, IAnswerInfo, amendIAnswer, openIAnswer, closeIAnswer, submitAnswer, openCommentState, submitAnswerComments, operateAnswerCommentsLike, openAnswerCommentsChild, closeAnswerCommentsChild, alsoCommentsData, handleAllComment, myCollectionList, myCollectionCount, myQuestionsList, myQuestionsCount, myAnswerList, myAnswerCount, cutAnswerPopupState, handleDate, handleCollectionScroll, handleAnswersScroll, handleQuestionsScroll, cancelCollection, getMyCollection, questionsSetp, questionsObj, cutAnonymous, cutQuestionsSetp, cutQuestionsPopupState, questionsTypeList, postingIssue, choosingTheme, handleMy, changeAnonymous, changeAnonymousQuestions, pageHeaderHeight, pageListHeight, questionsTransmitState, questionsTransmitMaskState, closeAllTransmitState, closeTransmitState, handleAnswerTransmitList, closeDetailMode, tabListFixeState, handleListScroll, historicalSearchState, historicalSearchList, searchFocus, searchBlur, searchClick, handleClickHistoricalItem, handleClickClear, isSearchMode, questionsInit, myCount, msg, myOpenDetails, handleAnswerText, getCurrentUrl, loading, showComments } + // 拼接 回应需要的 字符 + const jointriposte = item => { + return `&#x${item};` + } + + let ripostelist = ref([]) + let ripostecount = ref({}) + let riposteoptions = ref([ + { + "name": "默认", + "baseUrl": "{@}riposte/img", + "data": { + "c150": "c150.png", + "c162": "c162.png", + "c126": "c126.png", + "c133": "c133.png", + "c157": "c157.png", + "c069": "c069.png", + "c005": "c005.png", + "c081": "c081.png", + "c026": "c026.png", + "c004": "c004.png", + "c011": "c011.png", + "c002": "c002.png", + "c059": "c059.png", + "c140": "c140.png", + "c167": "c167.png", + "c168": "c168.png", + "c169": "c169.png", + "c170": "c170.png", + "c171": "c171.png", + "c172": "c172.png", + "c173": "c173.png", + }, + }, + { + "name": "旗帜", + "baseUrl": "{@}riposte/img", + "data": { + "c093": "c093.png", + "c094": "c094.png", + "c095": "c095.png", + "c096": "c096.png", + "c097": "c097.png", + "c098": "c098.png", + "c099": "c099.png", + "c100": "c100.png", + "c101": "c101.png", + "c102": "c102.png", + "c103": "c103.png", + "c104": "c104.png", + "c105": "c105.png", + "c106": "c106.png", + "c107": "c107.png", + "c108": "c108.png", + "c109": "c109.png", + "c110": "c110.png", + "c111": "c111.png", + "c112": "c112.png", + "c113": "c113.png", + "c114": "c114.png", + "c115": "c115.png", + }, + }, + ]) + + const getRiposte = index => { + let target = answerList.value[index] + + $ajax("/api/riposte/riposteGet", { token: target.token }).then(res => { + console.log("res", res) + if (res.code != 200) return + let data = res.data + target.ripostecount = data.count || {} + target.ripostelist = data.list || [] + + answerList.value[index] = target + // if (ripostelist.value.length <= 3) randomEmoji() + }) + } + + let randomEmojis = ref(["c150", "c167", "c002", "c162", "c157", "c133", "c011", "c004"]) // 随机 五个 emoji + + // 随机 7 个Emoji + const randomEmoji = () => { + let emojiList = ripostelist.value + // 需要排除的 Emoji + let exclude = [] + emojiList.forEach(element => { + exclude.push(element.item) + }) + + let selectedList = [] // 待选择 Emoji To be selected + // 默认是有点赞的 + for (const key in riposteoptions.value[0].data) { + if (key != "c150") selectedList.push(key) + } + + const random = [] + if (!exclude.includes("c150")) random.push("c150") // 添加第一个点赞 emoji + selectedList = selectedList.filter(itemB => !exclude.includes(itemB)) + + // 生成随机索引，确保不重复 + let indexes = [] + while (indexes.length < 7) { + let randomIndex = Math.floor(Math.random() * selectedList.length) + if (indexes.indexOf(randomIndex) === -1) { + indexes.push(randomIndex) + random.push(selectedList[randomIndex]) + } + } + randomEmojis.value = random + } + + const get = () => { + // /api/riposte/riposteGet + } + + const selectEomji = (code, index, ispop = false, islist = false) => { + let target = answerList.value[index] + let ispitch = false + let isindex = target.ripostelist.findIndex(element => element.item === code) + + if (isindex >= 0) ispitch = target.ripostelist[isindex].selected + + if (ispitch && ispop) return + + riposteSubmit(code, target.token).then(res => { + const data = res.data + target.ripostecount = data.count + + if (isindex >= 0) { + target.ripostelist[isindex].num += ispitch ? -1 : 1 + target.ripostelist[isindex].selected = !ispitch && target.ripostelist[isindex].num !== 0 + + if (target.ripostelist[isindex].num === 0) { + target.ripostelist.splice(isindex, 1) + } + } else { + target.ripostelist.push({ + item: code, + num: 1, + selected: true, + }) + } + if (islist) handleRiposteListData(code, data) + }) + } + + // 处理回应列表 数据 + const handleRiposteListData = (code, data) => { + let target = respondDetail.value + // console.log("target", target) + if (target[code].selected) { + target[code].user = target[code].user.filter(item => item.uin != data.uin) + + if (target[code].user.length == 0) delete target[code] + } else { + target[code].user.push({ + avatar: data.avatar, + nickname: data.username, + uid: data.uid, + uin: data.uin, + }) + } + target[code].selected = !target[code].selected + } + + const riposteSubmit = (item, token) => { + return new Promise((resolve, reject) => { + $ajax("/api/riposte/riposteSubmit", { token, item }).then(res => { + if (res.code != 200) { + handleMsg("error", res["message"] || "报错了，请重试！！！") + reject(res) + } else { + handleMsg("success", res["message"] || "回应成功") + resolve(res) + } + }) + }) + } + + let respondDetail = ref({}) + let respondPopState = ref(false) + let respondPopObj = ref({}) + + // 打开回应详情 + const openRespondDetails = index => { + let target = answerList.value[index] + respondPopObj.value.index = index + respondPopObj.value.user = target.ripostecount?.user + $ajax("/api/riposte/riposteDetail", { token: target.token }).then(res => { + console.log("res", res) + if (res.code != 200) return + respondDetail.value = res.data + + respondPopState.value = true + }) + } + + const closePopList = () => { + respondPopState.value = false + } + + return { handleLookOnly, zeroreply, replaceNumberObj, closeMyModel, myModelList, myModelState, listHeight, bottomTpsStyle, TAHomePage, sendMessage, avatarState, openUserInfo, isNeedLogin, handleInputYou, openListIAnswer, isListEmptyState, cutYourAnswerAnonymous, handleYourAnswer, yourAnswer, handleLogo, inTheEndState, setItemUrl, seo, originUrl, handleMenuState, reasonList, checkList, alertShow, alertText, selectRadio, alertSubmit, cutType, dialogSrc, answerPage, handleDetailsScroll, replaceState, copyText, boxClass, questionPlaceholderState, yourAnswerPlaceholderState, handleInput, handlePaste, itemStyle, listStyle, listBoxStyle, myType, type, pitchIndex, cut, list, keyword, keywordText, getList, total, typeList, typePitch, getDetails, detailsInfo, detailsIsanswered, detailsIscollection, detailsIsmyself, detailShare, detailLoading, answerList, operateLike, operateCollect, IAnswerState, IAnswerEditState, IAnswerInfo, amendIAnswer, openIAnswer, closeIAnswer, submitAnswer, openCommentState, submitAnswerComments, operateAnswerCommentsLike, openAnswerCommentsChild, closeAnswerCommentsChild, alsoCommentsData, handleAllComment, myCollectionList, myCollectionCount, myQuestionsList, myQuestionsCount, myAnswerList, myAnswerCount, cutAnswerPopupState, handleDate, handleCollectionScroll, handleAnswersScroll, handleQuestionsScroll, cancelCollection, getMyCollection, questionsSetp, questionsObj, cutAnonymous, cutQuestionsSetp, cutQuestionsPopupState, questionsTypeList, postingIssue, choosingTheme, handleMy, changeAnonymous, changeAnonymousQuestions, pageHeaderHeight, pageListHeight, questionsTransmitState, questionsTransmitMaskState, closeAllTransmitState, closeTransmitState, handleAnswerTransmitList, closeDetailMode, tabListFixeState, handleListScroll, historicalSearchState, historicalSearchList, searchFocus, searchBlur, searchClick, handleClickHistoricalItem, handleClickClear, isSearchMode, questionsInit, myCount, msg, myOpenDetails, handleAnswerText, getCurrentUrl, loading, showComments, jointriposte, ripostelist, ripostecount, riposteoptions, randomEmojis, selectEomji, openRespondDetails, respondPopState, respondDetail, respondPopObj, closePopList } }, } diff --git a/components/RespondAdd.vue b/components/RespondAdd.vue new file mode 100644 index 0000000..ef5ebec --- /dev/null +++ b/components/RespondAdd.vue @@ -0,0 +1,44 @@ + + + + diff --git a/components/RespondPop.vue b/components/RespondPop.vue new file mode 100644 index 0000000..8c49f61 --- /dev/null +++ b/components/RespondPop.vue @@ -0,0 +1,66 @@ + + + diff --git a/img/arrowsRight.svg b/img/arrowsRight.svg new file mode 100644 index 0000000..5c93a36 --- /dev/null +++ b/img/arrowsRight.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/img/bi-icon.png b/img/bi-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..bd5a8dcd200b4d044b46add311e86382434855f9 GIT binary patch literal 16971 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 i?uvPL+I6qDkN-bCCK2_1LDR4R0000 + + + + + \ No newline at end of file diff --git a/index.css b/index.css index 53ab234..1ed6564 100644 --- a/index.css +++ b/index.css @@ -17,6 +17,10 @@ body { body::-webkit-scrollbar { width: 0 !important; } +@font-face { + font-family: "emojifont"; + src: url("https://oss.x-php.com/static/riposte/emojifont-sbix.ttf?t=questions"); +} #answer-app * { margin: 0; padding: 0; @@ -728,6 +732,20 @@ a { margin-bottom: 21px; position: relative; } +#answer-app .main .details-area-box .details-box .answer-box-item .edit-btn { + cursor: pointer; + width: 24px; + height: 24px; + border-radius: 50%; + background-color: #f6f6f6; + position: absolute; + top: 10px; + right: 10px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .edit-btn .edit-icon { + width: 16px; + height: 16px; +} #answer-app .main .details-area-box .details-box .answer-box-item * { white-space: break-spaces !important; } @@ -764,18 +782,185 @@ a { cursor: pointer; } #answer-app .main .details-area-box .details-box .answer-box-item .operate-box { - padding: 0 24px; + padding: 0 24px 22px; + background-color: #fbfbfb; } -#answer-app .main .details-area-box .details-box .answer-box-item .operate-box .edit-box .edit-btn { +#answer-app .main .details-area-box .details-box .answer-box-item .operate-box .interaction-box .interaction-item { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + color: #555555; + font-size: 13px; + line-height: 20px; cursor: pointer; + position: relative; +} +#answer-app .main .details-area-box .details-box .answer-box-item .operate-box .interaction-box .interaction-item .amount { + color: #555555; + font-weight: 400; +} +#answer-app .main .details-area-box .details-box .answer-box-item .operate-box .interaction-box .interaction-item:not(:last-of-type) { + margin-right: 40px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .operate-box .interaction-box .interaction-item.pitch { + font-weight: 650; + color: #000000; +} +#answer-app .main .details-area-box .details-box .answer-box-item .operate-box .interaction-box .interaction-item.pitch::after { + content: ""; + position: absolute; + top: 24px; + width: 100%; + height: 4px; + background-color: #fddf6d; + border-radius: 43px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .answer-coins { + background-color: #fbfbfb; + padding: 0 22px 40px; + border-radius: 0 0 8px 8px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .answer-coins .coins-show { + height: 56px; + background-color: #ffffff; + border: 1px solid #ebebeb; + border-radius: 10px; + padding-left: 20px; + padding-right: 8px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .answer-coins .coins-show .coins-icon { + width: 31px; + height: 36px; + margin-right: 10px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .answer-coins .coins-show .coins-text { + font-size: 14px; + color: #333333; +} +#answer-app .main .details-area-box .details-box .answer-box-item .answer-coins .coins-show .coins-text .quantity { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; +} +#answer-app .main .details-area-box .details-box .answer-box-item .answer-coins .coins-show .coins-btn { + width: 125px; + height: 40px; + background-color: #62b1ff; + border-radius: 150px; + font-size: 14px; + color: #ffffff; + cursor: pointer; +} +#answer-app .main .details-area-box .details-box .answer-box-item .answer-coins .answer-coins-list { + margin-top: 20px; + max-height: 253px; + overflow: auto; + background-color: #ffffff; + border: 1px solid #ebebeb; + border-radius: 10px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .answer-coins .answer-coins-list .answer-coins-item { + padding: 16px 20px 14px 32px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .answer-coins .answer-coins-list .answer-coins-item .ranking { + width: 118px; + font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif; + font-weight: 700; + font-size: 13px; + color: #333333; +} +#answer-app .main .details-area-box .details-box .answer-box-item .answer-coins .answer-coins-list .answer-coins-item .coins-user .coins-user-img { width: 24px; height: 24px; + margin-right: 18px; border-radius: 50%; - background-color: #f6f6f6; } -#answer-app .main .details-area-box .details-box .answer-box-item .operate-box .edit-box .edit-btn .edit-icon { - width: 16px; - height: 16px; +#answer-app .main .details-area-box .details-box .answer-box-item .answer-coins .answer-coins-list .answer-coins-item .coins-user .coins-user-name { + font-weight: 400; + color: #555555; + font-size: 13px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .answer-coins .answer-coins-list .answer-coins-item .bi { + color: #000000; + font-size: 13px; + line-height: 16px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .answer-coins .answer-coins-list .answer-coins-item .bi .bi-amount { + font-size: 16px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .respond-area { + background-color: #fbfbfb; + padding: 0 24px 24px; + display: flex; + flex-wrap: wrap; + border-radius: 0 0 8px 8px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .respond-area .respond-already-item { + font-size: 12px; + color: #555555; + text-align: center; + padding: 0 6px; + width: fit-content; + height: 30px; + line-height: 30px; + border: 1px solid #d7d7d7; + border-radius: 8px; + margin-right: 10px; + margin-bottom: 10px; + cursor: pointer; +} +#answer-app .main .details-area-box .details-box .answer-box-item .respond-area .respond-already-item.pitch { + background: #f2f2f2; + border: none; +} +#answer-app .main .details-area-box .details-box .answer-box-item .respond-area .respond-already-item .code { + font-family: "emojifont"; + margin-right: 4px; + font-size: 15px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .respond-area .respond-select { + height: 30px; + background-color: #ffffff; + border: 1px solid #ebebeb; + border-radius: 6px 15px 15px 6px; + margin-right: 10px; + padding-left: 16px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .respond-area .respond-select .respond-select-item { + font-family: "emojifont"; + margin-right: 16px; + font-size: 15px; + cursor: pointer; +} +#answer-app .main .details-area-box .details-box .answer-box-item .respond-area .plus-add { + width: 30px; + height: 30px; + background-color: #62b1ff; + border-radius: 15px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .respond-area .plus-add .plus-icon { + width: 14px; + height: 14px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .respond-list-btn { + font-weight: 400; + cursor: pointer; + color: #555555; + font-size: 13px; + display: flex; + align-items: center; + justify-content: center; + background-color: #fbfbfb; + border-radius: 0 0 8px 8px; + padding-bottom: 20px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .respond-list-btn .respond-list-btn-amount { + font-weight: 650; + color: #333; + margin: 0 5px; +} +#answer-app .main .details-area-box .details-box .answer-box-item .respond-list-btn .respond-list-btn-icon { + width: 6px; + margin-left: 5px; } #answer-app .main .details-area-box .details-box .answer-box-item .post-comment { background-color: #f6f6f6; @@ -1061,6 +1246,7 @@ a { height: 54px; border-top: 1px dotted #ebebeb; padding: 0 24px; + flex: 1; } #answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item { font-size: 13px; @@ -2047,3 +2233,202 @@ a { height: 16px; margin-right: 5px; } +#answer-app .respond-add { + width: 30px; + height: 30px; + background-color: #62b1ff; + border-radius: 50%; + cursor: pointer; + position: relative; +} +#answer-app .respond-add.angle::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; + bottom: -17px; + left: 50%; + transform: translateX(-50%) rotate(45deg); + z-index: 3000; +} +#answer-app .respond-add .respond-add-icon { + width: 14px; + height: 14px; +} +#answer-app .respond-list-box { + width: 470px; + background: #f6f6f6; + border: 1px solid #ebebeb; + border-radius: 10px; + position: absolute; + z-index: 2; + top: 45px; +} +#answer-app .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; +} +#answer-app .respond-list-box .respond-list-title { + font-size: 14px; + line-height: 22px; + color: #333333; + padding-top: 16px; + padding-left: 20px; + padding-bottom: 25px; +} +#answer-app .respond-list-box .respond-list { + display: flex; + flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(10, 1fr); +} +#answer-app .respond-list-box .respond-list .respond-item { + font-size: 20px; + font-family: "emojifont"; + text-align: center; + margin-bottom: 20px; + cursor: pointer; +} +#answer-app .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; +} +#answer-app .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); +} +#answer-app .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; + font-size: 16px; +} +#answer-app .respond-pop-mask .respond-pop .respond-pop-title .respond-pop-amount { + margin: 0 8px; + font-weight: 650; + color: #000000; +} +#answer-app .respond-pop-mask .respond-pop .respond-pop-title .respond-title-icon { + position: absolute; + width: 20px; + right: 20px; + cursor: pointer; +} +#answer-app .respond-pop-mask .respond-pop .respond-list { + overflow: auto; + height: 450px; +} +#answer-app .respond-pop-mask .respond-pop .respond-list::-webkit-scrollbar-track { + border-radius: 10px; +} +#answer-app .respond-pop-mask .respond-pop .respond-list::-webkit-scrollbar-thumb { + background-color: #0003; + border-radius: 10px; + transition: all 0.2s ease-in-out; +} +#answer-app .respond-pop-mask .respond-pop .respond-list::-webkit-scrollbar { + width: 6px; +} +#answer-app .respond-pop-mask .respond-pop .respond-list .respond-item { + display: flex; + padding: 20px 0 0 20px; +} +#answer-app .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); +} +#answer-app .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; +} +#answer-app .respond-pop-mask .respond-pop .respond-list .respond-item .respond-code.pitch { + background-color: #f6f6bd; + border: 1px solid #ccd003; +} +#answer-app .respond-pop-mask .respond-pop .respond-list .respond-item .respond-content { + padding-bottom: 10px; +} +#answer-app .respond-pop-mask .respond-pop .respond-list .respond-item .respond-content .respond-total { + font-size: 14px; + color: #7f7f7f; + margin-bottom: 10px; +} +#answer-app .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; +} +#answer-app .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; +} +#answer-app .respond-pop-mask .respond-pop .respond-pop-no { + width: 100%; + height: 100%; + flex-direction: column; + position: relative; +} +#answer-app .respond-pop-mask .respond-pop .respond-pop-no .respond-title-icon { + position: absolute; + width: 20px; + top: 20px; + right: 20px; + cursor: pointer; +} +#answer-app .respond-pop-mask .respond-pop .respond-pop-no .respond-pop-no-icon { + width: 90px; + margin-bottom: 15px; +} +#answer-app .respond-pop-mask .respond-pop .respond-pop-no .respond-pop-no-text { + font-size: 13px; + color: #7f7f7f; + line-height: 22px; +} diff --git a/index.less b/index.less index 3d61be9..5a08399 100644 --- a/index.less +++ b/index.less @@ -23,6 +23,11 @@ body { -ms-overflow-style: none; } +@font-face { + font-family: "emojifont"; + src: url("https://oss.x-php.com/static/riposte/emojifont-sbix.ttf?t=questions"); +} + #answer-app * { margin: 0; padding: 0; @@ -905,6 +910,21 @@ a { margin-bottom: 21px; position: relative; // overflow: hidden; + .edit-btn { + cursor: pointer; + width: 24px; + height: 24px; + border-radius: 50%; + background-color: #f6f6f6; + position: absolute; + top: 10px; + right: 10px; + + .edit-icon { + width: 16px; + height: 16px; + } + } * { white-space: break-spaces !important; @@ -948,24 +968,212 @@ a { } .operate-box { - padding: 0 24px; + padding: 0 24px 22px; + background-color: rgba(251, 251, 251, 1); - .edit-box { - .edit-btn { + .interaction-box { + .interaction-item { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + color: #555555; + font-size: 13px; + line-height: 20px; cursor: pointer; - width: 24px; - height: 24px; - border-radius: 50%; - background-color: #f6f6f6; + position: relative; + .amount { + color: #555555; + font-weight: 400; + } - .edit-icon { - width: 16px; - height: 16px; + &:not(:last-of-type) { + margin-right: 40px; + } + + &.pitch { + font-weight: 650; + color: #000000; + + &::after { + content: ""; + position: absolute; + top: 24px; + width: 100%; + height: 4px; + background-color: rgba(253, 223, 109, 1); + border-radius: 43px; + } } } } } + .answer-coins { + background-color: #fbfbfb; + padding: 0 22px 40px; + border-radius: 0 0 8px 8px; + + .coins-show { + height: 56px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 10px; + padding-left: 20px; + padding-right: 8px; + .coins-icon { + width: 31px; + height: 36px; + margin-right: 10px; + } + + .coins-text { + font-size: 14px; + color: #333333; + .quantity { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + } + } + + .coins-btn { + width: 125px; + height: 40px; + background-color: rgba(98, 177, 255, 1); + border-radius: 150px; + font-size: 14px; + color: #ffffff; + cursor: pointer; + } + } + + .answer-coins-list { + margin-top: 20px; + max-height: 253px; + overflow: auto; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 10px; + + .answer-coins-item { + padding: 16px 20px 14px 32px; + + .ranking { + width: 118px; + font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif; + font-weight: 700; + font-size: 13px; + color: #333333; + } + .coins-user { + .coins-user-img { + width: 24px; + height: 24px; + margin-right: 18px; + border-radius: 50%; + } + .coins-user-name { + font-weight: 400; + color: #555555; + font-size: 13px; + } + } + .bi { + color: #000000; + font-size: 13px; + line-height: 16px; + .bi-amount { + font-size: 16px; + } + } + } + } + } + + .respond-area { + background-color: rgba(251, 251, 251, 1); + padding: 0 24px 24px; + display: flex; + flex-wrap: wrap; + border-radius: 0 0 8px 8px; + + .respond-already-item { + font-size: 12px; + color: #555555; + text-align: center; + padding: 0 6px; + width: fit-content; + height: 30px; + line-height: 30px; + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 8px; + margin-right: 10px; + margin-bottom: 10px; + cursor: pointer; + + &.pitch { + background: rgba(242, 242, 242, 1); + border: none; + } + + .code { + font-family: "emojifont"; + margin-right: 4px; + font-size: 15px; + } + } + + .respond-select { + height: 30px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 6px 15px 15px 6px; + margin-right: 10px; + padding-left: 16px; + + .respond-select-item { + font-family: "emojifont"; + margin-right: 16px; + font-size: 15px; + cursor: pointer; + } + } + + .plus-add { + width: 30px; + height: 30px; + background-color: rgba(98, 177, 255, 1); + border-radius: 15px; + .plus-icon { + width: 14px; + height: 14px; + } + } + } + + .respond-list-btn { + font-weight: 400; + cursor: pointer; + color: #555555; + font-size: 13px; + display: flex; + align-items: center; + justify-content: center; + background-color: #fbfbfb; + border-radius: 0 0 8px 8px; + padding-bottom: 20px; + + .respond-list-btn-amount { + font-weight: 650; + color: #333; + margin: 0 5px; + } + + .respond-list-btn-icon { + width: 6px; + margin-left: 5px; + } + } + .post-comment { background-color: rgba(246, 246, 246, 1); position: relative; @@ -1323,6 +1531,7 @@ a { height: 54px; border-top: 1px dotted #ebebeb; padding: 0 24px; + flex: 1; .operate-list { .operate-item { @@ -2535,4 +2744,223 @@ a { margin-right: 5px; } } + + .respond-add { + width: 30px; + height: 30px; + background-color: rgba(98, 177, 255, 1); + border-radius: 50%; + cursor: pointer; + position: relative; + &.angle { + &::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; + bottom: -17px; + left: 50%; + transform: translateX(-50%) rotate(45deg); + z-index: 3000; + } + } + + .respond-add-icon { + width: 14px; + height: 14px; + } + } + + .respond-list-box { + width: 470px; + background: #f6f6f6; + border: 1px solid #ebebeb; + border-radius: 10px; + position: absolute; + z-index: 2; + top: 45px; + + &::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-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; + cursor: pointer; + } + } + } + + .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; + font-size: 16px; + + .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%; + 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; + } + } + } + } }