diff --git a/src/views/berthsection.vue b/src/views/berthsection.vue
new file mode 100644
index 0000000..fc8910f
--- /dev/null
+++ b/src/views/berthsection.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <titlesection title="泊位"></titlesection>
+    <totalsection :totalNum="totalVal"></totalsection>
+    <ul class="flexfm berth-wrap">
+      <li></li>
+      <li>
+        <div>
+          <p><span class="free">{{ free|formatNum }}</span> <span>空余</span></p>
+        </div>
+        <div>
+          <p><span class="nofree">{{ nofree|formatNum }}</span> <span>占有</span></p>
+        </div>
+
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import titlesection from '../components/titlesection'
+import totalsection from '../components/total'
+import { formatNum } from '../filters/filters'
+import {fetchList} from '../api/api'
+
+export default {
+  name: 'berthsection',
+  components: {
+    titlesection,
+    totalsection
+  },
+  data() {
+    return {
+      totalVal: '21973',
+      free: '454123',
+      nofree: '5125'
+    }
+  },
+  created() {
+  },
+  methods: {
+    getList() {
+      fetchList()
+      .then(res => {
+        console.log(res);
+
+      });
+    },
+  }
+}
+</script>
+
+<style lang="scss"  scoped>
+  .berth-wrap {
+    display: flex;
+    li{
+      flex: 1;
+      div{
+        height: 50%;
+        display: flex;
+        align-items:center;
+        p{
+          height: 24px;
+          color: #fff;
+          font-size: 12px;
+          .free{
+            @include fonttextStyle(24px);
+            background-image: $fontBlue;
+          }
+          .nofree{
+            @include fonttextStyle(24px);
+            background-image: $fontOrange;
+          }
+          span:nth-of-type(1){
+            width: 100px;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/mainContainer.vue b/src/views/mainContainer.vue
index 4939bd8..d9d9dd5 100644
--- a/src/views/mainContainer.vue
+++ b/src/views/mainContainer.vue
@@ -12,7 +12,7 @@
       </li>
       <li>
         <sfysection class="sectionsmall"></sfysection>
-        <div class="sectionsmall margin12-0"></div>
+        <berthsection class="sectionsmall margin12-0"></berthsection>
         <div class="sectionsmall"></div>
       </li>
     </ul>
@@ -26,6 +26,7 @@ import pdasection from '../views/pdasection'
 import dicisection from '../views/dicisection'
 import youdaopingsection from '../views/youdaopingsection'
 import sfysection from '../views/sfysection'
+import berthsection from '../views/berthsection'
 
 export default {
   name: 'mainContainer',
@@ -34,7 +35,8 @@ export default {
     pdasection,
     dicisection,
     youdaopingsection,
-    sfysection
+    sfysection,
+    berthsection
   },
   data() {
     return {