diff --git a/rtsp-vue/src/assets/images/camera.png b/rtsp-vue/src/assets/images/camera.png
new file mode 100644
index 0000000..6cd98d2
Binary files /dev/null and b/rtsp-vue/src/assets/images/camera.png differ
diff --git a/rtsp-vue/src/assets/images/device.png b/rtsp-vue/src/assets/images/device.png
new file mode 100644
index 0000000..5111db0
Binary files /dev/null and b/rtsp-vue/src/assets/images/device.png differ
diff --git a/rtsp-vue/src/views/index.vue b/rtsp-vue/src/views/index.vue
index db1841b..0d62026 100644
--- a/rtsp-vue/src/views/index.vue
+++ b/rtsp-vue/src/views/index.vue
@@ -15,19 +15,25 @@
     </el-form>
 
 
-    <div style="display: flex;">
+    <div style="display: flex; gap: 20px">
       <div class="card" @click="handleVideoCameraFilled(item)" v-for="item in deviceList" :key="item.deviceId">
-        <div class="card-image">
-          <img :src="item.url" :alt="item.url" style="width: 100%; height: 100%;" />
-          <!-- <div style="width: 100%; height: 100%;">
-              {{ item.url }}
-            </div> -->
+        <el-row>
+          <el-col :span="16">
+            <h3 style="display: flex; align-items: center;"><img :src="DeviceImage" alt="" style="width: 20px; height: 20px; margin-right: 10px;"> {{ item.ip }}</h3>
+            <div class="li" style="display: flex; align-items: center;">设备分类：<dict-tag :options="device_type" :value="item.type" /></div>
+            <div class="li" style="display: flex; align-items: center;">用户名：{{ item.username ?? '-' }}</div>
+          </el-col>
+          <el-col :span="8">
+            <img :src="CameraImage" alt="设备图片" style="width: 100%;" />
+          </el-col>
+        </el-row>
+        <!-- <div class="card-image">
+          <img :src="DeviceImage" :alt="item.url" style="width: 100%; height: 100%;" />
         </div>
         <div class="category"><dict-tag :options="device_type" :value="item.type" /></div>
         <div class="heading">
           {{ item.ip }}
-          <!-- <div class="author"> By <span class="name">Abi</span> 4 days ago</div> -->
-        </div>
+        </div> -->
       </div>
     </div>
 
@@ -89,6 +95,8 @@ import { listDevice } from "@/api/video/device";
 import { listInspectionRecord } from "@/api/video/insRecord";
 import { listInspection } from "@/api/video/inspection";
 import { listAlarm } from "@/api/video/alarm";
+import DeviceImage from "@/assets/images/device.png";
+import CameraImage from "@/assets/images/camera.png";
 
 const { proxy } = getCurrentInstance();
 const { device_on_status, device_type, ins_record_status } = proxy.useDict('device_on_status', 'device_type', 'ins_record_status');
@@ -186,19 +194,17 @@ getList();
 <style scoped>
 /* From Uiverse.io by alexmaracinaru */
 .card {
-  width: 190px;
-  background: white;
+  width: 300px;
   padding: .4em;
-  border-radius: 6px;
+  border-radius: 0;
+  border: 1px solid #e0e0e0;
 }
 
 .card-image {
-  background-color: rgb(236, 236, 236);
   width: 100%;
   height: 130px;
   text-align: center;
   word-break: break-all;
-  border-radius: 6px 6px 0 0;
 }
 
 .card-image:hover {