diff --git a/package.json b/package.json
index fd61ed4..d0d32b2 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "scss-loader": "^0.0.1",
     "style-loader": "^1.1.2",
     "swiper": "^4.2.1",
+    "v-page": "^2.0.8",
     "vue": "^2.5.2",
     "vue-awesome-swiper": "^3.1.3",
     "vue-loader": "^13.7.3",
diff --git a/src/assets/css/commonCss/reset.css b/src/assets/css/commonCss/reset.css
index f36b823..79a1870 100644
--- a/src/assets/css/commonCss/reset.css
+++ b/src/assets/css/commonCss/reset.css
@@ -163,51 +163,8 @@ table {
 }
 
  /*分页*/
-.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;
+.v-pagination{
+  margin: 20px auto;
 }
 
 
diff --git a/src/main.js b/src/main.js
index 7b37aa7..cd9a431 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,9 @@ import router from './router'
 import 'swiper/dist/css/swiper.css';
 
 
+import VPage from 'v-page';
+Vue.use(VPage);
+
 
 require ('./assets/css/commonCss/reset.css')
 
diff --git a/src/views/product/components/selectTab0.vue b/src/views/product/components/selectTab0.vue
index 60a0645..9b3c27a 100644
--- a/src/views/product/components/selectTab0.vue
+++ b/src/views/product/components/selectTab0.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="widthCommon">
+    <div class="widthCommon" style="margin-bottom: 20px">
       <ul class="tabCon">
         <li v-for="i in 10" :key="i">
           <div class="tabListImg">
@@ -9,6 +9,9 @@
         </li>
       </ul>
 
+      <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange">
+      </v-page>
+
     </div>
 </template>
 
@@ -16,7 +19,11 @@
 
 export default {
   name: 'selectTab0',
-
+  methods:{
+    pagePhotoChange:function (pInfo) {
+      console.log(pInfo)
+    }
+  }
 
 }
 </script>
diff --git a/src/views/product/components/selectTab1.vue b/src/views/product/components/selectTab1.vue
index 0f5b553..2f617c6 100644
--- a/src/views/product/components/selectTab1.vue
+++ b/src/views/product/components/selectTab1.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="widthCommon">
+  <div class="widthCommon" style="margin-bottom: 20px">
     <ul class="tabCon">
       <li v-for="i in 10" :key="i">
         <div class="tabListImg">
@@ -9,6 +9,9 @@
       </li>
     </ul>
 
+    <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange">
+    </v-page>
+
   </div>
 </template>
 
@@ -16,7 +19,11 @@
 
 export default {
   name: 'selectTab1',
-
+  methods:{
+    pagePhotoChange:function (pInfo) {
+      console.log(pInfo)
+    }
+  }
 
 }
 </script>
diff --git a/src/views/product/components/selectTab2.vue b/src/views/product/components/selectTab2.vue
index 6aac0b7..fa2b821 100644
--- a/src/views/product/components/selectTab2.vue
+++ b/src/views/product/components/selectTab2.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="widthCommon">
+  <div class="widthCommon" style="margin-bottom: 20px">
     <ul class="tabCon">
       <li v-for="i in 10" :key="i">
         <div class="tabListImg">
@@ -9,6 +9,9 @@
       </li>
     </ul>
 
+    <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange">
+    </v-page>
+
   </div>
 </template>
 
@@ -16,7 +19,11 @@
 
 export default {
   name: 'selectTab2',
-
+  methods:{
+    pagePhotoChange:function (pInfo) {
+      console.log(pInfo)
+    }
+  }
 
 }
 </script>