<template>
  <div class="tab4-3">
    <div class="top">我们是人民的武装</div>
    <div class="audio">
      <audio src="../../assets/video/demo.mp3" autoplay controls loop></audio>
    </div>
    <div class="txt">
      <p>向前！向前！向前！</p>
      <p>我们的队伍向太阳！</p>
      <p>脚踏着祖国的大地，</p>
      <p>背负着民族的希望，</p>
      <p>我们是一支不可战胜的力量。</p>
      <p>我们是工农的子弟，</p>
      <p>我们是人民的武装，</p>
      <p>从无畏惧，绝不屈服，英勇战斗，</p>
      <p>直到把反动派消灭干净，</p>
      <p>毛泽东的旗帜高高飘扬。</p>
      <p>听！风在呼啸军号响，</p>
      <p>听！革命歌声多么嘹亮！</p>
      <p>同志们整齐步伐奔向解放的战场，</p>
      <p>同志们整齐步伐奔赴祖国的边疆，</p>
      <p>向前！向前！</p>
      <p>我们的队伍向太阳，</p>
      <p>向最后的胜利，向全国的解放。</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tab4-3',
  components: {},
  data () {
    // 这里存放数据
    return {}
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.tab4-3 {
  color: #555555;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 1500px;
  background: url("../../assets/img/tab4-3BAC.png");
  background-size: 100% 100%;
  .top{
    position: absolute;
    transform: translate(796px,40px);
    font-size: 20px;
    color: #b9412e;
  }
  .audio{
    position: absolute;
    top: 50%;
    left: 300px;
    transform: translateX(-50%);
  }
  .txt{
    position: absolute;
    transform: translate(800px,100px);
    &>p{
      padding: 10px 0;
    }
  }
}
</style>
