From 52dbfd767f2485a1d615c5d9db50d648a1d8214a Mon Sep 17 00:00:00 2001
From: wbc <2597324127@qq.com>
Date: 星期二, 23 十二月 2025 23:56:58 +0800
Subject: [PATCH] 生产报工模糊查询
---
H5/WCSM.aspx | 359 +++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 239 insertions(+), 120 deletions(-)
diff --git a/H5/WCSM.aspx b/H5/WCSM.aspx
index b61fb24..cb2c9d9 100644
--- a/H5/WCSM.aspx
+++ b/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">
--
Gitblit v1.9.3