From e1d1fb3e525b5fab0b2e15e2e7a01d1d40af1c54 Mon Sep 17 00:00:00 2001
From: zhongwenkai <3478244299@qq.com>
Date: Thu, 11 Jun 2026 16:03:09 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=B8=8A=E4=B8=8B=E6=A8=A1=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F=E7=BB=9F=E4=B8=80=E4=B8=8E=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/moldoperate/dismount.vue            | 89 +++++++++++++++----
 .../pages/moldoperate/history.vue             | 30 +++----
 .../pages/moldoperate/index.vue               | 74 +++++++++------
 3 files changed, 126 insertions(+), 67 deletions(-)

diff --git a/src/pages_function/pages/moldoperate/dismount.vue b/src/pages_function/pages/moldoperate/dismount.vue
index 4db7a38..3ca9a14 100644
--- a/src/pages_function/pages/moldoperate/dismount.vue
+++ b/src/pages_function/pages/moldoperate/dismount.vue
@@ -1,10 +1,16 @@
 <template>
   <view class="page-container">
-    <NavBar :title="t('moldOperate.tabDown')">
-      <template #right>
-        <image class="nav-right-icon" src="/static/logo/history.png" mode="aspectFit" @click="goToHistory" />
-      </template>
-    </NavBar>
+    <!-- 顶部导航栏 -->
+    <view class="custom-nav">
+      <view class="nav-back" @click="goBack">
+        <u-icon name="arrow-left" color="#ffffff" size="20"></u-icon>
+      </view>
+      <text class="nav-title">{{ t('moldOperate.tabDown') }}</text>
+      <view class="nav-right-btn" @click="goToHistory">
+        <uni-icons type="clock" size="22" color="#1f7cff"></uni-icons>
+        <text class="nav-right-text">{{ t('moldPressureNet.history') }}</text>
+      </view>
+    </view>
 
     <!-- 操作按钮区 -->
     <view class="action-row">
@@ -102,8 +108,8 @@
       </view>
 
       <!-- 未选设备 -->
-      <view v-else class="empty-mold-hint" @click="handleSelectDeviceFirst">
-        <text class="empty-mold-text">+ {{ t('moldOperate.clickSelectDeviceFirst') }}</text>
+      <view v-else class="empty-mold-hint">
+        <text class="empty-mold-text empty-gray">{{ t('moldOperate.clickSelectDeviceFirst') }}</text>
       </view>
     </view>
 
@@ -142,7 +148,6 @@
 import { computed, reactive, ref } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
 import { useI18n } from 'vue-i18n'
-import NavBar from '@/components/common/NavBar.vue'
 import { getLowerMoldList, getDeviceLedgerList, createMoldOperate } from '@/api/mes/moldoperate'
 import { getDeviceLineTree } from '@/api/mes/deviceLine'
 
