hi-ucs/front/src/views/home/videoSurveillance/components/CameraPopupOnMap.vue

<!--点击地图上单个点或者聚合点之后出现的操作弹窗autoplay -->
<template>
  <div class="pop-box">
    <div class="List-camera-pop">
        <a-carousel arrows>
              <template #prevArrow>
                <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
                  <left-circle-outlined />
                </div>
              </template>
              <template #nextArrow>
                <div class="custom-slick-arrow" style="right: 10px">
                  <right-circle-outlined />
                </div>
              </template>
              <div
                v-for="url in cameraDataList"
                :width="800"
                :height="400"
                :key="url"
                :src="url"
              >
              <div class="video-content">
              <h5-player></h5-player> 
              </div>
              <!-- <div style="color:#000000">
              <div class="video-content" style=" z-index: 1">
              <h5-player :video-url="videoUrl"></h5-player> 
              </div>
              </div> -->
              <div class="footer-button"> 
                <a-button type="primary" @click="applyNow(url)">立即申请</a-button>
                <a-button type="primary" style="margin-left:20px" @click="addIntoCart(url)">加入申购车</a-button>
                </div>
               <!-- <div class="footer-button">
                <a-button type="primary">立即申请</a-button>
                 <a-button type="primary" style="margin-left:20px">加入申购车</a-button>
               </div> -->
              </div>
            </a-carousel>
      <!-- -->
    </div>
  </div>
</template>
<script>
  // import VideoPlay from '@/views/videoPlay/index.vue'
  // import 'viewerjs/dist/viewer.css'
  // import { directive as viewer } from "v-viewer"
    import {
    LeftCircleOutlined,
    RightCircleOutlined,
  } from '@ant-design/icons-vue'
  import H5Player from '@/views/home/components/H5Player.vue'
  import mybus from '@/myplugins/mybus'
  import { getStreamByChannelCode } from '@/api/videoSurveillance'
  export default {
    name: '',
    components: {
      // VideoPlay,
      H5Player,
      LeftCircleOutlined,
      RightCircleOutlined
    },
    props: {
      cameraDataList: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    mounted() {},
    // directives: {
    //     viewer: viewer({
    //         debug: true,
    //     }),
    // },
    data() {
      return {
        openVideo: false,
        videoStream: '',  
         videoUrl:'' //视频预览url
      }
    },
    methods: {
      openCurrentVideo(channelCode) {
        bus.$emit('openCurrentVideoSurveillance', channelCode)
      },
      show() {
        const viewer = this.$el.querySelector('.images').$viewer
        viewer.show()
      },
      //立即申请
      applyNow(item){
        console.log('applyNowapplyNow',item);
         mybus.emit('selectCamera', item)
      },
      //加入申购车
      addIntoCart(item){
         console.log('addIntoCartaddIntoCart',item);
          mybus.emit('selectCamera', item)
      }
    },
  }
</script>
<style lang="less" scoped>
  .List-camera-pop {
    // width: 640px;
    // height: 320px;
    //background-color: #193059;
    font-size: 16px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    .content {
      // width: 280px;
      min-height: 100px;
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      .green-cicle {
        width: 18px;
        height: 18px;
        background-color: rgba(0, 218, 128, 0.4);
        border-radius: 50%;
        position: relative;
        div {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #00da80;
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -5px;
          margin-top: -5px;
        }
      }
      b {
        color: #fff;
      }
      p {
        color: #1eacd6;
      }
    }
    .images {
      width: 290px;
      height: 160px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .button {
      width: 80px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      background-color: #2fe2ed;
      border-radius: 4px;
      margin: 8px auto 0;
      cursor: pointer;
    }
    .ant-carousel {
    width: 960px;
    //height: 700px;
    margin-left: 8px;
     .video-content{
     width: 950px;
     height:600px; 
     text-align: left; 
     padding: 5px;
    }
    .footer-button{
       width: 950px;
       //height:50px; 
       text-align: center; 
       padding-top:20px;
    }
  }
  .ant-carousel :deep(.slick-slide) {
    text-align: center;
    height: 650px;
    line-height: 200px;
    //background: #ccc;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
    width: 50px;
    height: 50px;
    font-size: 50px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.8;
    z-index: 1;
  }
  .ant-carousel :deep(.custom-slick-arrow:before) {
    display: none;
  }
  .ant-carousel :deep(.custom-slick-arrow:hover) {
    opacity: 1;
  }

  .ant-carousel :deep(.slick-slide h3) {
    color: #fff;
  }

  .ant-carousel :deep(.slick-dots) {
   display: none !important;
  }
   
  }
  // .current-video {
  //   width: 320px;
  //   height: 180px;
  // }
</style>