From 05979c090d60618faf0553218d54746fe52c9afe Mon Sep 17 00:00:00 2001
From: gcd <wyemail666@163.com>
Date: Wed, 26 Mar 2025 18:11:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E5=8F=B0=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=A4=B4=E9=83=A8=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/me-top/me-top.vue  |  48 +++++++++++++++
 pages.json                    |  15 ++---
 pages/index/index.vue         |  30 +---------
 pages/workbench/workbench.vue | 109 +++++++++++++++++++++++++++++-----
 static/css/common.scss        |  21 +++----
 5 files changed, 160 insertions(+), 63 deletions(-)
 create mode 100644 components/me-top/me-top.vue

diff --git a/components/me-top/me-top.vue b/components/me-top/me-top.vue
new file mode 100644
index 0000000..71798c0
--- /dev/null
+++ b/components/me-top/me-top.vue
@@ -0,0 +1,48 @@
+<template>
+	<view class="me-top">
+    <view class="status-bar" :style="{height: inject('globalData').statusBarH+'px'}"></view>
+    <view class="capsule flex-c" :style="{height: inject('globalData').customBarH - inject('globalData').statusBarH+'px'}">
+      <view class="icon-ctr flex-c">
+        <image class="icon" mode="aspectFill" :src="inject('globalData').appIcon"></image>
+      </view>
+      <text class="title">{{title}}</text>
+    </view>
+	</view>
+</template>
+
+<script setup>
+import {inject} from 'vue'
+const props = defineProps({
+  //标题
+  title: {
+    type: String,
+    required: true,
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.me-top {
+  .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;
+    }
+  }
+}
+</style>
diff --git a/pages.json b/pages.json
index 2d97930..11f22dd 100644
--- a/pages.json
+++ b/pages.json
@@ -1,5 +1,13 @@
 {
 	"pages": [
+		{
+			"path" : "pages/workbench/workbench",
+			"style" :
+			{
+				"navigationBarTitleText" : "",
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path" : "pages/index/index",
 			"style" :
@@ -16,13 +24,6 @@
 				"disableScroll": true
 			}
 		},
-		{
-			"path" : "pages/workbench/workbench",
-			"style" :
-			{
-				"navigationBarTitleText" : "工作台"
-			}
-		},
 		{
 			"path" : "pages/user/user",
 			"style" :
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 3571bd9..8480742 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,13 +1,7 @@
 <template>
 	<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>
+      <me-top title="接单大厅"></me-top>
     </view>
 
     <me-empty-space :height="listMarginTop"></me-empty-space>
@@ -117,6 +111,7 @@ 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";
+import MeTop from "../../components/me-top/me-top.vue";
 const data = reactive({
   globalData: {},
 })
@@ -138,27 +133,6 @@ const listMarginTop = computed(() => {
     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 {
diff --git a/pages/workbench/workbench.vue b/pages/workbench/workbench.vue
index 8183fd0..e96eb14 100644
--- a/pages/workbench/workbench.vue
+++ b/pages/workbench/workbench.vue
@@ -1,22 +1,99 @@
 <template>
-	<view>
-		
-	</view>
+  <view class="ctr">
+    <view class="fixed-top">
+      <me-top title="工作台"></me-top>
+      <view class="filter flex-sb line-after">
+        <view v-for="(item, index) in filterType" :key="index" class="filter-item flex-c" @click="filter(item.id)">
+          <view :class="['title', 'flex-c', data.filterIndex == item.id ? 'title-active' : '']">{{item.name}}({{item.num}})</view>
+          <view class="select-style" v-if="data.filterIndex == item.id"></view>
+        </view>
+      </view>
+    </view>
+
+    <me-empty-space :height="listMarginTop"></me-empty-space>
+    <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";
+import MeTop from "../../components/me-top/me-top.vue";
+const data = reactive({
+  globalData: {},
+  filterIndex: 1
+})
+onLoad(() => {
+  data.globalData = inject('globalData')
+})
+
+const listMarginTop = computed(() => {
+  return (data.globalData.statusBarH + (data.globalData.customBarH - data.globalData.statusBarH) + 50) * 2
+})
+
+const filterType = reactive([
+  {
+    id: 1,
+    name: '进行中',
+    num: 2,
+  }, {
+    id: 2,
+    name: '今日',
+    num: 2,
+  }, {
+    id: 3,
+    name: '明日',
+    num: 0,
+  }, {
+    id: 4,
+    name: '全部',
+    num: 724,
+  },
+])
+
+const filter = (index) => {
+  data.filterIndex = index
+}
 </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%;
+    .filter {
+      width: 686rpx;
+      height: 100rpx;
+      .filter-item {
+        width: 170rpx;
+        height: 100%;
+        position: relative;
+        .title {
+          width: 100%;
+          font-size: 28rpx;
+          color: var(--summaryColor);
+          line-height: 28rpx;
+        }
+        .title-active {
+          color: var(--themeColor) !important;
+        }
+        .select-style {
+          position: absolute;
+          bottom: 0;
+          width: 122rpx;
+          height: 4rpx;
+          background: var(--themeColor);
+          border-radius: 2rpx;
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/static/css/common.scss b/static/css/common.scss
index 0e1eb37..a3b6797 100644
--- a/static/css/common.scss
+++ b/static/css/common.scss
@@ -56,7 +56,7 @@
   position: absolute;
   width: 200%;
   height: 1px;
-  background: var(--dividingLineColor);
+  background: var(--dividerColor);
   transform: scale(0.5);
   transform-origin: 0 0;
 }
@@ -78,7 +78,7 @@
   position: absolute;
   width: 1px;
   height: 200%;
-  background: var(--dividingLineColor);
+  background: var(--dividerColor);
   transform: scale(0.5);
   transform-origin: 0 0;
 }
@@ -152,7 +152,7 @@
 }
 .auto-mask-layer-radius0::after {
   @include auto-mask-layer();
-  background-color: var(--hotZoneBgColor);
+  background-color: var(--contentBgColor);
   border-radius: 0;
 }
 .auto-mask-layer-radius4{
@@ -160,7 +160,7 @@
 }
 .auto-mask-layer-radius4::after {
   @include auto-mask-layer();
-  background-color: var(--hotZoneBgColor);
+  background-color: var(--contentBgColor);
   border-radius: 8rpx;
 }
 
@@ -169,7 +169,7 @@
 }
 .auto-mask-layer-radius8::after {
   @include auto-mask-layer();
-  background-color: var(--hotZoneBgColor);
+  background-color: var(--contentBgColor);
   border-radius: 16rpx;
 }
 
@@ -178,7 +178,7 @@
 }
 .auto-mask-layer-radius-b8::after {
   @include auto-mask-layer();
-  background-color: var(--hotZoneBgColor);
+  background-color: var(--contentBgColor);
   border-radius: 0rpx 0rpx 16rpx 16rpx;
 }
 
@@ -187,7 +187,7 @@
 }
 .auto-mask-layer-radius-lb8::after {
   @include auto-mask-layer();
-  background-color: var(--hotZoneBgColor);
+  background-color: var(--contentBgColor);
   border-radius: 0rpx 0rpx 0rpx 16rpx;
 }
 
@@ -196,7 +196,7 @@
 }
 .auto-mask-layer-radius-rb8::after {
   @include auto-mask-layer();
-  background-color: var(--hotZoneBgColor);
+  background-color: var(--contentBgColor);
   border-radius: 0rpx 0rpx 16rpx 0rpx;
 }
 
@@ -234,12 +234,9 @@
 .clickable-text {
   color: var(--themeColor);
 }
-.clickable-text:active {
-  color: var(--themeColorClick);
-}
 
 .placeholder-class {
-  color: var(--contentColor30);
+  color: var(--descriptionColor);
 }
 
 swiper .wx-swiper-dots .wx-swiper-dot{