diff --git a/package.json b/package.json
index e5cdc8d..a8e52b3 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,8 @@
     "vue-awesome-swiper": "^3.1.3",
     "vue-loader": "^13.7.3",
     "vue-router": "^3.0.1",
-    "vue-style-loader": "^3.1.2"
+    "vue-style-loader": "^3.1.2",
+    "vue_pageination": "^1.1.2"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
diff --git a/src/assets/css/commonCss/reset.css b/src/assets/css/commonCss/reset.css
index dda4ac5..20032c2 100644
--- a/src/assets/css/commonCss/reset.css
+++ b/src/assets/css/commonCss/reset.css
@@ -128,7 +128,7 @@ table {
 .flexfm{
   flex: 1;
 }
-
+/*定位*/
 .pos-rel{
   position: relative;
 }
@@ -140,10 +140,11 @@ table {
 .nav-active{
   color: #F00;
 }
-
+/*banner上下间距*/
 .textCommonPadding{
   padding: 49px 0;
 }
+/*banner蓝色字*/
 .heading-text{
   padding-bottom: 29px;
   text-align: center;
@@ -155,10 +156,60 @@ table {
   color: #333;
   text-align: center;
 }
+/*灰色背景*/
 .bgCommon{
   background:rgba(238,238,238,1);
 }
+/*手指鼠标*/
 .pointer{
   cursor: pointer;
 }
 
+ /*分页*/
+.pageination_align {
+  text-align: center
+}
+
+.pageination {
+  color: #48576a;
+  font-size: 12px;
+  display: inline-block;
+  user-select: none;
+}
+
+.pagination_page {
+  padding: 0 4px;
+  border: 1px solid #d1dbe5;
+  border-right: 0;
+  background: #fff;
+  font-size: 13px;
+  min-width: 28px;
+  height: 28px;
+  line-height: 28px;
+  cursor: pointer;
+  box-sizing: border-box;
+  text-align: center;
+  float: left;
+}
+
+.pagination_page_right {
+  border-right: 1px solid #d1dbe5;
+}
+
+.pagination_page:hover {
+  color: #20a0ff;
+}
+
+.disabled {
+  color: #e4e4e4 !important;
+  background-color: #fff;
+  cursor: not-allowed;
+}
+
+.pagination_page_active {
+  border-color: #20a0ff;
+  background-color: #20a0ff;
+  color: #fff !important;;
+  cursor: default;
+}
+
diff --git a/src/assets/images/product/tablist0.png b/src/assets/images/product/tablist0.png
new file mode 100644
index 0000000..1632f65
--- /dev/null
+++ b/src/assets/images/product/tablist0.png
diff --git a/src/assets/images/product/tablist1.png b/src/assets/images/product/tablist1.png
new file mode 100644
index 0000000..fda71d1
--- /dev/null
+++ b/src/assets/images/product/tablist1.png
diff --git a/src/assets/images/product/tablist2.png b/src/assets/images/product/tablist2.png
new file mode 100644
index 0000000..60657d5
--- /dev/null
+++ b/src/assets/images/product/tablist2.png
diff --git a/src/views/product/components/selectTab0.vue b/src/views/product/components/selectTab0.vue
index fd71aef..60a0645 100644
--- a/src/views/product/components/selectTab0.vue
+++ b/src/views/product/components/selectTab0.vue
@@ -1,13 +1,54 @@
 <template>
-    <div>0</div>
+    <div class="widthCommon">
+      <ul class="tabCon">
+        <li v-for="i in 10" :key="i">
+          <div class="tabListImg">
+            <img src="../../../assets/images/product/tablist0.png" alt="">
+          </div>
+          <p class="tabListText">城市级智慧停车云平台</p>
+        </li>
+      </ul>
+
+    </div>
 </template>
 
 <script>
+
 export default {
-  name: 'selectTab0'
+  name: 'selectTab0',
+
+
 }
 </script>
 
 <style scoped lang="scss">
-
+.tabCon{
+  overflow: hidden;
+}
+  .tabCon li{
+    width: 427px;
+    height: 360px;
+    margin: 0 30px 30px 0;
+    float: left;
+  }
+.tabCon li:nth-child(3n+0){
+  margin-right: 0;
+}
+  .tabListImg{
+    width:427px;
+    height:321px;
+    padding: 10px 10px;
+    background:rgba(255,255,255,1);
+    border:2px solid rgba(203,203,203,1);
+  }
+  .tabListText{
+    margin-top: 20px;
+    font-size: 14px;
+    color: #333;
+    text-align: center;
+  }
+  .tabListImg img{
+    width: 407px;
+    height: 301px;
+  }
 </style>
diff --git a/src/views/product/components/selectTab1.vue b/src/views/product/components/selectTab1.vue
index eed9c43..0f5b553 100644
--- a/src/views/product/components/selectTab1.vue
+++ b/src/views/product/components/selectTab1.vue
@@ -1,13 +1,54 @@
 <template>
-    <div>1</div>
+  <div class="widthCommon">
+    <ul class="tabCon">
+      <li v-for="i in 10" :key="i">
+        <div class="tabListImg">
+          <img src="../../../assets/images/product/tablist1.png" alt="">
+        </div>
+        <p class="tabListText">城市级智慧停车云平台</p>
+      </li>
+    </ul>
+
+  </div>
 </template>
 
 <script>
+
 export default {
-  name: 'selectTab1'
+  name: 'selectTab1',
+
+
 }
 </script>
 
 <style scoped lang="scss">
-
+  .tabCon{
+    overflow: hidden;
+  }
+  .tabCon li{
+    width: 427px;
+    height: 360px;
+    margin: 0 30px 30px 0;
+    float: left;
+  }
+  .tabCon li:nth-child(3n+0){
+    margin-right: 0;
+  }
+  .tabListImg{
+    width:427px;
+    height:321px;
+    padding: 10px 10px;
+    background:rgba(255,255,255,1);
+    border:2px solid rgba(203,203,203,1);
+  }
+  .tabListText{
+    margin-top: 20px;
+    font-size: 14px;
+    color: #333;
+    text-align: center;
+  }
+  .tabListImg img{
+    width: 407px;
+    height: 301px;
+  }
 </style>
diff --git a/src/views/product/components/selectTab2.vue b/src/views/product/components/selectTab2.vue
index 1c66ceb..6aac0b7 100644
--- a/src/views/product/components/selectTab2.vue
+++ b/src/views/product/components/selectTab2.vue
@@ -1,13 +1,54 @@
 <template>
-    <div>2</div>
+  <div class="widthCommon">
+    <ul class="tabCon">
+      <li v-for="i in 10" :key="i">
+        <div class="tabListImg">
+          <img src="../../../assets/images/product/tablist2.png" alt="">
+        </div>
+        <p class="tabListText">城市级智慧停车云平台</p>
+      </li>
+    </ul>
+
+  </div>
 </template>
 
 <script>
+
 export default {
-  name: 'selectTab2'
+  name: 'selectTab2',
+
+
 }
 </script>
 
 <style scoped lang="scss">
-
+  .tabCon{
+    overflow: hidden;
+  }
+  .tabCon li{
+    width: 427px;
+    height: 360px;
+    margin: 0 30px 30px 0;
+    float: left;
+  }
+  .tabCon li:nth-child(3n+0){
+    margin-right: 0;
+  }
+  .tabListImg{
+    width:427px;
+    height:321px;
+    padding: 10px 10px;
+    background:rgba(255,255,255,1);
+    border:2px solid rgba(203,203,203,1);
+  }
+  .tabListText{
+    margin-top: 20px;
+    font-size: 14px;
+    color: #333;
+    text-align: center;
+  }
+  .tabListImg img{
+    width: 407px;
+    height: 301px;
+  }
 </style>