主界面样式修复

快乐的昕的电脑

2025-10-21 8013dbf1c1ca82a9269aa145c205340a9aa1a1c7

主界面样式修复

 components/WorkOrder.vue

@@ -108,7 +108,7 @@

        <!-- 下部：品质检验 -->
        <view class="section card">
            <view class="form-row">
            <view class="quality-row">
                <view class="form-item">
                    <label>最近首检时间:</label>
                    <input class="inp" type="text" v-model="lastInitialCheck" disabled="true" />
@@ -126,7 +126,7 @@
                    <input class="inp" type="number" v-model="initialCount" disabled="true" />
                </view>
            </view>
            <view class="form-row">
            <view class="quality-row">
                <view class="form-item">
                    <label>最近巡检时间:</label>
                    <input class="inp" type="text" v-model="lastPatrolCheck" disabled="true" />
@@ -466,150 +466,173 @@
</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 .form-item {
        flex: 1;
        margin: 0 10px;
    }

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

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