shop-pc/pages/account/index.vue

<!--
 * @Author: ch
 * @Date: 2022-05-08 17:48:36
 * @LastEditors: ch
 * @LastEditTime: 2022-05-10 12:19:04
 * @Description: file content
-->
<template>
  <div class="account">
    <div class="account--nav">左侧栏</div>
    <nuxt-child class="account--main" />
  </div>
</template>
<script>
export default {
  name: "Account",
  data() {
    return {
      navTabs: [
        {
          label: "个人中心",
          childrens: [
            { label: "我的主页", value: "/home" },
            { label: "消息通知", value: "/message" },
          ],
        },
        {
          label: "订单中心",
          childrens: [
            { label: "我的订单", value: "/order/lsit" },
            { label: "售后订单", value: "/order/saleAfter" },
          ],
        },
        {
          label: "账户管理",
          childrens: [
            { label: "个人资料", value: "/userInfo" },
            { label: "收货地址", value: "/address" },
          ],
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.account {
  @include layout-box;
  padding: 30px 0;
  margin: 0 auto;
  display: flex;
  &--nav {
    width: 170px;
    height: 300px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 30px;
  }
  &--main {
    flex: 1;
  }
}
</style>