From 0846e2a77fb1bf078c199b1f2a5994aad1afc4fa Mon Sep 17 00:00:00 2001
From: whychdw <49690745@qq.com>
Date: 星期一, 19 四月 2021 14:03:23 +0800
Subject: [PATCH] 提交
---
src/pages/index.vue | 108 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 106 insertions(+), 2 deletions(-)
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 40ea527..8168aff 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,13 +1,117 @@
<template>
-$END$
+ <div class="video-wrapper">
+ <video-header></video-header>
+ <div class="video-body">
+ <el-row :gutter="20">
+ <el-col :span="8" class="video-item" v-for="item in videos" :key="item.key">
+ <video-item :flag="item.key" :id="item.id" :name="item.name" :ip="item.ip" @close="close"></video-item>
+ </el-col>
+ <el-col :span="8" class="video-item">
+ <layout-box2>
+ <div class="add-video-item" @click="drawer=true">
+ <div class="add-video-text">+</div>
+ </div>
+ </layout-box2>
+ </el-col>
+ </el-row>
+ </div>
+ <el-drawer
+ :withHeader="false"
+ :visible.sync="drawer"
+ direction="rtl">
+
+ </el-drawer>
+ </div>
</template>
<script>
+import VideoHeader from "@/components/video-header";
+import VideoItem from "@/components/VideoItem";
+import LayoutBox2 from "@/components/LayoutBox2";
+
export default {
-name: "index.vue"
+ name: "index",
+ components: {LayoutBox2, VideoItem, VideoHeader},
+ data() {
+ return {
+ drawer: false,
+ videos: [
+ {
+ key: 'video1',
+ id: '42010013',
+ ip: '192.168.10.165',
+ name: '娴嬭瘯瑙嗛'
+ },
+ {
+ key: 'video2',
+ id: '42010013',
+ ip: '192.168.10.2',
+ name: '娴嬭瘯瑙嗛1'
+ },
+ ]
+ }
+ },
+ methods: {
+ close(ip) {
+ this.videos = this.videos.filter(item => {
+ return item.ip != ip;
+ });
+ },
+ searchAll() {
+ this.$apis.station.searchAll().then(res=>{
+ console.log(res);
+ }).catch(error=>{
+ console.log(error);
+ });
+ },
+ searchAllShow() {
+ this.$apis.videoManage.searchAllShow().then(res=>{
+ console.log(res);
+ }).catch(error=>{
+ console.log(error);
+ });
+ }
+ },
+ mounted() {
+ this.searchAll();
+ this.searchAllShow();
+ }
}
</script>
<style scoped>
+.video-wrapper {
+ display: flex;
+ height: 100vh;
+ background-image: url("../assets/images/video-bg.jpg");
+ background-size: 100% 100%;
+ flex-direction: column;
+}
+.video-body {
+ flex: 1;
+ padding: 0 8px;
+}
+
+.video-item {
+ margin-top: 12px;
+ margin-bottom: 12px;
+ height: calc(33.3vh - 44px);
+}
+
+.add-video-item {
+ position: relative;
+ height: 100%;
+ background-color: #061c67;
+}
+
+.add-video-text {
+ position: absolute;
+ color: #0069bc;
+ font-size: 100px;
+ top: 50%;
+ left: 50%;
+ margin-top: -80px;
+ margin-left: -50px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.1