修改窗口页面

src/App.vue

@@ -99,7 +99,7 @@ a {
 }
 
 .content-content {
-  height: 46.375rem;
+  height: 48.375rem;
   border: 0.0625rem solid #B3D4FF;
   border-radius: 1.25rem;
   margin-top: 0.9375rem;

src/components/Pagination/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div :class="{ hidden: hidden }" class="pagination-container">
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+// import { scrollTo } from '@/utils/scroll-to'
+
+export default {
+  name: "PaginaTion",
+  props: {
+    total: {
+      required: true,
+      type: Number,
+    },
+    page: {
+      type: Number,
+      default: 1,
+    },
+    limit: {
+      type: Number,
+      default: 10,
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50];
+      },
+    },
+    layout: {
+      type: String,
+      default: "prev, pager, next",
+    },
+    background: {
+      type: Boolean,
+      default: true,
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true,
+    },
+    hidden: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page;
+      },
+      set(val) {
+        this.$emit("update:page", val);
+      },
+    },
+    pageSize: {
+      get() {
+        return this.limit;
+      },
+      set(val) {
+        this.$emit("update:limit", val);
+        this.$emit("update:page", 1);
+      },
+    },
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.$emit("pagination", { page: this.page, limit: val });
+      if (this.autoScroll) {
+        // scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit("pagination", { page: val, limit: this.pageSize });
+      if (this.autoScroll) {
+        // scrollTo(0, 800)
+      }
+    },
+  },
+};
+</script>
+
+<style  scoped>
+.pagination-container {
+  /* background: #fff; */
+  /* padding: 32px 16px; */
+}
+.pagination-container.hidden {
+  display: none;
+}
+::v-deep .el-pagination.is-background .el-pager li {
+  background: #033d68;
+  border: 1px solid #36abd4;
+  border-radius: 4px;
+  color: #d4ecf6;
+}
+::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
+  background: #1b9ae6 !important;
+  color: #ffffff !important;
+}
+::v-deep .btn-prev {
+  border: 1px solid #36abd4;
+  border-radius: 4px;
+  background: #033d68 !important;
+}
+::v-deep .btn-next {
+  border: 1px solid #36abd4;
+  border-radius: 4px;
+  background: #033d68 !important;
+}
+::v-deep .el-pagination.is-background .btn-prev {
+  color: #d4ecf6;
+}
+::v-deep .el-pagination.is-background .btn-next {
+  color: #d4ecf6;
+}
+::v-deep .el-pagination.is-background .btn-next:disabled {
+  color: #d4ecf6 !important;
+}
+::v-deep .el-pagination.is-background .btn-prev:disabled {
+  color: #d4ecf6 !important;
+}
+</style>

src/main.js

@@ -4,6 +4,9 @@ import router from './router'
 import store from './store'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
+import Pagination from '@/components/Pagination'
+
+Vue.component('Pagination', Pagination)
 
 Vue.config.productionTip = false
 Vue.use(router);

src/views/Main.vue

@@ -187,7 +187,7 @@ export default {
   }
 }
 </script>
-<style>
+<style scoped>
 .el-dialog__headerbtn {
   display: none;
 }

src/views/WindowLayout.vue

@@ -2,28 +2,34 @@
   <div>
     <div class="content type-ckbj" data-item="type-ckbj">
       <div class="content-title">
-        <img src="images/title-ckbj.png" alt=""><span>窗口布局</span>
+        <img src="images/title-ckbj.png" alt="" /><span>窗口布局</span>
       </div>
       <div class="content-content">
         <ul class="taps-left">
-          <li @click="liTo(1)" v-bind:class='{ click: 1 == qwerqwre }'>一楼</li>
-          <li @click="liTo(2)" v-bind:class='{ click: 2 == qwerqwre }'>二楼</li>
-          <li @click="liTo(3)" v-bind:class='{ click: 3 == qwerqwre }'>三楼</li>
+          <li @click="liTo(1)" v-bind:class="{ click: 1 == qwerqwre }">一楼</li>
+          <li @click="liTo(2)" v-bind:class="{ click: 2 == qwerqwre }">二楼</li>
+          <li @click="liTo(3)" v-bind:class="{ click: 3 == qwerqwre }">三楼</li>
         </ul>
