修改

App.vue

@@ -15,14 +15,14 @@
 	@import "uview-ui/index.scss";
 
 	/*每个页面公共css */
-	// page {
-	// 	background-color: #F4F5F7;
-	// }
+	page {
+		background-color: #F4F5F7;
+	}
 
-	// .app {
-	// 	width: 100%;
-	// 	height: 100%;
-	// 	text-align: justify;
-	// 	color: #000000;
-	// }
-</style>
+	.app {
+		width: 100%;
+		height: 100%;
+		text-align: justify;
+		color: #000000;
+	}
+</style>

package-lock.json

@@ -10,8 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "uview-ui": "^1.8.8"
-      },
-      "devDependencies": {}
+      }
     },
     "node_modules/uview-ui": {
       "version": "1.8.8",

pages.json

@@ -3,22 +3,20 @@
 		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
 	},
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
-				"path": "pages/index/index",
-				"style": {
-					"navigationBarTitleText": "",
-					"enablePullDownRefresh": false,
-					"navigationStyle": "custom"
-				}
-			},
-
 		{
 			"path": "pages/homepage/homepage",
+			"style": {
+				"enablePullDownRefresh": false,
+				"navigationBarTitleText": "工单"
+			}
+		}, {
+			"path": "pages/index/index",
 			"style": {
 				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
 			}
-		}, 
+		},
+
 		// {
 		// 	"path": "pages/login/login",
 		// 	"style": {
@@ -31,24 +29,22 @@
 			"path": "pages/myinformation/myinformation",
 			"style": {
 				"navigationBarTitleText": "我的",
-				"enablePullDownRefresh": false,
-				"navigationBarBackgroundColor": "#4ac4ab"
-
+				"enablePullDownRefresh": false
 				// "navigationStyle": "custom"
 			}
 		}
 	],
 	"globalStyle": {
-		"navigationBarTextStyle": "black",
+		"navigationBarTextStyle": "white",
 		"navigationBarTitleText": "",
-		"navigationBarBackgroundColor": "#F8F8F8",
+		"navigationBarBackgroundColor": "#18CBB3",
 		"backgroundColor": "#F8F8F8"
 	},
 	"uniIdRouter": {},
 	"tabBar": {
 		"color": "#7A7E83",
 		"selectedColor": "#435950",
-		"borderStyle": "black",
+		"borderStyle": "white",
 		"backgroundColor": "#ffffff",
 		"list": [{
 				"pagePath": "pages/homepage/homepage",
@@ -56,7 +52,6 @@
 				"selectedIconPath": "static/homepage.png",
 				"text": "首页"
 			},
-
 			{
 				"pagePath": "pages/myinformation/myinformation",
 				"iconPath": "static/myinformation.png",
@@ -65,4 +60,4 @@
 			}
 		]
 	}
-}
+}

pages/homepage/homepage.vue

@@ -1,7 +1,16 @@
 <template>
 	<view class="app">
-		<view class="content">
-			111
+		<u-tabs :list="tabslist" :is-scroll="false" :current="tabscurrent" @change="tabschange" inactive-color='#fff'
+			active-color='#fff'></u-tabs>
+		<view class="top">
+			<u-dropdown active-color='#26A888'>
+				<u-dropdown-item v-model="optionindex" :title="optionname" :options="options"
+					@change='dropitemchange'></u-dropdown-item>
+			</u-dropdown>
+			<view class="inputs">
+				<!-- <i class="icon"></i> -->
+				<!-- <input type="text" name="" id="" class="input" placeholder="搜索" v-model="query.label"> -->
+			</view>
 		</view>
 	</view>
 </template>
@@ -10,16 +19,130 @@
 	export default {
 		data() {
 			return {
+				tabslist: [{
+					name: '全部工单'
+				}, {
+					name: '我的工单'
+				}, {
+					name: '已完成工单',
+				}],
+				tabscurrent: 0,
+				optionindex: 1,
+				optionname: '待处理',
+				options: [{
+					label: '待处理',
+					value: 1,
+				}, {
+					label: '已完成',
+					value: 2,
+				}],
+				query: {
+					label: '',
+				}
 			}
 		},
 		onLoad() {
-	
+
 		},
 		methods: {
-	
+			tabschange(index) {
+				this.tabscurrent = index;
+			},
+			dropitemchange(e) {
+				this.optionname = this.options.find(m => m.value === e).label
+				console.log(e)
+			},
 		}
 	}
 </script>
 
 <style lang="scss">
+	.app {
+		width: 100%;
+		// margin: 20rpx auto;
+		padding: 0 0 100rpx 0;
+		background-color: #fff;
+		font-size: 24rpx;
+
+		::v-deep .u-tabs {
+			background-color: #18CBB3 !important;
+		}
+
+		.top {
+			width: 90%;
+			margin: 0 auto;
+			display: flex;
+			height: 84rpx;
+			justify-content: space-around;
+
+			.inputs {
+				background-color: #fff;
+				width: 65%;
+				// height: 60rpx;
+				// border: 1px solid #F6F6F6;
+				height: 0rpx;
+				border-radius: 5rpx;
+				background-color: #ffffff;
+				z-index: 999;
+				position: relative;
+				top: 50%;
+				transform: translateY(-50%);
+				background: #F6F6F6;
+				border-radius: 38rpx;
+
+				.input {
+					margin: 0 auto;
+					position: absolute;
+					height: 60rpx;
+					// top: 8%;
+					left: 13%;
+					width: 80%;
+					font-size: 26rpx;
+					color: #000000;
+				}
+
+				.icon {
+					background: url(@/static/sousuo.png) no-repeat;
+					width: 30rpx;
+					height: 28rpx;
+					background-size: cover;
+					position: absolute;
+					top: 50%;
+					transform: translateY(-50%);
+					left: 3%;
+				}
+			}
+
+			::v-deep .u-flex {
+				width: 100% !important;
+			}
+
+			::v-deep .u-dropdown__content {
+				overflow-y: scroll !important;
+				height: 500rpx;
+
+				.u-flex {
+					width: 0 !important;
+				}
+			}
+
+			::v-deep .u-dropdown__content__mask {
+				background: none !important;
+			}
+
+			::v-deep .u-dropdown__menu__item {
+				width: 100% !important;
+			}
+
+			::v-deep .u-cell__value {
+				flex: 0;
+			}
+
+			::v-deep .u-dropdown {
+				:v-deep .u-dropdown__menu {}
+			}
+
+			::v-deep .u-cell-box {}
+		}
+	}
 </style>