realtorEasier-webSite/mobile/src/pages/pricedetail/index.vue

<template>
  <div class="pricedetail-layout">
    <div class="plate">
      <template v-if="language!=='en'">
        <p class="b-title">{{langPurchase.pricename}}</p>
        <priceTable  style="margin-bottom:20px;"  />
      </template>
      <div class="b-title">{{langPurchase.pricename1}}</div>
      <priceTable :type="'hw'" />
      <ul class="qa-con">
        <li>
          <p>{{langPurchase.directions}}</p>
        </li>
        <li v-for="(item,i) in langPurchase.qa" :key="i">
          <p>{{item.q}}</p>
          <p v-html="item.a"></p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import priceTable from '@/components/priceTable'

import { mapState } from 'vuex'

export default {
  components: {
    priceTable
  },
  computed: {
    ...mapState({
      langPurchase: state => state.language.home.purchase,
      language: state => state.language.current

    })
  },
  data () {
    return {
    }
  }
}
</script>
<style lang="scss" scoped>
.pricedetail-layout {
  width: 100%;
  .plate {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0 40px;
    text-align: center;
    .b-title {
      font-weight: 700;
      font-size: 22px;
      color: rgba(0, 0, 0, 0.7);
      line-height: 44px;
      margin: 0 auto 20px;
      width: 98%;
    }
    .price-txt {
      text-align: left;
      font-size: 14px;
      padding-left: 20px;
      margin-top: 25px;
      li {
        font-size: 14px;
        color: #666;
        line-height: 31px;
        list-style: disc;
      }
    }

    .qa-con {
      max-width: 90%;
      margin: 50px auto 0;
      li {
        margin-bottom: 18px;
        text-align: left;
        font-family: "Microsoft Yahei", "微软雅黑", Tahoma, Arial, Helvetica,
          STHeiti;
        p {
          font-size: 12px;
          color: #666;
          line-height: 18px;
          &:first-of-type {
            font-size: 14px;
            color: #333;
            font-weight: bold;
            margin-bottom: 4px;
          }
        }
      }
    }
  }
}
</style>