dl_site_nuxt/components/aside-tree.vue

<template>
  <aside class="aside-tree">
    <div>
      <h3 class="aside-header">{{ headerTitle }}</h3>
        <nav class="tree-box">
          <el-tree
            :data="treeData"
            node-key="id"
            highlight-current
            :props="props"
          />
        </nav>
    </div>

    <div class="mt-2">
      <h3 class="contact-us">{{ $t('contactUs.contactUs') }}</h3>
      <div class="contact-details">
        <h4 class="mt-3 mb-3">{{ $t('index.corporateName') }}</h4>
        <p class="mb-2">
          <label class="mb-0">{{ $t('common.addressLabel') }}:</label>
          <span>{{ $t('aboutUs.address') }}</span>
        </p>
        <p class="mb-2">
          <label class="mb-0">{{ $t('common.tel') }}:</label>
          <span>+86-531-69985132</span>
        </p>
        <p class="mb-2">
          <label class="mb-0">{{ $t('common.Mob/Whatsapp/Wechat') }}:</label>
          <span>0086 182 5311 2969</span>
        </p>
        <p class="mb-2">
          <label class="mb-0">{{ $t('common.E-mail') }}:</label>
          <span>alicesales@scdtrailer.com</span>
        </p>
      </div>
    </div>
  </aside>
</template>

<script>
export default {
  name: 'AsideTree',
  props: {
    headerTitle: {
      type: String,
      default: ''
    },
    treeData: {
      type: Array,
      default: () => []
    },
    props: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          label: 'label'
        }
      }
    }
  },
  data () {
    return {}
  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
@import "element-ui/lib/theme-chalk/tree.css";
@import "element-ui/lib/theme-chalk/menu.css";
@import "element-ui/lib/theme-chalk/scrollbar.css";
.aside-tree {
  padding: 0;
  @mixin header {
    margin: 0;
    padding: 1.5rem 0;
    text-indent: 2.125rem;
    color: #fff;
    background-color: #015fe8;
    font-size: 1.25rem;
    font-weight: bold;
  }
  .aside-header {
    @include header;
  }
  .tree-box {
    padding: .625rem .625rem;
    border: .0625rem solid #d9dde0;
    ::v-deep .is-current {
      > .el-tree-node__content {
        color: #015fe8;
      }
    }
  }
  .contact-us {
    @include header;
  }
  .contact-details {
    padding: .625rem 1.25rem;
    border: .0625rem solid #d9dde0;
    background-color: #f5f7f9;
    font-size: .875rem;
    h4 {
      color: #302d2d;
      font-size: .875rem;
    }
    label {
      color: #77778b;
    }
  }
}

// 特殊样式小屏幕处理
@media screen and (max-width:400px) {
  
}

</style>