diff --git a/src/router/index.ts b/src/router/index.ts
index 5862a06..9522d39 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -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: '远程控制',
diff --git a/src/views/remote-manage/remote-thumbnail.vue b/src/views/remote-manage/remote-thumbnail.vue
index 1fda124..8cbe224 100644
--- a/src/views/remote-manage/remote-thumbnail.vue
+++ b/src/views/remote-manage/remote-thumbnail.vue
@@ -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>