element-plus/website/pages/guide.vue

<template>
  <div class="page-container page-guide">
    <el-row>
      <el-col :xs="24" :sm="5">
        <side-nav :data="navsData" :base="`/${ lang }/guide`" />
      </el-col>
      <el-col :xs="24" :sm="19">
        <router-view class="content" />
      </el-col>
    </el-row>
  </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.guide
    },
    navsData() {
      return [
        {
          path: '/design',
          name: this.langConfig[1],
        },
        {
          path: '/nav',
          name: this.langConfig[2],
        },
      ]
    },
  },
}
</script>
<style lang="scss">
 .page-guide {
    padding: 55px 30px 95px;
    box-sizing: border-box;
    .content {
      padding-left: 25px;
      margin-left: -1px;
      h2 {
        margin-bottom: 10px;
      }
      h3 {
        font-size: 22px;
        font-weight: normal;
        margin: 0 0 30px;
        color: #1f2d3d;
      }
      p {
        line-height: 1.6;
        font-size: 14px;
        color: #5e6d82;
      }
      ul {
        margin-bottom: 50px;
        padding-left: 0;
      }
      li {
        font-size: 14px;
        margin-bottom: 10px;
        color: #99a9bf;
        list-style: none;
        &:before {
          content: '';
          display: inline-block;
          width: 4px;
          height: 4px;
          border-radius: 50%;
          vertical-align: middle;
          background-color: #5e6d82;
          margin-right: 5px;
        }
        strong {
          color: #5e6d82;
          font-weight: 400;
        }
      }
    }
  }
  @media (max-width: 768px) {
    .page-guide {
      .content {
        padding-left: 0;
      }
    }
  }
</style>