在线报修

property-uniapp-project/pages/online-repair/onlineRepair.vue

@@ -1,9 +1,14 @@
 <template>
   <view class="repair-page">
+	<view class="status_bar"></view>
     <!-- 顶部导航栏 -->
- <!--   <view class="nav-bar">
-      <text class="nav-title">在线报修</text>
-    </view> -->
+	<view class="nav-bar">
+	  <view class="nav-left" @tap="goBack">
+	     <image src="/static/首页/arr-left.png" style="width: 48rpx; height: 48rpx;"></image>
+	  </view>
+	  <view class="nav-title">在线报修</view>
+	  <view class="nav-right"></view>
+	</view>
 
     <!-- 报修类型Tab -->
     <view class="repair-type-tabs">
@@ -27,7 +32,7 @@
       </view>
     </view>
 	
-	<view style="margin: 10px 13px;">
+	<view style="margin: 14px 0px;">
 		<text class="repair-title">报修记录</text>
 	</view>
 
@@ -145,7 +150,10 @@ function personalClick(){
 		url:"/pages/online-repair/personalRepair"
 	})
 }
-
+// 返回上一页
+const goBack = () => {
+  uni.navigateBack()
+}
 // 跳转报修详情
 const goDetail = (item) => {
 	// const itemStr = encodeURIComponent(JSON.stringify(item))
@@ -158,15 +166,55 @@ const goDetail = (item) => {
 <style scoped>
 /* 页面整体样式 */
 .repair-page {
-  background-color: #f5f5f5;
+  background: linear-gradient(to bottom left, #E2F0FF 0%, #f9f9f9 50%);
   min-height: 100vh;
+  padding: 0 40rpx;
+}
+  .status_bar {
+	height: 32px;
+	width: 100%;
+ }
+/* 顶部导航栏 */
+.nav-bar {
+  height: 90rpx;
+  display: flex;
+  align-items: center;
+  /* padding: 0 30rpx; */
+  color: #fff;
+  position: sticky;
+  top: 44px;
+  z-index: 100;
+  margin-bottom: 20px;
+  /* box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2); */
 }
 
+.nav-left {
+  width: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.nav-title {
+  flex: 1;
+  text-align: center;
+  font-size: 32rpx;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 20rpx;
+  color: #000;
+}
+
+.nav-right {
+  width: 60rpx;
+}
 /* 报修类型Tab */
 .repair-type-tabs {
   display: flex;
-  background-color: #fff;
-  padding: 10px;
+  /* background-color: #fff; */
+  /* padding: 10px; */
 }
 .type-tab {
   flex: 1;
@@ -199,8 +247,8 @@ const goDetail = (item) => {
 .record-status-tabs {
   display: flex;
   /* background-color: #fff; */
-  margin-top: 10px;
-  padding: 0 15px;
+  /* margin-top: 10px; */
+  /* padding: 0 15px; */
 }
 .status-tab {
   flex: 1;
@@ -229,7 +277,7 @@ const goDetail = (item) => {
 
 /* 报修列表 */
 .repair-list {
-  padding: 10px;
+  padding: 28rpx 0rpx;
 }
 .repair-item {
   background-color: #fff;
@@ -326,7 +374,7 @@ const goDetail = (item) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 12px;
+  font-size: 28rpx;
 }
 .item-time {
   color: #999;