style：首页-生产/质量切换按钮优化

src/components/dashboard/ModeSwitchPopup.vue

@@ -1,11 +1,16 @@
 <template>
   <view>
-    <view class="mode-switch-btn" @click="showModePopup = true">
+    <view class="mode-switch-btn" @click="openPopup">
-      <text class="mode-icon">⚙️</text>
+      <uni-icons type="settings" size="21" color="#ffffff" />
     </view>
 
     <view v-if="showModePopup" class="popup-overlay" @click="showModePopup = false">
-      <view class="popup-content" @click.stop>
+      <view
+        class="popup-content"
+        :class="{ 'popup-enter': showModePopup }"
+        :style="{ top: popupTop + 'px', right: popupRight + 'px' }"
+        @click.stop
+      >
         <view
           class="popup-item"
           :class="{ active: currentMode === 'production' }"
@@ -30,8 +35,10 @@
 <script setup>
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { getCurrentInstance } from 'vue'
 
 const { t } = useI18n()
+const instance = getCurrentInstance()
 
 const props = defineProps({
   currentMode: {
@@ -43,6 +50,20 @@ const props = defineProps({
 const emit = defineEmits(['modeChange'])
 
 const showModePopup = ref(false)
+const popupTop = ref(0)
+const popupRight = ref(0)
+
+function openPopup() {
+  const query = uni.createSelectorQuery().in(instance.proxy)
+  query.select('.mode-switch-btn').boundingClientRect((rect) => {
+    if (rect) {
+      const { windowWidth } = uni.getSystemInfoSync()
+      popupTop.value = rect.bottom + 8
+      popupRight.value = windowWidth - rect.right
+    }
+    showModePopup.value = true
+  }).exec()
+}
 
 function switchMode(mode) {
   showModePopup.value = false
@@ -66,10 +87,6 @@ function switchMode(mode) {
   }
 }
 
-.mode-icon {
-  font-size: 32rpx;
-}
-
 .popup-overlay {
   position: fixed;
   top: 0;
@@ -77,19 +94,42 @@ function switchMode(mode) {
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-end;
   z-index: 1000;
-  padding: 200rpx 24rpx 24rpx;
+  animation: overlayFadeIn 0.25s ease-out;
 }
 
 .popup-content {
+  position: fixed;
   width: 200rpx;
   background: linear-gradient(180deg, #1a3a5c 0%, #2d5a87 100%);
   border-radius: 16rpx;
   overflow: hidden;
   box-shadow: 0 8rpx 32rpx rgba(26, 58, 92, 0.4);
+  transform-origin: top right;
+
+  &.popup-enter {
+    animation: popupSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+}
+
+@keyframes overlayFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes popupSlideIn {
+  from {
+    opacity: 0;
+    transform: scale(0.6) translateY(-20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }
 
 .popup-item {