视频九宫格样式

最新推荐文章于 2024-09-06 11:00:54 发布

三七初八

最新推荐文章于 2024-09-06 11:00:54 发布

阅读量127

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43870864/article/details/127411856

版权

本文展示了如何使用 Vue.js 和 Element UI 创建一个摄像头详情组件，其中包括一个轮播图，每个轮播项展示摄像头信息。当摄像头数量不足时，用占位符填充。代码中定义了数据结构、样式，并实现了关闭对话框的功能。

摘要由CSDN通过智能技术生成

实现样式如下在这里插入图片描述
代码如下：

<template>
  <div class="CameraListDetail">
    <MyDialog width="50%" :showFooter="false" :visible="visible" @close="closeDialog">
      <div slot="title">摄像头详情</div>
      <el-carousel trigger="click" height="510px" :autoplay="false" indicator-position="none">
        <el-carousel-item v-for="item in Math.ceil(cameraList.length / 9)" :key="item">
          <!-- todo 填充视频，不足9个需要用'暂时视频'占位 -->
          <div class="box">
            <ul>
              <li v-for="(item, index) in cameraList" :key="index">
                <div>
                  <div>
                    <img src="../../../../assets/images/wens/noCamera.png" />
                    <span>暂无视频</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </el-carousel-item>
      </el-carousel>
    </MyDialog>
  </div>
</template>
<script>
import MyDialog from '@/components/dialog'
export default {
  name: 'BatchAddStaffDialog',
  components: {
    MyDialog,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      cameraList: [
        { name: '11', id: 1 },
        { name: '11', id: 2 },
        { name: '11', id: 3 },
        { name: '11', id: 4 },
        { name: '11', id: 11 },
        { name: '11', id: 22 },
        { name: '11', id: 33 },
        { name: '11', id: 44 },
        { name: '11', id: 55 },
        { name: '11', id: 55 },
      ],
    }
  },
  computed: {},
  watch: {},
  filters: {},
  methods: {
    closeDialog() {
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.CameraListDetail {
  box {
    padding: 20px 10px;
    display: inline-block;
  }

  ul {
    overflow: hidden;
    width: 100%;
    margin-bottom: -10px;
    margin-top: 0;
    background: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  li {
    list-style: none;
    // float: left;
    display: flex;
    width: 33.3%; /*可以用百分比*/
    height: 162px; /*可以用百分比*/
    margin-bottom: 10px;
  }

  li > div {
    background: #1b1b1b;
    margin: 0 5px;
    border-radius: 8px;
    text-align: center;
    height: 100%;
    width: 100%;
    div {
      margin-top: 10%;
      display: inline-grid;
      img {
        width: 120px;
        height: 60px;
      }
      span {
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        line-height: 60px;
      }
    }
  }
}
</style>