1、更新样式

kyy

2025-11-20 62ada016c892e965c0b1dec518f5ad83b2e98bde

1、更新样式

 H5/WCSM.aspx

@@ -8,30 +8,81 @@
    <style>
        /* 全局样式 */
        #app {
            background-color: #f5f7fa;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 0;
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        /* 表单区域样式 */
        .van-cell-group {
            margin: 16px;
            border-radius: 12px;
        /* 卡片式容器样式 */
        .card-container {
            margin: 4px 16px 4px;
            border-radius: 16px;
            background-color: #fff;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: box-shadow 0.3s ease;
            transition: all 0.3s ease;
        }
        
        .card-container:hover {
            box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
        }

        .van-cell-group:hover {
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        /* 卡片头部和标题样式 */
        .card-header {
            padding: 16px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
        }
        
        .card-title {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        
        /* 卡片内容区样式 */
        .card-body {
            padding: 10px 18px;
        }
        
        /* 扫码区域字段样式 */
        .scan-field {
            margin-bottom: 10px;
            border-radius: 8px;
            overflow: hidden;
        }
        
        /* 数据展示网格布局 */
        .data-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
        }
        
        .data-field {
            border-radius: 8px;
            overflow: hidden;
        }
        
        /* 导航栏样式优化 */
        .van-nav-bar {
            background: linear-gradient(135deg, #5568d3 0%, #6b46c1 100%);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .van-nav-bar__title {
            font-size: 17px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        /* 表单字段样式 */
        .van-field {
            padding: 14px 16px;
            padding: 8px 10px;
            border-bottom: 1px solid #ebedf0;
            transition: background-color 0.2s ease;
        }
@@ -56,7 +107,7 @@
        /* 标签样式 */
        .van-cell__title {
            font-size: 14px;
            color: #646566;
            color: #323233;
            font-weight: 500;
        }

@@ -65,8 +116,13 @@
            background-color: #fafafa;
        }

        .van-field--disabled .van-cell__title,
        .van-field--disabled .van-cell__value {
            color: #646566;
            font-weight: bold;
            color: #323233;
        }

        .van-field--disabled .van-cell__value {
            background-color: #e8ebed;
            border-radius: 6px;
            padding: 6px 10px;
@@ -74,37 +130,41 @@

        /* 标签页样式 */
        .van-tabs {
            margin: 16px;
            margin: 8px 16px;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        /* 标签页头部样式 */
        .van-tabs__nav {
            border-bottom: 2px solid #ebedf0;
            border-bottom: 2px solid #f0f2f5;
            padding: 0 16px;
            background: #fafbfc;
        }

        /* 标签样式 */
        .van-tab {
            font-size: 14px;
            color: #646566;
            padding: 12px 16px;
            color: #4e4e4e;
            padding: 12px 16px 10px;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        /* 激活标签样式 */
        .van-tab--active {
            font-weight: 600;
            color: #0283EF;
            font-weight: 700;
            color: #667eea;
        }

        /* 激活标签下划线样式 */
        .van-tabs__line {
            background-color: #0283EF;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 3px;
            bottom: 0;
            transform: translateY(0);
        }

        /* 表格行样式 */
@@ -113,9 +173,9 @@
        }

        .van-row {
            padding: 14px 16px;
            padding: 10px 12px;
            border-bottom: 1px solid #ebedf0;
            transition: background-color 0.2s ease;
            transition: all 0.3s ease;
        }

        .van-row:last-child {
@@ -124,19 +184,20 @@

        /* 表格行悬停样式 */
        .van-row:hover {
            background-color: #f5f7fa;
            background-color: #f0f4ff;
            transform: translateX(4px);
        }

        /* 表格头部样式 */
        .van-row:nth-child(1) {
            background-color: #0283EF;
            font-weight: 600;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-weight: 700;
            color: #fff;
        }

        /* 交替行样式 */
        .van-row:nth-child(even) {
            background-color: #f0f2f5;
            background-color: #fafbfc;
        }

        /* 单元格样式 */
@@ -172,8 +233,16 @@

        /* 小屏幕适配 */
        @media (max-width: 480px) {
            .van-cell-group {
            .card-container {
                margin: 8px;
            }
            
            .card-body {
                padding: 16px 20px;
            }
            
            .data-grid {
                grid-template-columns: 1fr;
            }
            
            .van-tabs {
@@ -189,20 +258,47 @@
            }
        }

        /* 导航栏样式 */
        .van-nav-bar {
            background-color: #0283EF;
            color: #fff;
        }

        .van-nav-bar__title {
            color: #fff;
            font-size: 16px;
            font-weight: 600;
        }

        /* 导航栏文本样式 */
        .van-nav-bar__text {
            color: #fff;
            font-weight: 500;
        }
        
        /* 加载组件样式 */
        comloading {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 60px 20px;
            font-size: 14px;
            color: #4e4e4e;
        }
        
        /* 输入框样式优化 */
        .van-field__control {
            border-radius: 6px;
            transition: all 0.3s ease;
        }
        
        .van-field__control:focus {
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        /* 按钮样式优化 */
        .van-button {
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .van-button--primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }
        
        .van-button--primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
        }

        /* 加载组件样式 */
@@ -212,7 +308,7 @@
            align-items: center;
            padding: 60px 20px;
            font-size: 14px;
            color: #646566;
            color: #4e4e4e;
        }
    </style>
</asp:Content>
@@ -227,93 +323,116 @@
            @click-left="GoBack()"
        ></van-nav-bar>

        <!-- 表单输入区 -->
        <van-cell-group>
            <!-- 库位编码输入 -->
            <van-field
                ref="sectionCode"
                v-model="sectionCode"
                label="库位编码"
                clearable
                placeholder="请扫码"
                :right-icon-size="19"
                v-focus.noKeyboard
                @keyup.enter.native="getModel"
                autofocus="true"
            ></van-field>
        <!-- 扫码核心区 -->
        <div class="card-container scan-core">
            <div class="card-header">
                <h2 class="card-title">扫码核心区</h2>
            </div>
            <div class="card-body">
                <!-- 库位编码输入 -->
                <van-field
                    ref="sectionCode"
                    v-model="sectionCode"
                    label="库位编码"
                    clearable
                    placeholder="请扫描库位条码"
                    :right-icon-size="19"
                    v-focus.noKeyboard
                    @keyup.enter.native="getModel"
                    autofocus="true"
                    class="scan-field"
                ></van-field>

                <!-- 物料条码输入 -->
                <van-field
                    ref="barcode"
                    v-model="formData.barcode"
                    label="物料条码"
                    clearable
                    placeholder="请扫描物料条码"
                    :right-icon-size="19"
                    v-focus.noKeyboard
                    @keyup.enter.native="getScan"
                    class="scan-field"
                ></van-field>
            </div>
        </div>

        <!-- 数据展示区 -->
        <div class="card-container data-display">
            <div class="card-header">
                <h2 class="card-title">物料信息</h2>
            </div>
            <div class="card-body">
                <div class="data-grid">
                    <!-- 物料编码（只读） -->
                    <van-field
                        v-model="formData.itemNo"
                        label="物料编码"
                        disabled
                        class="data-field"
                    ></van-field>
                    
                    <!-- 物料名称（只读） -->
                    <van-field
                        v-model="formData.itemName"
                        label="物料名称"
                        disabled
                        class="data-field"
                    ></van-field>
                    
                    <!-- 物料规格（只读） -->
                    <van-field
                        v-model="formData.itemModel"
                        label="物料规格"
                        disabled
                        class="data-field"
                    ></van-field>

            <!-- 物料条码输入 -->
            <van-field
                ref="barcode"
                v-model="formData.barcode"
                label="物料条码"
                clearable
                placeholder="请扫码"
                :right-icon-size="19"
                v-focus.noKeyboard
                @keyup.enter.native="getScan"
            ></van-field>
                   <!-- 扫码数量（只读） -->
                    <van-field
                    v-model="formData.quantity"
                    label="扫码数量"
                    disabled
                    class="data-field"
                    ></van-field>
                    <!-- 到货单号+送货单号（只读） -->
                    <van-field
                        v-model="formData.paperBillNo"
                        label="到货单号"
                        disabled
                        class="data-field"
                    ></van-field>

            <!-- 物料编码（只读） -->
            <van-field
                v-model="formData.itemNo"
                label="物料编码"
                disabled
            ></van-field>
            
            <!-- 物料名称（只读） -->
            <van-field
                v-model="formData.itemName"
                label="物料名称"
                disabled
            ></van-field>
            
            <!-- 物料规格（只读） -->
            <van-field
                v-model="formData.itemModel"
                label="物料规格"
                disabled
            ></van-field>
                    <!-- 到货单数量（只读） -->
                    <van-field
                        v-model="formData.dhdQty"
                        label="到货单数量"
                        disabled
                        class="data-field"
                    ></van-field>

           <!-- 扫码数量（只读） -->
            <van-field
            v-model="formData.quantity"
            label="扫码数量"
            disabled
            ></van-field>
            <!-- 到货单号+送货单号（只读） -->
            <van-field
                v-model="formData.paperBillNo"
                label="到货单号"
                disabled
            ></van-field>
                    <!-- 已入总数（只读） -->
                    <van-field
                        v-model="formData.sumQuantity"
                        label="已入总数"
                        disabled
                        class="data-field"
                    ></van-field>

            <!-- 到货单数量（只读） -->
            <van-field
                v-model="formData.dhdQty"
                label="到货单数量"
                disabled
            ></van-field>

            <!-- 已入总数（只读） -->
            <van-field
                v-model="formData.sumQuantity"
                label="已入总数"
                disabled
            ></van-field>

            <!-- 剩余未扫条码张数（只读） -->
            <van-field
                v-model="formData.tmsyQty"
                label="剩余未扫张数"
                disabled
            ></van-field>
        </van-cell-group>
                    <!-- 剩余未扫条码张数（只读） -->
                    <van-field
                        v-model="formData.tmsyQty"
                        label="剩余未扫张数"
                        disabled
                        class="data-field"
                    ></van-field>
                </div>
            </div>
        </div>

        <!-- 标签页区域 -->
        <van-tabs color="#000" title-active-color="#0283EF">
        <van-tabs>
            <!-- 第一个标签页：剩余未扫 -->
            <van-tab title="剩余未扫">
                <van-row class="bg-info">