diff --git a/public/index.html b/public/index.html
index fab416a..b097a19 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <title>Hiric - Vuejs Landing Page Template</title>
 
diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
index b58215b..c488e22 100644
--- a/src/assets/css/styles.css
+++ b/src/assets/css/styles.css
@@ -37,7 +37,7 @@
     position: relative;
 }
 
-*, *::before, *::after {
+*{
     box-sizing: content-box !important;
     font-family: "PingFang SC";
   }
@@ -1390,25 +1390,60 @@ ul.pattern .color8 {
   
 }
 .special .el-tabs__item {
-    min-width: 210px;
-    text-align: center;
-    color: #4D5563;
-    font-size: 22px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 46px; /* 209.091% */
-    margin-bottom: 10px;
-    padding-left: 25px;
+    min-width: 210px !important;
+    text-align: center !important;
+    color: #4D5563 !important;
+    font-size: 22px !important;
+    font-style: normal !important;
+    font-weight: 600 !important;
+    line-height: 46px !important; /* 209.091% */
+    margin-bottom: 10px !important;
+    padding-left: 25px !important;
 
 }
 .special .el-tabs__item.is-active {
-    color: #151E2C;
-    font-size: 28px;
+    color: #151E2C !important;
+    font-size: 28px !important;
+
 }
 .special .el-tabs__active-bar {
-    background: #000;
+    background: #000 !important;
 }
 .special .el-tabs__header {
-    padding: 0 100px 40px;
+    padding: 0 100px 40px !important;
 }
 
+.allSet  {
+    position: relative;
+  }
+.allSet  .el-tabs__header{
+    position: absolute;
+    left: calc(50% - 700px);
+    top: -60px;
+    border-radius: 10px;
+    overflow: hidden;
+  }
+.allSet  .el-tabs__item {
+    width: 300px;
+    height: 123px;
+    flex-shrink: 0;
+    background-color: #fff;
+    color: #24303E;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 123px; /* 28.8px */
+    text-align: center;
+    border: none !important;
+  }
+.allSet  .el-tabs__item.is-active {
+    background-color: #00AFAF;
+    color: #fff;
+  }
+.allSet  .el-tabs__content{
+    width: 100%;
+  color: #000;
+}
+.allSet .el-tabs--card>.el-tabs__header .el-tabs__nav {
+    border: none;
+}
diff --git a/src/assets/icons/about/about1.png b/src/assets/icons/about/about1.png
new file mode 100644
index 0000000..10747d7
Binary files /dev/null and b/src/assets/icons/about/about1.png differ
diff --git a/src/assets/icons/platform/EllipseBlack.png b/src/assets/icons/platform/EllipseBlack.png
new file mode 100644
index 0000000..0208e75
Binary files /dev/null and b/src/assets/icons/platform/EllipseBlack.png differ
diff --git a/src/assets/icons/platform/EllipseWhite.png b/src/assets/icons/platform/EllipseWhite.png
new file mode 100644
index 0000000..d909fda
Binary files /dev/null and b/src/assets/icons/platform/EllipseWhite.png differ
diff --git a/src/assets/images/platform/publicAccount.png b/src/assets/images/platform/publicAccount.png
new file mode 100644
index 0000000..abaa2c5
Binary files /dev/null and b/src/assets/images/platform/publicAccount.png differ
diff --git a/src/assets/images/platform/tiktokQrcode.png b/src/assets/images/platform/tiktokQrcode.png
new file mode 100644
index 0000000..61854c8
Binary files /dev/null and b/src/assets/images/platform/tiktokQrcode.png differ
diff --git a/src/assets/images/platform/videoQrcode.png b/src/assets/images/platform/videoQrcode.png
new file mode 100644
index 0000000..a0067ee
Binary files /dev/null and b/src/assets/images/platform/videoQrcode.png differ
diff --git a/src/components/tabbar/navbar.vue b/src/components/tabbar/navbar.vue
index 60bf9a5..03b5bf8 100644
--- a/src/components/tabbar/navbar.vue
+++ b/src/components/tabbar/navbar.vue
@@ -10,10 +10,10 @@
               <a href="/home">
                   <img src="../../assets/images/home/logo_small.png"   />
               </a>
-               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
+               <!-- <button style="margin-top: 100px;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
                  aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                  <i class="mdi mdi-menu"></i>
-               </button>
+               </button> -->
             </div>
           
             <div class="collapse navbar-collapse" id="navbarCollapse">
@@ -31,7 +31,10 @@
                   <router-link class="nav-link" to="/platform">平台专区</router-link>
                 </li>
                 <li class="nav-item" >
-                  <router-link class="nav-link" to="/two">关于我们</router-link>
+                  <router-link class="nav-link" to="/about">关于我们</router-link>
+                </li>
+                <li class="nav-item" >
+                  <router-link class="nav-link" to="/developmentDocking">开发对接</router-link>
                 </li>
                 <!-- Additional links omitted for brevity -->
               </ul>
@@ -63,14 +66,14 @@
                 <a href="/home">
                     <img style="width: 150px;" src="../../assets/images/home/logo_small_black.jpg"   />
                 </a>
-                 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
-                   aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+                 <!-- <button class="navbar-toggler" type="button" data-toggle="collapse1" data-target="#navbarCollapse1"
+                   aria-controls="navbarCollapse1" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="mdi mdi-menu"></i>
-                 </button>
+                 </button> -->
               </div>
             
-              <div class="collapse navbar-collapse" id="navbarCollapse">
-                <ul class="navbar-nav navbar-center" id="mySidenav">
+              <div class="collapse1 navbar-collapse" id="navbarCollapse1">
+                <ul class="navbar-nav navbar-center" id="mySidenav1">
                   <li class="nav-item">
                     <router-link class="nav-link" to="/home">首页</router-link>
                   </li>
@@ -84,8 +87,11 @@
                     <router-link class="nav-link" to="/platform">平台专区</router-link>
                   </li>
                   <li class="nav-item" >
-                    <router-link class="nav-link" to="/two">关于我们</router-link>
+                    <router-link class="nav-link" to="/about">关于我们</router-link>
                   </li>
+                  <li class="nav-item" >
+                  <router-link class="nav-link" to="/developmentDocking">开发对接</router-link>
+                </li>
                   <!-- Additional links omitted for brevity -->
                 </ul>
                 <!-- <div class="nav-button ">
diff --git a/src/router/index.js b/src/router/index.js
index adaf94d..12efa2c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -20,7 +20,13 @@ import platform from "../view/platform/index.vue"
 import warehouseMap from "../view/platform/tab/warehouseMap.vue"
 import AMAZON from "../view/platform/tab/AMAZON.vue"
 import AMZDetail from "../view/platform/tab/components/AMZDetail.vue"
-
+// 关于我们
+import about from "../view/about/index.vue"
+import inviteJob from "../view/about/components/inviteJob.vue"
+import corporateCulture from "../view/about/components/corporateCulture.vue"
+import connection from "../view/about/components/connection.vue"
+// 开发对接
+import developmentDocking from "../view/developmentDocking/index.vue"
 
 
 Vue.use(VueRouter);
@@ -86,6 +92,31 @@ const routes = [
     name: "AMZDetail",
     component: AMZDetail
   },
+  {
+    path: "/about",
+    name: "about",
+    component: about
+  },
+  {
+    path: "/connection",
+    name: "connection",
+    component: connection
+  }, 
+  {
+    path: "/corporateCulture",
+    name: "corporateCulture",
+    component: corporateCulture
+  }, 
+  {
+    path: "/inviteJob",
+    name: "inviteJob",
+    component: inviteJob
+  },
+  {
+    path: "/developmentDocking",
+    name: "developmentDocking",
+    component: developmentDocking
+  },
   {
     path: "/login",
     name: "Login page",
diff --git a/src/view/about/components/aboutMT.vue b/src/view/about/components/aboutMT.vue
new file mode 100644
index 0000000..796734d
--- /dev/null
+++ b/src/view/about/components/aboutMT.vue
@@ -0,0 +1,228 @@
+
+<template>
+    <div class="" style="margin-top: 140px;">
+      <div class="container" style="padding-bottom: 70px;">
+        <div class="main-title">
+            关于美通
+        </div>
+        <div class="main-content">
+            <p>
+            美通供应链（AAF）始于2008年，以一站式、一揽子、一条龙的特色运营，提供快捷、优质、安全无忧的国际物流服务，助力跨境电商智联全球。
+            </p>
+            <p>
+            美通渠道产品网络覆盖美国、欧盟、英国、加拿大、墨西哥、日本、俄罗斯等主要电商贸易地区和国家，强有力的海外团队确保目的港清关配送服务顺畅，提供安全、稳定的海陆空全时效覆盖的多式联运物流解决方案。
+            </p>
+            <p>
+            美通于2023年7月成为信用中国“重点信用认证企业”，2023年8月入选了亚马逊服务提供商网络(Amazon SPN)，2024年2月成为亚马逊ShipTrack承运商，2024年3月成为亚马逊SEND项目合作承运商，2020-2024年连续四届获得晓生排行榜“FBA物流十强企业”，2023年10月荣获亚马逊“2023金牌辅助”与“SPN一年级奖”等荣誉，2024年2月获得雨果跨境“2023最佳跨境物流奖”等。
+            </p>
+            <p>
+            美通总部位于深圳，办公面积5000多平方米，国内在广州、中山、佛山、东莞、上海、义乌、郑州、青岛、长沙、合肥、宁波、厦门等地设立16家分公司，海外在加拿大、美国、美国、墨西哥、英国、比利时、德国、法国、日本、白俄罗斯、越南、哈萨克斯坦（缺4家）等地设立16家分公司，全球员工超800人。美通自营线路50多条，国内仓储面积60000多平方米，自营海外仓面积30000多平方米，强大的基础配置与专业团队为多样化物流配送需求提供了保证。
+            </p>
+            <p>
+            美通专注跨境电商物流9年，不断完善国内销售网络，扩大产品线覆盖目的国，正着重实现核心市场运营服务完成闭环，信息化向数字化转型，关键运营的控制点基本实现可控和可视化，以成为行业领先的跨境电商物流企业。
+            </p>
+
+
+        </div>
+      </div>
+     <div style="background: #F8F8F8;">
+        <div class="container flx-center" style="padding: 70px 0 150px 0 ">
+            <div  class="circle4 flx-center">
+            <div  class="circle3 flx-center">
+              <div  class="circle2 flx-center">
+                <div class="circle-container">
+                  <div  class="circle"  v-for="(item, index) in buttonProps"
+                      :key="index">
+                    <div class="circle-item " @click="setBtnActive(item,index)"  :class="[`item${index + 1}`, { 'proprietary-active': activePropsIndex === index}]" :style="{ transform: 'rotate(0deg) translateX(100px) rotate(0deg)' }">{{item.title}}</div>
+
+                  </div>
+                </div>
+              </div>
+           
+          </div>
+          </div>
+
+          <div style="margin-left: 200px;" v-if="activePropsIndex === 0">
+              <img src="@/assets/icons/about/about1.png" alt="">
+              <div class="circle-title">一站式</div>
+              <div class="circle-content">设立多个分子公司为全国各地客户进行本地化服务</div>
+            </div>
+            <div style="margin-left: 200px;" v-else-if="activePropsIndex === 1">
+              <img src="@/assets/icons/about/about1.png" alt="">
+              <div class="circle-title">一揽子</div>
+              <div class="circle-content">满足客户多国家、多平台、多产品、多时段的运输要求</div>
+            </div>
+            <div style="margin-left: 200px;" v-else>
+              <img src="@/assets/icons/about/about1.png" alt="">
+              <div class="circle-title">一条龙</div>
+              <div class="circle-content">以高质量的运营能力实现门到门、端到端服务</div>
+            </div>
+      </div>
+     </div>
+
+
+    <div style="background-color: #000;padding: 55px 0 60px  0 ;">
+      <div  class="flx-center">
+        <div class="company-title">发展历程</div>
+      </div>
+    <div class="flx-center">
+      <div id="developYears">
+      	<div id="line"></div>
+      		<div id="dotList">
+      			<div v-for="(item,index) in yearsList" :key="index" :class="item.id==yearsActive?'dot':'dotNo'">
+      			<div  class="nullBox"></div>
+      			<dl @click="yearsClick(item)">
+      				<dt>
+      					<img v-show="item.id == yearsActive" src="@/assets/icons/platform/EllipseWhite.png" alt="">
+      					<img v-show="item.id != yearsActive" src="@/assets/icons/platform/EllipseBlack.png" alt="">
+      				</dt>
+      				<dd>{{item.year}}</dd>
+      			</dl>
+      		</div>
+      	</div>
+
+        
+      </div>
+    </div>
+ 
+    </div>
+    <div class="timeline">
+      <div class="timeline-year">
+        <div>2023</div>
+        <div class="events ">
+          <div class="event flx-justify-between"><span>3月</span><span>白俄分公司</span></div>
+          <div class="event flx-justify-between"><span>4月</span><span>墨西哥海外仓</span></div>
+          <div class="event flx-justify-between"><span></span><span>成立青岛美通</span></div>
+          <div class="event flx-justify-between"><span></span><span>挂牌中国整车出口基地</span></div>
+          <div class="event flx-justify-between"><span></span><span>成立日本分公司</span></div>
+        </div>
+      </div>
+      <div class="timeline-year">
+        <div>2022</div>
+        <div class="events ">
+          <div class="event flx-justify-between"><span>9月</span><span>投资新疆阿拉山口</span></div>
+          <div class="event flx-justify-between"><span>10月 </span><span>加拿大海外仓</span></div>
+          <div class="event flx-justify-between"><span>12月</span><span>比利时分公司</span></div>
+        </div>
+      </div>
+      <div class="timeline-year">
+        <div>2021</div>
+        <div class="events ">
+          <div class="event flx-justify-between"><span>4月</span><span>美国洛杉矶海外仓</span></div>
+          <div class="event flx-justify-between"><span>5月</span><span>成立佛山美通</span></div>
+          <div class="event flx-justify-between"><span></span><span>美国纽约海外仓</span></div>
+          <div class="event flx-justify-between"><span>8月</span><span>成立东莞美通</span></div>
+          <div class="event flx-justify-between"><span>10月</span><span>比利时海外仓</span></div>
+        </div>
+      </div>
+      <div class="timeline-year">
+        <div>2020</div>
+        <div class="events ">
+          <div class="event flx-justify-between"><span>1月</span><span>成立义乌美通</span></div>
+          <div class="event flx-justify-between"><span>7月</span><span>成立广州美通</span></div>
+          <div class="event flx-justify-between"><span>8月</span><span>英国海外仓</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="container" style="margin-top: 140px;margin-bottom: 70px;">
+        <div class="main-title">美通媒体平台</div>
+        <div class="flx-justify-around" style="margin-top: 72px;">
+          <img src="@/assets/images/platform/publicAccount.png" alt="">
+          <img src="@/assets/images/platform/videoQrcode.png" alt="">
+          <img src="@/assets/images/platform/tiktokQrcode.png" alt="">
+        </div>
+    </div>
+    </div>
+  </template>
+  <script>
+  
+  
+  /**
+   * Index-1 component
+   */
+  export default {
+      name:"about",
+    components: {
+    },
+    data(){
+      return {
+        activeName: 'second',
+        activeIndex: 2, // 默认选中第一个按钮
+        buttons: [
+          { label: '关于美通',transportMode:'OCEAN' },
+          { label: '联系我们',transportMode:'AIR' },
+          { label: '企业文化',transportMode:'RAIL' },
+          { label: '企业招聘',transportMode:'ROAD' }
+        ],
+        activePropsIndex:0,
+        buttonProps: [
+          { title: '一站式',capital:'温哥华/多伦多'},
+          { title: '一揽子',capital:'洛杉矶/芝加哥'}, 
+          { title: '一条龙',capital:'墨西哥'},
+        ],
+        yearsActive:1,
+				yearsList:[
+					{
+						id:1,
+						year:'2023',
+						value:''
+					},
+					{
+						id:2,
+						year:'2019',
+						value:''
+					},
+					{
+						id:3,
+						year:'2015',
+						value:''
+					},
+					{
+						id:4,
+						year:'2011',
+						value:''
+					},
+					{
+						id:5,
+						year:'2008',
+						value:''
+					}
+				]
+      }
+    },
+    methods: {
+      handleClick(tab, event) {
+          console.log(tab, event);
+        },
+        yearsClick(row){
+        	this.yearsActive = row.id;
+        },
+        setBtnActive(item,index){
+          this.activePropsIndex = index;
+        },
+      setActive(item,index) {
+        if(index === 1){
+          this.$router.push({
+            name:'connection'
+          })
+        }else if(index === 2){
+          this.$router.push({
+            name:'corporateCulture'
+          })
+        }else if(index === 3){
+          this.$router.push({
+            name:'inviteJob'
+          })
+        }else {
+          this.$router.push({
+            name:'about'
+          })
+        }
+        // this.activeIndex = index;
+        
+  
+      },
+    }
+  };
+  </script>
+  <style src="../index.css" scoped></style>
\ No newline at end of file
diff --git a/src/view/about/components/connection.vue b/src/view/about/components/connection.vue
new file mode 100644
index 0000000..6825bd5
--- /dev/null
+++ b/src/view/about/components/connection.vue
@@ -0,0 +1,61 @@
+
+<template>
+    <div class="footerBottom">
+    
+    
+     
+    </div>
+  </template>
+  <script>
+  
+  
+  /**
+   * Index-1 component
+   */
+  export default {
+      name:"about",
+    components: {
+    },
+    data(){
+      return {
+        activeName: 'second',
+        activeIndex: 1, // 默认选中第一个按钮
+        buttons: [
+          { label: '关于美通',transportMode:'OCEAN' },
+          { label: '联系我们',transportMode:'AIR' },
+          { label: '企业文化',transportMode:'RAIL' },
+          { label: '企业招聘',transportMode:'ROAD' }
+        ],
+      
+      }
+    },
+    methods: {
+      handleClick(tab, event) {
+          console.log(tab, event);
+        },
+      setActive(item,index) {
+        if(index === 1){
+          this.$router.push({
+            name:'connection'
+          })
+        }else if(index === 2){
+          this.$router.push({
+            name:'corporateCulture'
+          })
+        }else if(index === 3){
+          this.$router.push({
+            name:'inviteJob'
+          })
+        }else {
+          this.$router.push({
+            name:'about'
+          })
+        }
+        // this.activeIndex = index;
+        
+  
+      },
+    }
+  };
+  </script>
+  <style src="../index.css" scoped></style>
\ No newline at end of file
diff --git a/src/view/about/components/corporateCulture.vue b/src/view/about/components/corporateCulture.vue
new file mode 100644
index 0000000..e6ba59a
--- /dev/null
+++ b/src/view/about/components/corporateCulture.vue
@@ -0,0 +1,59 @@
+
+<template>
+  <div class="footerBottom">
+   
+  </div>
+</template>
+<script>
+
+
+/**
+ * Index-1 component
+ */
+export default {
+    name:"about",
+  components: {
+  },
+  data(){
+    return {
+      activeName: 'second',
+      activeIndex: 2, // 默认选中第一个按钮
+      buttons: [
+        { label: '关于美通',transportMode:'OCEAN' },
+        { label: '联系我们',transportMode:'AIR' },
+        { label: '企业文化',transportMode:'RAIL' },
+        { label: '企业招聘',transportMode:'ROAD' }
+      ],
+    
+    }
+  },
+  methods: {
+    handleClick(tab, event) {
+        console.log(tab, event);
+      },
+    setActive(item,index) {
+      if(index === 1){
+        this.$router.push({
+          name:'connection'
+        })
+      }else if(index === 2){
+        this.$router.push({
+          name:'corporateCulture'
+        })
+      }else if(index === 3){
+        this.$router.push({
+          name:'inviteJob'
+        })
+      }else {
+        this.$router.push({
+          name:'about'
+        })
+      }
+      // this.activeIndex = index;
+      
+
+    },
+  }
+};
+</script>
+<style src="../index.css" scoped></style>
\ No newline at end of file
diff --git a/src/view/about/components/inviteJob.vue b/src/view/about/components/inviteJob.vue
new file mode 100644
index 0000000..39cb18a
--- /dev/null
+++ b/src/view/about/components/inviteJob.vue
@@ -0,0 +1,59 @@
+
+<template>
+  <div class="footerBottom">
+    
+  </div>
+</template>
+<script>
+
+
+/**
+ * Index-1 component
+ */
+export default {
+    name:"about",
+  components: {
+  },
+  data(){
+    return {
+      activeName: 'second',
+      activeIndex: 3, // 默认选中第一个按钮
+      buttons: [
+        { label: '关于美通',transportMode:'OCEAN' },
+        { label: '联系我们',transportMode:'AIR' },
+        { label: '企业文化',transportMode:'RAIL' },
+        { label: '企业招聘',transportMode:'ROAD' }
+      ],
+    
+    }
+  },
+  methods: {
+    handleClick(tab, event) {
+        console.log(tab, event);
+      },
+    setActive(item,index) {
+      if(index === 1){
+        this.$router.push({
+          name:'connection'
+        })
+      }else if(index === 2){
+        this.$router.push({
+          name:'corporateCulture'
+        })
+      }else if(index === 3){
+        this.$router.push({
+          name:'inviteJob'
+        })
+      }else {
+        this.$router.push({
+          name:'about'
+        })
+      }
+      // this.activeIndex = index;
+      
+
+    },
+  }
+};
+</script>
+<style src="../index.css" scoped></style>
\ No newline at end of file
diff --git a/src/view/about/index.css b/src/view/about/index.css
new file mode 100644
index 0000000..6126d9a
--- /dev/null
+++ b/src/view/about/index.css
@@ -0,0 +1,285 @@
+.businessBackground {
+    position: relative;
+    width: 100%;
+    height: 1000px;
+    background: url('../../assets/images/home/background.png') no-repeat center/cover;
+  }
+.main-title {
+    color: #151E2C;
+    font-size: 40px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 46px; /* 115% */
+    margin-bottom: 28px;
+}
+.main-content p {
+    color: rgba(21, 30, 44, 0.50);
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 42px; /* 210% */
+}
+/* 转圈圈 */
+.circle-container {
+    position: relative;
+    width: 280px; /* Circle size */
+    height: 280px; /* Circle size */
+    margin: 100px auto; /* Center the circle */
+    animation: rotate-circle 10s infinite linear; /* Rotate the circle */
+  }
+  
+  .circle {
+    position: absolute;
+    top: 50%; left: 50%;
+    width: 280px; height: 280px; /* Same as container for a full circle */
+    margin-top: -140px; /* Offset to center the circle */
+    margin-left: -140px; /* Offset to center the circle */
+    border: dashed 2px #00AFAF;
+    border-radius: 50%;
+    /* animation: rotate 10s infinite linear;  */
+  }
+  .circle2 {
+    /* position: absolute; */
+    /* top: 50%; left: 50%; */
+    width: 320px; height: 320px; /* Same as container for a full circle */
+   
+    border: dashed 2px #00AFAF;
+    border-radius: 50%;
+  }
+  .circle3 {
+    /* position: absolute; */
+    /* top: 50%; left: 50%; */
+    width: 360px; height: 360px; /* Same as container for a full circle */
+   
+    border: dashed 2px #00AFAF;
+    border-radius: 50%;
+  }
+  .circle4 {
+    /* position: absolute; */
+    /* top: 50%; left: 50%; */
+    width: 400px; height: 400px; /* Same as container for a full circle */
+   
+    border: dashed 2px #00AFAF;
+    border-radius: 50%;
+    animation: rotate 10s infinite linear; 
+
+  }
+
+  .circle-item {
+    position: absolute;
+    top: 50%; left: 50%;
+    width: 114px; height: 43px; /* Box size */
+    margin-top: -15px; /* Half height of the box */
+    margin-left: -30px; /* Half width of the box */
+    background: #E2F0F0;
+    color: #00AFAF;;
+    line-height: 43px;
+    text-align: center;
+    border-radius: 51px;
+    transform-origin: 0 50%; /* Set the origin for rotation */
+    z-index: 1;
+    cursor: pointer;
+    /* Set the initial rotation and translation based on :style */
+  }
+  .proprietary-active {
+    background: #00AFAF;
+    color: #fff;
+    box-shadow: 0px 4px 12.9px 0px rgba(0, 175, 175, 0.30);
+
+  }
+  .item1 {
+    position: absolute;
+    top: 65%; left: 100%;
+    transform-origin: center center;
+    animation: spin 10s infinite linear;
+  }
+  .item2 {
+    position: absolute;
+    top: 90%; left: 0%;
+    transform-origin: center center;
+    animation: spin 10s infinite linear;
+  }
+  .item3 {
+    position: absolute;
+    top: -5%; left: 15%;
+    transform-origin: center center;
+    animation: spin 10s infinite linear;
+  }
+  @keyframes rotate {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  @keyframes spin {
+    0% { transform: rotate(360deg); }
+    100% { transform: rotate(0deg); }
+
+  }
+
+  .circle-title {
+    color: #151E2C;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 42px; /* 210% */
+    margin: 25px 0 10px 0 ;
+  }
+  .circle-content {
+    width: 200px;
+    height: 56px;
+    color: rgba(21, 30, 44, 0.50);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 28px; /* 175% */
+  }
+
+
+  /*公司时间轴  */
+  #line {
+    position: absolute;
+    bottom: 70px;
+    width: 100%;
+    height: 4px;
+    background: #6D6D6D;
+    z-index: 2;
+  }
+  #developYears {
+    width: 700px;
+		height: 100px;
+		position: relative;
+		z-index: 1;
+		padding-top: 75px;
+	}
+  #dotList {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    top: 38px;
+  }
+  
+  .dot .activeImg {
+    width: 32px;
+  }
+  .dot dt {
+    width: 32px;
+    height: 89px;
+  }
+  .dot dt img{
+      width: 32x;
+  }
+  .dot dl {
+    cursor: pointer;
+    width: 32px;
+    position: relative;
+
+  }
+  .dot dd {
+    position: absolute;
+    left: -12px;
+    letter-spacing: 1px;
+    color: #FFF;
+    font-family: "DingTalk JinBuTi";
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 46px; /* 191.667% */
+  }
+  .dot {
+    text-align: center;
+    z-index: 3;
+    line-height: 121px;
+  }
+  .dotNo {
+    text-align: center;
+    z-index: 3;
+  }
+  .dotNo dl {
+    width: 32px;
+    position: relative;
+  }
+  .dotNo .activeImg {
+    width: 32px;
+  }
+  .dotNo .nullBox {
+    width: 32px;
+    height: 47px;
+  }
+
+  .dotNo dl {
+    cursor: pointer;
+    position: relative;
+
+  }
+  .dotNo dd {
+    position: absolute;
+    left: -12px;
+    letter-spacing: 1px;
+    color: #FFF;
+    font-family: "DingTalk JinBuTi";
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 46px; /* 191.667% */
+    margin-top: 10px;
+  }
+  .dotNo dt img{
+      width: 32px;
+  }
+  .company-title {
+    color: #FFF;
+    font-family: "DingTalk JinBuTi";
+    font-size: 40px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 46px; /* 115% */
+  }
+  .timeline {
+    display: flex;
+    justify-content: space-around;
+    padding: 36px;
+    background: #fff;
+  }
+
+  .timeline-year {
+    width: 20%;
+    position: relative;
+  }
+  .timeline-year >div:first-child {
+    border-bottom: 1px solid #000;
+    color: #151E2C;
+    font-family: "DingTalk JinBuTi";
+    font-size: 28px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 46px; /* 164.286% */
+    padding-bottom: 10px;
+  }
+  .timeline-year div span {
+    color: #7A7A7A;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 171.429% */
+  }
+  .timeline-year div span:first-child {
+    display: inline-block;
+    width: 120px;
+    text-align: right;
+  }
+
+
+  .timeline-year:last-child::after {
+    display: none; /* Do not display the line after the last year */
+  }
+
+  .events {
+    margin-top: 10px;
+    font-size: 14px;
+    color: #333;
+  }
+
+  .event {
+    padding: 2px 0;
+    margin-bottom: 16px;
+  }
\ No newline at end of file
diff --git a/src/view/about/index.vue b/src/view/about/index.vue
new file mode 100644
index 0000000..4215338
--- /dev/null
+++ b/src/view/about/index.vue
@@ -0,0 +1,92 @@
+
+<template>
+  <div class="footerBottom">
+    <div class="businessBackground"></div>
+    <div class="allSet">
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+                  <el-tab-pane label="关于美通" name="first">
+                    <aboutMT></aboutMT>
+                  </el-tab-pane>
+                  <el-tab-pane label="联系我们" name="second">
+                    <connection></connection>
+                  </el-tab-pane>
+                  <el-tab-pane label="企业文化" name="third">
+                    <corporateCulture></corporateCulture>
+                  </el-tab-pane>
+                  <el-tab-pane label="企业招聘" name="fourth">
+                    <inviteJob></inviteJob>
+                  </el-tab-pane>
+                </el-tabs>
+    </div>
+  </div>
+</template>
+<script>
+import aboutMT from "./components/aboutMT.vue";
+import connection from "./components/connection.vue";
+import corporateCulture from "./components/corporateCulture.vue";
+import inviteJob from "./components/inviteJob.vue";
+
+/**
+ * Index-1 component
+ */
+export default {
+    name:"about",
+  components: {
+    aboutMT,
+    connection,
+    corporateCulture,
+    inviteJob,
+  },
+  data(){
+    return {
+      activeName: 'second',
+      activeIndex: 0, // 默认选中第一个按钮
+      buttons: [
+        { label: '关于美通',transportMode:'OCEAN' },
+        { label: '联系我们',transportMode:'AIR' },
+        { label: '企业文化',transportMode:'RAIL' },
+        { label: '企业招聘',transportMode:'ROAD' }
+      ],
+      activePropsIndex:0,
+      buttonProps: [
+        { contry: '加拿大',capital:'温哥华/多伦多'},
+        { contry: '美国',capital:'洛杉矶/芝加哥'}, 
+        { contry: '墨西哥',capital:'墨西哥'},
+        { contry: '英国',capital:'伦敦'},
+        { contry: '比利时',capital:'烈日'},
+        { contry: '德国',capital:'科隆'},
+        { contry: '法国',capital:'巴黎'},
+        { contry: '日本',capital:'大阪府'},
+      ],
+    }
+  },
+  methods: {
+    handleClick(tab, event) {
+        console.log(tab, event);
+      },
+    setActive(item,index) {
+      if(index === 1){
+        this.$router.push({
+          name:'connection'
+        })
+      }else if(index === 2){
+        this.$router.push({
+          name:'corporateCulture'
+        })
+      }else if(index === 3){
+        this.$router.push({
+          name:'inviteJob'
+        })
+      }else {
+        this.$router.push({
+          name:'about'
+        })
+      }
+      // this.activeIndex = index;
+      
+
+    },
+  }
+};
+</script>
+<style src="./index.css" scoped></style>
\ No newline at end of file
diff --git a/src/view/developmentDocking/index.css b/src/view/developmentDocking/index.css
new file mode 100644
index 0000000..95d27ee
--- /dev/null
+++ b/src/view/developmentDocking/index.css
@@ -0,0 +1,3 @@
+::v-deep .el-icon-arrow-down:before {
+    display: none;
+}
\ No newline at end of file
diff --git a/src/view/developmentDocking/index.vue b/src/view/developmentDocking/index.vue
new file mode 100644
index 0000000..2b2c320
--- /dev/null
+++ b/src/view/developmentDocking/index.vue
@@ -0,0 +1,133 @@
+
+<template>
+    <div class="">
+        <el-container style="height: 100vh;">
+            <el-aside width="200px" style="background-color: #f2f2f2;">
+                <el-input
+                    v-model="searchQuery"
+                    placeholder="搜索"
+                    prefix-icon="el-icon-search"
+                    class="menu-search"
+                    @change="filteredMenuItems"
+                    
+                  ></el-input>
+                <el-menu
+                    :default-openeds="propList"
+                    class="el-menu-vertical-demo"
+                    :unique-opened="true"
+                    @open="handleOpen"
+                    @close="handleClose">
+                    <el-submenu v-for="(item,index) in menuItems" :key="index" :index="`${index+1}`" >
+                      <template slot="title">
+                        <span>{{Object.keys(menuItems[index])[0]}}</span>
+                      </template>
+                      <el-menu-item-group  v-for="(itemGroup, groupIndex) in item[Object.keys(menuItems[index])[0]]" :key="groupIndex"> 
+                        <el-menu-item :index="`1-${groupIndex}`">{{ itemGroup.title }}</el-menu-item>
+                      </el-menu-item-group>
+
+                    </el-submenu>
+                  </el-menu>
+            </el-aside>
+        
+            <el-container>
+              <el-header>API Documentation</el-header>
+              <el-main>
+                <h1>调用指南</h1>
+                <h2>1-1 HTTP请求头信息</h2>
+                <p>Authorization: Bearer ACCESS_TOKEN</p>
+                <p>Content-Type: application/json</p>
+                <p>Accept: application/json</p>
+                <p>Accept-Language: zh-CN</p>
+                <!-- More content -->
+              </el-main>
+            </el-container>
+          </el-container>
+    </div>
+  </template>
+  <script>
+  
+  
+  /**
+   * Index-1 component
+   */
+  export default {
+    name:"developmentDocking",
+    components: {
+    },
+    data(){
+      return {
+        searchQuery:"",
+        propList:[],
+        menuItems: [
+        {
+            "asa":[ 
+               { title: '概览', index: '1' },
+               { title: '系统状态', index: '2' },
+               { title: '配置选项', index: '3' },
+               { title: '用户管理', index: '4' },
+               { title: '日志', index: '5' }
+            ]
+             
+        },
+        {
+            "hhh":[ 
+               { title: '来玩呀', index: '1' },
+               { title: '系统状态', index: '2' },
+               { title: '配置选项', index: '3' },
+               { title: '用户管理', index: '4' },
+               { title: '日志', index: '5' }
+            ]
+             
+        },
+        {
+            "小妹妹":[ 
+               { title: '嘿嘿嘿', index: '1' },
+               { title: '系统状态', index: '2' },
+               { title: '配置选项', index: '3' },
+               { title: '用户管理', index: '4' },
+               { title: '日志', index: '5' }
+            ]
+             
+        }
+    ]
+    }
+    },
+    methods: {
+        handleOpen(key, keyPath) {
+           console.log(key, keyPath);
+         },
+         handleClose(key, keyPath) {
+           console.log(key, keyPath);
+         },
+         filteredMenuItems(val) {
+            console.log(val)
+            this.propList = []
+            if (val === "") {
+              return this.menuItems; // 如果没有搜索查询，返回全部
+            }
+            const searchLower = `${val}`;
+            console.log(searchLower,'searchLower')
+
+            const append = this.menuItems.map((item, index) => {
+  const key = Object.keys(this.menuItems[index])[0];
+  const eleIndex = item[key].findIndex(element => searchLower === element.title.toLowerCase());
+
+  if (eleIndex !== -1) {
+    return { groupIndex: index, itemIndex: eleIndex, item: item[key][eleIndex] };
+  }
+  console.log('嘿嘿嘿没找到')
+ // 或者其他你希望在未找到时返回的值
+});
+
+console.log(append.filter(x => x !== undefined), 'append');
+const appendData = append.filter(x => x !== undefined)
+console.log(appendData,'appendData')
+const index = `${appendData[0].groupIndex+1}`
+console.log(index,'index')
+this.propList.push(index)
+
+    }
+    }
+  };
+  </script>
+  <style src="./index.css" scoped></style>
\ No newline at end of file
diff --git a/src/view/platform/index.vue b/src/view/platform/index.vue
index 553f245..7008a59 100644
--- a/src/view/platform/index.vue
+++ b/src/view/platform/index.vue
@@ -1,132 +1,132 @@
 
 <template>
