<template>
  <div>
    <!-- 头部标签 -->
    <van-sticky>
      <header class="header-wrap">
        消息中心
      </header>
    </van-sticky>

    <!-- 内容 -->
    <div class="con">
      <van-tabs
        v-model="activeName"
        color="#247df7"
        title-inactive-colo="#d0d1d1"
        title-active-color="#000000"
        sticky
        offset-top="1.333333rem"
      >
        <van-tab title="消息信息" name="消息信息" :badge="messageNewsNum>0?messageNewsNum : ''">
          <message-news @messageLength="getMessageLength"></message-news>
        </van-tab>
        <van-tab title="" name="" disabled badge="">
          <wait-event></wait-event>
        </van-tab>
        <van-tab title="" name="" disabled badge="">
          <notice-info></notice-info>
        </van-tab>
      </van-tabs>
    </div>

    <!-- tanBar -->
    <tab-bar :index="0"></tab-bar>
  </div>
</template>

<script>
import messageNews from "./messageNews";
import waitEvent from "./waitEvent";
import noticeInfo from "./noticeInfo";
import tabBar from "@/components/TabBar";
export default {
  components: {
    messageNews,
    waitEvent,
    noticeInfo,
    tabBar
  },
  data() {
    return {
      activeName: "消息信息",
      messageNewsNum: ''
    };
  },
  mounted() {},
  methods: {
    getMessageLength(len){
      this.messageNewsNum = len
    }
  }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.header-wrap {
  width: 100%;
  height: 1.333333rem;
  background-color: #2980f7;
  font-size: 17px;
  line-height: 1.333333rem;
  color: white;
  font-weight: none;
  text-align: center;
}
.con {
  // height: calc(100% - 110px);
  // height: 100%;
  padding: 0 0 50px 0;
  background-color: #f0f1f5;
  position: relative;
  /deep/ .van-info {
    right: -6px;
    background-color: #fa4c4c;
  }
}
</style>
