rebatedine-mini/src/pagesSub/my/commonProblem.vue

<template>
  <view>
    <network-error />
    <view class="main">
      <view class="title u-font-36 line-50 bold">常见问题</view>
      <u-collapse class="collapse">
        <block v-for="(item, index) in proList" :key="index">
          <u-collapse-item :title="item.question" >
            <view class="content-item u-font-24 line-34 u-border-bottom">{{item.answer}}</view>
          </u-collapse-item>
        </block>
      </u-collapse>
    </view>
    <view class="tips line-34 u-other-color">以上内容最终解释权归本公司所有。</view>
  </view>
</template>

<script>
import { getQaList } from '@/api/app'
export default {
  data () {
    return {
      proList: []
    }
  },
  onLoad () {
    this.getProList()
  },
  methods: {
    async getProList () {
      const { code, data } = await getQaList()
      if (code === 200) {
        this.proList = data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .main {
    background-color: #FFF;
    width: 100%;
    .title {
      color: $u-main-color;
      box-sizing: border-box;
      padding: 24px 0 0 32px;
      margin-bottom: 30px;
    }
    .content-item {
      padding: 32px;
      color: #98999A;
    }
  }
  .tips {
    padding: 32px 0;
    text-align: center;
  }
</style>

<style>
   .collapse >>> u-collapse-item .u-collapse-item .u-collapse-head {
     font-size: 28px;
     color: #111111;
     line-height: 40px;
     padding: 32px 0 32px 32px;
     border-bottom: 1px solid #EAEBEC;
   }
</style>