<template>
  <!-- 公告组件 -->
  <div class="livedAnnouncement" v-show="isShow">
    <scroll-view :style="{'max-height': '20vh','width':'40vw'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true">
      <div class="label">
        <span class="labelTit">公告：</span><span class="test">{{liveNotice}}</span>
      </div>
    </scroll-view>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props:["liveNotice"],
  name: "",
  data() {
    return {
      isShow:true,
      scrollTop:0,
    };
  },
  components: {},
  computed: {},
  created() {},
  onLoad(){
    console.log('----公告')
    this.isShow=true;
    setTimeout(() => {
      this.scrollTop=1000;
    }, 2000);
    setTimeout(() => {
      this.isShow=false;
    }, 7000);
  },
  mounted() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.livedAnnouncement{
  margin-left:12px;
  width: 40vw;
  background: rgba(#000,0.4);
  border-radius: 10px;
  padding: 6px;
  margin-bottom: 10px;
  animation:toLeft 6s linear;
  opacity: 0;
  span{
    font-size: 14px;
    color: #f1f1f1;
  }
  .label{
    .labelTit{
      color: #f9a93c;
    }
  }
}
@keyframes toLeft {
  0%{
    opacity: 1;
  }
  80%{
    opacity: 0.6;
  }
  100%{
    opacity: 0;
  }
}
</style>