<template>
|
<div class="mine-page">
|
<!--问题类型-->
|
<x-header :left-options="{backText: ''}">帮助中心</x-header>
|
<flexbox class="mine-page-header">
|
<flexbox-item class="flex-demo" @click.native="registrationjump(1)">
|
<i class="iconfont icon-registration-problem"></i>
|
<p>注册问题</p>
|
</flexbox-item>
|
<flexbox-item class="flex-demo" @click.native="registrationjump(2)">
|
<i class="iconfont icon-application-problem"></i>
|
<p>申请问题</p>
|
</flexbox-item>
|
<flexbox-item class="flex-demo" @click.native="registrationjump(3)">
|
<i class="iconfont icon-loan-problem"></i>
|
<p>放款问题</p>
|
</flexbox-item>
|
<flexbox-item class="flex-demo" @click.native="registrationjump(4)">
|
<i class="iconfont icon-repayment-problem"></i>
|
<p>还款问题</p>
|
</flexbox-item>
|
</flexbox>
|
<!--问题详情-->
|
<ul>
|
<!--热门问题-->
|
<li class="mine-page-hot">
|
<span>热门问题</span>
|
</li>
|
<router-link tag="li" :to="'/f-question/'+i.questionId" v-for="(i,index) in items" :key="index">
|
<p><i></i></p>
|
<p>{{i.title}}</p>
|
</router-link>
|
</ul>
|
</div>
|
</template>
|
<script>
|
/**
|
* Created by z.x.q on 2018/3/23.
|
* 我的--帮助中心
|
*/
|
import {XButton, Flexbox, FlexboxItem, Swiper, SwiperItem, XHeader} from 'vux';
|
export default {
|
name: 'f-help-center',
|
components: {
|
Flexbox,
|
FlexboxItem,
|
Swiper,
|
SwiperItem,
|
XHeader
|
},
|
data(){
|
return {
|
questions: {},
|
items: [
|
{
|
title: " 1.我能贷多少？", questionId: 10010
|
},
|
{
|
title: "2.为什么我的贷款申请被拒？", questionId: 10019
|
},
|
{
|
title: " 3.如何提高贷款成功率/提高额度？", questionId: 10016
|
},
|
{
|
title: "4.提前还款利息怎么计算？", questionId: 10023
|
}
|
]
|
}
|
},
|
init () {
|
|
},
|
methods: {
|
registrationjump: function (typeId) {
|
this.$router.push({
|
path: '/f-registration-problem',
|
query: {typeId: typeId}
|
});
|
}
|
},
|
activated: function () {
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'in'});
|
},
|
deactivated: function () {
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'out'});
|
}
|
}
|
</script>
|
<style lang="less">
|
@import '../../../style/mixin.less';
|
|
.mine-page {
|
background-color: @color-background-default;
|
.vux-header {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
.vux-header-title {
|
font-size: 18px;
|
}
|
.vux-header-left {
|
.left-arrow:before {
|
border: solid 1px @color-white;
|
border-width: 2px 0 0 2px;
|
}
|
}
|
}
|
.mine-page-header {
|
background-color: @color-white;
|
height: 109px;
|
text-align: center;
|
.flex-demo {
|
.iconfont {
|
font-size: 45PX !important;
|
}
|
.icon-registration-problem:before {
|
color: @color-primary;
|
}
|
.icon-application-problem:before {
|
color: #ff7777;
|
}
|
.icon-loan-problem:before {
|
color: #2ac5e6;
|
}
|
.icon-repayment-problem:before {
|
color: #ffa92c;
|
}
|
p {
|
font-size: @font-size-medium;
|
line-height: 15px;
|
}
|
}
|
}
|
.mine-page-division {
|
width: 100%;
|
height: 10px;
|
background-color: @color-background-default;
|
}
|
.mine-page-hot {
|
background-color: @color-white;
|
margin-top: 10px;
|
margin-left: 0px;
|
padding-left: 12px;
|
font-size: @font-size-medium;
|
height: 44px;
|
line-height: 44px;
|
border-bottom: solid 1px @color-divider-regular;
|
span {
|
font-size: @font-size-base;
|
}
|
}
|
ul {
|
background-color: @color-white;
|
li {
|
height: 44px;
|
line-height: 44px;
|
margin-left: 12px;
|
padding-right: 12px;
|
list-style: square;
|
font-size: @font-size-small;
|
border-bottom: solid 1px @color-divider-regular;
|
display: flex;
|
.ellipsis();
|
p {
|
&:first-child {
|
i {
|
display: inline-block;
|
width: 6px;
|
height: 6px;
|
line-height: 44px;
|
color: @color-primary;
|
margin: 0 10px;
|
background-color: @color-primary;
|
border-radius: 50%;
|
vertical-align: middle;
|
}
|
}
|
&:last-child {
|
span {
|
line-height: 44px;
|
font-size: @font-size-medium;
|
}
|
}
|
}
|
|
}
|
}
|
}
|
</style>
|