@@ -437,14 +442,14 @@ function confirmLowerMoldSelection() {
 
 function closeLowerMoldPicker() { lowerMoldPickerRef.value?.close() }
 
-function handleSelectDeviceFirst() {
-  openDevicePicker()
-}
-
 function goToHistory() {
   uni.navigateTo({ url: '/pages_function/pages/moldoperate/history?type=down' })
 }
 
+function goBack() {
+  uni.navigateBack({ fail: () => uni.switchTab({ url: '/pages/index/index' }) })
+}
+
 // ---- 提交 ----
 function validForm() {
   if (!selectedDevice.value?.id) {
@@ -503,9 +508,53 @@ onShow(async () => {
 </script>
 
 <style lang="scss" scoped>
-.nav-right-icon {
-  width: 40rpx;
-  height: 40rpx;
+/* ====== 自定义导航栏 ====== */
+.custom-nav {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 88rpx;
+  padding: 0 24rpx;
+  background: #22486e;
+  color: #fff;
+
+  .nav-back {
+    position: absolute;
+    left: 24rpx;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 60rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .nav-title {
+    font-size: 34rpx;
+    font-weight: 600;
+    text-align: center;
+  }
+
+  .nav-right-btn {
+    position: absolute;
+    right: 24rpx;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 8rpx 18rpx;
+    background: #ffffff;
+    border-radius: 999rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
+  }
+
+  .nav-right-text {
+    font-size: 24rpx;
+    color: #374151;
+    font-weight: 500;
+  }
 }
 
 .page-container {
@@ -529,7 +578,7 @@ onShow(async () => {
   gap: 12rpx;
   height: 96rpx;
   border-radius: 12rpx;
-  background: #2563eb;
+  background: #1f4b79;
   color: #fff;
   font-size: 28rpx;
   font-weight: 600;
@@ -571,7 +620,7 @@ onShow(async () => {
   width: 6rpx;
   height: 32rpx;
   border-radius: 3rpx;
-  background: #2563eb;
+  background: #1f4b79;
 }
 
 .section-title {
@@ -697,6 +746,10 @@ onShow(async () => {
   color: #2563eb;
 }
 
+.empty-gray {
+  color: #9ca3af;
+}
+
 /* ====== 底部操作栏 ====== */
 .bottom-actions {
   position: fixed;
@@ -720,7 +773,7 @@ onShow(async () => {
 }
 
 .confirm-btn {
-  background: #2563eb;
+  background: #1f4b79;
   color: #fff;
 }
 
diff --git a/src/pages_function/pages/moldoperate/history.vue b/src/pages_function/pages/moldoperate/history.vue
index b9f401d..53728d7 100644
--- a/src/pages_function/pages/moldoperate/history.vue
+++ b/src/pages_function/pages/moldoperate/history.vue
@@ -3,10 +3,9 @@
     <!-- 顶部导航栏 -->
     <view class="custom-nav">
       <view class="nav-back" @click="goBack">
-        <text class="back-icon">&lt;</text>
+        <u-icon name="arrow-left" color="#ffffff" size="20"></u-icon>
       </view>
       <text class="nav-title">{{ pageType ? (pageType === 'up' ? t('moldOperate.tabUp') : t('moldOperate.tabDown')) + t('moldOperate.historySuffix') : t('moldOperate.historyTitle') }}</text>
-      <view class="nav-placeholder"></view>
     </view>
 
     <!-- Tab 切换（路由指定 type 时隐藏） -->
@@ -108,7 +107,7 @@
           <!-- 右下角删除 -->
           <view class="card-footer">
             <view class="delete-wrap" @click="handleDelete(item)">
-              <text class="delete-icon">&#128465;</text>
+              <u-icon name="trash" size="22" color="#dc2626"></u-icon>
             </view>
           </view>
         </view>
@@ -427,39 +426,35 @@ onShow(async () => {
 
 /* ====== 自定义导航栏 ====== */
 .custom-nav {
+  position: relative;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   height: 88rpx;
   padding: 0 24rpx;
-  background: #1a365d;
+  background: #22486e;
   color: #fff;
 
   .nav-back {
-    width: 60rpx;
+    position: absolute;
+    left: 24rpx;
+    top: 50%;
+    transform: translateY(-50%);
     height: 60rpx;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
-  .back-icon {
-    font-size: 36rpx;
-    font-weight: bold;
-  }
-
   .nav-title {
     font-size: 34rpx;
     font-weight: 600;
+    text-align: center;
     max-width: 60%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-
-  .nav-placeholder {
-    width: 60rpx;
-  }
 }
 
 /* ====== Tab 切换 ====== */
@@ -673,11 +668,6 @@ onShow(async () => {
 
     .delete-wrap {
       padding: 6rpx;
-
-      .delete-icon {
-        font-size: 28rpx;
-        color: #dc2626;
-      }
     }
   }
 }
diff --git a/src/pages_function/pages/moldoperate/index.vue b/src/pages_function/pages/moldoperate/index.vue
index 8a5d030..682000c 100644
--- a/src/pages_function/pages/moldoperate/index.vue
+++ b/src/pages_function/pages/moldoperate/index.vue
@@ -3,10 +3,13 @@
     <!-- 顶部导航栏 -->
     <view class="custom-nav">
       <view class="nav-back" @click="goBack">
-        <text class="back-icon">&lt;</text>
+        <u-icon name="arrow-left" color="#ffffff" size="20"></u-icon>
       </view>
       <text class="nav-title">{{ t('moldOperate.tabUp') }}</text>
-      <image class="nav-right-icon" src="/static/logo/history.png" mode="aspectFit" @click="goToHistory" />
+      <view class="nav-right-btn" @click="goToHistory">
+        <uni-icons type="clock" size="22" color="#1f7cff"></uni-icons>
+        <text class="nav-right-text">{{ t('moldPressureNet.history') }}</text>
+      </view>
     </view>
 
     <!-- ========== 上模 ========== -->
@@ -106,8 +109,8 @@
 
       <!-- 底部操作栏 - 上模 -->
       <view class="bottom-actions">
-        <view class="bottom-btn confirm-btn" @click="handleConfirmMount">{{ t('moldOperate.confirmMount') }}</view>
         <view class="bottom-btn cancel-btn" @click="handleCancel">{{ t('functionCommon.cancel') }}</view>
+        <view class="bottom-btn confirm-btn" @click="handleConfirmMount">{{ t('moldOperate.confirmMount') }}</view>
       </view>
 
   </view>
@@ -380,35 +383,50 @@ onShow(async () => {
 
 /* ====== 自定义导航栏 ====== */
 .custom-nav {
+  position: relative;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   height: 88rpx;
   padding: 0 24rpx;
-  background: #1a365d;
+  background: #22486e;
   color: #fff;
 
   .nav-back {
-    width: 60rpx;
+    position: absolute;
+    left: 24rpx;
+    top: 50%;
+    transform: translateY(-50%);
     height: 60rpx;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
-  .back-icon {
-    font-size: 36rpx;
-    font-weight: bold;
-  }
-
   .nav-title {
     font-size: 34rpx;
     font-weight: 600;
+    text-align: center;
+  }
+
+  .nav-right-btn {
+    position: absolute;
+    right: 24rpx;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 8rpx 18rpx;
+    background: #ffffff;
+    border-radius: 999rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
   }
 
-  .nav-right-icon {
-    width: 40rpx;
-    height: 40rpx;
+  .nav-right-text {
+    font-size: 24rpx;
+    color: #374151;
+    font-weight: 500;
   }
 }
 
@@ -427,7 +445,7 @@ onShow(async () => {
   gap: 12rpx;
   height: 96rpx;
   border-radius: 12rpx;
-  background: #2563eb;
+  background: #1f4b79;
   color: #fff;
   font-size: 28rpx;
   font-weight: 600;
@@ -600,10 +618,10 @@ onShow(async () => {
   right: 0;
   bottom: 0;
   display: flex;
-  gap: 20rpx;
-  padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
-  background: #fff;
-  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
+  gap: 18rpx;
+  padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom));
+  background: #ffffff;
+  box-shadow: 0 -8rpx 24rpx rgba(15, 23, 42, 0.06);
   z-index: 99;
 
   &.single-btn {
@@ -612,25 +630,23 @@ onShow(async () => {
 }
 
 .bottom-btn {
-  height: 88rpx;
-  line-height: 88rpx;
+  flex: 1;
+  height: 84rpx;
+  line-height: 84rpx;
   text-align: center;
-  border-radius: 12rpx;
+  border-radius: 16rpx;
   font-size: 30rpx;
   font-weight: 600;
 }
 
 .confirm-btn {
-  flex: 1;
-  background: #2563eb;
-  color: #fff;
+  background: #1f4b79;
+  color: #ffffff;
 }
 
 .cancel-btn {
-  flex: 1;
-  background: #fff;
-  color: #666;
-  border: 1rpx solid #ddd;
+  background: #eef2f7;
+  color: #475569;
 }