element-plus/website/pages/design.vue

<template>
  <div>
    <h2>{{ langConfig[1] }}</h2>
    <el-row :gutter="14" class="cards">
      <el-col :xs="12" :sm="6">
        <div class="card">
          <img src="~examples/assets/images/consistency.png" alt="Consistency">
          <h4>{{ langConfig[2] }}</h4>
          <span>{{ langConfig[3] }}</span>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6">
        <div class="card">
          <img src="~examples/assets/images/feedback.png" alt="Feedback">
          <h4>{{ langConfig[4] }}</h4>
          <span>{{ langConfig[5] }}</span>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6">
        <div class="card">
          <img src="~examples/assets/images/efficiency.png" alt="Efficiency">
          <h4>{{ langConfig[6] }}</h4>
          <span>{{ langConfig[7] }}</span>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6">
        <div class="card">
          <img src="~examples/assets/images/controllability.png" alt="Controllability">
          <h4>{{ langConfig[8] }}</h4>
          <span>{{ langConfig[9] }}</span>
        </div>
      </el-col>
    </el-row>
    <h3>{{ langConfig[10] }}</h3>
    <ul>
      <li><strong>{{ langConfig[11] }}</strong>{{ langConfig[12] }}</li>
      <li><strong>{{ langConfig[13] }}</strong>{{ langConfig[14] }}</li>
    </ul>
    <h3>{{ langConfig[15] }}</h3>
    <ul>
      <li><strong>{{ langConfig[16] }}</strong>{{ langConfig[17] }}</li>
      <li><strong>{{ langConfig[18] }}</strong>{{ langConfig[19] }}</li>
    </ul>
    <h3>{{ langConfig[20] }}</h3>
    <ul>
      <li><strong>{{ langConfig[21] }}</strong>{{ langConfig[22] }}</li>
      <li><strong>{{ langConfig[23] }}</strong>{{ langConfig[24] }}</li>
      <li><strong>{{ langConfig[25] }}</strong>{{ langConfig[26] }}</li>
    </ul>
    <h3>{{ langConfig[27] }}</h3>
    <ul>
      <li><strong>{{ langConfig[28] }}</strong>{{ langConfig[29] }}</li>
      <li><strong>{{ langConfig[30] }}</strong>{{ langConfig[31] }}</li>
    </ul>
  </div>
</template>
<script>
import pageLang from '../i18n/page.json'

export default {
  data() {
    return {
      lang: this.$route.meta.lang,
    }
  },
  computed: {
    langConfig() {
      return pageLang.filter(config => config.lang === this.lang)[0].pages.design
    },
  },
}
</script>
<style lang="scss" scoped>
  .cards {
    margin: 30px 0 70px;
  }
  .card {
    background: #fbfcfd;
    height: 204px;
    text-align: center;

    img {
      margin: 40px auto 25px;
      width: 80px;
      height: 80px;
    }
    h4 {
      font-size: 18px;
      color: #1f2d3d;
      font-weight: normal;
      margin: 0;
    }
    span {
      font-size: 14px;
      color: #99a9bf;
    }
  }
</style>