完成服务器主机预览卡片编写

itbaima-monitor-web/src/views/main/Manage.vue

@@ -8,7 +8,10 @@ import PreviewCard from "@/component/PreviewCard.vue";
     <div class="title"><i class="fa-solid fa-server"></i> 管理主机列表</div>
     <div class="description">在这里管理所有已经注册的主机实例，实时监控主机运行状态，快速进行管理和操作。</div>
     <el-divider style="margin: 10px 0"/>
-    <div style="display: flex;gap: 20px">
+    <div class="card-list">
+      <preview-card/>
+      <preview-card/>
+      <preview-card/>
       <preview-card/>
       <preview-card/>
       <preview-card/>
@@ -29,5 +32,20 @@ import PreviewCard from "@/component/PreviewCard.vue";
     font-size: 15px;
     color: grey;
   }
+
+  .card-list {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+  }
+}
+
+@keyframes move {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 </style>