|
|
@@ -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 {
|