优化界面

快乐的昕的电脑

2025-10-31 31ab39a665b9d44a1465b0c86715f8d076fb9b8e

 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>