diff --git a/App.vue b/App.vue
index caa9aaf..a331742 100644
--- a/App.vue
+++ b/App.vue
@@ -5,7 +5,7 @@ import {reactive, provide, inject} from 'vue'
 //定义全局数据
 const globalData = reactive({
   appName: '超邦手工单系统',
-  appIcon: 'https://jl-td.oss-cn-chengdu.aliyuncs.com/uploads/20230621/444e73968f4c666bdadbe2e1f8e3ba63.png',
+  appIcon: 'https://jl-td.oss-cn-chengdu.aliyuncs.com/uploads/20250325/77e65857af564c0dda57e1a195da19c3.png',
   statusBarH: '',
   customBarH: ''
 })
diff --git a/components/me-button/me-button.vue b/components/me-button/me-button.vue
index da52a06..47648b2 100644
--- a/components/me-button/me-button.vue
+++ b/components/me-button/me-button.vue
@@ -14,19 +14,19 @@
         <view class="icon" v-if="iconType">
           <me-icon :color="iconColor" :type="iconType" size="44rpx"></me-icon>
         </view>
-        <text>{{ text }}</text>
+        <text class="text">{{ text }}</text>
       </view>
     </view>
 
     <!--纯色按钮-->
     <view v-else
-          :class="['flex-c', 'btn', isActive ? 'btn-active' : 'btn-default']"
-          :style="{backgroundColor: btnBgColor}"
+          :class="['flex-c', 'btn', isActive ? '' : 'btn-default']"
+          :style="{backgroundColor: btnBgColor, color: textColor}"
     >
       <view class="icon" v-if="iconType">
         <me-icon :color="iconColor" :type="iconType" size="44rpx"></me-icon>
       </view>
-      <text>{{ text }}</text>
+      <text class="text">{{ text }}</text>
     </view>
   </view>
 </template>
@@ -83,6 +83,12 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'var(--themeColor)',
+  },
+  //按钮文本颜色
+  textColor: {
+    type: String,
+    required: false,
+    default: '#FFFFFF',
   }
 });
 
