This commit is contained in:
gaofy 2024-01-17 18:57:00 +08:00
parent c7c83f11e4
commit ad8a1bcc0b
2 changed files with 60 additions and 3 deletions

View File

@ -73,6 +73,11 @@ const router = createRouter({
name: '远程管理',
component: () => import('@/views/remote-manage/remote-manage.vue'),
},
{
path: '/remote-manage/remote-thumbnail',
name: '预览缩略图',
component: () => import('@/views/remote-manage/remote-thumbnail.vue'),
},
{
path: '/remote-manage/remote-control',
name: '远程控制',

View File

@ -1,18 +1,70 @@
<template>
<div></div>
<div class="remote-thumbnail-page">
<div class="remote-box row1">
<div class="remote-item">
<RemoteItem ref="remoteItemRef1" @click="openRemote(1)"></RemoteItem>
</div>
<div class="remote-item">
<RemoteItem ref="remoteItemRef2" @click="openRemote(2)"></RemoteItem>
</div>
<div class="remote-item">
<RemoteItem ref="remoteItemRef3" @click="openRemote(3)"></RemoteItem>
</div>
<div class="remote-item">
<RemoteItem ref="remoteItemRef4" @click="openRemote(4)"></RemoteItem>
</div>
</div>
<div class="remote-box row2">
<div class="left-box">
<div class="remote-item">
<RemoteItem ref="remoteItemRef5" @click="openRemote(5)"></RemoteItem>
</div>
<div class="remote-item">
<RemoteItem ref="remoteItemRef6" @click="openRemote(6)"></RemoteItem>
</div>
<div class="remote-item">
<RemoteItem ref="remoteItemRef7" @click="openRemote(7)"></RemoteItem>
</div>
<div class="remote-item">
<RemoteItem ref="remoteItemRef8" @click="openRemote(8)"></RemoteItem>
</div>
<div class="remote-item">
<RemoteItem ref="remoteItemRef9" @click="openRemote(9)"></RemoteItem>
</div>
<div class="remote-item">
<RemoteItem ref="remoteItemRef10" @click="openRemote(10)"></RemoteItem>
</div>
</div>
<div class="right-box">
<div class="message-item" v-for="item in 10" :key="'message-item' + item">
{{ item }}
<MessageItem></MessageItem>
</div>
</div>
</div>
</div>
</template>
<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useRemoteStore } from '@/stores/remote-info-store'
import MessagePart from './part/message-part.vue'
import RemoteItem from './part/remote-item.vue'
import MessageItem from './part/message-item.vue'
const router = useRouter()
const openRemote = (num: number) => {
console.log(num)
}
</script>
<style lang='scss' scoped>
.remote-thumbnail-page {
width: 1920px;
height: 1080px;
}
</style>