-    <div class="footerBottom">
-      <div class="platformBackground" ></div>
-      <div class="platform">
-        <div class="container" >
-            <div >
-              <div class=" button-group">
-              <div class="button-group-item"  style="position: absolute;top:1000px;">
-                <el-button
-                 v-for="(item, index) in buttons"
-                 :key="index"
-                 :class="{ 'active': activeIndex === index }"
-                 @click="setActive(item,index)"
-               >
-                 <div class="btn-text" style="">
-                  {{ item.label }}
-                </div>
-               </el-button>
-              </div>
-             </div>
-            </div>
-           <div style="margin-top: 148px;">
-            <div class="platformSearch">
-              <div>
-              查询方法：点开需要查找国家的地址清单，按Ctrl+F，输入已知信息，，即可快速找到
-              </div>
-              <div>
-                示例：点击“美国亚马逊FBA仓库地址清单”→ 按Ctrl+F → 在查找框输入“PHX3”，即可找到该地址。
+  <div class="footerBottom">
+    <div class="platformBackground" ></div>
+    <div class="platform">
+      <div class="container" >
+          <div >
+            <div class=" button-group">
+            <div class="button-group-item"  style="position: absolute;top:1000px;">
+              <el-button
+               v-for="(item, index) in buttons"
+               :key="index"
+               :class="{ 'active': activeIndex === index }"
+               @click="setActive(item,index)"
+             >
+               <div class="btn-text" style="">
+                {{ item.label }}
               </div>
