A1300399510/PC-questions-answersnuxt
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
A1300399510 2023-12-18 11:08:27 +08:00
parent 8fa746564b
commit d731eb4796
7 changed files with 2972 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2597
app copy.vue Normal file
View File

File diff suppressed because it is too large Load Diff

59
app.vue
View File

@ -71,7 +71,7 @@
<div v-else class="total grid-item" @click="cut">共 {{ total }} 条问答</div> <div v-else class="total grid-item" @click="cut">共 {{ total }} 条问答</div>
</div> </div>
<div class="list" id="list" :style="listStyle()"> <div class="list" id="list" :style="[listStyle(), {height: listHeight + 'px'}]">
<a class="item grid-item flexflex" v-for="(item, index) in list" :key="index" :style="itemStyle(index, item['content'])" :class="{pitch: index === pitchIndex, upLevel: index === pitchIndex - 1}" :href="setItemUrl(item['uniqid'])" @click.stop.prevent="getDetails(item['uniqid'], index)"> <a class="item grid-item flexflex" v-for="(item, index) in list" :key="index" :style="itemStyle(index, item['content'])" :class="{pitch: index === pitchIndex, upLevel: index === pitchIndex - 1}" :href="setItemUrl(item['uniqid'])" @click.stop.prevent="getDetails(item['uniqid'], index)">
<img class="dot" src="./img/dot.svg" /> <img class="dot" src="./img/dot.svg" />
<div class="content" :style="{width: type == 'list' ? '531px' : '430px'}"> <div class="content" :style="{width: type == 'list' ? '531px' : '430px'}">
@ -81,7 +81,7 @@
</div> </div>
<div class="answer ellipsis" v-if="item['content']" v-html="item['content']"></div> <div class="answer ellipsis" v-if="item['content']" v-html="item['content']"></div>
<div class="bottom flexacenter"> <div class="bottom flexacenter">
<div class="typename" v-if="item['typename']">{{ item["typename"] }}</div> <div class="typename flexcenter" v-if="item['typename']">{{ item["typename"] }}</div>
<div v-else></div> <div v-else></div>
<div class="flexacenter"> <div class="flexacenter">
<div class="quantity">{{ item["answers"] == 0 ? "暂无回答" : "共" + item["answers"] + "个回答" }}</div> <div class="quantity">{{ item["answers"] == 0 ? "暂无回答" : "共" + item["answers"] + "个回答" }}</div>
@ -1861,11 +1861,11 @@ export default {
if (newtype == "list") { if (newtype == "list") {
width = "1200px" width = "1200px"
margin = "0 auto" margin = "0 auto"
height = Math.ceil(list.value.length / 2) * 128 + "px" // height = Math.ceil(list.value.length / 2) * 128 + "px"
} else { } else {
width = "calc((100vw - 1200px) / 2 + 512px)" width = "calc((100vw - 1200px) / 2 + 512px)"
margin = "initial" margin = "initial"
height = list.value.length * 128 + "px" // height = list.value.length * 128 + "px"
} }
return { return {
width, width,
@ -1874,15 +1874,47 @@ export default {
} }
} }
const itemStyle = (index, content) => { let listHeight = ref(0)
let itemHeightLeft = 0
let itemHeightRight = 0
const itemStyle = computed((index, content) => {
if (index == 0) {
itemHeightLeft = 0
itemHeightRight = 0
}
const newtype = type.value const newtype = type.value
// let itemHeight = content == "" ? 106 : 128 // let itemHeight = content == "" ? 107 : 128
let obj = {} let obj = {}
if (newtype == "list") { if (newtype == "list") {
let top = Math.floor(index / 2) * 128 + "px" // let top = Math.floor(index / 2) * 128 + "px"
obj["top"] = top // obj["top"] = Math.floor(index / 2) * 128 + "px"
if (index % 2 == 0) obj["left"] = 0 // obj["top"] = Math.floor(index / 2) * 128 + "px"
else obj["left"] = 649 + "px"
if (itemHeightLeft <= itemHeightRight) {
obj["top"] = itemHeightLeft + "px"
itemHeightLeft += content == "" ? 107 : 136
obj["left"] = 0
} else {
obj["top"] = itemHeightRight + "px"
itemHeightRight += content == "" ? 107 : 136
obj["left"] = 649 + "px"
}
// if (index % 2 == 0) obj["left"] = 0
// else obj["left"] = 649 + "px"
// if (index % 2 == 0) {
// obj["top"] = itemHeightLeft + "px"
// itemHeightLeft += content == "" ? 107 : 136
// } else {
// obj["top"] = itemHeightRight + "px"
// itemHeightRight += content == "" ? 107 : 136
// }
} else { } else {
obj["top"] = index * 128 + "px" obj["top"] = index * 128 + "px"
obj["left"] = 0 obj["left"] = 0
@ -1890,9 +1922,13 @@ export default {
// obj['backgroundColor'] = '#fbfbfb' // obj['backgroundColor'] = '#fbfbfb'
obj["paddingLeft"] = "calc((100vw - 1200px) / 2)" obj["paddingLeft"] = "calc((100vw - 1200px) / 2)"
} }
console.log(index + 1, list.value.length)
if (index + 1 == list.value.length) {
listHeight.value = Math.max(itemHeightLeft, itemHeightRight)
}
return obj return obj
} })
const bottomTpsStyle = (index, content) => { const bottomTpsStyle = (index, content) => {
const newtype = type.value const newtype = type.value
@ -2428,6 +2464,7 @@ export default {
} }
return { return {
listHeight,
bottomTpsStyle, bottomTpsStyle,
TAHomePage, TAHomePage,
sendMessage, sendMessage,

49
components/Header.vue Normal file
View File

@ -0,0 +1,49 @@
<template>
<header class="flexacenter" id="pageHeader">
<div class="flexacenter top">
<a href="./index.html"><img class="logo" @click="handleLogo" alt="寄托问答" src="./img/logo.png" /></a>
<div class="right flexacenter flex1">
<div class="searchInput flexacenter">
<input class="input flex1" placeholder="输入搜索关键词" v-model="keyword" @keydown.enter="searchClick()" @focus="searchFocus" @blur="searchBlur" />
<div class="clear-search flexacenter" v-if="isSearchMode">
<img class="cross-circle-black" @click="handleClickClear()" src="./img/cross-circle-black.png" />
<div class="halving-line"></div>
</div>
<img class="input-icon" src="./img/input-icon.png" @click="searchClick()" />
<div class="history-box" v-if="historicalSearchState" @click.stop="">
<div class="history-title">
历史搜索
</div>
<div class="history-list">
<div class="history-item ellipsis" v-for="(item, index) in historicalSearchList" :key="index" @click.stop="handleClickHistoricalItem(item)">{{ item }}</div>
</div>
</div>
</div>
<div class="btn-list flexacenter">
<div class="item flex1" @click="handleMy('collect')">
我的收藏
</div>
<div class="item flex1" @click="handleMy('questions')">
我的提问
</div>
<div class="item flex1" @click="handleMy('answers')">
我的回答
</div>
</div>
<div class="add-btn flexcenter" @click="questionsInit()">
<img class="add-icon" src="./img/add-icon.svg" />
我要提问
</div>
</div>
</div>
<div class="tab-box flexcenter" :class="{'tab-list-fixed': tabListFixeState}">
<div class="tab-list flexacenter">
<div class="item flexcenter" :class="{pitch: typePitch == null}" @click="cutType(null)">All</div>
<template v-for="(item, index) in typeList" :key="index">
<div class="halving-line">|</div>
<div class="item flexcenter" :class="{pitch: typePitch == it['id']}" v-for="it in item" :key="it" @click="cutType(it.id)">{{ it["name"] }}</div>
</template>
</div>
</div>
</header>
</template>

10
index.css
View File

@ -334,7 +334,6 @@ a {
transition-property: top, left, background; transition-property: top, left, background;
transition-duration: 0.5s; transition-duration: 0.5s;
border-right: 1px solid #ebebeb; border-right: 1px solid #ebebeb;
height: 128px;
background-color: #fff; background-color: #fff;
} }
#answer-app .main .list-box .list .item:first-of-type { #answer-app .main .list-box .list .item:first-of-type {
@ -382,10 +381,7 @@ a {
} }
#answer-app .main .list-box .list .item .content { #answer-app .main .list-box .list .item .content {
border-bottom: 1px dotted #ebebeb; border-bottom: 1px dotted #ebebeb;
padding-bottom: 20px; padding-bottom: 24px;
}
#answer-app .main .list-box .list .item .content .issue-title {
margin-bottom: 8px;
} }
#answer-app .main .list-box .list .item .content .issue-title .hot-icon { #answer-app .main .list-box .list .item .content .issue-title .hot-icon {
width: 16px; width: 16px;
@ -406,13 +402,14 @@ a {
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
font-size: 13px; font-size: 13px;
margin-bottom: 18px;
text-decoration: none; text-decoration: none;
margin-top: 8px;
} }
#answer-app .main .list-box .list .item .content .answer em { #answer-app .main .list-box .list .item .content .answer em {
color: #ff0000; color: #ff0000;
} }
#answer-app .main .list-box .list .item .content .bottom { #answer-app .main .list-box .list .item .content .bottom {
margin-top: 18px;
font-size: 12px; font-size: 12px;
justify-content: space-between; justify-content: space-between;
} }
@ -423,6 +420,7 @@ a {
border: 1px solid #ebebeb; border: 1px solid #ebebeb;
border-radius: 5px; border-radius: 5px;
padding: 0 3px; padding: 0 3px;
height: 21px;
} }
#answer-app .main .list-box .list .item .content .bottom .quantity { #answer-app .main .list-box .list .item .content .bottom .quantity {
color: #aaa; color: #aaa;

