添加投币和回应
This commit is contained in:
A1300399510
parent
e7f6bbeaa4
commit
21ed7d94ef
353
app.vue
353
app.vue
@ -205,11 +205,14 @@
|
|||||||
<img class="operate-icon operate-collect-icon" style="width: 13px; height: 8px;" src="./img/view-icon.svg" />
|
<img class="operate-icon operate-collect-icon" style="width: 13px; height: 8px;" src="./img/view-icon.svg" />
|
||||||
{{ detailsInfo["viewnum"] || 0 }}
|
{{ detailsInfo["viewnum"] || 0 }}
|
||||||
</div>
|
</div>
|
||||||
|
<ClientOnly>
|
||||||
<div class="operate-item flexacenter" @click="operateCollect()">
|
<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-if="detailsIscollection == 0" src="./img/collect-icon.png" />
|
||||||
<img class="operate-icon operate-collect-icon" v-else src="./img/collect-icon-colours.svg" />
|
<img class="operate-icon operate-collect-icon" v-else src="./img/collect-icon-colours.svg" />
|
||||||
{{ detailsInfo["collectionnum"] > 0 ? detailsInfo["collectionnum"] : "收藏" }}
|
{{ detailsInfo["collectionnum"] > 0 ? detailsInfo["collectionnum"] : "收藏" }}
|
||||||
</div>
|
</div>
|
||||||
|
</ClientOnly>
|
||||||
|
|
||||||
<div class="operate-item flexacenter operate-transmit" @mouseenter.stop="closeTransmitState()" @mouseleave.stop="closeAllTransmitState()">
|
<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" />
|
<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">
|
<div class="answer-box-item" v-for="(item, index) in answerList" :key="index">
|
||||||
<img class="aa" src="@/img/A.png" />
|
<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="answer-text" v-html="item['content']" @click="handleAnswerText"></div>
|
||||||
<div class="info-box flexacenter">
|
<div class="info-box flexacenter">
|
||||||
<div class="user-info flexacenter" @click="openUserInfo(index)">
|
<div class="user-info flexacenter" @click="openUserInfo(index)">
|
||||||
@ -269,23 +276,24 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="operate-box flexacenter">
|
<div class="operate-box flexacenter">
|
||||||
<div class="edit-box">
|
<div class="interaction-box flexacenter flex1">
|
||||||
<div class="edit-btn flexcenter" v-if="item['ismyself'] == 1" @click="openIAnswer(index)">
|
<div class="interaction-item flexacenter pitch">
|
||||||
<img class="edit-icon" src="./img/edit-icon.png" />
|
<template v-if="item.ripostecount?.total"> 回应 <span class="amount">{{ item.ripostecount?.total }}</span> </template>
|
||||||
|
<template v-else>添加回应</template>
|
||||||
</div>
|
</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>
|
||||||
<div class="operate-list flexacenter">
|
<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-if="item['islike'] == 1" src="./img/like-icon-colours.png" />
|
||||||
<img class="operate-icon operate-like-icon" v-else src="./img/like-icon.png" />
|
<img class="operate-icon operate-like-icon" v-else src="./img/like-icon.png" />
|
||||||
{{ item["likenum"] }}
|
{{ item["likenum"] }}
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="operate-item flexacenter" :class="{ commentnum: item['commentState'] }" @click="openCommentState(index)"> -->
|
|
||||||
<div class="operate-item flexacenter" :class="{ commentnum: item['commentState'] }">
|
<div class="operate-item flexacenter" :class="{ commentnum: item['commentState'] }">
|
||||||
<img class="operate-icon operate-comment-icon" src="./img/comment-icon.png" />
|
<img class="operate-icon operate-comment-icon" src="./img/comment-icon.png" />
|
||||||
<!-- {{ item["commentnum"] }} -->
|
|
||||||
{{ item["commentnum"] }}
|
{{ item["commentnum"] }}
|
||||||
</div>
|
</div> -->
|
||||||
<div class="operate-item flexacenter" @click="operateCollect(item['token'], index)">
|
<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-if="item['iscollection'] == 1" src="./img/collect-icon-colours.svg" />
|
||||||
<img class="operate-icon operate-collect-icon" v-else src="./img/collect-icon.png" />
|
<img class="operate-icon operate-collect-icon" v-else src="./img/collect-icon.png" />
|
||||||
@ -319,6 +327,47 @@
|
|||||||
</div>
|
</div>
|
||||||
</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']">
|
<template v-if="item['commentState']">
|
||||||
<div class="post-comment flexacenter" :class="{ 'post-comment-radius': item.commentnum == 0 }">
|
<div class="post-comment flexacenter" :class="{ 'post-comment-radius': item.commentnum == 0 }">
|
||||||
<input class="post-input flex1" placeholder="说点什么…" v-model="item['commentInput']" />
|
<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" />
|
<img class="more-comments-icon" src="@/img/arrow-circular-gray.png" />
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -727,7 +764,7 @@
|
|||||||
<div class="form">
|
<div class="form">
|
||||||
<div class="radio-area flexacenter">
|
<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-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 }}
|
{{ s }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -742,6 +779,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<RespondPop v-if="respondPopState" :respondDetail="respondDetail" :respondPopObj="respondPopObj" @closePopList="closePopList" @selectEomji="selectEomji"></RespondPop>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -757,9 +796,8 @@
|
|||||||
// "todaysigned": 0
|
// "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"
|
import axios from "axios"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "#answer-app",
|
name: "#answer-app",
|
||||||
async setup() {
|
async setup() {
|
||||||
@ -771,8 +809,7 @@ export default {
|
|||||||
emulateJSON: true,
|
emulateJSON: true,
|
||||||
withCredentials: true,
|
withCredentials: true,
|
||||||
headers: {
|
headers: {
|
||||||
authorization: process.env.NODE_ENV !== "production" && "223fe8a4ea0ede029244b3b01f0bdaad", // 头部标记 ada
|
authorization: process.env.NODE_ENV !== "production" && "c5438975031a43a61c13252623753fc5", // 头部标记
|
||||||
// "7a89997c2ccd8cb5ed8cb20d843dafdd", // 头部标记 ada
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
.then(function (res) {
|
.then(function (res) {
|
||||||
@ -806,8 +843,7 @@ export default {
|
|||||||
emulateJSON: true,
|
emulateJSON: true,
|
||||||
withCredentials: true,
|
withCredentials: true,
|
||||||
headers: {
|
headers: {
|
||||||
authorization: process.env.NODE_ENV !== "production" && "223fe8a4ea0ede029244b3b01f0bdaad", // 头部标记
|
authorization: process.env.NODE_ENV !== "production" && "c5438975031a43a61c13252623753fc5", // 头部标记
|
||||||
// "7a89997c2ccd8cb5ed8cb20d843dafdd", // 头部标记
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
.then(function (res) {
|
.then(function (res) {
|
||||||
@ -884,6 +920,8 @@ export default {
|
|||||||
|
|
||||||
const params = route.query
|
const params = route.query
|
||||||
|
|
||||||
|
// console.log(params);
|
||||||
|
// getDetails(params.uniqid)
|
||||||
// 是否直接打开提问
|
// 是否直接打开提问
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (params["ispublish"]) questionsInit()
|
if (params["ispublish"]) questionsInit()
|
||||||
@ -1290,14 +1328,22 @@ export default {
|
|||||||
let data = res.data
|
let data = res.data
|
||||||
|
|
||||||
data.data.forEach((element, index) => {
|
data.data.forEach((element, index) => {
|
||||||
element["commentList"] = []
|
console.log("element", element)
|
||||||
if (element["commentnum"] > 0) {
|
|
||||||
element["showOneCommentState"] = true
|
|
||||||
|
|
||||||
nextTick(() => {
|
// element["commentList"] = []
|
||||||
openCommentState(index)
|
// if (element["commentnum"] > 0) {
|
||||||
})
|
// element["showOneCommentState"] = true
|
||||||
} else element["commentState"] = 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
|
// console.log("data.data", data.data) showOneCommentState
|
||||||
@ -1663,7 +1709,6 @@ export default {
|
|||||||
|
|
||||||
targetAnswerList[index]["commentList"][ind]["child"] = merged1
|
targetAnswerList[index]["commentList"][ind]["child"] = merged1
|
||||||
answerList.value = targetAnswerList
|
answerList.value = targetAnswerList
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2304,6 +2349,7 @@ export default {
|
|||||||
// 用于发送某个URL的PV统计请求
|
// 用于发送某个URL的PV统计请求
|
||||||
if (window._czc) window._czc.push(["_trackPageview", contentUrl])
|
if (window._czc) window._czc.push(["_trackPageview", contentUrl])
|
||||||
}
|
}
|
||||||
|
|
||||||
// 删除 url 参数的key
|
// 删除 url 参数的key
|
||||||
const deleteState = (keys = []) => {
|
const deleteState = (keys = []) => {
|
||||||
if (typeof window === "undefined") return
|
if (typeof window === "undefined") return
|
||||||
@ -2581,40 +2627,8 @@ export default {
|
|||||||
|
|
||||||
replaceState({ uniqid: params["uniqid"] })
|
replaceState({ uniqid: params["uniqid"] })
|
||||||
seo.value = data.seo
|
seo.value = data.seo
|
||||||
// handleInsertRelatedlist(params["uniqid"]);
|
|
||||||
})
|
})
|
||||||
.catch(error => console.error(error))
|
.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", {
|
await $ajax("/api/lists", {
|
||||||
@ -2786,7 +2800,6 @@ export default {
|
|||||||
|
|
||||||
// 点击发送信息
|
// 点击发送信息
|
||||||
const sendMessage = uin => {
|
const sendMessage = uin => {
|
||||||
console.log("uin", uin)
|
|
||||||
if (uin && typeof messagePrivateItem == "function") {
|
if (uin && typeof messagePrivateItem == "function") {
|
||||||
messagePrivateItem({ uin: uin })
|
messagePrivateItem({ uin: uin })
|
||||||
return
|
return
|
||||||
@ -2836,7 +2849,211 @@ export default {
|
|||||||
answerList.value[index]["showOneCommentState"] = false
|
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>
|
</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 {
|
body::-webkit-scrollbar {
|
||||||
width: 0 !important;
|
width: 0 !important;
|
||||||
}
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "emojifont";
|
||||||
|
src: url("https://oss.x-php.com/static/riposte/emojifont-sbix.ttf?t=questions");
|
||||||
|
}
|
||||||
#answer-app * {
|
#answer-app * {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -728,6 +732,20 @@ a {
|
|||||||
margin-bottom: 21px;
|
margin-bottom: 21px;
|
||||||
position: relative;
|
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 * {
|
#answer-app .main .details-area-box .details-box .answer-box-item * {
|
||||||
white-space: break-spaces !important;
|
white-space: break-spaces !important;
|
||||||
}
|
}
|
||||||
@ -764,18 +782,185 @@ a {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
#answer-app .main .details-area-box .details-box .answer-box-item .operate-box {
|
#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;
|
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;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
|
margin-right: 18px;
|
||||||
border-radius: 50%;
|
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 {
|
#answer-app .main .details-area-box .details-box .answer-box-item .answer-coins .answer-coins-list .answer-coins-item .coins-user .coins-user-name {
|
||||||
width: 16px;
|
font-weight: 400;
|
||||||
height: 16px;
|
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 {
|
#answer-app .main .details-area-box .details-box .answer-box-item .post-comment {
|
||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
@ -1061,6 +1246,7 @@ a {
|
|||||||
height: 54px;
|
height: 54px;
|
||||||
border-top: 1px dotted #ebebeb;
|
border-top: 1px dotted #ebebeb;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item {
|
#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
@ -2047,3 +2233,202 @@ a {
|
|||||||
height: 16px;
|
height: 16px;
|
||||||
margin-right: 5px;
|
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;
|
||||||
|
}
|
||||||
|
|||||||
442
index.less
442
index.less
@ -23,6 +23,11 @@ body {
|
|||||||
-ms-overflow-style: none;
|
-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 * {
|
#answer-app * {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -905,6 +910,21 @@ a {
|
|||||||
margin-bottom: 21px;
|
margin-bottom: 21px;
|
||||||
position: relative;
|
position: relative;
|
||||||
// overflow: hidden;
|
// 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;
|
white-space: break-spaces !important;
|
||||||
@ -948,21 +968,209 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.operate-box {
|
.operate-box {
|
||||||
padding: 0 24px;
|
padding: 0 24px 22px;
|
||||||
|
background-color: rgba(251, 251, 251, 1);
|
||||||
|
|
||||||
.edit-box {
|
.interaction-box {
|
||||||
.edit-btn {
|
.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;
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
.amount {
|
||||||
|
color: #555555;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
&: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;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
|
margin-right: 18px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: #f6f6f6;
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.edit-icon {
|
.respond-area {
|
||||||
width: 16px;
|
background-color: rgba(251, 251, 251, 1);
|
||||||
height: 16px;
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1323,6 +1531,7 @@ a {
|
|||||||
height: 54px;
|
height: 54px;
|
||||||
border-top: 1px dotted #ebebeb;
|
border-top: 1px dotted #ebebeb;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
.operate-list {
|
.operate-list {
|
||||||
.operate-item {
|
.operate-item {
|
||||||
@ -2535,4 +2744,223 @@ a {
|
|||||||
margin-right: 5px;
|
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