+             </el-button>
             </div>
+           </div>
+          </div>
+         <div style="margin-top: 148px;">
+          <div class="platformSearch">
             <div>
-              <div class="platTableTitle">美国亚马逊仓库地址清单</div>
-              <div class="platTable flx-center">
-                <el-table  :cell-style="{background:'#fff'}" :data="tableData" style="width: 100%">
-                  <el-table-column prop="fbacode" label="FBA Code" :show-overflow-tooltip="true" ></el-table-column>
-                  <el-table-column prop="address" label="地址" :show-overflow-tooltip="true" ></el-table-column>
-                  <el-table-column prop="city" label="City" :show-overflow-tooltip="true" ></el-table-column>
-                  <el-table-column prop="state" label="State" :show-overflow-tooltip="true" ></el-table-column>
-                  <el-table-column prop="zip" label="Zip" :show-overflow-tooltip="true" ></el-table-column>
-                </el-table>
-              </div>
+            查询方法：点开需要查找国家的地址清单，按Ctrl+F，输入已知信息，，即可快速找到
             </div>
             <div>
-              <div class="platTableTitle">亚马逊仓库地址清单</div>
-              <div class="platTable flx-center">
-                <el-table :cell-style="{background:'#fff'}" :data="tableData" style="width: 100%">
-                  <el-table-column prop="fbacode" label="FBA Code" :show-overflow-tooltip="true" ></el-table-column>
-                  <el-table-column prop="address" label="地址" :show-overflow-tooltip="true" ></el-table-column>
-                  <el-table-column prop="city" label="City" :show-overflow-tooltip="true" ></el-table-column>
-                  <el-table-column prop="state" label="State" :show-overflow-tooltip="true" ></el-table-column>
-                  <el-table-column prop="zip" label="Zip" :show-overflow-tooltip="true" ></el-table-column>
-                </el-table>
-              </div>
+              示例：点击“美国亚马逊FBA仓库地址清单”→ 按Ctrl+F → 在查找框输入“PHX3”，即可找到该地址。
+            </div>
+          </div>
+          <div>
+            <div class="platTableTitle">美国亚马逊仓库地址清单</div>
+            <div class="platTable flx-center">
+              <el-table  :cell-style="{background:'#fff'}" :data="tableData" style="width: 100%">
+                <el-table-column prop="fbacode" label="FBA Code" :show-overflow-tooltip="true" ></el-table-column>
+                <el-table-column prop="address" label="地址" :show-overflow-tooltip="true" ></el-table-column>
+                <el-table-column prop="city" label="City" :show-overflow-tooltip="true" ></el-table-column>
+                <el-table-column prop="state" label="State" :show-overflow-tooltip="true" ></el-table-column>
+                <el-table-column prop="zip" label="Zip" :show-overflow-tooltip="true" ></el-table-column>
+              </el-table>
+            </div>
+          </div>
+          <div>
+            <div class="platTableTitle">亚马逊仓库地址清单</div>
+            <div class="platTable flx-center">
+              <el-table :cell-style="{background:'#fff'}" :data="tableData" style="width: 100%">
+                <el-table-column prop="fbacode" label="FBA Code" :show-overflow-tooltip="true" ></el-table-column>
+                <el-table-column prop="address" label="地址" :show-overflow-tooltip="true" ></el-table-column>
+                <el-table-column prop="city" label="City" :show-overflow-tooltip="true" ></el-table-column>
+                <el-table-column prop="state" label="State" :show-overflow-tooltip="true" ></el-table-column>
+                <el-table-column prop="zip" label="Zip" :show-overflow-tooltip="true" ></el-table-column>
+              </el-table>
             </div>