10
index.less
View File

@ -418,7 +418,7 @@ a {
transition-duration: 0.5s; transition-duration: 0.5s;
border-right: 1px solid #ebebeb; border-right: 1px solid #ebebeb;
height: 128px; // height: 128px;
background-color: #fff; background-color: #fff;
&:first-of-type { &:first-of-type {
@ -490,7 +490,7 @@ a {
.content { .content {
// width: 531px; // width: 531px;
border-bottom: 1px dotted #ebebeb; border-bottom: 1px dotted #ebebeb;
padding-bottom: 20px; padding-bottom: 24px;
// transition: all 0.3s; // transition: all 0.3s;
@ -502,7 +502,6 @@ a {
margin-right: 8px; margin-right: 8px;
} }
margin-bottom: 8px;
.issue { .issue {
font-weight: 650; font-weight: 650;
@ -521,8 +520,8 @@ a {
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
font-size: 13px; font-size: 13px;
margin-bottom: 18px;
text-decoration: none; text-decoration: none;
margin-top: 8px;
em { em {
color: #ff0000; color: #ff0000;
@ -530,6 +529,8 @@ a {
} }
.bottom { .bottom {
margin-top: 18px;
font-size: 12px; font-size: 12px;
// justify-content: flex-end; // justify-content: flex-end;
justify-content: space-between; justify-content: space-between;
@ -541,6 +542,7 @@ a {
border: 1px solid rgba(235, 235, 235, 1); border: 1px solid rgba(235, 235, 235, 1);
border-radius: 5px; border-radius: 5px;
padding: 0 3px; padding: 0 3px;
height: 21px;
} }
.quantity { .quantity {

0
pages/details/[id].vue Normal file
View File

268
pages/index/index.vue Normal file
View File

@ -0,0 +1,268 @@
<template>
<div>
<div class="" id="answer-app">
<div class="main flexflex" :class="{'mode-list': type == 'list'}">
<div class="list-box" @scroll="handleListScroll">
<div class="main-header" :style="{paddingLeft: type == 'list' ? 0 : 'calc((100vw - 1200px) / 2)'}">
<template v-if="isSearchMode">
<div class="search-keyword flexacenter" @click="handleClickClear()">
<div class="ellipsis">{{ keywordText }}</div>
<img class="search-keyword-cross" src="./img/cross-circle-icon.png" />
</div>
<div class="total grid-item" @click="cut">共 {{ total }} 条搜索结果</div>
</template>
<div v-else class="total grid-item" @click="cut">共 {{ total }} 条问答</div>
</div>
<div class="list" id="list" :style="[listStyle(), {height: listHeight + 'px'}]">
<a class="item grid-item flexflex" v-for="(item, index) in list" :key="index" :style="itemStyle(index, item['content'])" :class="{pitch: index === pitchIndex, upLevel: index === pitchIndex - 1}" :href="setItemUrl(item['uniqid'])" @click.stop.prevent="getDetails(item['uniqid'], index)">
<img class="dot" src="./img/dot.svg" />
<div class="content" :style="{width: type == 'list' ? '531px' : '430px'}">
<div class="issue-title flexcenter">
<img class="hot-icon" v-if="item['ishot'] == 1" src="./img/hot-icon.png" />
<div class="issue ellipsis flex1" v-html="item['title']"></div>
</div>
<div class="answer ellipsis" v-if="item['content']" v-html="item['content']"></div>
<div class="bottom flexacenter">
<div class="typename flexcenter" v-if="item['typename']">{{ item["typename"] }}</div>
<div v-else></div>
<div class="flexacenter">
<div class="quantity">{{ item["answers"] == 0 ? "暂无回答" : "共" + item["answers"] + "个回答" }}</div>
<template v-if="type == 'list'">
<div class="longString"></div>
<div class="answer-btn" @click.stop.prevent="openListIAnswer(index)">我来回答</div>
<!-- <div class="answer-btn" @click.stop="getDetails(item['uniqid'], index, true)">我来回答</div> -->
</template>
</div>
</div>
</div>
</a>
</div>
<div class="bottom-tps" :style="bottomTpsStyle()" v-if="inTheEndState">- 到底了 -</div>
<div class="empty-box flexcenter" v-if="isListEmptyState && list.length == 0">
<div class="dot-list flexacenter"><img class="item" src="./img/dot-yellow.svg" /><img class="item" src="./img/dot-yellow.svg" /><img class="item" src="./img/dot-yellow.svg" /><img class="item" src="./img/dot-gray.svg" /><img class="item" src="./img/dot-gray.svg" /><img class="item" src="./img/dot-gray.svg" /></div>
<img class="empty-icon" src="./img/empty-icon.svg" />
<div class="empty-hint" v-if="isSearchMode">没有找到相关结果，请更换搜索关键词</div>
<div class="empty-hint" v-else>暂无数据</div>
</div>
</div>
</div>
<!-- 我的弹窗 -->
<div class="popover-mask my-popover flexcenter" v-if="myType">
<div class="popover-box flexflex">
<img class="cross-icon" src="./img/cross-icon.png" @click="myType = ''" />
<div class="tab-list flexcenter">
<div class="tab-item flexacenter" :class="{pitch: myType == 'collect'}" @click="handleMy('collect')">
我的收藏
<div class="quantity">{{ myCollectionCount || myCount["collect"] || 0 }}</div>
</div>
<div class="long-string"></div>
<div class="tab-item flexacenter" :class="{pitch: myType == 'questions'}" @click="handleMy('questions')">
我的提问
<div class="quantity">{{ myQuestionsCount || myCount["questions"] || 0 }}</div>
</div>
<div class="long-string"></div>
<div class="tab-item flexacenter" :class="{pitch: myType == 'answers'}" @click="handleMy('answers')">
我的回答
<div class="quantity">{{ myAnswerCount || myCount["answer"] || 0 }}</div>
</div>
</div>
<div class="empty-box flexcenter" v-if="(myType == 'collect' && myCollectionList.length == 0) || (myType == 'answers' && myAnswerList.length == 0) || (myType == 'questions' && myQuestionsList.length == 0)">
<div class="dot-list flexacenter">
<img class="item" src="./img/dot-yellow.svg" />
<img class="item" src="./img/dot-yellow.svg" />
<img class="item" src="./img/dot-yellow.svg" />
<img class="item" src="./img/dot-gray.svg" />
<img class="item" src="./img/dot-gray.svg" />
<img class="item" src="./img/dot-gray.svg" />
</div>
<img class="empty-icon" src="./img/empty-icon.svg" />
<div class="empty-hint">暂无内容</div>
</div>
<div class="content-box collect-list" v-if="myType == 'collect' && myCollectionList.length != 0" @scroll="handleCollectionScroll">
<div class="item flexflex" v-for="(item, index) in myCollectionList" :key="item" @click.stop="myOpenDetails(item.data['uniqid'])">
<template v-if="item.type == 'askanswercollection'">
<div class="icon a flexcenter">A</div>
<div class="centre flexflex flex1">
<div class="titletitle ellipsis" v-html="item['data']['content']"></div>
<div class="text ellipsis">提问：{{ item["data"]["title"] }}</div>
</div>
<div class="delete-box flexacenter">
<img class="delete-icon" @click.stop="cancelCollection(item['token'], index)" src="./img/delete-icon.svg" />
</div>
</template>
<template v-else>
<div class="icon q flexcenter">Q</div>
<div class="centre flexflex flex1">
<div class="titletitle ellipsis">{{ item["data"]["title"] }}</div>
<div class="text ellipsis">{{ item["data"]["answers"] > 0 ? "共" + item["data"]["answers"] + "个回答" : "暂无回答" }}</div>
</div>
<div class="delete-box flexacenter">
<img class="delete-icon" @click.stop="cancelCollection(item['token'], index)" src="./img/delete-icon.svg" />
</div>
</template>
</div>
</div>
<div class="content-box answers-list" v-if="myType == 'answers' && myAnswerList.length != 0" @scroll="handleAnswersScroll">
<div class="item flexflex" v-for="(item, index) in myAnswerList" :key="item" @click.stop="myOpenDetails(item['uniqid'])">
<div class="icon a flexcenter">A</div>
<div class="centre flexflex flex1">
<div class="info flexacenter">
<div class="name">{{ item["nickname"] }}</div>
<div class="time">{{ handleDate(item["publicationdate"]) }}</div>
</div>
<div class="titletitle ellipsis" v-html="item['content']"></div>
<div class="text ellipsis">提问：{{ item["title"] }}</div>
</div>
<div class="operate-box flexacenter">
<div class="state-box flexacenter" @click.stop="cutAnswerPopupState(index)">
<div class="text">{{ item["anonymous"] == 0 ? "公开" : "匿名" }}</div>
<img class="arrows" src="./img/arrows-icon.svg" />
<div class="state-popup flexflex" v-if="item['popupState']">
<!-- <div class="state-popup-mask" @click.stop="cutAnswerPopupState(index)"></div> -->
<div class="state-popup-item flexacenter flex1" :class="{pitch: item['anonymous'] == 0}" @click.stop="changeAnonymous(item['token'], 0, index)">
<div class="">公开发表</div>
<img class="state-popup-icon" src="./img/tick-orange.svg" />
</div>
<div class="state-popup-item flexacenter flex1" :class="{pitch: item['anonymous'] == 1}" @click.stop="changeAnonymous(item['token'], 1, index)">
<div class="">匿名发表</div>
<img class="state-popup-icon" src="./img/tick-orange.svg" />
</div>
</div>
</div>
<img class="edit-icon" @click.stop="openIAnswer(index, 'my')" src="./img/edit-icon.png" />
</div>
</div>
</div>
<div class="content-box questions-list" v-if="myType == 'questions' && myQuestionsList.length != 0" @scroll="handleQuestionsScroll">
<div class="item flexflex" v-for="(item, index) in myQuestionsList" :key="item" @click.stop="myOpenDetails(item['uniqid'])">
<div class="icon q flexcenter">Q</div>
<div class="centre flexflex flex1">
<div class="info flexacenter">
<div class="name">{{ item["nickname"] }}</div>
<div class="time">{{ handleDate(item["publicationdate"]) }}</div>
</div>
<div class="titletitle ellipsis">{{ item["title"] }}</div>
<div class="text flexacenter">
<div class="new-answer flexacenter" v-if="item['authornewnum'] > 0">
有{{ item["authornewnum"] }}个新回答
<div class="long-string"></div>
</div>
{{ item["answers"] == 0 ? "暂无回答" : "共" + item["answers"] + "个回答" }}
</div>
</div>
<div class="operate-box flexacenter">
<div class="state-box flexacenter" @click.stop="cutQuestionsPopupState(index)">
<div class="text">{{ item["anonymous"] == 0 ? "公开" : "匿名" }}</div>
<img class="arrows" src="./img/arrows-icon.svg" />
<div class="state-popup flexflex" v-if="item['popupState']">
<div class="state-popup-item flexacenter flex1" :class="{pitch: item['anonymous'] == 0}" @click.stop="changeAnonymousQuestions(item['token'], 0, index)">
<div class="">公开发表</div>
<img class="state-popup-icon" src="./img/tick-orange.svg" />
</div>
<div class="state-popup-item flexacenter flex1" :class="{pitch: item['anonymous'] == 1}" @click.stop="changeAnonymousQuestions(item['token'], 1, index)">
<div class="">匿名发表</div>
<img class="state-popup-icon" src="./img/tick-orange.svg" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 我要提问 -->
<div class="popover-mask flexcenter issue-box" v-if="questionsSetp" @click="cutQuestionsSetp(0)">
<!-- 第一步 -->
<div class="choosing-theme" v-if="questionsSetp == 1" @click.stop="">
<div class="titletitle">
选择提问所属主题
</div>
<div class="theme-list flexflex">
<div class="theme-stair-box flexflex" v-for="(item, index) in questionsTypeList" :key="index">
<div class="theme-item flexcenter" v-for="item in item" :key="item.id" @click="choosingTheme(item.id)">{{ item.name }}</div>
</div>
</div>
</div>
<!-- 第二步 -->
<div class="issue-form" v-else @click.stop="">
<img class="issue-bj" src="./img/issue-bj.svg" />
<div class="flexcenter q">Q</div>
<img class="cross-icon" @click="cutQuestionsSetp(0)" src="./img/cross-icon.png" />
<div class="issue-input">
<textarea v-model="questionsObj.title" placeholder="一句话描述问题，以问号结尾"></textarea>
</div>
<textarea class="issue-replenish" v-model="questionsObj.content" placeholder="欢迎补充，清晰表达问题的关键点，可获得更有效的解答（非必填）"></textarea>
<div class="issue-bottom flexacenter">
<div class="option-box flexacenter" @click="cutAnonymous" style="color: #333;">
<img class="option-icon" v-if="questionsObj.anonymous == 0" src="./img/tick-no.svg" />
<img class="option-icon" v-else src="./img/tick-option.svg" />
匿名发表
<div class="" style="color: #aaa;">（发布后只能修改是否匿名）</div>
</div>
<div class="issue-btn flexcenter" @click="postingIssue">发布问题</div>
</div>
</div>
</div>
<!-- 编辑回答 -->
<div class="popover-mask flexcenter" v-if="IAnswerEditState">
<div class="edit-answers">
<img class="close-icon" src="./img/cross-icon.png" @click="closeIAnswer" />
<div class="titletitle">编辑回答</div>
<div class="question-textarea" :class="{placeholder: questionPlaceholderState}" contenteditable="true" @paste="handlePaste($event)" v-html="IAnswerInfo['text']" @input="handleInput"></div>
<div class="issue-bottom flexacenter">
<div class="option-box flexacenter" @click="amendIAnswer">
<img class="option-icon" v-if="IAnswerInfo['anonymous'] == 0" src="./img/tick-no.svg" />
<img class="option-icon" v-else src="./img/tick-option.svg" />
匿名发表
</div>
<div class="issue-btn flexcenter" @click="submitAnswer">提交回答</div>
</div>
</div>
</div>
<!-- 我来回答 -->
<div class="popover-mask flexcenter" v-if="IAnswerState">
<div class="i-answer-box flexflex">
<img class="close-icon" src="./img/cross-icon.png" @click="closeIAnswer" />
<div class="question-header">
<div class="question-title flexflex">
<div class="question-icon flexcenter">Q</div>
<div class="flex1" v-html="IAnswerInfo['title']"></div>
</div>
<div class="question-replenish" v-if="IAnswerInfo['content']" v-html="IAnswerInfo['content']"></div>
</div>
<div class="question-middle flexflex">
<div class="question-icon flexcenter">A</div>
<div class="question-textarea" :class="{placeholder: questionPlaceholderState}" contenteditable="true" @paste="handlePaste($event)" v-html="IAnswerInfo['text']" @input="handleInput"></div>
</div>
<div class="issue-bottom flexacenter">
<div class="option-box flexacenter" @click="amendIAnswer">
<img class="option-icon" v-if="IAnswerInfo['anonymous'] == 0" src="./img/tick-no.svg" />
<img class="option-icon" v-else src="./img/tick-option.svg" />
匿名发表
</div>
<div class="issue-btn flexcenter" @click="submitAnswer">提交回答</div>
</div>
</div>
</div>
<!-- 提示框 -->
<transition name="msg" appear v-show="msg['state']">
<div class="box-item" :class="boxClass()" :style="{top: 20 + 'px'}">
<div class="msg-container">{{ msg["text"] }}</div>
</div>
</transition>
</div>
</div>
</template>