diff --git a/src/assets/first.png b/src/assets/first.png
new file mode 100644
index 00000000..614ae9b2
Binary files /dev/null and b/src/assets/first.png differ
diff --git a/src/assets/new33.png b/src/assets/new3.png
similarity index 100%
rename from src/assets/new33.png
rename to src/assets/new3.png
diff --git a/src/assets/second.png b/src/assets/second.png
new file mode 100644
index 00000000..e1214523
Binary files /dev/null and b/src/assets/second.png differ
diff --git a/src/assets/third.png b/src/assets/third.png
new file mode 100644
index 00000000..b5a1aff3
Binary files /dev/null and b/src/assets/third.png differ
diff --git a/src/views/component/OpenShare.vue b/src/views/component/OpenShare.vue
index ddabd7e0..b1df2397 100644
--- a/src/views/component/OpenShare.vue
+++ b/src/views/component/OpenShare.vue
@@ -1,70 +1,66 @@
 <template>
-  <div class="open-share">
-    <div class="share-header">
-      <i class="el-icon-share"></i>
-      <span>开放共享</span>
+  <div class="open-share-container">
+    <!-- 最左侧图片 -->
+    <div class="sidebar-image">
+      <img
+        src="@/assets/new3.png"
+        alt="开放共享相关图片"
+        class="module-image"
+      />
     </div>
-    <div class="share-stats">
-      <div class="stat-item">
-        <span class="stat-label">今日交换数据量</span>
-        <span class="stat-value">18646</span>
+    <!-- 主内容区域 -->
+    <div class="open-share">
+      <!-- 标题列 -->
+      <div class="title-column">
+        <img src="@/assets/four.png" alt="" class="share-image" />
+        <span>开放共享</span>
       </div>
-      <div class="stat-item">
-        <span class="stat-label">数据接口数</span>
-        <span class="stat-value">87</span>
-      </div>
-      <div class="stat-item">
-        <span class="stat-label">累计交换数据量</span>
-        <span class="stat-value">1898646</span>
-      </div>
-      <div class="stat-item">
-        <span class="stat-label">接口累计调用次数</span>
-        <span class="stat-value">98648</span>
-      </div>
-      <div class="stat-item">
-        <span class="stat-label">异常交换数据量</span>
-        <span class="stat-value">2</span>
-      </div>
-      <div class="stat-item">
-        <span class="stat-label">调用异常接口数</span>
-        <span class="stat-value">1</span>
-      </div>
-    </div>
-    <div class="share-charts">
-      <div class="chart-item">
-        <div class="chart-title">接口资源调用 TOP20</div>
-        <div class="chart-content">
-          <ul class="chart-list">
-            <li v-for="(item, index) in top20Apis" :key="index">
-              <span>{{ item.name }}</span>
-              <span>{{ item.count }}</span>
-            </li>
-          </ul>
+
+      <!-- 第一列：统计数据 -->
+      <div class="data-column first-column">
+        <div class="share-stats">
+          <div class="stat-item">
+            <span class="stat-label">数据接口数</span>
+            <span class="stat-value">87</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-label">接口累计调用次数</span>
+            <span class="stat-value">98648</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-label">调用异常接口数</span>
+            <span class="stat-value">1</span>
+          </div>
         </div>
       </div>
