<style lang='scss'>
.only-there .ant-tabs-bar {
  background: white;
  padding: 0 24px;
}
.ant-card-head .ant-tabs-bar {
  padding: 0;
}
#updateInfo .ant-modal-content,
#updateInfo .ant-modal-body {
  width: 500px;
  position: relative;
  padding-top: 10px;
  .updateBOX {
    height: 600px;
    overflow: auto;
  }
}
.Updatecontent {
  padding: 0 20px 40px;
  position: relative;
  .Updateitem {
    margin-bottom: 30px;
  }
}
.Updatetitle {
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  color: #1890ff;
  margin-bottom: 20px;
  /* margin-top: 20px; */
}
.Updatetime {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  margin-bottom: 15px;
}
.updateicon {
  font-size: 26px;
  position: relative;
  top: 4px;
}
.updateSpan {
  margin-left: 10px;
}
.textTitle {
  font-weight: 600;
  font-size: 1.17em;

  font-family: Helvetica, Arial, '\5b8b\4f53', sans-serif;
}
.okBtn {
  position: absolute;
  right: 3%;
  bottom: 3%;
}
.updatelist {
  .circular {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    color: #999;
  }
}
</style>
<template>
  <div class="music-tab" style="background: white; padding: 20px">
    <a-tabs v-model="active" @change="callBack">
      <a-tab-pane key="1" tab="网易云">
        <wyyMusic />
      </a-tab-pane>
      <a-tab-pane key="2" tab="抖音">
        <dyMusic v-if="active == '2'" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import wyyMusic from './musicMaterial.vue'
import dyMusic from './musicBytedance.vue'
import { mapActions } from 'vuex'
export default {
  name: 'music-tab',
  components: {
    wyyMusic,
    dyMusic,
  },
  data() {
    return {
      active: '1',
      loading: true,
      center: null,
      loginfo: {},
      visitFields: ['ip', 'visit'],
      visitInfo: [],
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      roleCode: localStorage.getItem('roleCode'),
      visible: false, //更新通知消息提示框
      updateTime: ['2020-06-10', '2020-06-17', '2020-06-24', '2020-07-01'],
      versionId: 0, //存储版本号 判断通知什么时候显示
    }
  },
  created() {},
  methods: {
    ...mapActions(['clearPlayList']),
    callBack() {
      if(this.active=='1'){

      }else{
        this.clearPlayList()
      }
    },
  },
  mounted() {},
}
</script>

<style lang="scss" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }

  p {
    line-height: 42px;
    margin: 0;

    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>
<style lang="less">
.ant-tabs-bar {
  margin: 0 0 12px 0;
  /* height: 55px; */
  border-bottom: 1px solid #e8e8e8;
  outline: none;
  -webkit-transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
</style>