videoInfowindow.vue

<template>
  <div class="wrapper">
    <div class="content">
      <span class="left ">名称: {{ data.videoName }}</span>
      <span class="right ">位置: {{ data.videoAddress }}</span>
    </div>

    <div class=""></div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
    },
  },
  created() {
    // console.log("data", this.data);
  },
};
</script>

<style  lang="scss" scoped>
.wrapper {
  // width: 166px;
  height: 54px;
  // background: #0d4f88;
  background: rgba(7, 29, 51, 0.9);
  font-size: 14px;
  color: #fff;
  box-sizing: border-box;
  padding: 7px 7px 7px 8px;
  box-shadow: 0 0 20px -5px #0d4f88;
  border-radius: 4px;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    left: -10px;
    top: 5px;
    width: 0px;
    height: 0px;
    /* border: 20px solid red; */
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    /* border-left: 50px solid greenyellow; */
    border-right: 30px solid rgba(7, 29, 51, 0.9);
    box-shadow: 0 0 20px -5px #0d4f88;

    z-index: -1;
  }
  .content {
    span {
      word-break: break-all;
      display: block;
    }
  }
}
</style>