书写定时布/撤防页面、视频联动弹窗、报警记录页面完善

main
jinna 3 years ago
parent 175f711d43
commit b301e4c8e1
  1. 4
      public/cdn/iconfont/avue/iconfont.css
  2. BIN
      src/assets/image/add.png
  3. BIN
      src/assets/image/cancel_iten.png
  4. 3
      src/page/index/logo.vue
  5. 2
      src/page/index/top/index.vue
  6. 4
      src/page/index/top/top-menu.vue
  7. 3
      src/styles/media.scss
  8. 3
      src/styles/sidebar.scss
  9. 484
      src/views/wirelessintrusion/deployment/list.vue
  10. 216
      src/views/wirelessintrusion/warn/record.vue

@ -24,11 +24,13 @@
}
.icon-rizhi1:before {
color: #fff;
content: "\e6af";
}
.icon-suoping:before {
content: "\e6e9";
color: #fff;
}
.icon-zhuti:before {
@ -109,6 +111,7 @@
.icon-quanping:before {
content: "\e615";
color: #fff;
}
.icon-bofangqi-suoping:before {
@ -117,6 +120,7 @@
.icon-navicon:before {
content: "\e84e";
color: #fff;
}
.icon-yuan:before {

Binary file not shown.

After

Width:  |  Height:  |  Size: 992 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 639 B

@ -49,7 +49,8 @@ export default {
width: 240px;
height: 64px;
line-height: 64px;
background-color: #20222a;
// background-color: #20222a;
background-color: #031945;
font-size: 20px;
overflow: hidden;
box-sizing: border-box;

@ -79,7 +79,7 @@
<el-dropdown>
<span class="el-dropdown-link">
{{userInfo.userName}}
<i class="el-icon-arrow-down el-icon--right"></i>
<i class="el-icon-arrow-down el-icon--right" style="color:#fff"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>

@ -5,8 +5,8 @@
text-color="#333">
<el-menu-item index="0" @click.native="openHome(itemHome)" key="0">
<template slot="title">
<i :class="itemHome.source"></i>
<span>{{generateTitle(itemHome)}}</span>
<i :class="itemHome.source" style="color:#fff"></i>
<span style="color:#fff">{{generateTitle(itemHome)}}</span>
</template>
</el-menu-item>
<template v-for="(item,index) in items">

@ -45,7 +45,8 @@
.avue-header {
padding-left: 240px;
width: 100%;
background-color: #fff;
background-color: #031945;
// background-color: #fff;
box-sizing: border-box;
}

@ -35,7 +35,8 @@
padding-top: 60px;
height: 100%;
position: relative;
background-color: #20222a;
// background-color: #20222a;
background-color: #031945;
transition: width .2s;
box-sizing: border-box;
box-shadow: 2px 0 6px rgba(0,21,41,.35);

@ -5,11 +5,8 @@
:data="data"
:page.sync="page"
ref="crud"
@row-del="rowDel"
v-model="form"
:permission="permissionList"
@row-update="rowUpdate"
@row-save="rowSave"
:before-open="beforeOpen"
@search-change="searchChange"
@search-reset="searchReset"
@ -19,34 +16,122 @@
@refresh-change="refreshChange"
@on-load="onLoad">
<template slot="menuLeft">
<el-button type="danger"
size="small"
icon="el-icon-delete"
plain
v-if="permission.notice_delete"
@click="handleDelete">
<el-button
size="small"
@click="handleAddPre">
<i class="add_item"></i>
一键布防
</el-button>
<el-button
type="primary"
size="small"
@click="handleCancel">
<i class="cancel_item"></i>
一键撤防
</el-button>
<el-button
type="primary"
size="small"
@click="handleAdd">
新增
</el-button>
</template>
<template slot-scope="{row}"
slot="category">
<el-tag>{{row.categoryName}}</el-tag>
slot="status">
<el-tag type="danger" v-show="row.status == 0">关闭</el-tag>
<el-tag type="success" v-show="row.status == 1">开启</el-tag>
</template>
<template #menu="{size:row,index}">
<el-button @click="tip(row,index)"
icon="el-icon-check"
type="text"
:size="size" :disabled="index === 0">启用</el-button>
<el-button @click="tip(row,index)"
icon="el-icon-check"
type="text"
:size="size" :disabled="index === 0">编辑</el-button>
<el-button size="small" @click="handleDetail(row,index)">详情</el-button>
<el-button size="small" @click="handleEdit(row,index)">编辑</el-button>
<el-button size="small" @click="handleDelete(row,index)">删除</el-button>
</template>
</avue-crud>
<el-dialog
title="布防设置"
:visible.sync="dialogVisible"
:append-to-body="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
custom-class="dia_box"
>
<el-form v-model="addForm">
<el-form-item label="布防时间:" prop="preTime">
<el-time-picker
v-model="addForm.preTime"
placeholder="请选择布防时间"
:readonly="isDetail ? true : false"
value-format="HH:mm:ss">
</el-time-picker>
</el-form-item>
<el-form-item label="选择设备:">
<el-table
class="table_box"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55"
align="center"
:reserve-selection="true"
:selectable="selectable"
>
</el-table-column>
<el-table-column
prop="deviceName"
label="设备名称">
</el-table-column>
<el-table-column
prop="deviceNo"
label="设备编号">
</el-table-column>
<el-table-column
prop="deviceType"
label="设备大类">
</el-table-column>
<el-table-column
prop="deviceArea"
label="所在区域">
</el-table-column>
<el-table-column
prop="position"
label="安装位置">
</el-table-column>
</el-table>
<div class="page_box">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="diaPage.currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="diaPage.pageSize"
background
layout="total, sizes, prev, pager, next, jumper"
:total="diaPage.total">
</el-pagination>
</div>
</el-form-item>
<el-form-item label="是否启用:" prop="isOpen">
<el-switch
v-model="addForm.isOpen"
active-text="禁用"
inactive-text="启用"
:readonly="isDetail ? true : false">
</el-switch>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="submitForm">确认布防</el-button>
</div>
</el-dialog>
</basic-container>
</template>
<script>
import {getList, remove, update, add, getNotice} from "@/api/desk/notice";
import {mapGetters} from "vuex";
export default {
@ -54,93 +139,55 @@
return {
form: {},
query: {},
dialogVisible:false,
loading: true,
page: {
pageSize: 10,
currentPage: 1,
total: 0
},
diaPage:{
pageSize:10,
currentPage:1,
total:10,
},
addForm:{},
selectionList: [],
option: {
height: 'auto',
menuWidth:300,
calcHeight: 30,
dialogWidth: 950,
tip: false,
searchShow: true,
searchMenuSpan: 6,
border: true,
index: true,
viewBtn: true,
addBtn:false,
viewBtn: false,
editBtn:false,
delBtn:false,
selection: true,
excelBtn: true,
dialogClickModal: false,
column: [
{
label: "定时任务标题",
prop: "title",
span: 12,
search: true,
maxlength: 30,
rules: [{
required: true,
message: "请输入通定时任务标题",
trigger: "blur"
}]
},
{
label: "布/撤防",
type: "select",
prop: "brandCode",
span: 12,
hide: true,
addDisplay: true,
editDisplay: true,
viewDisplay: false,
rules: [{
required: true,
message: "请选择任务类型",
trigger: "blur"
}]
},
{
label: "任务类型",
prop: "brandName",
label: "布防时间",
prop: "time",
span: 12,
search: true,
// search: true,
addDisplay: false,
editDisplay: false,
viewDisplay: true
viewDisplay: false,
},
{
label: "任务描述",
prop: "factorySn",
label: "关联设备",
prop: "device",
type: 'textarea',
minRow: 3,
maxRow: 5,
maxlength: 200,
showWordLimit: true,
span: 12,
overHidden: true,
rules: [{
required: true,
message: "请输入任务描述",
trigger: "blur"
}]
},
{
label: "时间",
type: 'time',
prop: 'time',
format: 'HH:mm:ss',
valueFormat: 'HH:mm:ss',
rules: [{
required: true,
message: "定时时间",
trigger: "blur"
}]
},
{
label: "任务状态",
label: "布防状态",
type: "select",
prop: "brandCode",
span: 12,
@ -151,16 +198,26 @@
viewDisplay: false,
},
{
label: "任务状态",
prop: "regionName ",
span: 12,
label: "是否启用",
prop: "status",
span: 24,
width: 80,
align: "center",
slot: true,
addDisplay: false,
editDisplay: false,
viewDisplay: true,
viewDisplay: false,
},
]
},
data: []
tableData:[],
data: [
{time:'09:00:00',device:'空调1、空调2、消防1、消防2、消防3、消防4、消防5...',status:'0'},
{time:'09:00:00',device:'空调1、空调2、消防1、消防2、消防3、消防4、消防5...',status:'1'},
],
multipleSelection:[],
selectedArr:[],
isDetail:false
};
},
computed: {
@ -173,6 +230,7 @@
editBtn: this.vaildData(this.permission.notice_edit, false)
};
},
ids() {
let ids = [];
this.selectionList.forEach(ele => {
@ -182,48 +240,53 @@
}
},
methods: {
rowSave(row, done, loading) {
add(row).then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
done();
}, error => {
window.console.log(error);
loading();
});
//
selectable(row, index) {
//row
let data = this.selectedArr //
//return : false
//return : true
return data.findIndex(item => item == row.id) === -1
},
rowUpdate(row, index, done, loading) {
update(row).then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
done();
}, error => {
window.console.log(error);
loading();
});
//
handleAdd(){
this.dialogVisible = true;
this.isDetail = false;
this.tableData = [
{id:'001',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'002',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'003',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'004',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'005',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'006',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'007',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'008',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'009',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'010',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
]
this.selectedArr = ['001','003','005']
},
rowDel(row) {
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
return remove(row.id);
})
.then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
});
//
handleSelectionChange(val){
this.multipleSelection = val
},
//
submitForm(){
console.log(this.addForm)
},
//
handleAddPre(){
if (this.selectionList.length === 0) {
this.$message.warning("请选择至少一条数据");
return;
}
},
//
handleCancel(){
if (this.selectionList.length === 0) {
this.$message.warning("请选择至少一条数据");
return;
}
},
searchReset() {
this.query = {};
@ -236,42 +299,76 @@
done();
},
selectionChange(list) {
console.log(list)
this.selectionList = list;
},
selectionClear() {
this.selectionList = [];
this.$refs.crud.toggleSelection();
},
handleDelete() {
if (this.selectionList.length === 0) {
this.$message.warning("请选择至少一条数据");
return;
//
handleDetail(row){
this.dialogVisible = true;
this.isDetail = true;
this.tableData = [
{id:'001',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'002',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
];
this.addForm = {
preTime:'09:00:00',
isOpen:Boolean(1)
}
},
//
handleEdit(){
this.dialogVisible = true;
this.isDetail = false;
this.tableData = [
{id:'001',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'002',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'003',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'004',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'005',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'006',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'007',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'008',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'009',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
{id:'010',deviceName:'空调',deviceNo:"A101",deviceType:'空调设备',deviceArea:'1号楼一层北',position:'120.51,36.12'},
]
this.selectedArr = ['001','003','005']
let selectArr = ['002','004']
let map = new Map();
for (let item of this.tableData) {
if (!map.has(item.id)) {
map.set(item.id, item);
};
};
this.multipleSelection = [...map.values()].filter(item => selectArr.includes(item.id));
this.$nextTick(() =>{
this.multipleSelection.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row, true) //
})
})
},
handleDelete() {
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
return remove(this.ids);
})
.then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
this.$refs.crud.toggleSelection();
// this.onLoad(this.page);
// this.$message({
// type: "success",
// message: "!"
// });
// this.$refs.crud.toggleSelection();
});
},
beforeOpen(done, type) {
if (["edit", "view"].includes(type)) {
getNotice(this.form.id).then(res => {
this.form = res.data.data;
});
}
done();
},
currentChange(currentPage) {
this.page.currentPage = currentPage;
},
@ -282,31 +379,92 @@
this.onLoad(this.page, this.query);
},
onLoad(page, params = {}) {
const {releaseTimeRange} = this.query;
let values = {
...params,
...this.query
};
if (releaseTimeRange) {
values = {
...values,
releaseTime_datege: releaseTimeRange[0],
releaseTime_datelt: releaseTimeRange[1],
};
values.releaseTimeRange = null;
}
this.loading = true;
getList(page.currentPage, page.pageSize, values).then(res => {
const data = res.data.data;
this.page.total = data.total;
this.data = data.records;
this.loading = false;
this.selectionClear();
});
// const {releaseTimeRange} = this.query;
// let values = {
// ...params,
// ...this.query
// };
// if (releaseTimeRange) {
// values = {
// ...values,
// releaseTime_datege: releaseTimeRange[0],
// releaseTime_datelt: releaseTimeRange[1],
// };
// values.releaseTimeRange = null;
// }
// this.loading = true;
// getList(page.currentPage, page.pageSize, values).then(res => {
// const data = res.data.data;
// this.page.total = data.total;
// this.data = data.records;
// this.loading = false;
// this.selectionClear();
// });
this.data = [
{time:'09:00:00',device:'空调1、空调2、消防1、消防2、消防3、消防4、消防5...',status:0},
{time:'09:00:00',device:'空调1、空调2、消防1、消防2、消防3、消防4、消防5...',status:1},
];
this.loading = false;
this.page.total = this.data.length;
}
}
};
</script>
<style>
<style lang="scss" scoped>
::v-deep .cancel_item {
background: url('~@/assets/image/cancel_iten.png') center no-repeat; // url
font-size: 12px;
background-size: cover;
}
::v-deep .cancel_item:before {
content: "替";
font-size: 12px;
visibility: hidden;
}
::v-deep .add_item {
background: url('~@/assets/image/add.png') center no-repeat; // url
font-size: 12px;
background-size: cover;
}
::v-deep .add_item:before {
content: "替";
font-size: 12px;
visibility: hidden;
}
.table_box{
th.el-table__cell{
background: #F7F8FA;
}
}
</style>
<style lang="scss">
.dia_box{
height: 700px;
overflow: auto;
.el-table{
width: 90% !important;
border: 1px solid #D6D8DF;
}
.el-table th.el-table__cell{
background: #F7F8FA;
}
.dialog-footer{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.page_box{
width: 90%;
margin-left: 9%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
}
</style>

@ -48,27 +48,61 @@
</el-button> -->
</template>
<template slot-scope="{row}"
slot="category">
<el-tag>{{row.categoryName}}</el-tag>
slot="alarmInfo">
<!-- <el-tag type="danger"> -->
{{row.alarmInfo}}
<!-- </el-tag> -->
</template>
<template #menu="{size:row,index}">
<template #menu="{row,index}">
<el-button @click="tip(row,index)"
type="primart" plain
:size="size" >详情</el-button>
<el-button @click="tip(row,index)"
type="primart" plain
:size="size" :disabled="index !== 0">消警</el-button>
<el-button @click="tip(row,index)"
size="small" >详情</el-button>
<el-button
@click="tip(row,index)"
type="primart" plain
size="small"
:disabled="row.cancelTime == ''">
消警
</el-button>
<!-- <el-button @click="tip(row,index)"
type="primart" plain
:size="size">撤防</el-button>
<el-button @click="tip(row,index)"
size="small">撤防</el-button> -->
<!-- <el-button @click="tip(row,index)"
type="primart" plain
:size="size">旁路恢复</el-button>
<el-button @click="tip(row,index)"
type="primart" plain
:size="size" >视频联动</el-button>
size="small">旁路恢复</el-button> -->
<el-button
@click="linkVideo(row,index)"
type="primart"
plain
size="small"
:disabled="row.cancelTime == ''">
视频联动
</el-button>
</template>
</avue-crud>
<!-- 视频联动弹窗 -->
<el-dialog
title="视频联动"
:visible.sync="dialogVisible"
:append-to-body="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
custom-class="video_dia"
width="65%">
<div class="video_box">
<!-- <div class="video_item" v-for="item in videoData" :key="item.id">
<div class="top_item">{{item.url}}</div>
<div class="bottom_item">{{item.name}}</div>
</div> -->
<el-row :gutter="20">
<el-col :span="6" v-for="item in videoData" :key="item.id">
<video class="grid-content" src="">
</video>
</el-col>
</el-row>
</div>
</el-dialog>
</basic-container>
</template>
@ -82,6 +116,7 @@
form: {},
query: {},
loading: true,
dialogVisible:false,
page: {
pageSize: 10,
currentPage: 1,
@ -96,16 +131,13 @@
searchShow: true,
searchMenuSpan: 6,
border: true,
index: true,
// index: true,
menuWidth: 320,
viewBtn: true,
viewBtn: false,
addBtn: false,
editBtn: false,
delBtn: false,
selection: true,
selectable: (row, index) => {
return index !== 0;
},
dialogClickModal: false,
column: [
{
@ -116,41 +148,66 @@
search: true,
},
{
label: "报警类型",
type: "select",
dicUrl: "/api/blade-system/dict/dictionary?code=notice",
props: {
label: "dictValue",
value: "dictKey"
},
dataType: "number",
slot: true,
prop: "category",
search: true,
label: "设备编号",
prop: "deviceNo",
span: 24,
row: true,
},
{
label: "设备大类",
prop: "deviceType",
span: 24,
row: true,
},
{
label: "品牌编号",
prop: "brandNo",
span: 24,
row: true,
},
// {
// label: "",
// type: "select",
// dicUrl: "/api/blade-system/dict/dictionary?code=notice",
// props: {
// label: "dictValue",
// value: "dictKey"
// },
// dataType: "number",
// slot: true,
// prop: "category",
// search: true,
// },
{
label: "所属区域",
prop: "floor",
slot: true,
// slot: true,
},
{
label: "安装位置",
prop: "address",
slot: true,
// slot: true,
},
{
label: "报警信息",
prop: "address",
prop: "alarmInfo",
slot: true,
overHidden:true
},
{
label: "报警时间",
prop: "releaseTime",
prop: "alarmTime",
type: "date",
},
{
label: "消报时间",
prop: "cancelTime",
type: "date",
},
]
},
data: []
data: [],
videoData:[]
};
},
computed: {
@ -272,31 +329,74 @@
this.onLoad(this.page, this.query);
},
onLoad(page, params = {}) {
const {releaseTimeRange} = this.query;
let values = {
...params,
...this.query
};
if (releaseTimeRange) {
values = {
...values,
releaseTime_datege: releaseTimeRange[0],
releaseTime_datelt: releaseTimeRange[1],
};
values.releaseTimeRange = null;
}
this.loading = true;
getList(page.currentPage, page.pageSize, values).then(res => {
const data = res.data.data;
this.page.total = data.total;
this.data = data.records;
this.loading = false;
this.selectionClear();
});
}
// const {releaseTimeRange} = this.query;
// let values = {
// ...params,
// ...this.query
// };
// if (releaseTimeRange) {
// values = {
// ...values,
// releaseTime_datege: releaseTimeRange[0],
// releaseTime_datelt: releaseTimeRange[1],
// };
// values.releaseTimeRange = null;
// }
// this.loading = true;
// getList(page.currentPage, page.pageSize, values).then(res => {
// const data = res.data.data;
// this.page.total = data.total;
// this.data = data.records;
// this.loading = false;
// this.selectionClear();
// });
this.data = [
{title:'空调',deviceNo:'A101',deviceType:'空调设备',brandNo:'格力AT51',floor:'一号楼一层北',address:'1011室',alarmInfo:'无法制冷',alarmTime:'2023-07-14 09:55:23',cancelTime:'2023-07-15 15:23:10'},
{title:'空调',deviceNo:'A101',deviceType:'空调设备',brandNo:'格力AT51',floor:'一号楼一层北',address:'1011室',alarmInfo:'无法制冷,无法制冷无法制冷',alarmTime:'2023-07-14 09:55:23',cancelTime:''},
];
this.loading = false;
this.page.total = this.data.length
},
//
linkVideo(){
this.dialogVisible = true;
this.videoData = [
{id:'001',url:'cdcdcdcd',name:'视频一'},
{id:'002',url:'cdcdcdcd',name:'视频一'},
{id:'003',url:'cdcdcdcd',name:'视频一'},
{id:'004',url:'cdcdcdcd',name:'视频一'},
{id:'005',url:'cdcdcdcd',name:'视频一'},
{id:'006',url:'cdcdcdcd',name:'视频一'},
{id:'007',url:'cdcdcdcd',name:'视频一'},
{id:'008',url:'cdcdcdcd',name:'视频一'},
]
},
}
};
</script>
<style>
<style lang="scss" scoped>
</style>
<style lang="scss">
.video_dia{
.video_box{
width: 100%;
// display: flex;
// justify-content: space-between;
// flex-wrap: wrap;
.grid-content {
width: 100%;
height: 200px;
margin-bottom: 18px;
background: #959595;
video{
width: 100%;
height: 100%;
}
}
}
}
</style>

Loading…
Cancel
Save