realtorEasier-webSite/mobile/src/components/priceTable/index.vue

<template>
  <div class="price-table">
    <ul>
      <li class="top">
        <div class="box"><span>{{langPurchase.pricelist[0]}}</span></div>
        <div class="box"><span>{{langPurchase.pricelist[1]}}</span></div>
        <div class="price">
          <div class="shang">{{langPurchase.pricelist[2]}}</div>
          <div class="xia">
            <div>{{langPurchase.pricelist[3]}}</div>
            <div>{{langPurchase.pricelist[4]}}</div>
          </div>
        </div>
      </li>
      <li class="t-middle">
        <div class="box thin"><span style="transform: translateX(0);text-align:center">{{langPurchase.pricelist[5]}}</span></div>
        <div class="box thin centerthin"><span>{{langPurchase.pricelist[6]}}</span></div>
        <div class="box thin price"><span v-html="langPurchase.pricelist[7]"></span></div>
      </li>
      <li class="t-bottom">
        <div class="box big-box"><span>{{langPurchase.pricelist[8]}}</span></div>
        <div class="box big-box big-list">
          <div class="thin centerthin"><span>{{langPurchase.pricelist[9]}}</span></div>
          <div class="thin centerthin"><span>{{langPurchase.pricelist[10]}}</span></div>
          <div class="thin centerthin"><span>{{langPurchase.pricelist[11]}}</span></div>
          <div class="thin centerthin"><span>{{langPurchase.pricelist[12]}}</span></div>
        </div>
        <div class="box big-box long big-list">
          <div class="thin"><span>{{langPurchase.pricelist[13+type]}}</span></div>
          <div class="thin"><span>{{langPurchase.pricelist[14+type]}}</span></div>
          <div class="thin"><span>{{langPurchase.pricelist[15+type]}}</span></div>
          <div class="thin"><span>{{langPurchase.pricelist[16+type]}}</span></div>
        </div>
        <div class="box big-box long big-list">
          <div class="thin"><span>{{langPurchase.pricelist[17+type]}}</span></div>
          <div class="thin"><span>{{langPurchase.pricelist[18+type]}}</span></div>
          <div class="thin"><span>{{langPurchase.pricelist[19+type]}}</span></div>
          <div class="thin"><span>{{langPurchase.pricelist[20+type]}}</span></div>
        </div>
      </li>
       <li class="t-sub">
        <div class="box thin" ><span>{{langPurchase.pricelist[21]}}</span></div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState({
      langPurchase: state => state.language.home.purchase,
      language: state => state.language.current

    })
  }
}
</script>

<style lang="scss" scoped>
.price-table {
  box-sizing: border-box;
  border-top: 1px solid #909090;
  border-left: 1px solid #909090;
  width: 100%;
  margin: 0 auto;
  * {
    box-sizing: border-box;;
  }
  .box {
    width: 78px;
    height: 60px;
    line-height: 60px;
    display: inline-block;
    vertical-align: top;
    font-size: 10px;
    border-right: 1px solid #909090;
    border-bottom: 1px solid #909090;
  }

  .big-box {
    height: auto;
    line-height: 46px;
  }
  .big-list {
    div {
      border-bottom: 1px solid #909090;
      &:last-child {
        border-bottom: none;
      }
    }
  }

  .thin {
    height: 30px;
    line-height: 30px;
    >span{
      width: 100%;
      display: inline-block;
      text-align: center;
    }
  }
  .centerthin{
    >span{
      transform:none;
      text-align: center;
    }
  }
  .long {
    // width: 98px;
    flex: 1;
  }
  .price {
    flex: 1;
    font-size: 10px;
    display: inline-block;
    vertical-align: top;
    border-right: 1px solid #909090;
    span{
      transform: none;
      text-align: center;
    }
    .shang {
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #909090;
    }
    .xia {
      height: 30px;
      line-height: 30px;
      display: flex;
      border-bottom: 1px solid #909090;
      justify-content: space-around;
      div {
        width: 50%;
        &:first-of-type {
          border-right: 1px solid #909090;
        }
      }
    }
  }
  .top {
    background: #EBEBEB;
  }
  .top,
  .t-middle,
  .t-bottom,
  .t-sub {
    width: 100%;
    font-size: 0;
    display: flex;
  }
  .t-sub{
    .box{
      width: 100%;
    }
    .thin{
      height: 30px;
      span{
        text-align: center;
        transform: translateX(0)
      }
    }
  }
  .t-middle {
    > div {
      background-color:#EBEBEB;
    }
  }
}

@media screen and (max-width: 330px) {
  .price-table {
    width: 293px;
    .box {
      width: 62px;
      height: 52px;
      font-size: 10px;
      line-height: 52px;
    }
    .big-box {
      height: auto;
      line-height: 104px;
    }
    .thin {
      height: 24px;
      line-height: 24px;
    }
    .long {
      width: 84px;
    }
    .price {
      font-size: 10px;
      width: 168px;
      .shang {
        height: 26px;
        line-height: 26px;
      }
      .xia {
        height: 26px;
        line-height: 26px;
      }
    }
  }
}
</style>