first commit

src/views/business/alarm/monitor.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="monitor-container">
+    <div class="tab">
+        <div v-for="(item,index) in tabs"
+            :key="index"
+            :class="['tab-item',active === index ? 'active' : '']"
+            @click="handle(index)">{{item}}</div>
+    </div>
+    <!-- <div class="flv-container"><FlvPlayerComponent :url="uavDialog.url"/></div> -->
+     <video class="flv-container" :src="getAssetsFile('alarm/mock2.mp4')" autoplay controls muted loop></video>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+import FlvPlayerComponent from '@/components/FlvPlayer/index.vue'
+import { getAssetsFile } from '@/utils/common'
+const tabs = [
+    '重新轮询', '巡检报告'
+]
+const active = ref(0)
+
+const handle = (index) => {
+    active.value = index
+}
+</script>
+<style scoped lang="scss">
+
+.monitor-container{
+  position: fixed;
+  right: 40px;
+  bottom: 46px;
+//   display: flex;
+//   flex-direction: column;
+//   gap: 20px;
+
+  width: 524px;
+  height: 386px;
+  background: linear-gradient( 90deg, #0C1929 0%, rgba(12,25,41,0.6) 100%);
+  border: 1px solid;
+  border-image: linear-gradient(270deg, rgba(42, 159, 255, 0.2), rgba(42, 159, 255, 0.8)) 1 1;
+  padding: 20px;
+  .tab{
+    display: flex;
+    .tab-item{
+        background: linear-gradient( 180deg, rgba(46,164,240,0.26) 0%, #2EA4F0 100%);
+        box-shadow: inset 0px -1px 2px 0px rgba(83,203,255,0.22);
+        color: #FFFFFF;
+        font-size: 14px;
+        width: 50%;
+        height: 36px;
+        text-align: center;
+        line-height: 36px;
+        box-sizing: border-box;
+        &.active{
+            background: linear-gradient( 180deg, #2EA4F0 0%, rgba(46,164,240,0.35) 100%);
+            box-shadow: inset 0px 2px 4px 0px rgba(83,203,255,0.4);
+            // border-radius: 2px 2px 0px 0px;
+            border: 1px solid;
+            border-image: linear-gradient(180deg, rgba(22, 213, 255, 1), rgba(22, 213, 255, 0)) 1 1;
+            clip-path: inset(0 0 round 2px);
+        }
+    }
+  }
+  .flv-container{
+    width: 100%;
+    margin-top: 10px;
+  }
+}
+</style>