-      <div class="chart-item">
-        <div class="chart-title">应用今日调用 TOP5</div>
-        <div class="chart-content">
-          <ul class="chart-list">
-            <li v-for="(item, index) in top5Apps" :key="index">
-              <span>{{ item.name }}</span>
-              <span>{{ item.count }}</span>
-            </li>
-          </ul>
+
+      <!-- 第二列：应用调用排行 -->
+      <div class="chart-column second-column">
+        <div class="chart-item">
+          <div class="chart-title">应用今日调用 TOP5</div>
+          <div class="chart-content">
+            <ul class="chart-list">
+              <li v-for="(item, index) in top5Apps" :key="index">
+                <span>{{ item.name }}</span>
+                <span>{{ item.count }}</span>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
-      <div class="chart-item">
-        <div class="chart-title">近七日数据开放共享情况</div>
-        <div class="chart-content">
-          <!-- 模拟图表占位 -->
-          <div
-            class="mock-chart"
-            style="
-              width: 100%;
-              height: 120px;
-              background: rgba(74, 144, 226, 0.1);
-            "
-          ></div>
+
+      <!-- 第三列：接口调用排行 -->
+      <div class="chart-column third-column">
+        <div class="chart-item">
+          <div class="chart-title">接口资源调用 TOP20</div>
+          <div class="chart-content">
+            <ul class="chart-list">
+              <li v-for="(item, index) in top20Apis" :key="index">
+                <span>{{ item.name }}</span>
+                <span>{{ item.count }}</span>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
@@ -93,7 +89,33 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.open-share-container {
+  display: flex;
+  align-items: stretch;
+  gap: 15px;
+  width: 100%;
+}
+
+// 图片列样式
+.sidebar-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 80px; // 图片区域最小宽度
+  padding: 10px 0;
+
+  .module-image {
+    width: 100%;
+    max-width: 60px; // 限制图片最大宽度
+    height: auto;
+    object-fit: contain;
+  }
+}
+
 .open-share {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
   background: linear-gradient(
     to bottom,
     rgba(30, 60, 100, 0.8),
@@ -101,138 +123,141 @@ export default {
   );
   border: 1px solid rgba(74, 144, 226, 0.3);
   border-radius: 12px;
-  padding: 15px;
   box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
-
-  .share-header {
-    display: flex;
-    align-items: center;
+  overflow: hidden;
+}
+// 标题列样式
+.title-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 15px;
+  max-width: 70px;
+  border-right: 1px solid rgba(74, 144, 226, 0.2); // 右侧分割线
+  img {
+    width: 100%;
     margin-bottom: 10px;
-
-    i {
-      font-size: 24px;
-      color: #4a90e2;
-      margin-right: 8px;
-      filter: drop-shadow(0 2px 2px rgba(74, 144, 226, 0.3));
-    }
-
-    span {
-      font-size: 18px;
-      color: #fff;
-      font-weight: 500;
-      text-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
-    }
   }
 
-  .share-stats {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 10px;
-    margin-bottom: 15px;
+  span {
+    font-size: 24px;
+    color: #fff;
+    font-weight: 600;
+    text-align: center;
+    text-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
+  }
+}
 
-    .stat-item {
-      background: rgba(74, 144, 226, 0.1);
-      padding: 8px;
-      border-radius: 8px;
-      transition: all 0.3s ease;
+// 数据列样式
+.data-column {
+  flex: 1;
+  padding: 15px;
+  display: flex;
+  align-items: stretch;
+}
 
-      &:hover {
-        background: rgba(74, 144, 226, 0.2);
-        box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
-      }
+// 图表列样式
+.chart-column {
+  flex: 1;
+  padding: 15px;
+  display: flex;
+  align-items: stretch;
+}
 
-      .stat-label {
-        font-size: 12px;
-        color: rgba(255, 255, 255, 0.7);
-        display: block;
-        margin-bottom: 4px;
-      }
+// 分割线样式
+.first-column {
+  border-right: 1px solid rgba(74, 144, 226, 0.2);
+}
 
-      .stat-value {
-        font-size: 16px;
-        font-weight: bold;
-        background: linear-gradient(to top, #4a90e2, #fff);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-      }
-    }
+.second-column {
+  border-right: 1px solid rgba(74, 144, 226, 0.2);
+}
+
+// 统计项样式
+.share-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  width: 100%;
+}
+
+.stat-item {
+  display: flex;
+  justify-content: space-between;
+  background: rgba(74, 144, 226, 0.1);
+  padding: 12px 10px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: rgba(74, 144, 226, 0.2);
+    box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
   }
 
-  .share-charts {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 10px;
+  .stat-label {
+    font-size: 13px;
+    color: rgba(255, 255, 255, 0.7);
+    display: block;
+    margin-bottom: 6px;
+  }
 
-    .chart-item {
-      background: rgba(74, 144, 226, 0.1);
-      padding: 8px;
-      border-radius: 8px;
-      transition: all 0.3s ease;
+  .stat-value {
+    font-size: 18px;
+    font-weight: bold;
+    background: linear-gradient(to top, #4a90e2, #fff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
 
-      &:hover {
-        background: rgba(74, 144, 226, 0.2);
-        box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
-      }
+// 图表项样式
+.chart-item {
+  background: rgba(74, 144, 226, 0.1);
+  padding: 12px 10px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
 
-      .chart-title {
-        font-size: 14px;
-        color: #fff;
-        margin-bottom: 8px;
-        text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
-      }
+  &:hover {
+    background: rgba(74, 144, 226, 0.2);
+    box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
+  }
 
-      .chart-content {
-        ul.chart-list {
-          list-style: none;
-          padding: 0;
+  .chart-title {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+    text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
+  }
 
-          li {
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 4px;
-            font-size: 12px;
-            color: rgba(255, 255, 255, 0.8);
-            transition: all 0.3s ease;
+  .chart-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
 
-            &:hover {
-              color: #fff;
-              transform: translateX(3px);
-            }
-          }
-        }
+    ul.chart-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
 
-        .mock-chart {
-          width: 100%;
-          height: 120px;
-          background: rgba(74, 144, 226, 0.1);
-          border-radius: 4px;
-          position: relative;
-          overflow: hidden;
+      li {
+        display: flex;
+        justify-content: space-between;
+        font-size: 13px;
+        color: rgba(255, 255, 255, 0.8);
+        transition: all 0.3s ease;
+        padding: 3px 0;
 
-          &::before {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(
-              90deg,
-              rgba(74, 144, 226, 0.2) 0%,
-              rgba(74, 144, 226, 0) 50%,
-              rgba(74, 144, 226, 0.2) 100%
-            );
-            animation: chartShine 3s infinite;
-          }
-
-          @keyframes chartShine {
-            0% {
-              transform: translateX(-100%);
-            }
-            100% {
-              transform: translateX(100%);
-            }
-          }
+        &:hover {
+          color: #fff;
+          transform: translateX(3px);
         }
       }
     }