caimei-authentic-www/components/SimpleParamList/index.vue

<template>
  <div class="param-list">
    <div class="param__row" v-for="(item, index) in paramList" :key="index">
      <template v-for="(param, index) in item">
        <div class="col param__row-name" :key="'name' + index" v-text="param.paramName"></div>
        <div class="col param__row-content" :key="'content' + index" v-text="param.paramContent"></div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    paramList: {
      type: Array,
      default: () => [],
    },
  },
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
  .param-list {
    width: 100%;
    word-break: break-all;
    text-align: justify;
    padding: 16px 0;
    .param__row {
      display: table-row;
      width: 100%;
    }

    .col {
      display: table-cell;
      font-size: 16px;
      padding: 8px 0;

      &.param__row-name {
        color: #666;
        padding-right: 32px;
        white-space: nowrap;
        border-right: 1px solid #d8d8d8;
      }

      &.param__row-content {
        color: #4e4e4e;
        padding-left: 32px;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .param-list {
    width: 100%;
    word-break: break-all;
    text-align: justify;
    .param__row {
      display: table-row;
      width: 100%;

      &:first-child {
        .col {
          padding-top: 0;
        }
      }

      &:last-child {
        .col {
          padding-bottom: 0;
        }
      }
    }

    .col {
      display: table-cell;
      font-size: 3.6vw;
      padding: 1.6vw 0;

      &.param__row-name {
        color: #282828;
        padding-right: 3.2vw;
        font-weight: bold;
        white-space: nowrap;
        border-right: 0.2vw solid #d8d8d8;
      }

      &.param__row-content {
        color: #4e4e4e;
        padding-left: 3.2vw;
      }
    }
  }
}
</style>