<!--
 * @Author: your name
 * @Date: 2019-11-11 16:28:45
 * @LastEditTime: 2019-12-03 10:04:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hls-xcmg-vue-app\src\pages\help\detail.vue
 -->
<template>
  <h-view id="help-detail" 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">
      <h4>{{ title }}</h4>
      <div v-if="title === '如何进行客户绑定？'" class="article">
        <p>进入“个人中心"界面,点击”用户绑定“按钮进入用户绑定界面，填写相关资料可进行用户绑定。</p>
      </div>
      <div v-if="title === '如何通过扫描录入进件？'" class="article">
        <p>。</p>
      </div>
      <div v-if="title === '如何进行“产品试算”？'" class="article">
        <p>进入首页“产品试算”功能，选择产品进入试算页面，填写设备金额、保险押金、还款日期等数据，即可进行试算。</p>
      </div>
      <div v-if="title === '产品展示功能如何使用？'" class="article">
        <p>进入首页“产品查询”功能，选择产品名称即可展示该类产品。</p>
      </div>
      <div v-if="title === '如何进行“合同还款”？'" class="article">
        <p>进入首页“合同还款”功能，即可展示所有合同还款状态，点击“查看合同明细”，可查看还款的详细信息。</p>
      </div>
    </h-content>
  </h-view>
</template>
<script>
export default {
  data () {
    return {
      title: '',
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'HelpList') {
        vm.title = vm.$route.params.title
      }
    })
  },
}
</script>
<style lang="less" scoped>
#help-detail{
  .my-content{
      h4{
    font-family: PingFangSC-Semibold;
font-size: 15px;
color: @headerColor;
letter-spacing: 0;
line-height: 20px;
margin-top:16px;
padding-left:35px;
position: relative;
      }
h4::before{
    content:'';
    display:inline-block;
    background-color: @headerColor;
    position: absolute;
    top:5px;
    left:24px;
    width: 4px;
    height:12px;
}
.article{
width:343px;
margin:0 auto;
p{
    font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
text-align: left;
line-height: 20px;
text-indent:20px;
}
}
  }
}
</style>