-           </div>
           </div>
-        
-      </div>
+         </div>
+        </div>
+      
     </div>
-  </template>
-  <script>
-  
-  
-  /**
-   * Index-1 component
-   */
-  export default {
-    name:"platform",
-    components: {
-    },
-    data(){
-      return {
-        activeName: 'second',
-        activeIndex: 0, // 默认选中第一个按钮
-        buttons: [
-          { label: '亚马逊仓库地址',transportMode:'OCEAN' },
-          { label: '仓库地址分布图',transportMode:'AIR' },
-          { label: 'AMAZON注册',transportMode:'RAIL' }
-        ],
-        tableData: [
-        {
-          fbacode: 'PHX3',
-          address: '6835 W. Buckeye Rd',
-          city: 'Phoenix',
-          state: 'AZ',
-          zip: '85043'
-        },
-        {
-          fbacode: 'PHX3',
-          address: '6835 W. Buckeye Rd',
-          city: 'Phoenix',
-          state: 'AZ',
-          zip: '85043'
-        },
-        {
-          fbacode: 'PHX3',
-          address: '6835 W. Buckeye Rd',
-          city: 'Phoenix',
-          state: 'AZ',
-          zip: '85043'
-        },
-        // ... 更多数据项
-      ]
-      }
-    },
-    methods: {
-      handleClick(tab, event) {
-          console.log(tab, event);
-        },
-      setActive(item,index) {
-        if(index === 0){
-          this.$router.push({
-            name:'platform'
-          })
-        }else if(index === 1){
-          this.$router.push({
-            name:'warehouseMap'
-          })
-        }else if(index === 2){
-          this.$router.push({
-            name:'AMAZON'
-          })
-        }
-        // this.activeIndex = index;
-        
-  
+  </div>
+</template>
+<script>
+
+
+/**
+ * Index-1 component
+ */
+export default {
+  name:"platform",
+  components: {
+  },
+  data(){
+    return {
+      activeName: 'second',
+      activeIndex: 0, // 默认选中第一个按钮
+      buttons: [
+        { label: '亚马逊仓库地址',transportMode:'OCEAN' },
+        { label: '仓库地址分布图',transportMode:'AIR' },
+        { label: 'AMAZON注册',transportMode:'RAIL' }
+      ],
+      tableData: [
+      {
+        fbacode: 'PHX3',
+        address: '6835 W. Buckeye Rd',
+        city: 'Phoenix',
+        state: 'AZ',
+        zip: '85043'
+      },
+      {
+        fbacode: 'PHX3',
+        address: '6835 W. Buckeye Rd',
+        city: 'Phoenix',
+        state: 'AZ',
+        zip: '85043'
       },
+      {
+        fbacode: 'PHX3',
+        address: '6835 W. Buckeye Rd',
+        city: 'Phoenix',
+        state: 'AZ',
+        zip: '85043'
+      },
+      // ... 更多数据项
+    ]
     }
-  };
-  </script>
-  <style src="./index.css" scoped></style>
\ No newline at end of file
+  },
+  methods: {
+    handleClick(tab, event) {
+        console.log(tab, event);
+      },
+    setActive(item,index) {
+      if(index === 0){
+        this.$router.push({
+          name:'platform'
+        })
+      }else if(index === 1){
+        this.$router.push({
+          name:'warehouseMap'
+        })
+      }else if(index === 2){
+        this.$router.push({
+          name:'AMAZON'
+        })
+      }
+      // this.activeIndex = index;
+      
+
+    },
+  }
+};
+</script>
+<style src="./index.css" scoped></style>
\ No newline at end of file