dhy
parent
c5436954ec
commit
e8c0f8d60c
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 620 B |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,4 @@
|
||||
export { default as tab1 } from "./tab1.vue";
|
||||
export { default as tab2 } from "./tab2.vue";
|
||||
export { default as tab3 } from "./tab3.vue";
|
||||
export { default as tab4 } from "./tab4.vue";
|
||||
@ -0,0 +1,7 @@
|
||||
<template></template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,7 @@
|
||||
<template></template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,7 @@
|
||||
<template></template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,7 @@
|
||||
<template></template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,112 @@
|
||||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: JC9527
|
||||
* @Date: 2023-08-17 10:41:06
|
||||
* @LastEditors: JC9527
|
||||
* @LastEditTime: 2023-08-17 19:08:16
|
||||
-->
|
||||
<template>
|
||||
<dia-log ref="dialog5" :width="width" :title="title">
|
||||
<div class="tab-list">
|
||||
<div
|
||||
class="tab-item"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:class="currentIndex == index ? 'activeTab' : ''"
|
||||
@click="changeTab(index)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-page"></div>
|
||||
</dia-log>
|
||||
</template>
|
||||
<script>
|
||||
import { tab1, tab2, tab3, tab4 } from "./components/index.js";
|
||||
import diaLog from "../../components/dialog/index.vue";
|
||||
export default {
|
||||
components: {
|
||||
tab1,
|
||||
tab2,
|
||||
tab3,
|
||||
tab4,
|
||||
},
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: "565px",
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "视频墙",
|
||||
},
|
||||
},
|
||||
components: { diaLog },
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
list: [
|
||||
{ name: "主体工商信息" },
|
||||
{ name: "安全生产模版" },
|
||||
{ name: "整改过程信息" },
|
||||
{ name: "过期未整改告警" },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeTab(index) {
|
||||
if (this.currentIndex == index) return;
|
||||
this.currentIndex = index;
|
||||
},
|
||||
open() {
|
||||
this.$refs.dialog5.open("5");
|
||||
},
|
||||
Close() {
|
||||
this.$refs.dialog3.Close();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 30px !important;
|
||||
}
|
||||
.video-main {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 200px);
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 15px;
|
||||
.main-item {
|
||||
// width: 248px;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
background-image: url("../../../assets/images/videoImg.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.tab-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.tab-item {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #d3eef2;
|
||||
margin-right: 15px;
|
||||
padding: 6px 10px;
|
||||
background: url("~@/assets/images/changeBtn2.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.activeTab {
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
background: url("~@/assets/images/activeTab.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.tab-page {
|
||||
min-height: 500px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue