lilishop-ui/buyer/src/pages/user/Home.vue

<template>
  <div>
    <BaseHeader></BaseHeader>

    <div class="container width_1200">
      <Layout class="layoutAll">
        <Sider class="side-bar" ref="side" :collapsed-width="78">
          <Menu
            class="side-menu"
            theme="light"
            width="auto"
            :active-name="$route.name"
            :open-names="['订单中心', '会员中心', '账户中心']"
            @on-select="onSelect"
          >
            <div class="user-icon">
              <div class="user-img">
                <img :src="userInfo.face" />
              </div>
              <p>{{userInfo.nickName}}</p>
            </div>

            <!--   循环导航栏       -->
            <Submenu
              v-for="(menu, index) in menuList"
              :key="index"
              :name="menu.title"
            >
              <template slot="title" v-if="menu.display">
                <Icon type="location"></Icon>
                <span>{{ menu.title }}</span>
              </template>
              <MenuItem
                v-for="(chlidren, i) in menu.menus"
                :key="i"
                :name="chlidren.path"
                >{{ chlidren.title }}</MenuItem
              >
            </Submenu>

          </Menu>
        </Sider>
        <Layout class="layout ml_10">
          <Content class="content">
            <transition mode="out-in">
              <router-view></router-view>
            </transition>
          </Content>
        </Layout>
      </Layout>
    </div>
  </div>
</template>

<script>
import menuList from './menu';
import Storage from '@/plugins/storage.js';

export default {
  name: 'Home',
  data () {
    return {
      menuList // 会员中心左侧列表
    };
  },
  computed: {
    userInfo () {
      return JSON.parse(Storage.getItem('userInfo'));
    }
  },

  methods: {
    // 每次点击左侧bar的callback
    onSelect (name) {
      this.$router.push({name: name});
    },
    // 跳转到个人中心的首页
    toUserMain () {
      this.$router.push(`/home`);
    }
  }
};
</script>

<style scoped lang="scss">
.content {
  padding: 15px 50px;
}

.header {
  @include background_color($light_background_color);
}

.side-menu,
.side-bar,
.content {
  @include white_background_color();
  @include title_color($light_title_color);
}

.side-bar {
  min-height: 600px;
  height: auto;
}

.layoutAll {
  min-height: 1200px;
  @include background_color($light_background_color);
}

.container {
  margin: 0 auto;
  padding: 20px 0;
}

.side-bar a {
  @include title_color($light_title_color);
}

.user-icon {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.user-icon span {
  font-size: 96px;
}

.user-img {
  margin-bottom: 15px;
  width: 96px;
  height: 96px;
  border-radius: 48px;
  overflow: hidden;
}

.user-img img {
  width: 100%;
}

.layout-footer-center {
  padding: 0px 15px;

  padding-bottom: 15px;
  text-align: center;
}
</style>