<template>
  <div class="panel-container">
    <div style="width: 98%;height: 97%;margin: 0 2%; position:relative;">
      <div style="width: 100%;height:100%; position: relative;">
        <div class="goBack" @click="changeStatus('Map2D')">返回</div>
        <div class="videoBox">
          <video controls  widht="100%" height="100%" src="http://vd4.bdstatic.com/mda-jk9nhz822pgx944h/mda-jk9nhz822pgx944h.mp4">
            你的浏览器貌似不支持video 元素
          </video>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  components:{
  },
  data() {
    return {
      videoUrl: null,
    };
  },
  mounted() {
  },
  methods: {
    ...mapActions(['changeStatus']),
    
  }
};
</script>

<style scoped>
.panel-container {
  width: 100%;
  flex: 1.1 !important;
  height: 100%;
  overflow: auto;
}
.goBack{
  cursor: pointer;
  margin-bottom: .1rem;
}
.videoBox{
  width: 100%;
  position: absolute;
  top: .1rem;
  bottom: 0;
}
.videoBox video{
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%)
}

</style>