创建文件

src/views/remote-manage/part/message-item.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="message-item">
+      
+      <ul>
+        <li v-for="(item, index) in activities" :key="num + '-' + index">
+          <span>{{ item.time }}</span>
+          <span>{{ item.title }}</span>
+          <span>{{ item.state }}</span>
+        </li>
+      </ul>
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { dateFormater } from '@/utils/date-util'
+
+interface ActivitiesItem {
+    time: Date
+    title: string
+    state: string
+}
+
+const props = defineProps({
+    num: String
+})
+
+const activities: any = ref([] as Array<ActivitiesItem>)
+
+defineExpose({
+    setData,
+})
+
+function setData(e: ActivitiesItem) {
+    activities.value.push(e)
+}
+</script>
+
+<style lang='scss' scoped>
+.message-part {
+    width: 100%;
+    height: 100%;
+    border: 1px solid $border-color;
+
+    .title {
+        width: 100%;
+        height: 40px;
+        font-size: 20px;
+        text-align: center;
+        line-height: 40px;
+        font-weight: 600;
+        color: white;
+        background: $main-color;
+    }
+
+    .content {
+        width: 100%;
+        height: calc(100% - 100px);
+        margin-top: 40px;
+        padding: 0 20px;
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        :deep(.el-timeline-item) {
+            color: $main-color;
+
+            .el-timeline-item__content,
+            .el-timeline-item__timestamp {
+                color: inherit;
+            }
+
+            &.alarm {
+                color: red;
+                .el-timeline-item__node {
+                    background: red;
+                }
+            }
+        }
+    }
+}</style>

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

@@ -0,0 +1,18 @@
+<template>
+  <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'
+
+const router = useRouter()
+
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>