导航页样式，入库页样式，分页

components/NavBar.vue

@@ -52,21 +52,26 @@
 @import '@/common/style/mixin.styl';
 .header
 	_fj()
-	_wh(100%, 42px)
-	background-color #fff
+	_wh(100%, 90rpx)
+	background-color #041427
+	border-bottom 1rpx solid #13568B
 	z-index 200
-	padding 0 15px
-	box-shadow: 0 2px 4px 0 rgba(0,0,0,.05);
+	padding 0 30rpx
+	box-shadow: 0 2rpx 4rpx 0 RGBA(19, 86, 139, 0.5);
 .page_name
-	_font(16px, 20px, #000,700,center)
+	_font(50rpx, 90rpx, #F6F9FE,700,center)
+	font-family: YouSheBiaoTiHei
+	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(49,190,255,0.9) 0%, rgba(239,252,254,1) 40%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
 .icon_back {
-	font-size: 30px;
-	line-height: 30px;
-	color: #666;
+	font-size: 60rpx;
+	line-height: 60rpx;
+	color: #fff;
 }
 .icon_home {
-	font-size: 30px;
-	line-height: 30px;
-	color: #666;
+	font-size: 60rpx;
+	line-height: 60rpx;
+	color: #fff;
 }
 </style>

components/Pagination.vue

@@ -0,0 +1,89 @@
+<template>
+  <view class="pagination">
+    <text :disabled="page <= 1" @click="gotoPage(page - 1)"><</text>
+    <text v-for="item in pages" :key="getItemKey(item)" :class="{ active: item === page, ellipsis: item === '...' }" @click="gotoPage(item)">{{ item }}</text>
+    <text :disabled="page >= totalPages" @click="gotoPage(page + 1)">></text>
+  </view>
+</template>
+ 
+<script>
+export default {
+  name: 'Pagination',
+  props: {
+    total: { // 总条目数
+      type: Number,
+      required: true
+    },
+    pageSize: { // 每页显示的条目数
+      type: Number,
+      default: 10
+    },
+    currentPage: { // 当前页码
+      type: Number,
+      default: 1
+    }
+  },
+  computed: {
+    totalPages() { // 总页数
+      return Math.ceil(this.total / this.pageSize)
+    },
+    page() { // 当前页码，限定在 1 和总页数之间
+      return Math.max(1, Math.min(this.currentPage, this.totalPages))
+    },
+    pages() { // 可点击的页码数组，最多显示 5 个页码
+      const arr = []
+      let start = Math.max(this.page - 2, 1)
+      let end = Math.min(start + 4, this.totalPages)
+      if (end - start < 4) {
+        end = Math.min(start + 4, this.totalPages)
+        start = Math.max(end - 4, 1)
+      }
+      for (let i = start; i <= end; i++) {
+        arr.push(i)
+      }
+      if (end < this.totalPages) {
+        arr.push('...', this.totalPages)
+      }
+      return arr
+    }
+  },
+  methods: {
+    getItemKey(item) { // 获取项的 key
+      return typeof item === 'number' ? item.toString() : item
+    },
+    gotoPage(page) { // 跳转到指定页码
+      if (page > 0 && page <= this.totalPages) {
+        this.$emit('page-change', page)
+      }
+    }
+  }
+}
+</script>
+ 
+<style lang="stylus" scoped>
+@import '@/common/style/mixin.styl';
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;;
+  margin-top: 40rpx;
+}
+text {
+  display: inline-block;
+  padding: 0 20rpx;
+  background-color: #fff;
+  border: 2rpx solid #ddd;
+  border-radius: 6rpx;
+  margin-right: 20rpx;
+  _font(30rpx, 70rpx, #053978,,)
+}
+ 
+text.active {
+  background-color: #053978;
+  color: #fff;
+}
+ 
+text.ellipsis {
+  cursor: default;
+}
+</style>

components/SearchBox.vue

@@ -125,30 +125,30 @@
 <style lang="stylus">
 @import '../common/style/mixin.styl';
 .search_wraper
-	_wh(100%, 38px)
-	padding 0 2px 0 12px
-	border 1px solid #e1e1e1
+	_wh(100%, 76rpx)
+	padding 0 4rpx 0 24rpx
+	border 1rpx solid #e1e1e1
 	background-color #fff
-	border-radius 12px
+	border-radius 12rpx
 .search_input
 	width 100%
-	height: 38px;
-	line-height: 38px;
-	font-size: 14px;
+	height: 76rpx;
+	line-height: 76rpx;
+	font-size: 28rpx;
 	color: #6a6a6a
 .icon-del
-	_wh(35px, 35px)
-	margin-right 5px
-	_font(20px,35px,#a2b6cc,,center)
+	_wh(70rpx, 70rpx)
+	margin-right 10rpx
+	_font(40rpx,70rpx,#a2b6cc,,center)
 .icon_scan
-	_wh(70px, 30px)
-	_font(20px,30px,#fff,,center)
-	background-color $red
-	border-radius 12px
+	_wh(140rpx, 60rpx)
+	_font(40rpx,60rpx,#fff,,center)
+	background-color #3CC1FF 
+	border-radius 24rpx
 .icon_search
-	_wh(35px, 35px)
-	_font(20px,35px,#a2b6cc,,center)
+	_wh(70rpx, 70rpx)
+	_font(40rpx,70rpx,#a2b6cc,,center)
 .input_focus
-	border: 1px solid #889dc7;
-	box-shadow: 0 0 0 2px rgba(136, 157, 199,.2);
+	border: 1rpx solid #889dc7;
+	box-shadow: 0 0 0 2rpx rgba(136, 157, 199,.2);
 </style>