69 lines
1.9 KiB
Vue
69 lines
1.9 KiB
Vue
|
<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> -->
|
||
|
|
</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>
|