6 changed files with 622 additions and 436 deletions
@ -1,48 +1,200 @@ |
|||||
<template> |
<template> |
||||
<div class="app-container"> |
<div class="app-container"> |
||||
<!-- 标题按钮部分开始 --> |
<div> |
||||
<div class="tab-header webtop"> |
<div v-show="viewState == 1"> |
||||
<!-- 标题 --> |
<button-bar ref="btnbar" view-title="环境监控-视频中心" :btndisabled="btndisabled" @btnhandle="btnHandle" /> |
||||
<div>环境监控-视频中心</div> |
<el-row style="margin-top: 20px;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;"> |
||||
<!-- start 添加修改按钮 --> |
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
||||
<div /> |
<div > |
||||
<!-- end 添加修改按钮 --> |
<el-card class="box-card"> |
||||
<!-- end 详情按钮 --> |
<div slot="header" class="clearfix"> |
||||
|
<span>卡片名称</span> |
||||
|
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> |
||||
|
</div> |
||||
|
<img src="../../../assets/home/bIcon8.png"/> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
|
||||
|
</el-col> |
||||
|
|
||||
|
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
||||
|
<div > |
||||
|
<el-card class="box-card"> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span>卡片名称</span> |
||||
|
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> |
||||
|
</div> |
||||
|
<img src="../../../assets/home/bIcon8.png"/> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
|
||||
|
</el-col> |
||||
|
|
||||
|
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
||||
|
<div > |
||||
|
<el-card class="box-card"> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span>卡片名称</span> |
||||
|
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> |
||||
|
</div> |
||||
|
<img src="../../../assets/home/bIcon8.png"/> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
|
||||
|
</el-col> |
||||
|
|
||||
|
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
||||
|
<div > |
||||
|
<el-card class="box-card"> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span>卡片名称</span> |
||||
|
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> |
||||
|
</div> |
||||
|
<img src="../../../assets/home/bIcon8.png"/> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
|
||||
|
</el-col> |
||||
|
|
||||
|
</el-row> |
||||
|
|
||||
|
<el-row style="margin-top: 20px;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;"> |
||||
|
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
||||
|
<div > |
||||
|
<el-card class="box-card"> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span>卡片名称</span> |
||||
|
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> |
||||
|
</div> |
||||
|
<img src="../../../assets/home/bIcon8.png"/> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
|
||||
|
</el-col> |
||||
|
|
||||
|
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
||||
|
<div > |
||||
|
<el-card class="box-card"> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span>卡片名称</span> |
||||
|
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> |
||||
|
</div> |
||||
|
<img src="../../../assets/home/bIcon8.png"/> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
|
||||
|
</el-col> |
||||
|
|
||||
|
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
||||
|
<div > |
||||
|
<el-card class="box-card"> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span>卡片名称</span> |
||||
|
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> |
||||
|
</div> |
||||
|
<img src="../../../assets/home/bIcon8.png"/> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
|
||||
|
</el-col> |
||||
|
|
||||
|
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
||||
|
<div > |
||||
|
<el-card class="box-card"> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span>卡片名称</span> |
||||
|
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> |
||||
|
</div> |
||||
|
<img src="../../../assets/home/bIcon8.png"/> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
|
||||
|
</el-col> |
||||
|
|
||||
|
</el-row> |
||||
|
|
||||
|
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import ButtonBar from '@/components/ButtonBar' |
||||
export default { |
export default { |
||||
name: 'MonitorVideos', |
components: { |
||||
|
ButtonBar, |
||||
|
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
|
btndisabled: false, |
||||
|
viewState: 1, // 1、列表 2、添加 3、修改 4、查看 |
||||
submitdisabled: false, |
submitdisabled: false, |
||||
viewTitle: '视频中心', |
btnList: [ |
||||
tableKey: 0, |
// { |
||||
index: 0, |
// type: 'primary', |
||||
totalQuantity: '', // 合计数量 |
// size: 'small', |
||||
amountInTotal: '', // 合计金额 |
// icon: 'plus', |
||||
formobj: {}, |
// btnKey: 'toAdd', |
||||
rules: {} |
// btnLabel: '新增' |
||||
|
// }, |
||||
|
// { |
||||
|
// type: 'danger', |
||||
|
// size: 'small', |
||||
|
// icon: 'del', |
||||
|
// btnKey: 'doDel', |
||||
|
// btnLabel: '删除' |
||||
|
// }, |
||||
|
{ |
||||
|
type: 'info', |
||||
|
size: 'small', |
||||
|
icon: 'cross', |
||||
|
btnKey: 'doClose', |
||||
|
btnLabel: '关闭' |
||||
} |
} |
||||
|
], |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$refs['btnbar'].setButtonList(this.btnList) |
||||
}, |
}, |
||||
created() {}, |
created() {}, |
||||
methods: { |
methods: { |
||||
handleReturn() { |
btnHandle(btnKey) { |
||||
this.formobj = {} |
switch (btnKey) { |
||||
this.$refs['form_obj'].resetFields() |
case 'doClose': |
||||
this.$emit('doback') |
this.doClose() |
||||
|
break |
||||
|
default: |
||||
|
break |
||||
} |
} |
||||
|
}, |
||||
|
doClose() { |
||||
|
this.$store.dispatch('tagsView/delView', this.$route) |
||||
|
this.$router.go(-1) |
||||
|
}, |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped> |
<style lang="scss"> |
||||
.title { |
.wrap { |
||||
display: flex; |
padding: 12px; |
||||
flex-direction: row; |
} |
||||
justify-content: space-between; |
|
||||
align-items: center; |
.demo-layout { |
||||
|
height: 25px; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.bg-purple { |
||||
|
background: #CED7E1; |
||||
|
} |
||||
|
|
||||
|
.bg-purple-light { |
||||
|
background: #e5e9f2; |
||||
|
} |
||||
|
|
||||
|
.bg-purple-dark { |
||||
|
background: #99a9bf; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue