/*个人中心入口*/
<template>
  <div class="user lbg_color2">
    <div class="container">
      <div class="user-slider lbg_color3">
        <el-menu class="lbg_color3" :default-active="activeIndex" @select="Select">
          <el-menu-item   index="/home/myproject">我的项目</el-menu-item>
          <el-menu-item   index="/home/openproject" >公开项目</el-menu-item>

        </el-menu>
      </div>
      <section class="user-main">
        <transition name="fade-transform" mode="out-in">
          <router-view :key="dateKey" />
        </transition>
      </section>
    </div>
  </div>
</template>

<script>
import { request } from '@/utils/request'
export default {
  name: 'User',
  data() {
    return {
    dateKey: new Date().getTime(),
   //  defaultPage: '/project',
    defaultPage:'/myproject',
    }
  },
  
   computed: {
    activeIndex() {
      const path = this.$route.path
     
      if (path === '/home') {
        this.$router.replace({ path: path + this.defaultPage })
           console.log(  path + this.defaultPage);
        console.log(111)
      }
      return path
    },
  },

  created() {},
  methods: {
    Select(key) {
      this.$router.replace({ path: key })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
// @import '@/styles/transition.scss';
.user {
  @include w_h(100%, 100%);
  .container {
    @include flex();
    @include w_h(100%, 100%);
    .user-slider {
      @include w_h(180px, 100%);
      padding-top: 20px;
    }
    .user-main {
      @include w_h(calc(100% - 190px), 100%);
    }
  }
}
</style>
<style <style lang="scss">
@import '@/styles/variables.scss';
.user-slider {
  .el-menu {
    border: none;
    &-item {
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      text-align: center;
      color: #b6b6b6;
      &.is-active {
        color: $color_f;
        background: $color_on;
      }
    }
  }
}
</style>
