添加投币和回应
This commit is contained in:
A1300399510
parent
e7f6bbeaa4
commit
21ed7d94ef
363
app.vue
363
app.vue
@ -205,11 +205,14 @@
|
||||
<img class="operate-icon operate-collect-icon" style="width: 13px; height: 8px;" src="./img/view-icon.svg" />
|
||||
{{ detailsInfo["viewnum"] || 0 }}
|
||||
</div>
|
||||
<div class="operate-item flexacenter" @click="operateCollect()">
|
||||
<img class="operate-icon operate-collect-icon" v-if="detailsIscollection == 0" src="./img/collect-icon.png" />
|
||||
<img class="operate-icon operate-collect-icon" v-else src="./img/collect-icon-colours.svg" />
|
||||
{{ detailsInfo["collectionnum"] > 0 ? detailsInfo["collectionnum"] : "收藏" }}
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<div class="operate-item flexacenter" @click="operateCollect()">
|
||||
<img class="operate-icon operate-collect-icon" v-if="detailsIscollection == 0" src="./img/collect-icon.png" />
|
||||
<img class="operate-icon operate-collect-icon" v-else src="./img/collect-icon-colours.svg" />
|
||||
{{ detailsInfo["collectionnum"] > 0 ? detailsInfo["collectionnum"] : "收藏" }}
|
||||
</div>
|
||||
</ClientOnly>
|
||||
|
||||
<div class="operate-item flexacenter operate-transmit" @mouseenter.stop="closeTransmitState()" @mouseleave.stop="closeAllTransmitState()">
|
||||
<img class="operate-icon operate-transmit-icon" src="./img/transmit-icon.png" />
|
||||
转发
|
||||
@ -246,6 +249,10 @@
|
||||
<div class="answer-box-item" v-for="(item, index) in answerList" :key="index">
|
||||
<img class="aa" src="@/img/A.png" />
|
||||
|
||||
<div class="edit-btn flexcenter" v-if="item['ismyself'] == 1" @click="openIAnswer(index)">
|
||||
<img class="edit-icon" src="./img/edit-icon.png" />
|
||||
</div>
|
||||
|
||||
<div class="answer-text" v-html="item['content']" @click="handleAnswerText"></div>
|
||||
<div class="info-box flexacenter">
|
||||
<div class="user-info flexacenter" @click="openUserInfo(index)">
|
||||
@ -269,23 +276,24 @@
|
||||
</div>
|
||||
|
||||
<div class="operate-box flexacenter">
|
||||
<div class="edit-box">
|
||||
<div class="edit-btn flexcenter" v-if="item['ismyself'] == 1" @click="openIAnswer(index)">
|
||||
<img class="edit-icon" src="./img/edit-icon.png" />
|
||||
<div class="interaction-box flexacenter flex1">
|
||||
<div class="interaction-item flexacenter pitch">
|
||||
<template v-if="item.ripostecount?.total"> 回应 <span class="amount">{{ item.ripostecount?.total }}</span> </template>
|
||||
<template v-else>添加回应</template>
|
||||
</div>
|
||||
<div class="interaction-item flexacenter">讨论 <span class="amount">19</span></div>
|
||||
<div class="interaction-item flexacenter">投币 <span class="amount">19</span></div>
|
||||
</div>
|
||||
<div class="operate-list flexacenter">
|
||||
<div class="operate-item flexacenter" @click="operateLike(item['token'], index)">
|
||||
<!-- <div class="operate-item flexacenter" @click="operateLike(item['token'], index)">
|
||||
<img class="operate-icon operate-like-icon" v-if="item['islike'] == 1" src="./img/like-icon-colours.png" />
|
||||
<img class="operate-icon operate-like-icon" v-else src="./img/like-icon.png" />
|
||||
{{ item["likenum"] }}
|
||||
</div>
|
||||
<!-- <div class="operate-item flexacenter" :class="{ commentnum: item['commentState'] }" @click="openCommentState(index)"> -->
|
||||
<div class="operate-item flexacenter" :class="{ commentnum: item['commentState'] }">
|
||||
<img class="operate-icon operate-comment-icon" src="./img/comment-icon.png" />
|
||||
<!-- {{ item["commentnum"] }} -->
|
||||
{{ item["commentnum"] }}
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="operate-item flexacenter" @click="operateCollect(item['token'], index)">
|
||||
<img class="operate-icon operate-collect-icon" v-if="item['iscollection'] == 1" src="./img/collect-icon-colours.svg" />
|
||||
<img class="operate-icon operate-collect-icon" v-else src="./img/collect-icon.png" />
|
||||
@ -319,6 +327,47 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="answer-coins" v-if="false">
|
||||
<div class="coins-show flexacenter">
|
||||
<img class="coins-icon" src="@/img/bi-icon.png" />
|
||||
<div class="coins-text flexacenter flex1">该回答已获 <span class="quantity">0</span> 个寄托币</div>
|
||||
<div class="coins-btn flexcenter">给TA投币</div>
|
||||
</div>
|
||||
<div class="answer-coins-list">
|
||||
<div class="answer-coins-item flexacenter" v-for="(item, index) in 9" :key="index">
|
||||
<div class="ranking">{{ index + 1 }}</div>
|
||||
<div class="coins-user flexacenter flex1">
|
||||
<img class="coins-user-img" src="https://axure-file.lanhuapp.com/md5__1f472a5724af5648ff3ece07a2d77b36.svg" />
|
||||
<div class="coins-user-name flex1">君语</div>
|
||||
</div>
|
||||
<div class="bi flexacenter">
|
||||
<div class="bi-amount">12</div>
|
||||
币
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="respond-area" v-if="true">
|
||||
<div class="respond-already-item flexacenter" :class="{ 'pitch': it.selected }" v-for="(it, i) in item.ripostelist" :key="i" @click="selectEomji(it.item, index)">
|
||||
<div class="code flexacenter" v-html="jointriposte(it.item)"></div>
|
||||
{{ it.num }}
|
||||
</div>
|
||||
<div v-if="item.ripostelist?.length <= 3" class="respond-select flexacenter">
|
||||
<template v-for="(it, i) in randomEmojis.slice(0, item.ripostelist?.length == 0 ? 8 : 5)" :key="i">
|
||||
<div class="respond-select-item" v-html="jointriposte(it)" @click="selectEomji(it, index)"></div>
|
||||
</template>
|
||||
<RespondAdd :riposteoptions="riposteoptions" @selectEomji="selectEomji" :index="index"></RespondAdd>
|
||||
</div>
|
||||
<RespondAdd v-else :riposteoptions="riposteoptions" :index="index" @selectEomji="selectEomji"></RespondAdd>
|
||||
</div>
|
||||
|
||||
<div class="respond-list-btn" v-if="item.ripostecount?.user > 0" @click="openRespondDetails(index)">
|
||||
共
|
||||
<span class="respond-list-btn-amount">{{ item.ripostecount?.user }}</span>
|
||||
人回应
|
||||
<img class="respond-list-btn-icon" src="@/img/arrowsRight.svg" />
|
||||
</div>
|
||||
|
||||
<template v-if="item['commentState']">
|
||||
<div class="post-comment flexacenter" :class="{ 'post-comment-radius': item.commentnum == 0 }">
|
||||
<input class="post-input flex1" placeholder="说点什么…" v-model="item['commentInput']" />
|
||||
@ -439,18 +488,6 @@
|
||||
<img class="more-comments-icon" src="@/img/arrow-circular-gray.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 评论为空时 -->
|
||||
<!-- <div class="comments-empty-box flexflex" v-else>
|
||||
<div class="empty-box flexcenter">
|
||||
<div class="dot-list flexacenter">
|
||||
<img class="dot-item" src="./img/dot-yellow.svg" v-for="item in 3" :key="item" />
|
||||
<img class="dot-item" src="./img/dot-gray.svg" v-for="item in 3" :key="item" />
|
||||
</div>
|
||||
<img class="empty-icon" src="./img/empty-icon.svg" />
|
||||
</div>
|
||||
<div class="empty-hint">和我说说你的想法或疑问吧</div>
|
||||
</div> -->
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@ -727,7 +764,7 @@
|
||||
<div class="form">
|
||||
<div class="radio-area flexacenter">
|
||||
<div class="radio-area-item flexacenter" :class="{ pitch: checkList.includes(s) }" v-for="(s, i) in reasonList" :key="i" @click="selectRadio(s)">
|
||||
<div class="radio-area-frame"></div>
|
||||
<div cdivlass="radio-area-frame"></div>
|
||||
{{ s }}
|
||||
</div>
|
||||
</div>
|
||||
@ -742,6 +779,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RespondPop v-if="respondPopState" :respondDetail="respondDetail" :respondPopObj="respondPopObj" @closePopList="closePopList" @selectEomji="selectEomji"></RespondPop>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -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 }
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
44
components/RespondAdd.vue
Normal file
44
components/RespondAdd.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="respond-add flexcenter" @click="open">
|
||||
<img class="respond-add-icon" src="@/img/plus-sign.svg" />
|
||||
<template v-if="selectEomjiPop">
|
||||
<div class="respond-list-mask" @click.stop="close"></div>
|
||||
<div class="respond-list-box" @click.stop="">
|
||||
<div class="respond-list-title">选择你的回应：</div>
|
||||
<div class="respond-list">
|
||||
<template v-for="item in riposteoptions" :key="item">
|
||||
<div class="respond-item" v-for="(item, key) in item.data" :key="key" v-html="jointriposte(key)" @click="selectEomji(key)"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
riposteoptions: Array,
|
||||
index: Number,
|
||||
})
|
||||
|
||||
const open = () => {
|
||||
selectEomjiPop.value = true
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
selectEomjiPop.value = false
|
||||
}
|
||||
|
||||
let selectEomjiPop = ref(false)
|
||||
const emit = defineEmits(["selectEomji"])
|
||||
|
||||
const selectEomji = key => {
|
||||
close()
|
||||
emit("selectEomji", key, props.index, true)
|
||||
}
|
||||
|
||||
const jointriposte = item => {
|
||||
return `&#x${item};`
|
||||
}
|
||||
</script>
|
||||
<style scoped></style>
|
||||
66
components/RespondPop.vue
Normal file
66
components/RespondPop.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="respond-pop-mask">
|
||||
<div class="respond-pop">
|
||||
<div class="respond-pop-no flexcenter" v-if="JSON.stringify(respondDetail) == '{}'">
|
||||
<img class="respond-title-icon" @click="closePopList()" src="//app.gter.net/image/gter/offer/imgdetails/cross-grey.png?v=5.1.78_206050707" />
|
||||
<img src="//app.gter.net/image/gter/offer/imgdetails/no-discussion.png?v=5.1.78_206050707" class="respond-pop-no-icon" />
|
||||
<div class="respond-pop-no-text">- 暂无数据 -</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="respond-pop-title">
|
||||
共<span class="respond-pop-amount">{{ respondPopObj.user }}</span
|
||||
>人回应
|
||||
<img class="respond-title-icon" @click="closePopList()" src="//app.gter.net/image/gter/offer/imgdetails/cross-grey.png?v=5.1.78_206050707" />
|
||||
</div>
|
||||
<div class="respond-list">
|
||||
<div class="respond-item" v-for="(item, index) in respondDetail" :key="index">
|
||||
<div class="respond-code" :class="{ 'pitch': item.selected }" v-html="jointriposte(item.item)" @click="selectEomjiListPop(item.item, index)"></div>
|
||||
<div class="respond-content flex1">
|
||||
<div class="respond-total">{{ item.user.length }} 人作此回应</div>
|
||||
<div class="user-item" v-for="(item, index) in item.user" :key="index" @click="TAHomePage(item.uin)">
|
||||
<img class="user-avatar" :src="item.avatar" />
|
||||
{{ item.nickname || item.username }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
respondDetail: Array,
|
||||
respondPopObj: Object,
|
||||
})
|
||||
|
||||
// 点击ta的主页
|
||||
const TAHomePage = uin => {
|
||||
redirectToExternalWebsite(`https://bbs.gter.net/home.php?mod=space&uid=${uin}`)
|
||||
}
|
||||
|
||||
// 跳转 url
|
||||
const redirectToExternalWebsite = url => {
|
||||
const link = document.createElement("a")
|
||||
link.href = url
|
||||
link.target = "_blank"
|
||||
link.click()
|
||||
}
|
||||
|
||||
let selectEomjiPop = ref(false)
|
||||
const emit = defineEmits(["closePopList","selectEomji"])
|
||||
|
||||
const selectEomjiListPop = key => {
|
||||
console.log("key",key);
|
||||
emit("selectEomji", key, props.respondPopObj.index || 0, false, true)
|
||||
}
|
||||
|
||||
const closePopList = () => {
|
||||
emit("closePopList")
|
||||
}
|
||||
|
||||
const jointriposte = item => {
|
||||
return `&#x${item};`
|
||||
}
|
||||
</script>
|
||||
<style scoped></style>
|
||||
6
img/arrowsRight.svg
Normal file
6
img/arrowsRight.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="6px" height="10px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -341 -2901 )">
|
||||
<path d="M 5.89690721649484 4.76953907815631 C 5.96563573883162 4.83633934535738 6 4.91315965263861 6 5 C 6 5.08684034736139 5.96563573883162 5.16366065464262 5.89690721649484 5.23046092184369 L 1.09278350515464 9.8997995991984 C 1.02405498281787 9.96659986639947 0.945017182130584 10 0.855670103092783 10 C 0.766323024054983 10 0.687285223367698 9.96659986639947 0.618556701030928 9.8997995991984 L 0.103092783505155 9.39879759519038 C 0.0343642611683849 9.33199732798931 0 9.25517702070808 0 9.16833667334669 C 0 9.0814963259853 0.0343642611683849 9.00467601870407 0.103092783505155 8.93787575150301 L 4.15463917525773 5 L 0.103092783505155 1.06212424849699 C 0.0343642611683849 0.995323981295925 0 0.918503674014696 0 0.831663326653307 C 0 0.744822979291916 0.0343642611683849 0.668002672010687 0.103092783505155 0.601202404809619 L 0.618556701030928 0.100200400801603 C 0.687285223367698 0.0334001336005341 0.766323024054983 0 0.855670103092783 0 C 0.945017182130584 0 1.02405498281787 0.0334001336005341 1.09278350515464 0.100200400801603 L 5.89690721649484 4.76953907815631 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 341 2901 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
img/bi-icon.png
Normal file
BIN
img/bi-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
6
img/plus-sign.svg
Normal file
6
img/plus-sign.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1279 -955 )">
|
||||
<path d="M 13.7215909090909 5.36931818181818 C 13.907196969697 5.55492424242424 14 5.78030303030303 14 6.04545454545454 L 14 7.95454545454545 C 14 8.21969696969697 13.907196969697 8.44507575757576 13.7215909090909 8.63068181818182 C 13.5359848484848 8.81628787878788 13.3106060606061 8.90909090909091 13.0454545454545 8.90909090909091 L 8.90909090909091 8.90909090909091 L 8.90909090909091 13.0454545454545 C 8.90909090909091 13.3106060606061 8.81628787878788 13.5359848484848 8.63068181818182 13.7215909090909 C 8.44507575757576 13.907196969697 8.21969696969697 14 7.95454545454546 14 L 6.04545454545455 14 C 5.78030303030303 14 5.55492424242424 13.907196969697 5.36931818181818 13.7215909090909 C 5.18371212121212 13.5359848484848 5.09090909090909 13.3106060606061 5.09090909090909 13.0454545454545 L 5.09090909090909 8.90909090909091 L 0.954545454545454 8.90909090909091 C 0.689393939393939 8.90909090909091 0.464015151515152 8.81628787878788 0.278409090909091 8.63068181818182 C 0.0928030303030303 8.44507575757576 0 8.21969696969697 0 7.95454545454545 L 0 6.04545454545454 C 0 5.78030303030303 0.0928030303030303 5.55492424242424 0.278409090909091 5.36931818181818 C 0.464015151515152 5.18371212121212 0.689393939393939 5.09090909090909 0.954545454545454 5.09090909090909 L 5.09090909090909 5.09090909090909 L 5.09090909090909 0.954545454545455 C 5.09090909090909 0.689393939393939 5.18371212121212 0.464015151515151 5.36931818181818 0.278409090909091 C 5.55492424242424 0.0928030303030298 5.78030303030303 0 6.04545454545455 0 L 7.95454545454546 0 C 8.21969696969697 0 8.44507575757576 0.0928030303030298 8.63068181818182 0.278409090909091 C 8.81628787878788 0.464015151515151 8.90909090909091 0.689393939393939 8.90909090909091 0.954545454545455 L 8.90909090909091 5.09090909090909 L 13.0454545454545 5.09090909090909 C 13.3106060606061 5.09090909090909 13.5359848484848 5.18371212121212 13.7215909090909 5.36931818181818 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1279 955 )" />
|
||||
</g>
|
||||
</svg>
|
||||
397
index.css
397
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;
|
||||
}
|
||||
|
||||
448
index.less
448
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user