From 31ab39a665b9d44a1465b0c86715f8d076fb9b8e Mon Sep 17 00:00:00 2001
From: 快乐的昕的电脑 <快乐的昕的电脑@DESKTOP-C2BQPQU>
Date: 星期五, 31 十月 2025 16:53:25 +0800
Subject: [PATCH] 优化界面
---
components/mold.vue | 88 +++++++++++++++++++++++++++-----------------
1 files changed, 54 insertions(+), 34 deletions(-)
diff --git a/components/mold.vue b/components/mold.vue
index 863439f..320c9a4 100644
--- a/components/mold.vue
+++ b/components/mold.vue
@@ -2,32 +2,40 @@
<view class="page">
<!-- 鍒�鍏烽�夋嫨鍖� -->
<view class="top-section-grid">
- <view class="form-cell">
- <label class="form-label">鍒�鍏风紪鍙凤細</label>
- <input class="input small-font" v-model="selectedToolNo" placeholder="璇烽�氳繃鍒�鍏风洰褰曢�夋嫨" disabled />
- <button class="btn-blue" @click="openToolDialog" :disabled="loadingTools">鍒�鍏风洰褰�</button>
- </view>
- <view class="form-cell">
- <label class="form-label">璁剧疆浣跨敤涓婇檺锛�</label>
- <input class="input small-font" type="number" v-model="useLimitInput" placeholder="姣忔鎹㈠垁鍚庢墜濉�" :disabled="!selectedToolNo || loadingForm" />
- </view>
- <!-- 鏂板锛氬鍛芥瘮棰勮鍊艰緭鍏ユ -->
- <view class="form-cell">
- <label class="form-label">瀵垮懡姣旈璀﹀�硷細</label>
- <view class="input-with-suffix">
- <input class="input small-font"
- v-model="lifeWarnInput"
- placeholder="濡�0.9鎴�90"
- :disabled="!selectedToolNo || loadingForm" />
-
+ <!-- 绗竴琛� -->
+ <view class="form-row">
+ <view class="form-cell">
+ <label class="form-label">鍒�鍏风紪鍙凤細</label>
+ <input class="input small-font" v-model="selectedToolNo" placeholder="璇烽�氳繃鍒�鍏风洰褰曢�夋嫨" disabled />
+ <button class="btn-blue" @click="openToolDialog" :disabled="loadingTools">鍒�鍏风洰褰�</button>
</view>
- <span class="input-suffix">%</span>
+ <view class="form-cell">
+ <label class="form-label">璁剧疆浣跨敤涓婇檺锛�</label>
+ <input class="input small-font" type="number" v-model="useLimitInput" placeholder="姣忔鎹㈠垁鍚庢墜濉�" :disabled="!selectedToolNo || loadingForm" />
+ </view>
+ <!-- 鏂板锛氬鍛芥瘮棰勮鍊艰緭鍏ユ -->
+ <view class="form-cell">
+ <label class="form-label">瀵垮懡姣旈璀﹀�硷細</label>
+ <view class="input-with-unit">
+ <input class="input small-font"
+ v-model="lifeWarnInput"
+ placeholder="濡�0.9鎴�90"
+ :disabled="!selectedToolNo || loadingForm" />
+ <span class="unit-text">%</span>
+ </view>
+ </view>
</view>
- <view class="form-cell">
- <label class="form-label">鍒�鍏峰悕绉帮細</label>
- <input class="input small-font" v-model="toolName" placeholder="鍒�鍏峰甫鍑�" disabled />
- <label class="form-label" style="margin-left: 16px;">瑙勬牸鍨嬪彿锛�</label>
- <input class="input small-font" v-model="toolModel" placeholder="鍒�鍏峰甫鍑�" disabled />
+
+ <!-- 绗簩琛� -->
+ <view class="form-row">
+ <view class="form-cell">
+ <label class="form-label">鍒�鍏峰悕绉帮細</label>
+ <input class="input small-font" v-model="toolName" placeholder="鍒�鍏峰甫鍑�" disabled />
+ </view>
+ <view class="form-cell">
+ <label class="form-label">瑙勬牸鍨嬪彿锛�</label>
+ <input class="input small-font" v-model="toolModel" placeholder="鍒�鍏峰甫鍑�" disabled />
+ </view>
</view>
</view>
@@ -638,15 +646,30 @@
/* 鍘熸牱淇濇寔锛屾湭鏀瑰姩鏍峰紡锛屽彧鎻掑叆浜嗕竴涓緭鍏ユ */
.top-section-grid {
display: flex;
+ flex-direction: column;
justify-content: center;
- align-items: flex-end;
- gap: 32px;
+ align-items: center;
+ gap: 16px;
margin-bottom: 2vh;
width: 95vw;
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
+
+ /* 鏂板锛氳〃鍗曡鏍峰紡 */
+ .form-row {
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
+ gap: 32px;
+ margin-bottom: 16px;
+ width: 100%;
+ }
+
+ .form-row:last-child {
+ margin-bottom: 0;
+ }
.form-cell {
display: flex;
@@ -939,23 +962,20 @@
margin-top: 2vh;
}
- .input-with-suffix {
- position: relative;
+ /* 鏂板锛氬甫鍗曚綅鐨勮緭鍏ユ鏍峰紡 */
+ .input-with-unit {
display: flex;
align-items: center;
}
- .input-with-suffix .input {
+ .input-with-unit .input {
width: 10vw;
margin-right: 8px;
- padding-right: 24px; /* 涓哄悗缂�鐣欏嚭绌洪棿 */
}
- .input-suffix {
- position: absolute;
- right: 16px; /* 璋冩暣鍒拌緭鍏ユ鍐呭彸渚� */
+ .unit-text {
color: #666;
font-size: 0.9vw;
- pointer-events: none; /* 闃叉骞叉壈杈撳叆 */
+ white-space: nowrap;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3