<template>
<div>
<div class="container faqs layui-fluid">
<div class="layui-row">
<div class="col-xs-16 main">
<div class="category-title">熱門問題</div>
<div class="questions">
<a href v-for="index in jun" class="question-title">{{index.topic}}</a>
<a href class="question-title">爲什麼文章會被鎖定？</a>
<a href class="question-title">如果你被封號了？</a>
<a href class="question-title">如何更換綁定的手機號，原有手機號不用了怎麼辦？</a>
<a href class="question-title">簡書官方專題投稿指南大全</a>
<a href class="question-title">公告：簡書關注和漲粉的一些說明</a>
<a href class="question-title">關於舉報“抄襲類文章”的說明</a>
<a href class="question-title">文章字數統計有問題怎麼辦</a>
<a href class="question-title">如何在簡書進行創作</a>
<a href class="question-title">刪除的文章如何找回，有回收站嗎？</a>
</div>
<div class="category-title">如何玩轉簡書</div>
<div class="questions">
<a href v-for="index in jun" class="question-title">{{index.class_name}}</a>
<span>
<a v-loading="loading" v-if="cust" @click="showCont" class="question-title more">
展開全部
<i class="el-icon-arrow-down"></i>
</a>
</span>
<div v-if="show">
<a href class="question-title">如何讓更多的人看到自己的文章</a>
<a href class="question-title">公告：關於首頁投稿專題密集投稿相關問題</a>
<a href class="question-title">如何創建並玩轉屬於你自己的專題</a>
<a href class="question-title">公告：簡書關注和漲粉的一些說明</a>
<a href class="question-title">簡書誠邀您開通付費權限</a>
<a href class="question-title">參與“分享有獎計劃”，賞金拿到手軟！</a>
<a href class="question-title">招募 | 寶玉社羣運營培訓生</a>
<a href class="question-title">終於等到你，還好我沒放棄</a>
</div>
</div>
<div class="category-title">簡書帳號問題</div>
<div class="questions">
<a v-for="index in jun" href class="question-title">{{index.topic_first}}</a>
<span>
<a v-loading="loading" v-if="cust2" @click="showCont2" class="question-title more">
展開全部
<i class="el-icon-arrow-down"></i>
</a>
</span>
<div v-if="show2">
<a href class="question-title">我記得簡書的暱稱，忘記了登錄方式怎麼辦</a>
<a href class="question-title">如何註銷簡書賬號</a>
<a href class="question-title">如何綁定和解綁手機號/郵箱</a>
<a href class="question-title">如果你發現自己帳號裏的文章/錢包金額都沒了</a>
<a href class="question-title">無法接收短信驗證碼</a>
<a href class="question-title">多個賬號支持合併嗎？</a>
<a href class="question-title">綁定賬號的時候提示被佔用怎麼辦？</a>
<a href class="question-title">如何更換綁定的手機號，原有手機號不用了怎麼辦？</a>
</div>
</div>
<div class="category-title">身份認證</div>
<div class="questions">
<a href v-for="index in jun" class="question-title">{{index.bookname}}</a>
</div>
<div class="category-title">簡書幫助中心</div>
<div class="questions">
<a href class="question-title">驗證碼控件異常問題的錯誤提示詳情</a>
<a href class="question-title">歷史版本</a>
<a href class="question-title">上傳圖片的私密性說明</a>
<span>
<a v-loading="loading" v-if="cust3" @click="showCont3" class="question-title more">
展開全部
<i class="el-icon-arrow-down"></i>
</a>
</span>
<div v-if="show3">
<a href class="question-title">我記得簡書的暱稱，忘記了登錄方式怎麼辦</a>
<a href class="question-title">如何註銷簡書賬號</a>
<a href class="question-title">如何綁定和解綁手機號/郵箱</a>
<a href class="question-title">如果你發現自己帳號裏的文章/錢包金額都沒了</a>
<a href class="question-title">無法接收短信驗證碼</a>
<a href class="question-title">多個賬號支持合併嗎？</a>
<a href class="question-title">綁定賬號的時候提示被佔用怎麼辦？</a>
<a href class="question-title">如何更換綁定的手機號，原有手機號不用了怎麼辦？</a>
</div>
</div>
<div class="category-title">有關簡書文章的一切</div>
<div class="questions">
<a href class="question-title">添加寫文章快捷方式到桌面</a>
<a href class="question-title">文章喜歡數變動說明</a>
<a href class="question-title">如何寫一個整潔好看的標題</a>
<span>
<a v-loading="loading" v-if="cust4" @click="showCont4" class="question-title more">
展開全部
<i class="el-icon-arrow-down"></i>
</a>
</span>
<div v-if="show4">
<a href class="question-title">文章字數統計有問題怎麼辦</a>
<a href class="question-title">簡書文章代碼高亮指南</a>
<a href class="question-title">App 生成圖片分享時文章內圖片無法顯示/郵箱</a>
<a href class="question-title">iOS 版本無法讚賞問題</a>
<a href class="question-title">刪除的文章如何找回，有回收站嗎？</a>
<a href class="question-title">文章發佈後，遇到亂碼怎麼辦？</a>
<a href class="question-title">文章閱讀量不高？來投稿簡書官方專題吧！</a>
<a href class="question-title">文章列表處的縮略圖不顯示怎麼辦？</a>
<a href class="question-title">不想分享小程序怎麼辦？</a>
</div>
</div>
</div>
<div class="col-xs-7 col-xs-offset-1 aside" style="margin-top:60px;">
<div class="go-to-feedback">
<img src="../../../public/images/jun2.png" alt>
<div class="text">
沒解決你的疑問？
<a href>
去反饋
<i class="el-icon-arrow-right"></i>
</a>
</div>
</div>
<div class="hint-text">帳戶凍結、文章鎖定問題，請郵件聯繫 [email protected]</div>
<div
class="hint-text"
>程序/功能問題、bug 反饋，可添加“簡書專題社羣委員會委員長”微信號：Jianshu_dama，備註“Web公測”，加羣第一時間獲得幫助。</div>
<div class="hint-text">
也可以
<a href="/contact">
聯繫我們
<i class="el-icon-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
jun:'',
activeNames: ["1"],
show: false,
show2: false,
cust: true,
cust2: true,
show3: false,
cust3: true,
show4: false,
cust4: true,
loading: false
};
},
created(){
this.axios.get('https://www.apiopen.top/novelApi').then((response) => {
console.log(response.data.data[1]);
this.jun=response.data.data;
console.log(this.jun);
}).catch((error)=>{
console.log(error)
})
},
methods: {
handleChange(val) {
console.log(val);
},
showCont: function() {
this.show = !this.show;
this.cust = !this.cust;
},
showCont2: function() {
this.show2 = !this.show2;
this.cust2 = !this.cust2;
},
showCont3: function() {
this.show3 = !this.show3;
this.cust3 = !this.cust3;
},
showCont4: function() {
this.show4 = !this.show4;
this.cust4 = !this.cust4;
}
},
components: {
nav11
}
};
</script>
<style scoped>
* {
box-sizing: border-box;
}
.faqs {
padding: 30px 0;
}
.container {
width: 960px;
margin: 0 auto;
display: flex;
}
.col-xs-16 {
width: 66.66667%;
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.main .category-title {
margin-bottom: 15px;
padding-left: 10px;
font-size: 20px;
line-height: 1;
color: #333;
border-left: 4px solid #ea6f5a;
}
.questions {
margin-bottom: 30px;
padding: 10px 28px;
border-radius: 6px;
border: 1px solid #d5d5d5;
}
.question-title {
display: block;
padding: 12px 0;
font-size: 15px;
color: #3194d0;
border-bottom: 1px solid #d5d5d5;
}
a {
text-decoration: none;
}
.questions a:hover {
text-decoration: underline;
}
.questions .question-title.more {
text-align: center;
color: #999;
}
.questions .question-title:last-child {
border-bottom: none;
}
.main .questions .question-title {
display: block;
padding: 12px 0;
font-size: 15px;
border-bottom: 1px solid #d5d5d5;
}
a {
cursor: pointer;
}
.faqs .main .questions .question-title:last-child {
border-bottom: none;
}
.question-title:hover {
text-decoration: none;
}
.questions span a:hover {
text-decoration: none;
}
.col-xs-offset-1 {
margin-left: 4.16667%;
}
.col-xs-7 {
float: left;
width: 29.16667%;
}
.go-to-feedback img {
width: 60px;
}
.aside .go-to-feedback .text {
display: inline-block;
margin-left: 10px;
vertical-align: middle;
font-size: 14px;
color: #333;
}
img {
vertical-align: middle;
}
.aside .go-to-feedback .text a {
display: block;
}
.faqs .aside a {
margin-top: 3px;
color: #3194d0;
}
i {
font-size: inherit;
font-style: normal;
font-weight: 600 !important;
}
.aside .hint-text {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #f0f0f0;
font-size: 14px;
}
@media (max-width: 768px) {
.col-xs-16 {
width: 100%;
color: black;
height: auto;
}
.col-xs-7 {
width: 100% !important;
padding-right: 32px;
}
.layui-fluid {
width: 100%;
}
.col-xs-offset-1 {
margin-left: 0;
padding-left: 25px;
}
}
</style>