<template>
  <div class="right_side">
    <div class="tabs_container">
      <div class="tabs_header">
        <div class="tabs_wrap">
          <div class="tabs_scroll">
            <div class="tabs_nav">
              <div class="tabs_item" v-for="e in tabs" :key="e.id" :class="{'is_active': tab === e.id}" @click="changeTab(e.id)">{{ e.label }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tabs_content">
        <div v-show="tab === '1'" class="tab_pane">首页首页首页首页首页首页首页</div>
        <div v-show="tab === '2'" class="tab_pane">动态</div>
        <div v-show="tab === '3'" class="tab_pane">项目</div>
        <div v-show="tab === '4'" class="tab_pane">项目</div>
        <div v-show="tab === '5'" class="tab_pane">项目</div>
        <div v-show="tab === '6'" class="tab_pane">其他</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tabs: [{id: '1', label: '首页'}, {id: '2', label: '动态'}, {id: '3', label: '项目'}, {id: '4', label: '项目'}, {id: '5', label: '项目'}, {id: '6', label: '其他'}],
      tab: '1'
    }
  },
  methods: {
    changeTab (id) {
      this.tab = id
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.tabs_container
  background #fff
  border 1px solid #dcdfe6
  box-shadow 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04)
.tabs_header
  position relative
  background-color #f5f7fa
  border-bottom 1px solid #e4e7ed
.tabs_wrap
  overflow hidden
  margin-bottom -1px
  position relative
.tabs_scroll
  overflow hidden
.tabs_nav
  white-space nowrap
  position relative
  transition transform .3s
  float left
  z-index 2
.tabs_item
  padding 0 20px
  height 40px
  box-sizing border-box
  line-height 40px
  display inline-block
  list-style none
  font-size 14px
  font-weight 500
  position relative
  transition all .3s cubic-bezier(.645,.045,.355,1)
  border 1px solid transparent
  margin-top -1px
  color #909399
  &:first-child
    margin-left -1px
.is_active
  color: #409eff;
  background-color: #fff;
  border-right-color: #dcdfe6;
  border-left-color: #dcdfe6;
.tabs_content
  overflow: hidden;
  position: relative;
  padding: 15px;
.tab_pane
  _font(16px, 28px, #323232,,)
</style>
