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 0000000..bd5a8dc Binary files /dev/null and b/img/bi-icon.png differ diff --git a/img/plus-sign.svg b/img/plus-sign.svg new file mode 100644 index 0000000..37aa451 --- /dev/null +++ b/img/plus-sign.svg @@ -0,0 +1,6 @@ + + + + + + \ 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; + } + } + } + } }