diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss
index eacc9a7..20be1a3 100644
--- a/src/assets/css/index.scss
+++ b/src/assets/css/index.scss
@@ -222,7 +222,7 @@ body {
       }
     }
     .left-sidebar {
-      width: 18%;
+      width: 31%;
       height: calc(100% - 90px);
       position: absolute;
       top: 60px;
@@ -232,9 +232,9 @@ body {
       margin: 0;
       padding: 0 40px;
       .stats {
-        width: 100%;
+        width: 60%;
         height: 100px;
-        margin-top: 15%;
+        margin-top: 5%;
         display: flex;
         flex-wrap: wrap;
         align-items: center;
@@ -274,25 +274,27 @@ body {
         }
         ul {
           width: 100%;
-          height: calc(75% - 40px);
+          height: 100%;
           padding: 0;
           margin: 0;
           overflow: auto;
           margin-top: 10px;
           li {
-            width: 90%;
-            height: 60px;
+            width: 95%;
             border-bottom: 1px dashed #ccc;
-            background: url(../img/uavBackfff.png);
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            background-position: center;
             padding: 5px;
             color: #0144ef;
             margin-left: 2%;
+            margin-top: 3%;
+            position: relative;
+            display: flex;
             .details-one {
-              width: 100%;
+              width: 60%;
               height: 100%;
+              background: url(../img/uavBackfff.png);
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+              background-position: center;
               .top {
                 width: 98%;
                 height: 50%;
@@ -350,11 +352,15 @@ body {
               }
             }
             .details-all {
-              width: 100%;
+              width: 60%;
               height: 100%;
+              background: url(../img/uavBackfff-big.png);
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+              background-position: center;
               .top {
                 width: 98%;
-                height: 10%;
+                height: 30px;
                 display: flex;
                 align-items: baseline;
                 margin-left: 5%;
@@ -369,7 +375,7 @@ body {
                   text-align: center;
                   font-size: 10px;
                   position: absolute;
-                  top: 55%;
+                  top: 60%;
                   transform: translateY(-50%);
                   line-height: 20px;
                 }
@@ -389,15 +395,19 @@ body {
                 margin-left: 20px;
                 .color-ef {
                   color: #0144ef;
-                  font-size: 14px;
+                  font-size: 1.09vw;
                 }
                 .text-fff {
                   color: #000;
-                  font-size: 12px;
+                  font-size: 1.09vw;
+                }
+                .text-fff-time {
+                  color: #000;
+                  font-size: 1vw;
                 }
                 .content-top {
                   width: calc(100% - 10px);
-                  height: 8%;
+                  height: 30px;
                   display: flex;
                   align-items: center;
                   font-weight: 400;
@@ -411,7 +421,7 @@ body {
                 }
                 .content-serial {
                   width: 100%;
-                  height: 8%;
+                  height: 7%;
                   text-align: left;
                   .text-fff {
                     // 超出隐藏
@@ -420,7 +430,7 @@ body {
                   }
                   .color-ef-fw {
                     color: #0144ef;
-                    font-size: 14px;
+                    font-size: 1.09vw;
                     font-weight: 600;
                   }
                   .content-potions {
@@ -440,11 +450,11 @@ body {
                       align-items: center;
                       .text {
                         width: 100%;
-                        font-size: 14px;
+                        font-size: 1.09vw;
                       }
                       .characters {
                         width: 100%;
-                        font-size: 14px;
+                        font-size: 1.09vw;
                         color: #000;
                       }
                     }
@@ -461,38 +471,80 @@ body {
                         align-items: center;
                         .text {
                           width: 100%;
-                          font-size: 14px;
+                          font-size: 1.09vw;
                         }
                         .characters {
                           width: 100%;
-                          font-size: 14px;
+                          font-size: 1.09vw;
                           color: #000;
                         }
                       }
                     }
-                    .content-text1 {
-                      width: 50%;
-                      height: 100%;
+                  }
+                  .content-fs {
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    text-align: left;
+                    .content-fs-lon {
+                      width: 100%;
                       display: flex;
                       flex-wrap: wrap;
-                      text-align: left;
-                      p {
-                        padding: 0;
-                        margin: 0;
-                      }
+                      align-items: center;
+                    }
+                    .content-fs-heig {
+                      width: 100%;
+                      display: flex;
+                      flex-wrap: wrap;
+                      align-items: center;
                       .text {
-                        width: 100%;
-                        font-size: 14px;
+                        width: 25%;
+                        font-size: 1.09vw;
                       }
                       .characters {
-                        width: 100%;
-                        font-size: 14px;
+                        width: 50%;
+                        font-size: 1.09vw;
+                        color: #000;
                       }
                     }
+                    p {
+                      padding: 0;
+                      margin: 0;
+                    }
+                    .text {
+                      width: 100%;
+                      font-size: 1.09vw;
+                    }
+                    .characters {
+                      width: 100%;
+                      font-size: 1.09vw;
+                      color: #000;
+                    }
+                  }
+                  .btns {
+                    width: calc(100% - 20px);
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-around;
+                    .el-button--primary {
+                      background-color: #0144ef;
+                      border-color: #0144ef;
+                    }
                   }
                 }
               }
             }
+            .navigation-content {
+              width: 140px;
+              height: 244px;
+              background: url(../img/uavBackfff-big.png);
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+              background-position: center;
+              margin-left: 9px;
+            }
           }
         }
       }
diff --git a/src/views/contentData/LeftSidebar/index.vue b/src/views/contentData/LeftSidebar/index.vue
index 1957ef2..6d93271 100644
--- a/src/views/contentData/LeftSidebar/index.vue
+++ b/src/views/contentData/LeftSidebar/index.vue
@@ -15,10 +15,7 @@
           :key="index"
           @click="handleDroneClick(drone)"
           :style="{
-            height: drone.detailsShow ? '60px' : '330px',
-            backgroundImage: drone.detailsShow
-              ? `url(${require('@/assets/img/uavBackfff.png')})`
-              : `url(${require('@/assets/img/uavBackfff-big.png')})`,
+            height: drone.detailsShow ? '60px' : '372px',
             padding: 0
           }"
         >
@@ -76,12 +73,12 @@
               </div>
               <div class="content-serial">
                 <span class="color-ef"> 更新时间：</span>
-                <span class="text-fff">2025.6.15 21:12:43</span>
+                <span class="text-fff-time">2025.6.15 21:12:43</span>
               </div>
               <div class="content-serial">
                 <span class="color-ef-fw">无人机方位</span>
               </div>
-              <div class="content-serial" style="height: 25%">
+              <div class="content-serial" style="height: 22%">
                 <div class="content-potions">
                   <div class="content-potions-lon">
                     <p class="text">经纬度：</p>
@@ -104,28 +101,33 @@
               <div class="content-serial">
                 <span class="color-ef-fw">飞手方位</span>
               </div>
-              <div class="content-serial" style="height: 25%">
-                <div class="content-potions">
-                  <div class="content-text1 content-potions-lon">
+              <div class="content-serial" style="height: 22%">
+                <div class="content-fs">
+                  <div class="content-fs-lon">
                     <p class="text">经纬度</p>
                     <p class="characters">
                       {{ drone.drone_lon }}, {{ drone.drone_lat }}
                     </p>
                   </div>
-                  <div class="content-text1 content-potions-lat">
-                    <p class="text">高度</p>
+                  <div class="content-fs-heig">
+                    <p class="text">高度：</p>
                     <p class="characters">{{ drone.height || 0 }}m</p>
                   </div>
                 </div>
               </div>
-              <div class="content-serial">
+              <div class="content-serial" style="height: 10%">
                 <div class="btns">
-                  <div class="btn-trust"></div>
-                  <div class="btn-navigation"></div>
+                  <div class="btn-trust">
+                    <el-button type="primary">信任</el-button>
+                  </div>
+                  <div class="btn-navigation">
+                    <el-button type="primary">导航</el-button>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div class="navigation-content" v-if="!drone.detailsShow"></div>
         </li>
       </ul>
     </div>
@@ -192,7 +194,55 @@ export default {
           BatchId: "123456789",
           DeviceId: "123456789",
           currTime: 15,
-          detailsShow: false
+          detailsShow: true
+        },
+        {
+          id: "1",
+          serial_number: "123456789",
+          DeviceName: "设备名称",
+          freq: "123.456GHz",
+          device_type: "UAV",
+          drone_lat: 30.592852,
+          drone_lon: 104.060059,
+          height: 100,
+          alarmLevel: 1,
+          times: "2021-01-01 12:00:00",
+          BatchId: "123456789",
+          DeviceId: "123456789",
+          currTime: 15,
+          detailsShow: true
+        },
+        {
+          id: "1",
+          serial_number: "123456789",
+          DeviceName: "设备名称",
+          freq: "123.456GHz",
+          device_type: "UAV",
+          drone_lat: 30.592852,
+          drone_lon: 104.060059,
+          height: 100,
+          alarmLevel: 1,
+          times: "2021-01-01 12:00:00",
+          BatchId: "123456789",
+          DeviceId: "123456789",
+          currTime: 15,
+          detailsShow: true
+        },
+        {
+          id: "1",
+          serial_number: "123456789",
+          DeviceName: "设备名称",
+          freq: "123.456GHz",
+          device_type: "UAV",
+          drone_lat: 30.592852,
+          drone_lon: 104.060059,
+          height: 100,
+          alarmLevel: 1,
+          times: "2021-01-01 12:00:00",
+          BatchId: "123456789",
+          DeviceId: "123456789",
+          currTime: 15,
+          detailsShow: true
         }
       ],
       isContracted: false,