Explorar o código

重构步进锁定时间弹窗结构,支持多屏模式下各面板独立显示

  - 给 .crossing-detail-panel 添加 position:relative,弹窗遮罩使用 absolute 定位在各自面板内居中
  - 重命名弹窗 class(lock-time-modal → lock-time-dialog),增加 header/divider/body 层级结构
画安 hai 1 semana
pai
achega
6892ce8981
Modificáronse 1 ficheiros con 73 adicións e 66 borrados
  1. 73 66
      src/components/ui/CrossingDetailPanel.vue

+ 73 - 66
src/components/ui/CrossingDetailPanel.vue

@@ -136,35 +136,38 @@
                 </div>
             </form>
         </div>
-        <!-- 步进锁定时间居中弹窗 -->
+        <!-- 步进锁定时间弹窗 -->
         <transition name="fade">
             <div class="lock-time-overlay" v-if="showLockTime" @click.self="showLockTime = false">
-                <div class="lock-time-modal">
-                    <div class="lock-time-label-wrap glow-header">
-                        <div class="lock-time-label">锁定时间</div>
-                        <div class="lock-time-close" @click="showLockTime = false">✕</div>
+                <div class="lock-time-dialog">
+                    <div class="lock-time-header">
+                        <span class="lock-time-title">锁定时间</span>
+                        <span class="lock-time-close" @click="showLockTime = false">✕</span>
                     </div>
-                    <div class="lock-time-options">
-                        <div class="lock-time-option">
-                            <label>
-                                <input type="radio" v-model="lockTimeType" value="continuous" /> 持续放行
-                            </label>
+                    <div class="lock-time-divider"></div>
+                    <div class="lock-time-body">
+                        <div class="lock-time-options">
+                            <div class="lock-time-option">
+                                <label>
+                                    <input type="radio" v-model="lockTimeType" value="continuous" /> 持续放行
+                                </label>
+                            </div>
+                            <div class="lock-time-option">
+                                <label>
+                                    <input type="radio" v-model="lockTimeType" value="timer" /> 放行
+                                    <DropdownSelect placeholder="锁定时间" v-model="currentLocktime"
+                                        :options="locktimeOptions" size="auto" @click.native.prevent />
+                                    秒解锁
+                                </label>
+                            </div>
                         </div>
-                        <div class="lock-time-option">
-                            <label>
-                                <input type="radio" v-model="lockTimeType" value="timer" /> 放行
-                                <DropdownSelect placeholder="锁定时间" v-model="currentLocktime"
-                                    :options="locktimeOptions" size="auto" @click.native.prevent />
-                                秒解锁
-                            </label>
+                        <div class="lock-time-actions">
+                            <button type="button" class="btn btn-cancel"
+                                @click="onLockTimeCancel">取消</button>
+                            <button type="button" class="btn btn-confirm"
+                                @click="onLockTimeConfirm">确认</button>
                         </div>
                     </div>
-                    <div class="lock-time-actions">
-                        <button type="button" class="btn btn-cancel"
-                            @click="onLockTimeCancel">取消</button>
-                        <button type="button" class="btn btn-confirm"
-                            @click="onLockTimeConfirm">确认</button>
-                    </div>
                 </div>
             </div>
         </transition>
@@ -548,6 +551,7 @@ export default {
 <style scoped>
 .crossing-detail-panel {
     --s: 1;
+    position: relative;
     display: flex;
     flex-direction: row;
     gap: clamp(4px, calc(var(--s) * 12px), 12px);
@@ -747,30 +751,7 @@ export default {
         inset 20px 0px 30px -10px rgba(88, 146, 255, 0.15);
 }
 
-.lock-time-label-wrap {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: clamp(4px, calc(var(--s) * 8px), 10px);
-    border-radius: 8px 8px 0 0;
-    color: #ffffff;
-}
-
-.lock-time-label {
-    font-size: clamp(10px, calc(var(--s) * 16px), 16px);
-    color: #ffffff;
-}
-
-.lock-time-options {
-    display: flex;
-    flex-direction: column;
-    row-gap: clamp(4px, calc(var(--s) * 10px), 10px);
-    font-size: clamp(9px, calc(var(--s) * 14px), 14px);
-    padding: clamp(4px, calc(var(--s) * 10px), 10px);
-    color: #ffffff;
-}
-
-/* 步进锁定时间居中弹窗遮罩 */
+/* 步进锁定时间弹窗 - 遮罩 */
 .lock-time-overlay {
     position: absolute;
     inset: 0;
@@ -782,7 +763,8 @@ export default {
     border-radius: inherit;
 }
 
-.lock-time-modal {
+/* 步进锁定时间弹窗 */
+.lock-time-dialog {
     background: linear-gradient(135deg, rgba(10, 25, 60, 0.97) 0%, rgba(20, 40, 90, 0.97) 100%);
     border: 1px solid rgba(161, 190, 255, 0.3);
     border-radius: 6px;
@@ -792,6 +774,42 @@ export default {
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
 }
 
+.lock-time-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: clamp(4px, calc(var(--s) * 8px), 10px);
+    border-radius: 6px 6px 0 0;
+    color: #ffffff;
+    background: linear-gradient(180deg,
+            rgba(65, 115, 205, 0.6) 0%,
+            rgba(40, 70, 130, 0.1) 100%);
+    backdrop-filter: blur(10px);
+}
+
+.lock-time-title {
+    font-size: clamp(10px, calc(var(--s) * 16px), 16px);
+    color: #ffffff;
+}
+
+.lock-time-close {
+    cursor: pointer;
+    color: #ffffff;
+}
+
+.lock-time-body {
+    padding: 0;
+}
+
+.lock-time-options {
+    display: flex;
+    flex-direction: column;
+    row-gap: clamp(4px, calc(var(--s) * 10px), 10px);
+    font-size: clamp(9px, calc(var(--s) * 14px), 14px);
+    padding: clamp(4px, calc(var(--s) * 10px), 10px);
+    color: #ffffff;
+}
+
 .lock-time-actions {
     display: flex;
     justify-content: flex-end;
@@ -804,15 +822,14 @@ export default {
     font-size: clamp(9px, calc(var(--s) * 14px), 14px);
 }
 
-.lock-time-close {
-    cursor: pointer;
+/* 过渡动画 */
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.25s;
 }
-
-.glow-header {
-    background: linear-gradient(180deg,
-            rgba(65, 115, 205, 0.6) 0%,
-            rgba(40, 70, 130, 0.1) 100%);
-    backdrop-filter: blur(10px);
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
 }
 
 .current-stage {
@@ -1045,16 +1062,6 @@ export default {
 }
 
 /* 弹窗过渡动画 */
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.3s, transform 0.3s;
-}
-
-.fade-enter,
-.fade-leave-to {
-    opacity: 0;
-    transform: translateY(-10px);
-}
 
 /* lock-time 弹窗补充样式 */
 .lock-time {