rax-medical/src/views/remote-manage/remote-thumbnail.vue

<template>
  <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 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>