<template>
    <div class="index">
      <!--<div class="header">
        <div class="header-bar">
          <div class="header-bar__item" :class="{'active': active === 0}" @click="active = 0">热门</div>
          <div class="header-bar__item" :class="{'active': active === 1}" @click="active = 1">最新</div>
          <div class="header-bar__item" :class="{'active': active === 2}" @click="active = 2">爱聊</div>
          <div class="header-bar__item" :class="{'active': active === 3}" @click="active = 3">图吧</div>
          <div class="header-bar__line"></div>
        </div>
        <div class="header-search">
          <img src="@/assets/images/search.png" alt="">
          <span>搜索</span>
        </div>
      </div>-->
      <div class="index-container">
        <div class="index-head">
          <div class="index-head__item active">视频</div>
          <div class="index-head__item" @click="$router.push('/essay')">社交</div>
        </div>
        <router-view />
      </div>
    </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      active: 0,
      availHeight: 0
    }
  },
  created () {
    this.availHeight = window.innerHeight
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.index {
  &-head {
    position: fixed;
    top: 20px;
    left: 10px;
    right: 10px;
    color: #ffffff;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    &__item {
      letter-spacing: 2px;
      &:first-child {
        margin-right: 20px;
      }
    }
    .active {
      position: relative;
      &:after {
        position: absolute;
        content: " ";
        bottom: -10px;
        left: 50%;
        transform: translate(-50%, 0);
        width: 20px;
        height: 2PX;
        background-color: #ffffff;
      }
    }
  }
  .header {
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 10px;
    height: 50px;
    background: #21b7ff; /* Old browsers */
    background: -moz-linear-gradient(left,  #21b7ff 0%, #9861f9 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #21b7ff 0%,#9861f9 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #21b7ff 0%,#9861f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#21b7ff', endColorstr='#9861f9',GradientType=1 ); /* IE6-9 */
    &-bar {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-right: 17px;
      &__item {
        font-size: 16px;
        position: relative;
        transition: font-size 0.2s;
      }
      &__item.active {
        font-size: 22px;
        &:after {
          content: " ";
          position: absolute;
          bottom: -4px;
          left: 50%;
          margin-left: -8.5px;
          width: 17px;
          height: 3px;
          background: rgba(255, 255, 255, 1);
          border-radius: 3px;
        }
      }
    }
    &-search {
      display: flex;
      align-items: center;
      background:rgba(255, 255, 255, 0.2);
      width: 112px;
      height: 32px;
      border-radius: 32px;
      padding: 0 16px;
      img {
        width: 14px;
        height: 15px;
        margin-right: 5px;
      }
      span {
        font-size: 14px;
      }
    }
  }
}
</style>
