From 38c3c332ae1aa7ee2c520b2ee9ab52af995bbbc3 Mon Sep 17 00:00:00 2001
From: 快乐的昕的电脑 <快乐的昕的电脑@DESKTOP-C2BQPQU>
Date: 星期四, 04 十二月 2025 18:20:50 +0800
Subject: [PATCH] 合并项目
---
components/WorkOrderStatus.vue | 433 ++++++++++++++++++++++++++++--------------------------
1 files changed, 224 insertions(+), 209 deletions(-)
diff --git a/components/WorkOrderStatus.vue b/components/WorkOrderStatus.vue
index 60ea543..6192c8b 100644
--- a/components/WorkOrderStatus.vue
+++ b/components/WorkOrderStatus.vue
@@ -1,45 +1,49 @@
<template>
<view class="page">
- <!-- 鍒锋柊鎸夐挳 -->
- <button @click="handleRefresh" class="refresh-btn">鍒锋柊</button>
- <view>
- <h4>璇存槑:</br>寮�宸ユ椂闂�=棣栦欢鍚堟牸鍚庡彇閫佹鏃堕棿,</br>瀹屽伐鏃堕棿=鎶ュ伐鏁扮瓑浜庡伐鍗曟暟鐨勬椂闂�</h4>
- </view>
<!-- 涓婂崐閮ㄥ垎 -->
<!-- 寮�宸ュ畬宸� -->
-
<view class="top-section">
- <!-- 宸﹁竟宸ュ崟鎸夐挳缁勫拰杈撳叆妗嗭紝宸﹀彸甯冨眬 -->
- <view class="left-section">
- <view class="item">
- <button class="btn-disabled">寮�宸�</button>
- <input class="input-box" v-model="startTime" disabled="true" placeholder="寮�宸ユ椂闂�=棣栦欢鍚堟牸鍚庡彇閫佹鏃堕棿" />
- </view>
- <view class="item">
- <button class="btn-disabled">瀹屽伐</button>
- <input class="input-box" v-model="endTime" disabled="true" placeholder="鎶ュ伐鏁拌揪鍒拌鍒掓暟鍚庤嚜鍔ㄥ畬宸�" />
- </view>
- <view class="item">
- <button @click="stateCheck(2)" class="btn-blue">鏆傚仠</button>
- <input class="input-box" v-model="suspendTime" disabled="true" placeholder="鐐规殏鍋滄寜閽椂鍐欏叆" />
- </view>
- <!--<view class="item">
- <button @click="stateCheck(2)" class="btn-blue">鍙嶆殏鍋�</button>
- <input class="input-box" v-model="suspendTime" disabled="true" placeholder="鐐规殏鍋滄寜閽椂鍐欏叆" />
- </view>-->
- <!-- <view class="item">
- <button @click="stateCheck(3)" class="btn-blue">鍙嶅畬宸�</button>
- <input class="input-box" v-model="reverseTime" disabled="true" placeholder="鐐瑰弽瀹屽伐鎸夐挳鍐欏叆" />
- </view> -->
+ <!-- 绗竴琛岋細宸ュ崟鍙峰拰鍒锋柊鎸夐挳 -->
+ <view class="header-row">
+ <text class="order-label">宸ュ崟鍙�</text>
+ <text class="order-input">{{ orderNo }}</text>
+ <button @click="handleRefresh" class="refresh-btn">鍒锋柊</button>
</view>
-
- <!-- 鍙宠竟宸ュ崟鐘舵�� -->
- <view class="right-section">
- <text class="status-title">宸ュ崟鍙�</text>
- <text class="status-title"><input class="status-title" type="text" v-model="orderNo" disabled="true" /></text>
- <text class="status-title">宸ュ崟鐘舵��</text>
- <view class="status-circle">
- <input class="status-input" v-model="workOrderStatus" disabled="true" />
+
+ <!-- 涓夊垪甯冨眬 -->
+ <view class="three-column-layout">
+ <!-- 绗竴鍒楋細鎸夐挳 -->
+ <view class="column buttons-column">
+ <view class="button-item">
+ <button class="btn-disabled">寮�宸�</button>
+ </view>
+ <view class="button-item">
+ <button class="btn-disabled">瀹屽伐</button>
+ </view>
+ <view class="button-item">
+ <button @click="stateCheck(2)" class="btn-blue">鏆傚仠</button>
+ </view>
+ </view>
+
+ <!-- 绗簩鍒楋細杈撳叆妗� -->
+ <view class="column inputs-column">
+ <view class="input-item">
+ <input class="input-box" v-model="startTime" disabled="true" placeholder="寮�宸ユ椂闂�=棣栦欢鍚堟牸鍚庡彇閫佹鏃堕棿" />
+ </view>
+ <view class="input-item">
+ <input class="input-box" v-model="endTime" disabled="true" placeholder="鎶ュ伐鏁拌揪鍒拌鍒掓暟鍚庤嚜鍔ㄥ畬宸�" />
+ </view>
+ <view class="input-item">
+ <input class="input-box" v-model="suspendTime" disabled="true" placeholder="鐐规殏鍋滄寜閽椂鍐欏叆" />
+ </view>
+ </view>
+
+ <!-- 绗笁鍒楋細宸ュ崟鐘舵�� -->
+ <view class="column status-column">
+ <text class="status-label">宸ュ崟鐘舵��</text>
+ <view class="status-circle">
+ <input class="status-input" v-model="workOrderStatus" disabled="true" />
+ </view>
</view>
</view>
</view>
@@ -216,209 +220,220 @@
</script>
<style scoped>
- .page {
- padding: 2vh;
- display: flex;
- flex-direction: column;
- box-sizing: border-box;
- }
+ .page {
+ padding: 1vh; /* 鍘�2vh锛岀缉灏忔暣浣撲笂涓嬮棿璺� */
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+ width: 100%;
+ }
- /* 鍒锋柊鎸夐挳鏍峰紡 */
+ /* 绗竴琛岋細宸ュ崟鍙峰拰鍒锋柊鎸夐挳 */
+ .header-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 2vh;
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ .order-label {
+ font-size: 22px;
+ font-weight: 500;
+ white-space: nowrap;
+ flex-shrink: 0; /* 闃叉鏍囩琚帇缂� */
+ margin-right: 1vw;
+ }
+
+ .order-input {
+ flex: 1;
+ padding: 0 1vw;
+ font-size: 30px; /* 璁剧疆涓�30px瀛椾綋 */
+ font-weight: bold; /* 鍔犵矖鏄剧ず */
+ box-sizing: border-box;
+ height: 80px; /* 涓庢寜閽珮搴︿竴鑷� */
+ min-width: 0; /* 鍏佽杈撳叆妗嗘敹缂� */
+ margin-right: 1vw; /* 涓庡埛鏂版寜閽箣闂寸暀闂撮殭 */
+ display: flex;
+ align-items: center;
+ }
+
+ /* 鍒锋柊鎸夐挳鏍峰紡 */
.refresh-btn {
- position: absolute;
- top: 10px;
- right: 10px;
background-color: #00A2E9;
/* 钃濊壊鑳屾櫙 */
color: white;
- height: 60px;
+ padding: 8px 20px;
border: none;
- border-radius: 5px;
- font-size: 35px;
+ border-radius: 4px;
+ font-size: 22px;
+ font-weight: 500;
cursor: pointer;
- width: 90px !important; /* 鏇寸獎 */
- height: 60px !important; /* 鏇撮珮 */
- font-size: 22px !important;
- padding: 0 !important;
- border-radius: 8px !important;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ transition: all 0.3s;
+ width: 150px; /* 璁剧疆瀹藉害涓�150px */
+ height: 80px; /* 璁剧疆楂樺害涓�80px */
+ flex-shrink: 0; /* 闃叉鎸夐挳琚帇缂� */
}
- /* 涓婂崐閮ㄥ垎锛氬乏鍙冲竷灞� */
- .top-section {
+ /* 涓夊垪甯冨眬 */
+ .three-column-layout {
display: flex;
- justify-content: space-between;
- flex-grow: 1;
- margin-bottom: 4vh;
- flex-wrap: nowrap; /* 闃叉瀛愬厓绱犳崲琛� */
- }
-
- .left-section {
- width: 50%; /* 鍐嶇缉灏忎竴鐐� */
- display: flex;
- flex-direction: column;
- }
-
- .item {
- display: flex;
- align-items: center;
- margin-bottom: 3vh;
- flex-wrap: nowrap; /* 绂佹鎹㈣ */
- }
-
- /* 缁熶竴鎸夐挳鍜岃緭鍏ユ鐨勯珮搴� */
- button,
- .input-box {
- width: 55% !important; /* 鍘�70%锛屾敼涓�50%锛屾洿绐� */
- height: 4vh !important; /* 鍘�6vh锛屾敼涓�4vh锛屾洿鐭� */
- font-size: 1.2vw !important; /* 瀛椾綋鏇村皬 */
- padding: 0 0.8vw !important; /* 鍐呰竟璺濈暐鍑� */
- border: 2px solid #999 !important;
- border-radius: 5px !important;
+ gap: 2vw;
+ flex: 1;
+ width: 100%;
box-sizing: border-box;
}
- button {
- width: 30%;
- padding: 0;
- font-size: 1.8vw;
- /* Larger font for buttons */
- margin-right: 1vw;
- line-height: 5vh;
- }
-
- .btn-disabled {
- background-color: #ccc;
- color: #fff;
- border: none;
- }
-
- .btn-blue {
- background-color: #00A2E9;
- color: #fff;
- border: none;
- }
-
- .input-box {
- width: 70%;
- padding: 0 1vw;
- font-size: 1.5vw;
- /* Increased font size for input */
- border: 1px solid #ccc;
- box-sizing: border-box;
- /* 纭繚楂樺害涓�鑷� */
- }
-
- /* 鍙宠竟宸ュ崟鐘舵�侀儴鍒� */
- .right-section {
- width: 28%; /* 鍐嶇缉灏忎竴鐐� */
+ .column {
display: flex;
flex-direction: column;
- align-items: flex-start;
- justify-content: flex-start;
- text-align: center;
- padding-top: 45px;
- flex-wrap: wrap;
- align-content: flex-start;
- margin-top: -44px;
+ gap: 1.5vh;
+ flex: 1; /* 姣忓垪绛夊 */
+ min-width: 0; /* 鍏佽鍒楁敹缂� */
}
- .status-title {
- margin-bottom: 2vh;
- font-size: 2vw;
- /* Larger font size for titles */
- }
+ /* 鎸夐挳鍒� */
+ .buttons-column {
+ /* width: 30%; 绉婚櫎鍥哄畾瀹藉害 */
+ }
- .status-circle {
- width: 11vw;
- /* Enlarged status circle */
- height: 11vw;
- background-color: #00A2E9;
- border-radius: 50%;
- display: flex;
- justify-content: center;
- align-items: center;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- }
+ .button-item {
+ display: flex;
+ align-items: center;
+ height: 6vh;
+ width: 100%;
+ }
- .status-input {
- color: white;
- font-size: 2vw;
- /* Increased font size for status input */
- background: transparent;
- border: none;
- text-align: center;
- width: 100%;
- height: 100%;
- outline: none;
- }
+ /* 杈撳叆妗嗗垪 */
+ .inputs-column {
+ /* width: 40%; 绉婚櫎鍥哄畾瀹藉害 */
+ }
- /* 涓嬪崐閮ㄥ垎锛氫繚瀛樺拰鍙栨秷鎸夐挳 */
+ .input-item {
+ display: flex;
+ align-items: center;
+ height: 6vh;
+ width: 100%;
+ }
+
+ /* 鐘舵�佸垪 */
+ .status-column {
+ /* width: 30%; 绉婚櫎鍥哄畾瀹藉害 */
+ justify-content: center;
+ padding-top: 2vh;
+ }
+
+ .status-label {
+ font-size: 22px;
+ font-weight: 500;
+ text-align: center;
+ margin-bottom: 1vh;
+ }
+
+ /* 涓婂崐閮ㄥ垎锛氬乏鍙冲竷灞� */
+ .top-section {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ margin-bottom: 1.5vh; /* 鍘�4vh锛岀缉灏忎笂涓嬮棿闅� */
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ /* 缁熶竴鎸夐挳鍜岃緭鍏ユ鐨勯珮搴� */
+ button,
+ .input-box {
+ height: 6vh; /* 鎸夐挳鍜岃緭鍏ユ鏇撮珮 */
+ }
+
+ button {
+ width: 100%; /* 鎸夐挳鍗犳弧瀹瑰櫒瀹藉害 */
+ padding: 0;
+ font-size: 22px; /* 瀛椾綋鏇村ぇ */
+ font-weight: 500;
+ line-height: 6vh;
+ border-radius: 4px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ transition: all 0.3s;
+ box-sizing: border-box;
+ }
+
+ .btn-disabled {
+ background-color: #ccc;
+ color: #fff;
+ border: none;
+ }
+
+ .btn-blue {
+ background-color: #00A2E9;
+ color: #fff;
+ border: none;
+ }
+
+ .input-box {
+ width: 100%; /* 杈撳叆妗嗗崰婊″鍣ㄥ搴� */
+ padding: 0 1vw;
+ font-size: 22px; /* 瀛椾綋鏇村ぇ */
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-sizing: border-box;
+ min-width: 0; /* 鍏佽杈撳叆妗嗘敹缂� */
+ }
+
+ .status-circle {
+ width: 11vw;
+ /* Enlarged status circle */
+ height: 11vw;
+ background-color: #00A2E9;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ margin: 0 auto;
+ min-width: 80px; /* 璁剧疆鏈�灏忓搴� */
+ min-height: 80px; /* 璁剧疆鏈�灏忛珮搴� */
+ }
+
+ .status-input {
+ color: white;
+ font-size: 22px;
+ font-weight: 500;
+ /* Increased font size for status input */
+ background: transparent;
+ border: none;
+ text-align: center;
+ width: 100%;
+ height: 100%;
+ outline: none;
+ }
+
+ /* 涓嬪崐閮ㄥ垎锛氫繚瀛樺拰鍙栨秷鎸夐挳 */
.bottom-section {
display: flex;
- margin-top: 1vh;
+ justify-content: space-between;
+ margin-top: 0.5vh; /* 鍘�1vh锛岀缉灏忎笌涓婃柟闂撮殧 */
height: 100%;
- justify-content: flex-end; /* 璁╂寜閽潬鍙冲榻愶紙鍙�夛級 */
- gap: 16px; /* 鎸夐挳闂磋窛 */
- }
+ width: 100%;
+ box-sizing: border-box;
+ }
.save-btn,
.cancel-btn {
+ width: 48%;
+ padding: 1.5vh;
background-color: #00A2E9;
color: white;
border: none;
text-align: center;
-
- width: 90px !important; /* 鏇寸獎 */
- height: 60px !important; /* 鏇撮珮 */
- font-size: 22px !important;
- padding: 0 !important;
- border-radius: 8px !important;
- display: inline-block;
- }
-
- /* 璁╁彸渚у伐鍗曞彿杈撳叆妗嗗彉闀� */
- .status-title input.status-title {
- width: 110%; /* 鎴� 100%锛屾牴鎹疄闄呴渶姹傝皟鏁� */
- min-width: 320px; /* 鍙�夛紝淇濊瘉鏈�灏忓搴� */
- font-size: 2vw;
+ font-size: 22px;
+ font-weight: 500;
+ /* Larger font for buttons */
+ height: 100%;
+ border-radius: 4px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ transition: all 0.3s;
box-sizing: border-box;
}
-
- .button,
- .input-box {
- font-size: 2.2vw !important; /* 瀛椾綋鏇村ぇ */
- height: 6vh !important; /* 楂樺害鐣ュ */
- }
-
- .input-box {
- border: 2.5px solid #999 !important; /* 杈规鏇寸矖鏇存槑鏄� */
- border-radius: 6px !important; /* 鍦嗚鐣ュぇ */
- padding: 0 1.5vw !important;
- }
-
- button {
- border: 2.5px solid #999 !important; /* 鎸夐挳杈规鍔犵矖 */
- border-radius: 6px !important;
- }
-
- .left-section .item button {
- border-width: 1px !important; /* 杈规鏇寸矖 */
- border-style: solid !important;
- border-color: #999 !important; /* 淇濇寔鍘熸湁鑹茶皟 */
- font-size: 2.6vw !important; /* 瀛椾綋鏇村ぇ */
- font-weight: bold;
- height: 7vh !important; /* 鎸夐挳楂樺害鍔犲ぇ */
- margin-right: 2%; /* 涓庤緭鍏ユ闂磋窛 */
- box-sizing: border-box;
-
- width: 38% !important; /* 鎸夐挳鐣ュ涓�鐐癸紝閬垮厤杈撳叆妗嗗お绐� */
- min-width: 70px;
- }
-
- .left-section .item .input-box {
- width: 45% !important; /* 鍘�60%锛屾敼涓�45% */
- min-width: 100px;
- box-sizing: border-box;
- }
-
</style>
\ No newline at end of file
--
Gitblit v1.9.3