主界面字体样式优化（中部）

快乐的昕的电脑

2025-10-21 7e1a59635c68f99d0ce9dcb7687fb33baf2de5c7

主界面字体样式优化（中部）

 components/WorkOrder.vue

@@ -88,8 +88,6 @@
                    <label>设备稼动率:</label>
                    <input class="inp" type="text" v-model="utilizationRate" disabled="true" />
                </view>
            </view>
            <view class="status-row">
                <view class="form-item">
                    <label>生产开始时间:</label>
                    <input class="inp" type="text" v-model="startTime" disabled="true" />
@@ -465,195 +463,198 @@
</script>

<style>
    .top-order {
        margin-bottom: 1vh;
    }
    .top-order {
        margin-bottom: 1vh;
    }

    .refresh-btn {
        position: absolute;
        top: -11px;
        right: 21px;
        cursor: pointer;
        float: right;
        background-color: #00A2E9;
        color: white;
        border: none;
        font-size: 29px;
        border-radius: 15px;
        margin-top: 9px;
        margin-bottom: 20px;
        padding-left: 25px;
        padding-right: 25px;
    }
    .refresh-btn {
        position: absolute;
        top: -11px;
        right: 21px;
        cursor: pointer;
        float: right;
        background-color: #00A2E9;
        color: white;
        border: none;
        font-size: 29px;
        border-radius: 15px;
        margin-top: 9px;
        margin-bottom: 20px;
        padding-left: 25px;
        padding-right: 25px;
    }

        .refresh-btn:hover {
            background-color: #00A2E9;
        }
        .refresh-btn:hover {
            background-color: #00A2E9;
        }

    .form-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1.5vh;
    }
    .form-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1.5vh;
    }

    .form-item {
        width: 100%;
        padding: 4px;
        margin: 10px 10px;
    }
    .form-item {
        width: 100%;
        padding: 4px;
        margin: 10px 10px;
    }

    .inp {
        float: left;
        width: 63%;
        padding: 0.5vh;
        border: 1px solid #ccc;
        border-radius: 0.5vw;
        margin-top: 0.3vh;
        font-size: 1.3vw;
    }
    .inp {
        float: left;
        width: 63%;
        padding: 0.5vh;
        border: 1px solid #ccc;
        border-radius: 0.5vw;
        margin-top: 0.3vh;
        font-size: 1.3vw;
    }

    .status-block p {
        margin: 1vh 0;
        font-size: 1.5vw;
        font-weight: bold;
    }
    .status-block p {
        margin: 1vh 0;
        font-size: 1.5vw;
        font-weight: bold;
    }

    .card {
        background-color: #fff;
        border-radius: 0.8vw;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 1.5vh;
        border: 1px solid black;
        margin-top: -1vh;
        margin-bottom: 2vh;
        font-size: 1.5vw;
    }
    .card {
        background-color: #fff;
        border-radius: 0.8vw;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 1.5vh;
        border: 1px solid black;
        margin-top: -1vh;
        margin-bottom: 2vh;
        font-size: 1.5vw;
    }

    .card-header {
        position: absolute;
        top: -1vh;
        left: 2vw;
        background-color: #ffffff;
        padding: 0.5vh 1vw;
        border-radius: 0.5vw;
        font-weight: bold;
        font-size: 1.8vw;
    }
    .card-header {
        position: absolute;
        top: -1vh;
        left: 2vw;
        background-color: #ffffff;
        padding: 0.5vh 1vw;
        border-radius: 0.5vw;
        font-weight: bold;
        font-size: 1.8vw;
    }

    .form-item label {
        float: left;
        margin-top: 8px;
        font-size: 1.5vw;
        display: inline-block;
        margin-bottom: 0.5vh;
        color: #333;
    }
    .form-item label {
        float: left;
        margin-top: 8px;
        font-size: 1.5vw;
        display: inline-block;
        margin-bottom: 0.5vh;
        color: #333;
    }

    .status-row label,
    .check-row label {
        width: 30%;
        padding-right: 1vw;
        text-align: right;
        font-size: 1.5vw;
    }
    .status-row label,
    .check-row label {
        width: 30%;
        padding-right: 1vw;
        text-align: right;
        font-size: 1.5vw;
    }

    .status-row input,
    .check-row input {
        width: 65%;
        font-size: 1.5vw;
    }
    .status-row input,
    .check-row input {
        width: 65%;
        font-size: 1.5vw;
    }

    .form-row2 {
        display: flex;
        float: left;
        margin-left: -65px;
        flex-direction: column;
        margin-top: -13px;
        line-height: 48px;
        align-content: flex-start;
    }
    .form-row2 {
        display: flex;
        float: left;
        margin-left: -65px;
        flex-direction: column;
        margin-top: -13px;
        line-height: 48px;
        align-content: flex-start;
    }

    .form-row3 {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 2.5vh
    }
    .form-row3 {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 2.5vh
    }

    .form-row4 {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .form-row4 {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .inp1 {
        width: 42%;
        height: 3.5em;
        font-weight: bolder;
        margin-top: -41px;
        font-size: 39px;
        text-align: center;
        color: red;
    }
    .inp1 {
        width: 42%;
        height: 3.5em;
        font-weight: bolder;
        margin-top: -41px;
        font-size: 39px;
        text-align: center;
        color: red;
    }

    .inp2 {
        float: right;
        width: 220px;
        height: 220px;
        border-radius: 100%;
        text-align: center;
        margin-top: -42px;
        font-size: 96px;
        background-color: #476ee1fc;
        color: #ffffff;
        margin-right: 172px;
    }
    .inp2 {
        float: right;
        width: 220px;
        height: 220px;
        border-radius: 100%;
        text-align: center;
        margin-top: -42px;
        font-size: 96px;
        background-color: #476ee1fc;
        color: #ffffff;
        margin-right: 172px;
    }

    .quality-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5vh;
    }
    .quality-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5vh;
    }

    .quality-row .form-item {
        flex: 1;
        margin: 0 10px;
    }
        .quality-row .form-item {
            flex: 1;
            margin: 0 10px;
        }

        .quality-row .form-item label {
            width: auto;
            min-width: 110px;
            margin-right: 8px;
        }
            .quality-row .form-item label {
                width: auto;
                min-width: 110px;
                margin-right: 8px;
            }

    .quality-row .inp {
        width: 70%;
        min-width: 120px;
    }
        .quality-row .inp {
            width: 70%;
            min-width: 120px;
        }

    .status-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5vh;
        flex-wrap: nowrap;
        /* 保证不换行 */
    }

        .status-row .form-item {
            flex: 1;
            margin: 0 10px;
            flex: 1 1 0;
            margin: 0 8px;
            min-width: 0;
        }

            .status-row .form-item label {
                min-width: 110px;
                margin-right: 8px;
                min-width: 90px;
                margin-right: 6px;
            }

        .status-row .inp {
            width: 70%;
            min-width: 120px;
            width: 65%;
            min-width: 80px;
        }
</style>