diff --git a/webintroduce/src/assets/images/enterprise/close.png b/webintroduce/src/assets/images/enterprise/close.png
new file mode 100644
index 0000000..eb7710d
--- /dev/null
+++ b/webintroduce/src/assets/images/enterprise/close.png
diff --git a/webintroduce/src/assets/images/enterprise/guide.png b/webintroduce/src/assets/images/enterprise/guide.png
new file mode 100644
index 0000000..028d51e
--- /dev/null
+++ b/webintroduce/src/assets/images/enterprise/guide.png
diff --git a/webintroduce/src/components/Vsetion.vue b/webintroduce/src/components/Vsetion.vue
new file mode 100644
index 0000000..2f8338e
--- /dev/null
+++ b/webintroduce/src/components/Vsetion.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="detail-section displayFlex" :style="{height:setionheight,'flex-direction':rowReverse}">
+    <div  class="detail-section-bg" :style="{backgroundImage:'url('+bgImg+')'}"></div>
+    <div  class="detail-section-list pos-rel">
+      <div>
+        <p class="detail-list-title">{{mytitle}}</p>
+        <ul class="detail-list">
+          <li v-for="(list,index) in insideList" :key="index">
+            {{list}}
+          </li>
+        </ul>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Vsetion',
+  props:{
+    mytitle: String,
+    rowReverse:String,
+    setionheight:String,
+    bgImg:String,
+    insideList:{
+      type:Array
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .detail-section{
+    width: 1100px;
+    margin: 94px auto 0;
+    >div{
+      flex: 1;
+    }
+  }
+  .detail-section-bg{
+    background: url("../assets/images/enterprise/inside.png") no-repeat center center;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  .detail-section-list{
+    text-align: left;
+    div{
+      @include pos-middle;
+    }
+  }
+  .detail-list-title{
+    display: inline-block;
+    padding: 4px 10px 2px;
+    margin-bottom: 10px;
+    text-align: left;
+    background: #14BACE;
+    font-size: 24px;
+    color: #fff;
+    border-radius: 2px;
+  }
+  .detail-list li{
+    margin-top: 10px;
+    font-size: 16px;
+    color: rgba(0,0,0,.6);
+    white-space: nowrap;
+    position: relative;
+    padding-left: 19px;
+    &:before{
+      content: '';
+      width: 6px;
+      height: 6px;
+      position: absolute;
+      border-radius: 50%;
+      top:50%;
+      left: 5px;
+      transform: translateY(-50%);
+      background-color: #70CCBB;
+    }
+  }
+</style>
diff --git a/webintroduce/src/views/enterprise.vue b/webintroduce/src/views/enterprise.vue
index 88abf6a..3662251 100644
--- a/webintroduce/src/views/enterprise.vue
+++ b/webintroduce/src/views/enterprise.vue
@@ -14,37 +14,66 @@
       </div>
 
       <div class="detail-con">
-        <div class="detail-section displayFlex" style="height:291px;width: 1100px; ">
-          <div style="flex: 1" class="detail-section-left"></div>
-          <div style="flex: 1" class="detail-section-right pos-rel">
-            <div>
-              <p class="detail-right-title">路内停车管理</p>
-              <ul class="detail-list">
-                <li>
-                 实时采集车位状态停车时长，后台实时监管后台实时监管
-                </li>
-                <li>
-                  精确记录停车时长，后台实时监管后台实时监管
-                </li>
-                <li>
-                  有效杜绝跑冒滴漏
-                </li>
-                <li>
-                  停车入位、规范有序、智能有偿
-                </li>
-              </ul>
-            </div>
+        <Vsetion
+        mytitle="路内停车管理"
+        v-bind:insideList="insideList"
+        rowReverse=""
+        setionheight="291px"
+        v-bind:bgImg="InsideImg"
+        ></Vsetion>
 
-          </div>
-        </div>
+        <Vsetion
+          mytitle="封闭式停车无人值守管理"
+          v-bind:insideList="closeList"
+          rowReverse="row-reverse"
+          setionheight="263px"
+          v-bind:bgImg="CloseImg"
+        ></Vsetion>
+
+        <Vsetion
+          mytitle="城市停车诱导系统"
+          v-bind:insideList="guideList"
+          rowReverse=""
+          setionheight="263px"
+          v-bind:bgImg="guideImg"
+        ></Vsetion>
       </div>
 
     </div>
 </template>
 
 <script>
+import Vsetion from '../components/Vsetion'
 export default {
-  name: 'VEnterprise'
+  name: 'VEnterprise',
+  components:{
+    Vsetion
+  },
+  data(){
+    return {
+      insideList:[
+        '实时采集车位状态停车时长，后台实时监管后台实时监管',
+        '精确记录停车时长，后台实时监管后台实时监管',
+        '有效杜绝跑冒滴漏',
+        '停车入位、规范有序、智能有偿',
+      ],
+      InsideImg: require('../assets/images/enterprise/inside.png'),
+      closeList:[
+        '无人值守，降低人工运营成本，提高车场收益',
+        '无人值守，降低人工运营成',
+        '无人值守，降低人工运营成本，提',
+      ],
+      CloseImg: require('../assets/images/enterprise/close.png'),
+      guideList:[
+        '城市停车三级诱导城市停车三级诱导城市停车三级诱导',
+        '实时交通路况展示（红、黄、绿）通路况展示（红、黄、绿）',
+        '停车场剩余泊位实时更新',
+        '减少停车时长，提高停车效率',
+        '缓解局部交通微循环，减少拥堵'
+      ],
+      guideImg: require('../assets/images/enterprise/guide.png')
+    }
+  }
 }
 </script>
 
@@ -85,44 +114,5 @@ export default {
   .detail-con{
     background: $baseWhiteBg;
   }
-  .detail-section{
-    margin: 94px auto 0;
-  }
-  .detail-section-left{
-    background: url("../assets/images/enterprise/inside.png") no-repeat center center;
-  }
-  .detail-section-right{
-    text-align: left;
-    div{
-      @include pos-middle;
-    }
-  }
-  .detail-right-title{
-    background: #14BACE;
-    padding: 4px 10px 2px;
-    text-align: left;
-    display: inline-block;
-    font-size: 24px;
-    color: #fff;
-    border-radius: 2px;
-  }
-  .detail-list li{
-    margin-top: 10px;
-    font-size: 16px;
-    color: rgba(0,0,0,.6);
-    white-space: nowrap;
-    position: relative;
-    padding-left: 19px;
-    &:before{
-      content: '';
-      width: 6px;
-      height: 6px;
-      position: absolute;
-      border-radius: 50%;
-      top:50%;
-      left: 5px;
-      transform: translateY(-50%);
-      background-color: #70CCBB;
-    }
-  }
+
 </style>