no message

src/views/Forestage/Tourism/index.vue

@@ -23,16 +23,19 @@
 					</div>
 				</div>
 			</div>
+
+      <div class="justify-right mt-30 p-b-33">
+        <el-pagination
+          class="pagination-data"
+          background
+          layout="prev, pager, next"
+          :page-size="20"
+          :total="total" :current-page="page" @current-change="currentChange">
+        </el-pagination>
+      </div>
+
 		</div>
-    <div class="justify-right p-b-33">
-      <el-pagination
-        class="pagination-data"
-        background
-        layout="prev, pager, next"
-        :page-size="20"
-        :total="total">
-      </el-pagination>
-    </div>
+
 
     <order-sett ref="orderSett"></order-sett>
 	</div>
@@ -102,13 +105,8 @@
           page:this.page
 				}).then((res) => {
 					if (res.code == 1) {
-            this.total=res.data.total
-            if(this.page===1){
-              this.goodsList = res.data.list;
-            }else {
-              this.goodsList.push(...res.data.list);
-            }
-            ++this.page
+            this.total = res.data.total
+            this.goodsList = res.data.list;
 					}
 				})
 			},
@@ -118,6 +116,12 @@
 					this.getlist();
 				}
 			},
+
+      currentChange(val){
+        this.page = val;
+        this.getlist();
+      },
+
 			pay(item) {
         let  token= localStorage.getItem('userToken')
         if (token){
@@ -147,51 +151,35 @@
 </script>
 
 <style scoped lang="scss">
-.pagination-data{
-  background-color: rgba(0,0,0,0);
-}
-.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
-  background: transparent;
-}
-.el-pagination.is-background .el-pager li:not(.disabled).active{
-  background: #2D7EF9;
-  border-radius: 10px;
-}
-.el-pagination__jump{
-  color: #718096;
-}
-.el-pagination__editor{
-  margin: 0 8px 0 0;
-}
-.el-pagination__editor.el-input .el-input__inner{
-  width: 38px;
-  height: 38px;
-  margin: 0 8px;
-}
-.el-pagination button, .el-pagination span:not([class*=suffix]){
-  line-height: 38px;
-}
-.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
-  background: transparent;
-}
-.el-pagination.is-background .el-pager li:not(.disabled).active{
-  background: #2D7EF9;
-  border-radius: 10px;
-}
-.el-pagination__jump{
-  color: #718096;
-}
-.el-pagination__editor{
-  margin: 0 8px 0 0;
-}
-.el-pagination__editor.el-input .el-input__inner{
-  width: 38px;
-  height: 38px;
-  margin: 0 8px;
-}
-.el-pagination button, .el-pagination span:not([class*=suffix]){
-  line-height: 38px;
-}
+
+  .mtb-20{
+    margin: 20px 0;
+  }
+
+  ::v-deep .el-pagination{
+    .btn-prev{
+      background-color: #C7AB7B !important;
+      color: #333 !important;
+    }
+    .btn-next{
+      background-color: #C7AB7B !important;
+      color: #333 !important;
+    }
+    .number{
+      opacity: 0.3;
+    }
+    .active {
+        background-color: #C7AB7B !important;
+        color: #333 !important;
+        opacity: 0.8 !important;
+    }
+
+
+
+  }
+
+
+
 	.tourism-box {
 		padding-top: 70px;
 		min-height: 100vh;