调试

快乐的昕的电脑

11 小时以前 5d15164521a9343a5ff3860c97f36eae8386d674

 pages/moldRecord.vue

@@ -6,14 +6,14 @@
        </view>

        <!-- 刀具使用记录表格 -->
        <view class="table-section">
        <view class="table-section" :class="{'expanded': toolExpanded}">
            <view class="table-header">
                <h3>上下刀记录</h3>
                <button class="expand-btn" @click="toggleExpand('tool')">
                    {{ toolExpanded ? '收起' : '展开' }}
                </button>
            </view>
            <table class="styled-table" :class="{'expanded': toolExpanded}">
            <table class="styled-table">
                <thead>
                    <tr>
                        <th style="width:7%">刀具编号</th>
@@ -91,7 +91,9 @@
                    </tr>
                    <tr v-if="hasMoreToolRecords && !toolExpanded">
                        <td colspan="12" class="more-records-tip">
                            <span>还有 {{ remainingToolRecords }} 条记录，点击"展开"按钮查看全部</span>
                            <span>还有 {{ remainingToolRecords }} 条记录，点击</span>
                            <button class="inline-expand-btn" @click="toggleExpand('tool')">展开</button>
                            <span>按钮查看全部</span>
                        </td>
                    </tr>
                </tbody>
@@ -99,14 +101,14 @@
        </view>

        <!-- 工单首检记录表格 -->
        <view class="table-section">
        <view class="table-section" :class="{'expanded': inspectionExpanded}">
            <view class="table-header">
                <h3>工单首检记录</h3>
                <button class="expand-btn" @click="toggleExpand('inspection')">
                    {{ inspectionExpanded ? '收起' : '展开' }}
                </button>
            </view>
            <table class="styled-table" :class="{'expanded': inspectionExpanded}">
            <table class="styled-table">
                <thead>
                    <tr>
                        <th style="width:10%">检验单号</th>
@@ -136,7 +138,9 @@
                    </tr>
                    <tr v-if="hasMoreInspectionRecords && !inspectionExpanded">
                        <td colspan="10" class="more-records-tip">
                            <span>还有 {{ remainingInspectionRecords }} 条记录，点击"展开"按钮查看全部</span>
                            <span>还有 {{ remainingInspectionRecords }} 条记录，点击</span>
                            <button class="inline-expand-btn" @click="toggleExpand('inspection')">展开</button>
                            <span>按钮查看全部</span>
                        </td>
                    </tr>
                </tbody>
@@ -503,11 +507,13 @@
        display: flex;
        flex-direction: column;
        margin: 0;
        overflow-x: auto;
        overflow: auto; /* 统一滚动条 */
        width: 100%;
        border: 1px solid #f0f0f0;
        border-radius: 8px;
        background: #fff;
        max-height: 220px; /* 默认高度 */
        transition: max-height 0.3s ease;
    }

    .table-header {
@@ -549,57 +555,24 @@
    table.styled-table {
        max-width: 1800px;
        width: 98vw;
        margin: 0 auto;
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
        border: 2px solid #bfbfbf;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        max-height: 180px; /* 调整高度使页面饱满 */
        display: block;
        overflow-y: hidden;
        transition: max-height 0.3s ease;
    }

        table.styled-table.expanded {
            max-height: 400px; /* 展开时的高度 */
            overflow-y: auto;
        }

        table.styled-table thead {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

            table.styled-table thead th {
                background: #fafafa;
                border-bottom: 2px solid #bfbfbf;
                padding: 16px 10px;
                font-weight: bold;
                text-align: center;
                font-size: 22px;
                position: sticky;
                top: 0;
                z-index: 10;
            }

        table.styled-table tbody {
            display: block;
            max-height: calc(180px - 50px); /* 减去表头高度 */
            overflow-y: hidden;
        }

        table.styled-table.expanded tbody {
            max-height: calc(400px - 50px);
            overflow-y: auto;
        }

        table.styled-table tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        table.styled-table thead th {
            background: #fafafa;
            border-bottom: 2px solid #bfbfbf;
            padding: 16px 10px;
            font-weight: bold;
            text-align: center;
            font-size: 22px;
            position: sticky; /* 表头置顶 */
            top: 0;
            z-index: 10;
        }

        table.styled-table tbody td {
@@ -609,6 +582,11 @@
            text-align: center;
            font-size: 22px;
        }

    /* 展开状态 - 只改变容器高度 */
    .table-section.expanded {
        max-height: 450px; /* 展开时的容器高度 */
    }

        table.styled-table tbody .left {
            text-align: left;
@@ -656,11 +634,38 @@
    }

        .more-records-tip span {
            display: inline-block;
            padding: 5px 15px;
            background-color: #f0f0f0;
            border-radius: 4px;
            border: 1px dashed #ccc;
            display: inline;
            font-size: 20px;
            color: #666;
        }

    /* 行内展开按钮样式 - 蓝色 */
    .inline-expand-btn {
        display: inline-block;
        padding: 2px 12px; /* 减小内边距,与文字高度一致 */
        margin: 0 6px;
        background-color: #00A2E9; /* 蓝色 */
        color: white;
        border: none;
        border-radius: 3px;
        font-size: 20px; /* 与提示文字大小一致 */
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 2px 4px rgba(0, 162, 233, 0.2);
        vertical-align: baseline; /* 与文字基线对齐 */
        line-height: 1.2; /* 控制行高 */
    }

        .inline-expand-btn:hover {
            background-color: #40a9ff; /* 悬停时变淡 */
            box-shadow: 0 4px 8px rgba(0, 162, 233, 0.3);
            transform: translateY(-1px);
        }

        .inline-expand-btn:active {
            background-color: #096dd9; /* 点击时变深 */
            transform: translateY(0);
        }

    /* 响应式调整 */