实现 样式如下
代码如下:
<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>