优化界面

快乐的昕的电脑

2025-10-31 aac7f9ece13837c085769f886f7d0a17a9e037b9

优化界面

 components/WorkOrderPrint.vue

@@ -1,8 +1,15 @@
<template>
    <view class="page wide-layout" :class="{'has-overlay': (isShowUserSelect || isShow || barcodeIsShow)}">
        <view class="status-section">
            <!-- 报工记录表部分，在标题行添加刷新按钮 -->
            <view class="report-table-wrapper">
                <view class="report-title">报工记录表</view>
                <view class="report-header">
                    <view class="report-title">报工记录表</view>
                    <view class="header-buttons">
                        <button class="refresh-btn-header" @click="refresh">刷新</button>
                        <button v-if="isGeneratingBarcode" class="reset-btn-header" @click="resetGenerateState">重置</button>
                    </view>
                </view>
                <div class="table-scroll">
                    <table class="report-table">
                        <thead>
@@ -57,7 +64,7 @@
                </div>
            </view>

            <!-- 下面原有内容保持不变 -->
            <!-- 移除了原来的状态行中的按钮组 -->
            <view class="status-row">
                <!--<view class="status-box">
                    <text>机台面板数：</text>
@@ -84,7 +91,7 @@
                <view class="btn-group">
                    <button class="refresh-btn-inline" @click="refresh">刷新</button>
                    <button v-if="isGeneratingBarcode" class="reset-btn-inline" @click="resetGenerateState">重置</button>
                </view>
            </view>
            </view>

            <view class="flex-row gap-lg">
@@ -473,6 +480,49 @@
        color: #777;
        font-size: 14px;
    }

    /* 新增：标题行样式 */
    .report-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .header-buttons {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .refresh-btn-header {
        background: #00A2E9;
        color: #fff;
        border: none;
        font-size: 16px;
        border-radius: 8px;
        padding: 8px 20px;
        transition: background 0.15s;
    }

        .refresh-btn-header:hover {
            background: #0086c0;
        }

    .reset-btn-header {
        background: #ff6b6b;
        color: #fff;
        border: none;
        font-size: 14px;
        border-radius: 8px;
        padding: 8px 16px;
        transition: background 0.15s;
    }

        .reset-btn-header:hover {
            background: #e94d4d;
        }

    /* 其余样式保持不变 */

    .page {
@@ -507,7 +557,7 @@
        font-size: 24px;
        font-weight: 600;
        text-align: center;
        margin: 0 0 8px;
        margin: 0;
    }

    .report-table {
@@ -932,5 +982,15 @@
        .reason-btn {
            font-size: 12px;
        }

        .refresh-btn-header {
            font-size: 14px;
            padding: 6px 16px;
        }

        .reset-btn-header {
            font-size: 12px;
            padding: 6px 12px;
        }
    }
</style>