20 changed files with 459 additions and 779 deletions
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 162 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
@ -1,34 +0,0 @@ |
|||||
<!-- |
|
||||
*@描述: admin主页构建 |
|
||||
*@作者： |
|
||||
*@日期： 9/27 |
|
||||
*@版本：1.0 |
|
||||
*/ |
|
||||
--> |
|
||||
<template> |
|
||||
<a-row> |
|
||||
<a-col :span="3" class="left-com" > |
|
||||
<comLeftMenu></comLeftMenu> |
|
||||
</a-col> |
|
||||
<a-col :span="18" class=" com-setup-center "> |
|
||||
<slot></slot> |
|
||||
</a-col> |
|
||||
<a-col :span="3" class="right-com" ><comRightMenu></comRightMenu></a-col> |
|
||||
</a-row> |
|
||||
</template> |
|
||||
<script setup lang="ts"> |
|
||||
import comLeftMenu from './leftMenu/index.vue'; |
|
||||
import comRightMenu from './rightMenu/index.vue'; |
|
||||
</script> |
|
||||
<style lang="less" scoped> |
|
||||
.com-setup-center { |
|
||||
height: 100vh; |
|
||||
width: 100%; |
|
||||
flex-wrap: nowrap; |
|
||||
} |
|
||||
.left-com,.right-com{ |
|
||||
position:relative; |
|
||||
z-index:8; |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
@ -1,124 +0,0 @@ |
|||||
<!-- |
|
||||
*@描述: 左侧组件 |
|
||||
*@作者： |
|
||||
*@日期： 9/27 |
|
||||
*@版本：1.0 |
|
||||
*/ |
|
||||
--> |
|
||||
<template> |
|
||||
<a-row class="com-left-menu-header"> |
|
||||
<span>工具栏</span> |
|
||||
</a-row> |
|
||||
<hr style="border:1px solid #00ffe4;" width="100%" /> |
|
||||
<a-row class="com-left-menu"> |
|
||||
|
|
||||
<a-tabs v-model:activeKey="activeKey" :tab-position="'left'"> |
|
||||
<a-tab-pane key="1"> |
|
||||
<template #tab> |
|
||||
<!-- <span class="icon iconfont icon-gongneng iconfontsize"></span> --> |
|
||||
<div class="menu-title"> |
|
||||
功能 |
|
||||
</div> |
|
||||
</template> |
|
||||
<Basic /> |
|
||||
</a-tab-pane> |
|
||||
<a-tab-pane key="2"> |
|
||||
<template #tab> |
|
||||
<!-- <span class="icon iconfont icon-chanpinmoxing iconfontsize"></span> --> |
|
||||
<div class="menu-title"> |
|
||||
3D模型 |
|
||||
</div> |
|
||||
</template> |
|
||||
<Models3D /> |
|
||||
</a-tab-pane> |
|
||||
<a-tab-pane key="3"> |
|
||||
<template #tab> |
|
||||
<!-- <span class="icon iconfont icon-chanpinmoxing iconfontsize"></span> --> |
|
||||
<div class="menu-title"> |
|
||||
图片<br />模型 |
|
||||
</div> |
|
||||
</template> |
|
||||
<ModelsImages /> |
|
||||
</a-tab-pane> |
|
||||
<a-tab-pane key="4"> |
|
||||
<template #tab> |
|
||||
<!-- <span class="icon iconfont icon-shengchan iconfontsize"></span> --> |
|
||||
<div class="menu-title"> |
|
||||
工具 |
|
||||
</div> |
|
||||
</template> |
|
||||
<Tools /> |
|
||||
</a-tab-pane> |
|
||||
<a-tab-pane key="5"> |
|
||||
<template #tab> |
|
||||
<!-- <span class="icon iconfont icon-shezhi1 iconfontsize"></span> --> |
|
||||
<div class="menu-title"> |
|
||||
系统<br />设置 |
|
||||
</div> |
|
||||
</template> |
|
||||
<SytemComponent /> |
|
||||
</a-tab-pane> |
|
||||
</a-tabs> |
|
||||
</a-row> |
|
||||
</template> |
|
||||
<script lang="ts" setup> |
|
||||
import { ref } from "vue"; |
|
||||
import Basic from "./leftMenuItem/basic.vue"; |
|
||||
import ModelsImages from "./leftMenuItem/modelsimages.vue"; |
|
||||
import Models3D from "./leftMenuItem/models3d.vue"; |
|
||||
import SytemComponent from "./leftMenuItem/sytemcomponent.vue"; |
|
||||
import Tools from "./leftMenuItem/tools.vue"; |
|
||||
let activeKey = ref('1') |
|
||||
</script> |
|
||||
<style lang="less" scoped> |
|
||||
.com-left-menu { |
|
||||
user-select: none; |
|
||||
height: 100vh; |
|
||||
background-color: #001529; |
|
||||
>div,:deep(.ant-tabs-tab-btn) { |
|
||||
width: 100%; |
|
||||
} |
|
||||
.menu-title{ |
|
||||
text-align: center; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.com-left-menu-header { |
|
||||
padding-top: 10px; |
|
||||
|
|
||||
user-select: none; |
|
||||
height: 40px; |
|
||||
background-color: #001529; |
|
||||
text-align: center; |
|
||||
width: 100%; |
|
||||
border-width: 2px; |
|
||||
border-bottom: #fff; |
|
||||
|
|
||||
span { |
|
||||
margin-left: 40px; |
|
||||
width: 100%; |
|
||||
color: #fff; |
|
||||
font-size: 18px; |
|
||||
text-align: left; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
:deep(.ant-tabs-tab) { |
|
||||
text-align: center !important; |
|
||||
padding: 12px 0 !important; |
|
||||
} |
|
||||
|
|
||||
:deep(.ant-tabs-left-bar) { |
|
||||
width: calc(6 / 24 * 100%); |
|
||||
} |
|
||||
|
|
||||
:deep(.ant-tabs-left-content.ant-tabs-content.ant-tabs-content-animated), |
|
||||
:deep(.ant-tabs-tabpane) { |
|
||||
padding-left: 0 !important; |
|
||||
} |
|
||||
|
|
||||
.iconfontsize { |
|
||||
font-size: 28px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,78 +0,0 @@ |
|||||
<template> |
|
||||
<div class="left-com-content"> |
|
||||
<a-row> |
|
||||
<a-col class="content-item" title="添加标签" @click="addLabel"> |
|
||||
<a class="btn btnColor"> |
|
||||
<i class="fa"> |
|
||||
<span class="icon iconfont icon-biaoqian"></span> |
|
||||
</i> |
|
||||
</a> |
|
||||
<div class="item-text">添加标签</div> |
|
||||
</a-col> |
|
||||
<div style="background: aqua; height: 50%"> |
|
||||
<a-tree style="background: aqua;" :tree-data="treeData" @select="selectTreeNode" /> |
|
||||
</div> |
|
||||
</a-row> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang='ts'> |
|
||||
import { audio } from "@/utils/audio"; |
|
||||
import { useStore } from '@/store/index'; |
|
||||
import {storeToRefs} from 'pinia'; |
|
||||
import type { TreeProps } from 'ant-design-vue'; |
|
||||
import * as cameraApi from '@/axios/cameraBase/cameraApi'; |
|
||||
import { ref,onMounted } from 'vue'; |
|
||||
let piniaStore = useStore(); |
|
||||
let cameraMap = new Map<string, any>() |
|
||||
let treeData = ref<TreeProps['treeData']>([]) |
|
||||
let curSelectKey=storeToRefs(piniaStore).curSelectKey |
|
||||
function loadTreeData() { |
|
||||
cameraApi.GetList().then((res: any) => { |
|
||||
let list: Array<any> = res.data.data; |
|
||||
console.log(list); |
|
||||
|
|
||||
cameraMap = piniaStore.addCameraMap(list) |
|
||||
treeData.value=piniaStore.treeData |
|
||||
console.log(cameraMap); |
|
||||
}); |
|
||||
} |
|
||||
onMounted(()=>{ |
|
||||
loadTreeData() |
|
||||
}) |
|
||||
function selectTreeNode(selectedKeys: any, e: any) { |
|
||||
if (!e.selected) return; |
|
||||
let key = selectedKeys[0]; |
|
||||
if (curSelectKey.value !== key) { |
|
||||
piniaStore.updateCurSelectKey(key) |
|
||||
} |
|
||||
} |
|
||||
//播放音效 |
|
||||
function playAudio(): void { |
|
||||
audio.click(); |
|
||||
} |
|
||||
//添加标签 |
|
||||
function addLabel(e: string) { |
|
||||
piniaStore.updateIsAddLabel({labelType:"",isAddLabel: true}) |
|
||||
playAudio(); |
|
||||
} |
|
||||
|
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<style lang='less'> |
|
||||
.left-com-content { |
|
||||
.content-item { |
|
||||
cursor: pointer; |
|
||||
text-align: center; |
|
||||
padding: 5px 0; |
|
||||
margin: 1%; |
|
||||
width: 48%; |
|
||||
|
|
||||
.fa span { |
|
||||
font-size: 25px; |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,128 +0,0 @@ |
|||||
<template> |
|
||||
|
|
||||
<div class="left-com-content"> |
|
||||
|
|
||||
<a-collapse v-model:activeKey="activeKey" accordion> |
|
||||
<a-collapse-panel v-for="item in header" :key="item.id" :header="item.group_name"> |
|
||||
<div class="img-box"> |
|
||||
<div class="img" v-for="ele in item.itemArr" @click="addModelFn(ele.url,ele.oldUrl)"> |
|
||||
<img draggable="false" class="collapse-panel-img" width="36" height="36" :src="ele.dis_img" |
|
||||
:alt="ele.model_name"> |
|
||||
</div> |
|
||||
</div> |
|
||||
</a-collapse-panel> |
|
||||
</a-collapse> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup lang="ts"> |
|
||||
import { ref } from 'vue'; |
|
||||
import api from "@/axios/api"; |
|
||||
import { useStore } from '@/store/index'; |
|
||||
let piniaStore = useStore(); |
|
||||
const activeKey = ref([]); |
|
||||
let header: any = ref([]) |
|
||||
//图片基础路径 |
|
||||
let baseUrl = process.env.VUE_APP_API_BASE_URL + "/sys/common/static/";// api base_urll |
|
||||
let p1 = api.modelsinfo.getModels3DGroup( ).then(res => |
|
||||
{ |
|
||||
return res.data; |
|
||||
}) |
|
||||
|
|
||||
let p2 = api.modelsinfo.getModels3D().then(res => |
|
||||
{ |
|
||||
|
|
||||
return res.data; |
|
||||
}) |
|
||||
Promise.all([p1, p2]).then(res => |
|
||||
{ |
|
||||
let headerArr = res[0] |
|
||||
let itemArr = res[1] |
|
||||
//循环折叠标题数组 |
|
||||
headerArr.forEach((element: any, index: number) => |
|
||||
{ |
|
||||
//每个折叠标题添加一个存储子元素的数组 |
|
||||
element.itemArr = [] |
|
||||
header.value.push(element) |
|
||||
itemArr?.forEach((item: any) => |
|
||||
{ |
|
||||
|
|
||||
//判断图片是否为该标题所属 |
|
||||
if (element.group_name == item.model_group_name) |
|
||||
{ |
|
||||
item.oldUrl = item.url |
|
||||
item.url = baseUrl+item.url |
|
||||
item.dis_img = baseUrl + item.previewurl |
|
||||
header.value[index].itemArr.push(item) |
|
||||
} |
|
||||
}) |
|
||||
}); |
|
||||
|
|
||||
}) |
|
||||
let cus: any = null; |
|
||||
function addModelFn (url: string,img:string): void |
|
||||
{ |
|
||||
cus.creating = true |
|
||||
cus.img = img |
|
||||
piniaStore.editType = 30; |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang='less'> |
|
||||
.left-com-content { |
|
||||
.content-item { |
|
||||
cursor: pointer; |
|
||||
|
|
||||
padding: 5px 0; |
|
||||
margin: 1%; |
|
||||
width: 48%; |
|
||||
|
|
||||
.fa span { |
|
||||
font-size: 25px; |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
:deep(.ant-collapse-content-box) { |
|
||||
padding: 16px 10px; |
|
||||
} |
|
||||
|
|
||||
.img-box { |
|
||||
text-align: left; |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
|
|
||||
.img { |
|
||||
flex-basis: 1 / 3 * 100%; |
|
||||
text-align: center; |
|
||||
|
|
||||
.collapse-panel-img { |
|
||||
padding: 2px; |
|
||||
|
|
||||
&:hover { |
|
||||
border: 1px solid #001529; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
:deep(.ant-collapse) { |
|
||||
background-color: #001529; |
|
||||
border: #fff; |
|
||||
|
|
||||
|
|
||||
.ant-collapse-item { |
|
||||
|
|
||||
.ant-collapse-header { |
|
||||
color: #fff !important; |
|
||||
|
|
||||
span { |
|
||||
color: #fff; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,118 +0,0 @@ |
|||||
<template> |
|
||||
|
|
||||
<div class="left-com-content"> |
|
||||
|
|
||||
<a-collapse v-model:activeKey="activeKey" accordion> |
|
||||
<a-collapse-panel v-for="item in header" :key="item.id" :header="item.group_name"> |
|
||||
<div class="img-box"> |
|
||||
<div class="img" v-for="ele in item.itemArr" @click="addImage(ele.dis_img,ele.url)"> |
|
||||
<img draggable="false" class="collapse-panel-img" width="36" height="36" :src="ele.dis_img" |
|
||||
:alt="ele.model_name"> |
|
||||
</div> |
|
||||
</div> |
|
||||
</a-collapse-panel> |
|
||||
</a-collapse> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup lang="ts"> |
|
||||
|
|
||||
import { ref } from 'vue'; |
|
||||
import api from "@/axios/api"; |
|
||||
import { useStore } from '@/store/index'; |
|
||||
let piniaStore = useStore(); |
|
||||
const activeKey = ref([]); |
|
||||
let header: any = ref([]) |
|
||||
//图片基础路径 |
|
||||
let baseUrl = process.env.VUE_APP_API_BASE_URL + "/sys/common/static/"; // api base_urll |
|
||||
let p1 = api.modelsinfo.getModelsImageGroup().then(res => { |
|
||||
return res.data; |
|
||||
}) |
|
||||
let p2 = api.modelsinfo.getModelsImage().then(res => { |
|
||||
|
|
||||
return res.data; |
|
||||
}) |
|
||||
Promise.all([p1, p2]).then(res => { |
|
||||
let headerArr = res[0] |
|
||||
let itemArr = res[1] |
|
||||
//循环折叠标题数组 |
|
||||
headerArr.forEach((element: any, index: number) => { |
|
||||
//每个折叠标题添加一个存储子元素的数组 |
|
||||
element.itemArr = [] |
|
||||
header.value.push(element) |
|
||||
itemArr?.forEach((item: any) => { |
|
||||
//判断图片是否为该标题所属 |
|
||||
if (element.group_name == item.model_group_name) { |
|
||||
item.dis_img = baseUrl + item.url |
|
||||
header.value[index].itemArr.push(item) |
|
||||
} |
|
||||
}) |
|
||||
}); |
|
||||
|
|
||||
}) |
|
||||
let cus: any = null; |
|
||||
function addImage(imgstr: string,img:string): void { |
|
||||
cus.creating = true |
|
||||
cus.img = img |
|
||||
piniaStore.editType = 2; |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang='less'> |
|
||||
.left-com-content { |
|
||||
.content-item { |
|
||||
cursor: pointer; |
|
||||
|
|
||||
padding: 5px 0; |
|
||||
margin: 1%; |
|
||||
width: 48%; |
|
||||
|
|
||||
.fa span { |
|
||||
font-size: 25px; |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
:deep(.ant-collapse-content-box) { |
|
||||
padding: 16px 10px; |
|
||||
} |
|
||||
|
|
||||
.img-box { |
|
||||
text-align: left; |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
|
|
||||
.img { |
|
||||
flex-basis: 1 / 3 * 100%; |
|
||||
text-align: center; |
|
||||
|
|
||||
.collapse-panel-img { |
|
||||
padding: 2px; |
|
||||
|
|
||||
&:hover { |
|
||||
border: 1px solid #001529; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
:deep(.ant-collapse) { |
|
||||
background-color: #001529; |
|
||||
border: #fff; |
|
||||
|
|
||||
|
|
||||
.ant-collapse-item { |
|
||||
|
|
||||
.ant-collapse-header { |
|
||||
color: #fff !important; |
|
||||
|
|
||||
span { |
|
||||
color: #fff; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,73 +0,0 @@ |
|||||
<template> |
|
||||
<div class="left-com-content"> |
|
||||
<a-row> |
|
||||
<a-col class="content-item" @click="haplochromatizationListEvent" title="单体化列表"> |
|
||||
<a class="btn btnColor"> |
|
||||
<i class="fa"> |
|
||||
<span class="icon iconfont icon-moxing-miaobian"></span> |
|
||||
</i> |
|
||||
</a> |
|
||||
<div class="item-text">用户管理</div> |
|
||||
</a-col> |
|
||||
<a-col class="content-item" @click="addhaplochromatization" title="单体化"> |
|
||||
|
|
||||
<a class="btn btnColor"> |
|
||||
<i class="fa"> |
|
||||
<span class="icon iconfont icon-sanweimoxing"></span> |
|
||||
</i> |
|
||||
</a> |
|
||||
<div class="item-text">相机配置</div> |
|
||||
</a-col> |
|
||||
</a-row> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang='ts'> |
|
||||
import { useStore } from '@/store/index'; |
|
||||
import { audio } from "@/utils/audio"; |
|
||||
let piniaStore = useStore(); |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
function haplochromatizationListEvent(): void { |
|
||||
playAudio(); |
|
||||
} |
|
||||
|
|
||||
function addhaplochromatization(): void { |
|
||||
piniaStore.editType = 501 |
|
||||
} |
|
||||
function fenceListFn() { |
|
||||
playAudio(); |
|
||||
} |
|
||||
//防区 |
|
||||
function addDefenceArea(): void { |
|
||||
playAudio(); |
|
||||
piniaStore.editType = 502 |
|
||||
} |
|
||||
//播放音效 |
|
||||
function playAudio(): void { |
|
||||
audio.click(); |
|
||||
} |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang='less'> |
|
||||
.left-com-content { |
|
||||
.content-item { |
|
||||
cursor: pointer; |
|
||||
|
|
||||
padding: 5px 0; |
|
||||
margin: 1%; |
|
||||
width: 48%; |
|
||||
|
|
||||
.fa span { |
|
||||
font-size: 25px; |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,100 +0,0 @@ |
|||||
<template> |
|
||||
<div class="left-com-content"> |
|
||||
<a-row> |
|
||||
|
|
||||
<a-col class="content-item" title="位置测量" @click="measureMent('POINT')"> |
|
||||
<a class="btn btnColor"> |
|
||||
<i class="fa"> |
|
||||
<span class="icon iconfont icon-31dingwei"></span> |
|
||||
</i> |
|
||||
</a> |
|
||||
<div class="item-text">位置测量</div> |
|
||||
</a-col> |
|
||||
<a-col class="content-item" title="距离测量" @click="measureMent('SPACE_DISTANCE')"> |
|
||||
<a class="btn btnColor"> |
|
||||
<i class="fa"> |
|
||||
<span class="icon iconfont icon-chizi"></span> |
|
||||
</i> |
|
||||
</a> |
|
||||
<div class="item-text">距离测量</div> |
|
||||
</a-col> |
|
||||
<a-col class="content-item" title="三角测量" @click="measureMent('TRIANGLE_DISTANCE')"> |
|
||||
<a class="btn btnColor"> |
|
||||
<i class="fa"> |
|
||||
<span class="icon iconfont icon-celiangleixing"></span> |
|
||||
</i> |
|
||||
</a> |
|
||||
<div class="item-text">三角测量</div> |
|
||||
</a-col> |
|
||||
<a-col class="content-item" title="面积测量" @click="measureMent('SPACE_AREA')"> |
|
||||
<a class="btn btnColor"> |
|
||||
<i class="fa" style="font-size:35px"> |
|
||||
<span class="icon iconfont icon-mianjiceliang"></span> |
|
||||
</i> |
|
||||
</a> |
|
||||
<div class="item-text">面积测量</div> |
|
||||
</a-col> |
|
||||
|
|
||||
<a-col class="content-item" title="属性设置" @click="setProperties"> |
|
||||
|
|
||||
<a class="btn btnColor"> |
|
||||
<i class="fa"> |
|
||||
<span class="icon iconfont icon-shezhi"></span> |
|
||||
</i> |
|
||||
</a> |
|
||||
<div class="item-text">属性设置</div> |
|
||||
</a-col> |
|
||||
<a-col class="content-item" title="清空测量结果" @click="clearResults"> |
|
||||
<a class="btn btnColor"> |
|
||||
<i class="fa"> |
|
||||
<span class="icon iconfont icon-Eliminate" style="color: #D35400;"></span> |
|
||||
</i> |
|
||||
</a> |
|
||||
<div class="item-text" style="color: #D35400;">清空测量</div> |
|
||||
</a-col> |
|
||||
</a-row> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang='ts'> |
|
||||
import { ref, h, onMounted, getCurrentInstance, ComponentInternalInstance } from "vue"; |
|
||||
import { audio } from "@/utils/audio"; |
|
||||
let measureMentType = ref("NONE"); |
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
onMounted(() => { |
|
||||
}) |
|
||||
|
|
||||
//播放音效 |
|
||||
function playAudio(): void { |
|
||||
audio.click(); |
|
||||
} |
|
||||
//属性设置 |
|
||||
function setProperties(): void { |
|
||||
playAudio(); |
|
||||
} |
|
||||
|
|
||||
//清除测量结果 |
|
||||
function clearResults(): void { |
|
||||
measureMentType.value = "NONE"; |
|
||||
} |
|
||||
function measureMent(Type: string) { |
|
||||
measureMentType.value = Type; |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang='less'> |
|
||||
.left-com-content { |
|
||||
.content-item { |
|
||||
cursor: pointer; |
|
||||
|
|
||||
padding: 5px 0; |
|
||||
margin: 1%; |
|
||||
width: 48%; |
|
||||
|
|
||||
.fa span { |
|
||||
font-size: 25px; |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,42 +0,0 @@ |
|||||
<!-- |
|
||||
*@描述: 右侧面板 基本信息-数据绑定 |
|
||||
*@作者： |
|
||||
*@日期： |
|
||||
*@版本：1.0 |
|
||||
*/ |
|
||||
--> |
|
||||
<template> |
|
||||
<div class="rightMenu-class"> |
|
||||
<a-tabs v-model:activeKey="activeKey"> |
|
||||
<a-tab-pane key="1" tab="首页"> |
|
||||
|
|
||||
<VideoControl></VideoControl> |
|
||||
</a-tab-pane> |
|
||||
<a-tab-pane key="2" tab="首页2"> |
|
||||
暂无信息2 |
|
||||
</a-tab-pane> |
|
||||
</a-tabs> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup> |
|
||||
import VideoControl from '@/views/page/VideoControl/VideoControl.vue'; |
|
||||
import { ref } from 'vue' |
|
||||
let activeKey = ref('1') |
|
||||
</script> |
|
||||
|
|
||||
<style lang="less" scoped> |
|
||||
.rightMenu-class { |
|
||||
user-select: none; |
|
||||
overflow: auto; |
|
||||
height: 100vh; |
|
||||
background-color: #001529; |
|
||||
:deep(.ant-tabs-nav-list) { |
|
||||
margin: 0 auto; |
|
||||
padding: 0 20px; |
|
||||
} |
|
||||
:deep(.ant-tabs-tabpane){ |
|
||||
text-align: center; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue