Newer
Older
ganzhou-feidu / src / pages / csdz / videoCloud / components / offlineVideo.vue
<!-- 视频云-离线视频列表 -->
<template>
  <div class="children">
    <div v-for="(item, index) in list" class="menu-item children-item" @click="menuClick(item)">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'LayerManager',
  props: {
    list: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      indexNum: 0,
      refreshDown: true,
      layer: require('@/assets/images/function/通用功能/图层管理未选中.png'),
      layerHover: require('@/assets/images/function/通用功能/图层管理选中.png'),
      childrednName: 0,
    }
  },
  computed: {
    current: {
      set(v) {
        this.refreshDown = false
        this.$nextTick(() => {
          this.indexNum = this.menuTab.findIndex(item => item.value === v)
          this.refreshDown = true
        })

      },
      get() {
        return this.menuTab[this.indexNum].value
      }
    }
  },
  methods: {
    // btnClick(e) {
    //   this.$emit('btnClick', e)
    // },
    menuClick(e) {
      console.log(e, '列表点击')
      this.childrednName = e
      this.$emit('menuClick', e)
    },
    // childrenClick(e) {
    //   console.log(e, this.childrednName, '子列表点击')
    //   this.$emit('childrenClick', e, this.childrednName)
    // },
    // handleRightClick() {
    //   this.childrednName = null
    // },
    // // 切换菜单
    // changeSelect() {
    //   this.$emit('changeSelect', this.current)
    //   // 清空二级菜单
    //   this.handleRightClick()
    //   console.log(this.current, 'current')
    // }
  }
}
</script>

<style scoped>
.search-menu {
  display: flex;
  z-index: 111111111;
  position: relative;
  left: 0px;
  top: 0px;
}

@keyframes slide-down {
  0% {
    transform: scale(1, 0);
  }

  100% {
    transform: scale(1, 1);
  }
}

@-webkit-keyframes slide-down {
  0% {
    -webkit-transform: scale(1, 0);
  }

  100% {
    -webkit-transform: scale(1, 1);
  }
}

.common-menu {
  position: absolute;
  left: 0rem;
  top: 7rem;
  width: 25rem;
  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
  background-size: 100% 101% !important;
}

.menu-down {
  position: relative;
  left: 0rem;
  top: 0rem;
  animation: slide-down 0.3s ease-in;
  -webkit-animation: slide-down 0.3s ease-in;
  transition: max-height .3s ease-in;
  transform-origin: 50% 0;
  margin: 20px 20px 10px 10px;
  width: calc(100% - 45px);
}

.children {
  position: absolute;
  z-index: 111111;
  left: 1rem;
  top: 8rem;
  width: 300px;
  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
  background-size: 100% 101% !important;
  height: 400px;
  overflow-y: scroll;
}

.children-item {
  width: 80% !important;
  margin: 10px auto !important;
  color: #fff !important;

}
</style>