@@ -128,6 +134,10 @@ const submit = () => {
     text-align: center;
     color: transparent;
     transition: background .2s ease;
+    .text {
+      height: 96rpx;
+      line-height: 96rpx;
+    }
   }
   .btn-active {
     color: #FFFFFF;
diff --git a/components/me-empty-space/me-empty-space.vue b/components/me-empty-space/me-empty-space.vue
new file mode 100644
index 0000000..4e767fb
--- /dev/null
+++ b/components/me-empty-space/me-empty-space.vue
@@ -0,0 +1,19 @@
+<template>
+	<view class="me-empty-space" :style="{height: height + 'rpx'}"></view>
+</template>
+
+<script setup>
+const props = defineProps({
+  height: {
+    type: [Number, String],
+    required: false,
+    default: 100,
+  }
+});
+</script>
+
+<style lang="scss">
+.me-empty-space {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 7cf00ae..2d97930 100644
--- a/pages.json
+++ b/pages.json
@@ -1,5 +1,13 @@
 {
 	"pages": [
+		{
+			"path" : "pages/index/index",
+			"style" :
+			{
+				"navigationBarTitleText" : "接单大厅",
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path" : "pages/user/login",
 			"style" :
@@ -8,13 +16,6 @@
 				"disableScroll": true
 			}
 		},
-		{
-			"path" : "pages/index/index",
-			"style" :
-			{
-				"navigationBarTitleText" : "接单大厅"
-			}
-		},
 		{
 			"path" : "pages/workbench/workbench",
 			"style" :
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 8183fd0..3571bd9 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,22 +1,254 @@
 <template>
-	<view>
-		
+	<view class="ctr">
+    <view class="fixed-top">
+      <view class="status-bar" :style="{height: data.globalData.statusBarH+'px'}"></view>
+      <view class="capsule flex-c" :style="{height: data.globalData.customBarH - data.globalData.statusBarH+'px'}">
+        <view class="icon-ctr flex-c">
+          <image class="icon" mode="aspectFill" :src="data.globalData.appIcon"></image>
+        </view>
+        <text class="title">接单大厅</text>
+      </view>
+    </view>
+
+    <me-empty-space :height="listMarginTop"></me-empty-space>
+    <view class="list">
+      <view class="item">
+        <view class="top flex-sb">
+          <view class="type flex-l">日常保洁</view>
+          <view class="price flex-r">平台已收款</view>
+        </view>
+        <view class="content flex-sb">
+          <view class="left">
+            <view class="address-name flex-l">
+              金城花园(天府二街)
+            </view>
+            <view class="address">
+              广东省茂名市茂南区金城路26号大院附近
+            </view>
+            <view class="time-ctr flex-l">
+              <me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
+              <text class="time">周日 10月08日 12:30</text>
+            </view>
+          </view>
+          <view class="right">
+            <view class="icon-ctr flex-c">
+              <me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
+            </view>
+            <view class="distance flex-c">8.34公里</view>
+          </view>
+        </view>
+        <view class="btn-ctr flex-sb">
+          <me-button @click="" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
+          <me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
+        </view>
+
+      </view>
+      <view class="item">
+        <view class="top flex-sb">
+          <view class="type flex-l">日常保洁</view>
+          <view class="price flex-r important-color">上门报价</view>
+        </view>
+        <view class="content flex-sb">
+          <view class="left">
+            <view class="address-name flex-l">
+              金城花园(天府二街)
+            </view>
+            <view class="address">
+              广东省茂名市茂南区金城路26号大院附近
+            </view>
+            <view class="time-ctr flex-l">
+              <me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
+              <text class="time">周日 10月08日 12:30</text>
+            </view>
+          </view>
+          <view class="right">
+            <view class="icon-ctr flex-c">
+              <me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
+            </view>
+            <view class="distance flex-c">8.34公里</view>
+          </view>
+        </view>
+        <view class="discount flex-l">已支付订金：30元抵扣50元</view>
+        <view class="btn-ctr flex-sb">
+          <me-button @click="" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
+          <me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
+        </view>
+
+      </view>
+      <view class="item">
+        <view class="top flex-sb">
+          <view class="type flex-l">日常保洁</view>
+          <view class="price flex-r important-color">上门报价</view>
+        </view>
+        <view class="content flex-sb">
+          <view class="left">
+            <view class="address-name flex-l">
+              金城花园(天府二街)
+            </view>
+            <view class="address">
+              广东省茂名市茂南区金城路26号大院附近
+            </view>
+            <view class="time-ctr flex-l">
+              <me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
+              <text class="time">周日 10月08日 12:30</text>
+            </view>
+          </view>
+          <view class="right">
+            <view class="icon-ctr flex-c">
+              <me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
+            </view>
+            <view class="distance flex-c">8.34公里</view>
+          </view>
+        </view>
+        <view class="discount flex-l">已支付订金：30元抵扣50元</view>
+        <view class="btn-ctr flex-sb">
+          <me-button @click="" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
+          <me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
+        </view>
+      </view>
+    </view>
+    <me-empty-space height="100"></me-empty-space>
 	</view>
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
-	}
+<script setup>
+import {onLoad, onShow} from '@dcloudio/uni-app'
+import {ref, reactive, computed, watch, inject} from 'vue'
+import MeIcon from "../../components/me-icon/me-icon";
+import MeButton from "../../components/me-button/me-button";
+import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
+const data = reactive({
+  globalData: {},
+})
+onLoad(() => {
+  data.globalData = inject('globalData')
+})
+
+const listMarginTop = computed(() => {
+  return (data.globalData.statusBarH + (data.globalData.customBarH - data.globalData.statusBarH)) * 2
+})
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+.ctr {
+  padding: 0 32rpx;
+  box-sizing: border-box;
+  .fixed-top {
+    position: fixed;
+    top: 0;
+    background-color: var(--pageBgColor);
+    width: 100%;
+    .capsule {
+      .icon-ctr {
+        width: 60rpx;
+        height: 60rpx;
+        border: 1px solid #E9F1FE;
+        border-radius: 50%;
+        position: absolute;
+        left: 0;
+        .icon {
+          width: 80%;
+          height: 80%;
+          border-radius: 50%;
+        }
+      }
+      .title {
+        font-weight: 500;
+        font-size: 32rpx;
+        color: var(--titleColor);
+        margin-left: -60rpx;
+      }
+    }
+  }
+  .list {
+    .item {
+      width: 100%;
+      background: var(--containerBgColor);
+      border-radius: 16rpx;
+      padding: 20rpx;
+      box-sizing: border-box;
+      margin-top: 32rpx;
+      .top {
+        height: 60rpx;
+        .type,.price {
+          width: 323rpx;
+          height: 100%;
+        }
+        .type {
+          font-weight: 500;
+          font-size: 34rpx;
+          color: var(--titleColor);
+        }
+        .price {
+          font-size: 30rpx;
+          color: var(--summaryColor);
+        }
+        .important-color {
+          color: var(--importantColor) !important;
+        }
+      }
+      .content {
+        width: 100%;
+        .left {
+          width: 466rpx;
+          .address-name {
+            width: 100%;
+            min-height: 60rpx;
+            font-size: 30rpx;
+            color: var(--titleColor);
+            line-height: 44rpx;
+          }
+          .address {
+            width: 100%;
+            min-height: 60rpx;
+            font-size: 28rpx;
+            color: var(--summaryColor);
+            line-height: 44rpx;
+          }
+          .time-ctr {
+            width: 100%;
+            min-height: 80rpx;
+            font-size: 28rpx;
+            color: var(--themeColor);
+            line-height: 44rpx;
+            .time {
+              margin-left: 8rpx;
+            }
+          }
+        }
+        .right {
+          width: 180rpx;
+          .icon-ctr {
+            width: 100%;
+            height: 60rpx;
+          }
+          .distance {
+            width: 100%;
+            height: 44rpx;
+            font-size: 28rpx;
+            color: var(--titleColor);
+            line-height: 44rpx;
+            margin-top: 32rpx;
+          }
+        }
+      }
+      .discount {
+        width: 100%;
+        height: 64rpx;
+        background: rgba(230,82,31,0.1);
+        border-radius: 16rpx;
+        font-size: 28rpx;
+        color: var(--importantColor);
+        padding: 0 16rpx;
+        box-sizing: border-box;
+      }
+      .btn-ctr {
+        width: 100%;
+        height: 126rpx;
+        box-sizing: border-box;
+        margin-top: 10rpx;
+      }
+    }
+  }
+}
 </style>