<template> <h-view id="help-list" class="public-style"> <h-header :proportion="[5,1,1]" class="bar-custom"> <div slot="left" class="h-header-btn"> <img src="@/assets/userBind/arrow.png" @click="$routeGo()" > <span>帮助与反馈</span> </div> </h-header> <h-content class="my-content"> <div class="connect"> <div class="connect-top"> <img src="@/assets/help/call.png" > <span>联系我们</span> </div> <p>每日8:00-18:00</p> </div> <p class="matter">常见问题</p> <div class="question"> <div class="question-top" @click="show(0)"> <span>客户绑定相关问题</span> <img class="img0" src="@/assets/help/down.png" > </div> <ul class="list0"> <li @click="changeDetail('如何进行客户绑定?')">如何进行客户绑定?</li> <li @click="changeDetail('如何通过扫描录入进件?')">如何通过扫描录入进件?</li> </ul> </div> <!-- <div class="question"> <div class="question-top" @click="show(1)"> <span>客户绑定相关问题</span> <img class="img1" src="@/assets/help/down.png" > </div> <ul class="list1"> <li>如何进行客户绑定?</li> <li>如何通过扫描录入进件?</li> </ul> </div> --> <div class="question"> <div class="question-top" @click="show(2)"> <span>功能相关问题</span> <img class="img2" src="@/assets/help/down.png" > </div> <ul class="list2"> <li @click="changeDetail('产品展示功能如何使用?')">产品展示功能如何使用?</li> <li @click="changeDetail('如何进行“产品试算”?')">如何进行“产品试算”?</li> <li @click="changeDetail('如何进行“合同还款”?')">如何进行“合同还款”?</li> </ul> </div> </h-content> <bottom-tab> <tab-button class="bottom-button" @click.native="changeFeedback"> <img src="@/assets/help/feedback.png" >没有想要的,点击反馈 </tab-button> </bottom-tab> </h-view> </template> <script> export default { data () { return { isShow: true, } }, methods: { show (e) { let ul = document.querySelector(`.list${e}`) let li = ul.querySelectorAll('li') let img = document.querySelector(`.img${e}`) if (this.isShow) { ul.style.height = li.length * 35 + 'px' img.style.transform = 'rotate(' + 90 + 'deg)' this.isShow = false } else { ul.style.height = 0 img.style.transform = 'rotate(' + 0 + 'deg)' this.isShow = true } }, changeDetail (val) { this.$router.push({ name: 'HelpDetail', params: { title: val, }, }) }, changeFeedback () { this.$router.push({ name: 'HelpFeedback', }) }, }, } </script> <style lang="less" scoped> #help-list { .header { background-color: #00469c; color: #ffffff; .h-header-btn { img { width: 16px; height: 16px; } span { font-family: PingFangSC-Semibold; font-size: 17px; color: #ffffff; letter-spacing: 0.61px; margin-left: 16px; } } } .my-content { .connect { background: rgba(0, 70, 156, 0.08); border-radius: 4px; width: 335px; height: 57px; margin: 0 auto; margin-top: 8px; text-align: center; padding-top: 8px; .connect-top { display: flex; align-items: center; justify-content: center; } img { width: 12.4px; height: 14.8px; } span { font-family: PingFangSC-Semibold; font-size: 14px; color: #383f45; letter-spacing: 0.43px; margin-left: 8px; } p { margin-top: 8px; font-family: PingFangSC-Regular; font-size: 12px; color: rgba(56, 63, 69, 0.6); letter-spacing: 0.37px; } } .matter { font-family: PingFangSC-Semibold; font-size: 15px; color: #383f45; letter-spacing: 0; line-height: 20px; margin-top: 10px; margin-left: 16px; margin-bottom: 10px; } .question { background-color: #ffffff; border-radius: 2px; width:359px; margin:0 auto; margin-top:8px; .question-top { height: 44px; line-height: 44px; background-color: #ffffff; padding-left: 24px; display: flex; align-items: center; span { display:inline-block; position: relative; font-family: PingFangSC-Regular; font-size: 13px; color: @headerColor; letter-spacing: 0; line-height: 20px; text-indent: 8px; flex:12; } span::before{ content:''; display: block; position: absolute; top:4px; left: 0px; width:4px; height:12px; background-color:@headerColor; } img{ width: 20px; height: 20px; margin-right: 20px; flex:1; } } .list0,.list1,.list2 { overflow: hidden; transition: 0.2s linear; height:0px; li { position: relative; font-family: PingFangSC-Regular; font-size: 12px; color: #656464; height: 35px; width:343px; margin:0 auto; line-height: 35px; border-bottom: 1px solid #F1F0F5; text-indent: 15px; } li::after{ content:''; display: block; width:10px; height:14px; background:url("../../assets/help/right-arrow.png"); background-size: 12px 16px; position:absolute; top:8px; right:0px; } } } } .bottom-button{ font-family: PingFangSC-Regular; font-size: 15px; color: @headerColor; line-height: 20px; img{ width:16px; height:16px; } } } </style>