<template>
  <div class="max-big-box">
    <!--返回按钮-->
    <div class="out-page-button cursor_pointer" @click="outButton">
      <img src="~@/assets/images/icon_25.png">
      <p>返回</p>
    </div>
    <div class="bottom-max-box TabStrip">
      <div class="bottom-for-box" v-for="(item,index) in videoData" :key="index">
        <div>
          <img src="~@/assets/images/icon_18.png">
          <p>{{item.name}}</p>
          <p>{{item.time}}</p>
        </div>
        <img class="img-box" :src="item.url">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "warehouseMonitoring",//仓库监控
    data () {
      return {
        videoData:[
          {
            name:"仓库内摄像头1",
            time:"2021-10-10 10:10:10",
            url:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1573622612,1679629767&fm=26&gp=0.jpg"
          },
          {
            name:"仓库内摄像头2",
            time:"2021-10-10 10:10:10",
            url:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1573622612,1679629767&fm=26&gp=0.jpg"
          },
          {
            name:"仓库内摄像头3",
            time:"2021-10-10 10:10:10",
            url:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1573622612,1679629767&fm=26&gp=0.jpg"
          },
          {
            name:"仓库内摄像头4",
            time:"2021-10-10 10:10:10",
            url:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1573622612,1679629767&fm=26&gp=0.jpg"
          },
          {
            name:"仓库内摄像头5",
            time:"2021-10-10 10:10:10",
            url:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1573622612,1679629767&fm=26&gp=0.jpg"
          },
          {
            name:"仓库内摄像头6",
            time:"2021-10-10 10:10:10",
            url:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1573622612,1679629767&fm=26&gp=0.jpg"
          },
          {
            name:"仓库内摄像头7",
            time:"2021-10-10 10:10:10",
            url:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1573622612,1679629767&fm=26&gp=0.jpg"
          },
          {
            name:"仓库内摄像头8",
            time:"2021-10-10 10:10:10",
            url:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1573622612,1679629767&fm=26&gp=0.jpg"
          },
          {
            name:"仓库内摄像头9",
            time:"2021-10-10 10:10:10",
            url:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1573622612,1679629767&fm=26&gp=0.jpg"
          },
          {
            name:"仓库内摄像头10",
            time:"2021-10-10 10:10:10",
            url:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1573622612,1679629767&fm=26&gp=0.jpg"
          },
        ]
      }
    },

    created(){

    },
    mounted() {

    },
    methods: {
      // 调用父组件方法退出当前页面
      outButton(){
        this.$parent.outPage();
      },

    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
    //返回按钮
    .out-page-button
      height:30px;
      width:93px;
      margin:27px 0 0 106px;
      background:url("~@/assets/images/button_02.png");
      background-size 100% 100%
      display flex
      img
        display block
        height:12px;
        width:7px;
        margin:9px 10px 0 22px;
      p
        line-height:30px;
        font-size:$font_12;
        color:$color_ff;
        text-align left
    .bottom-max-box
      margin:40px auto 0;
      padding-bottom:40px;
      width:1796px;
      height:840px;
      overflow-x:hidden;
      overflow-y:scroll;
      text-align left
      .bottom-for-box
        display inline-block
        height:286px;
        width:446px;
        background url("~@/assets/images/min_back_07.png")
        background-size 100% 100%
        margin:21px 74px 0;
        div
          display flex
          margin:14px 0 0 30px;
          img
            display block
            height:20px;
            width:20px;
            margin:5px 10px 0 0;
          p
            color:$color_ff;
            line-height:30px;
            text-align left
          p:nth-child(2)
            font-size:$font_16;
            width:240px;
          p:nth-child(3)
            font-size:$font_14;
        .img-box
          border-radius:10px;
          width:397px;
          height:216px;
          margin:9px 25px 0;
</style>