-        <div style="position:absolute;margin-left: 312px;margin-top: 55px;">
+        <!-- <div style="position:absolute;margin-left: 312px;margin-top: 55px;">
           <p style="font-size: 22px;color: #ffffff;position:absolute;margin-left: 76px;margin-top: 20px;">南岸区政务服务中心</p>
           <img src="images/ckbj-zw.png">
+        </div> -->
+        <div v-if="qwerqwre == 1" class="tabs-right">
+          <img src="images/oneFloor.png" />
+        </div>
+        <div v-if="qwerqwre == 2" class="tabs-right">
+          <img src="images/secondFloor.png" />
+        </div>
+        <div v-if="qwerqwre == 3" class="tabs-right">
+          <img src="images/thirdFloor.png" />
         </div>
-        <div v-if="qwerqwre == 1" class="tabs-right"><img src="images/oneFloor.png"></div>
-        <div v-if="qwerqwre == 2" class="tabs-right"><img src="images/secondFloor.png"></div>
-        <div v-if="qwerqwre == 3" class="tabs-right"><img src="images/thirdFloor.png"></div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import api from '../api/index';
+import api from "../api/index";
 
 export default {
   name: "windowLayout",
@@ -33,8 +39,8 @@ export default {
   data() {
     return {
       qwerqwre: 1,
-      ImageUrl: 'images/oneFloor.png'
-    }
+      ImageUrl: "images/oneFloor.png",
+    };
   },
   methods: {
     getData() {
@@ -54,7 +60,7 @@ export default {
     liTo(obj) {
       this.qwerqwre = obj;
       // this.getData();
-    }
+    },
   },
   mounted() {
     //设置多少秒跳转
@@ -71,30 +77,30 @@ export default {
     }, 1000);
 
     //设置各类监听事件
-    var body = document.querySelector('html');
+    var body = document.querySelector("html");
     body.addEventListener("click", function () {
-      myTime = mtReturnTime
+      myTime = mtReturnTime;
     });
 
     body.addEventListener("keydown", function () {
-      myTime = mtReturnTime
+      myTime = mtReturnTime;
     });
     body.addEventListener("mousemove", function () {
-      myTime = mtReturnTime
+      myTime = mtReturnTime;
     });
     body.addEventListener("mousewheel", function () {
-      myTime = mtReturnTime
+      myTime = mtReturnTime;
     });
     document.addEventListener("scroll", function () {
-      myTime = mtReturnTime
+      myTime = mtReturnTime;
     });
   },
   //页面关闭销毁定时器
   beforeDestroy() {
     clearInterval(this.timer);
     this.timer = null;
-  }
-}
+  },
+};
 </script>
 
 <style scoped>
@@ -106,7 +112,10 @@ export default {
 
 .type-ckbj .content-content {
   position: relative;
-  background: rgb(0, 0, 0, 0.4);
+  /* background: rgb(0, 0, 0, 0.4);
+   */
+  background: url("../../public/images/kuang.png");
+  background-size: 100% 100%;
 }
 
 .taps-left {
@@ -120,24 +129,24 @@ export default {
   width: 6.75rem;
   height: 2.5rem;
   line-height: 2.5rem;
-  background: #A37C67;
+  background: #a37c67;
   text-align: center;
   margin-top: 0.625rem;
   font-size: 1.125rem;
   font-weight: 800;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .taps-left li.click {
-  background: #CBB486;
+  background: #cbb486;
 }
 
 .tabs-right {
   width: 70rem;
   height: 43.6875rem;
   /* margin-left: 345px; */
-  margin-left: 200px;
-  margin-top: 105px;
+  /* margin-left: 200px; */
+  margin-top: 60px;
   background-size: 100% 100%;
 }
 </style>