|
|
@@ -53,26 +53,26 @@ const generateSubLocations = (boxId: number, count: number, filledIndexes: numbe
|
|
|
|
|
|
const boxList = ref<BoxItem[]>([
|
|
|
{ id: 1, status: 'filled' },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
status: 'empty',
|
|
|
splitCount: 2,
|
|
|
subLocations: generateSubLocations(2, 2, [0])
|
|
|
},
|
|
|
- {
|
|
|
- id: 3,
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
status: 'empty',
|
|
|
splitCount: 4,
|
|
|
subLocations: generateSubLocations(3, 4, [0, 1])
|
|
|
},
|
|
|
- {
|
|
|
- id: 4,
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
status: 'empty',
|
|
|
splitCount: 6,
|
|
|
subLocations: generateSubLocations(4, 6, [0, 2])
|
|
|
},
|
|
|
- {
|
|
|
- id: 5,
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
status: 'empty',
|
|
|
splitCount: 8,
|
|
|
subLocations: generateSubLocations(5, 8, [0, 3, 5])
|
|
|
@@ -90,13 +90,14 @@ const boxList = ref<BoxItem[]>([
|
|
|
const getSubGridStyle = (splitCount: number) => {
|
|
|
switch (splitCount) {
|
|
|
case 2:
|
|
|
- return { gridTemplateColumns: 'repeat(2, 1fr)', gridTemplateRows: '1fr' }
|
|
|
+ // 2分割:横着分割(上下分割)
|
|
|
+ return { gridTemplateColumns: '1fr', gridTemplateRows: 'repeat(2, 1fr)' }
|
|
|
case 4:
|
|
|
return { gridTemplateColumns: 'repeat(2, 1fr)', gridTemplateRows: 'repeat(2, 1fr)' }
|
|
|
case 6:
|
|
|
- return { gridTemplateColumns: 'repeat(3, 1fr)', gridTemplateRows: 'repeat(2, 1fr)' }
|
|
|
+ return { gridTemplateColumns: 'repeat(2, 1fr)', gridTemplateRows: 'repeat(3, 1fr)' }
|
|
|
case 8:
|
|
|
- return { gridTemplateColumns: 'repeat(4, 1fr)', gridTemplateRows: 'repeat(2, 1fr)' }
|
|
|
+ return { gridTemplateColumns: 'repeat(2, 1fr)', gridTemplateRows: 'repeat(4, 1fr)' }
|
|
|
default:
|
|
|
return { gridTemplateColumns: 'repeat(2, 1fr)', gridTemplateRows: 'repeat(2, 1fr)' }
|
|
|
}
|
|
|
@@ -266,7 +267,7 @@ const submitMove = () => {
|
|
|
|
|
|
.scan-section {
|
|
|
margin-bottom: 12px;
|
|
|
-
|
|
|
+
|
|
|
:deep(.van-field) {
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
@@ -318,11 +319,11 @@ const submitMove = () => {
|
|
|
|
|
|
:deep(.van-field) {
|
|
|
padding: 0;
|
|
|
-
|
|
|
+
|
|
|
.van-field__body {
|
|
|
height: 20px;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.van-field__control {
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
@@ -362,7 +363,7 @@ const submitMove = () => {
|
|
|
|
|
|
.box-item {
|
|
|
width: 100%;
|
|
|
- aspect-ratio: 1;
|
|
|
+ aspect-ratio: 0.8;
|
|
|
border: 1px solid #ddd;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -383,13 +384,13 @@ const submitMove = () => {
|
|
|
}
|
|
|
|
|
|
&.box-filled {
|
|
|
- background: #d4e5f7;
|
|
|
- border-color: #4a90d9;
|
|
|
+ background: #e8d4f7;
|
|
|
+ border-color: #c9a0dc;
|
|
|
}
|
|
|
|
|
|
&.box-empty-box {
|
|
|
- background: #f5f5f5;
|
|
|
- border-color: #ddd;
|
|
|
+ background: #d4f7e0;
|
|
|
+ border-color: #a0dcb0;
|
|
|
}
|
|
|
|
|
|
&.box-waiting {
|
|
|
@@ -419,8 +420,8 @@ const submitMove = () => {
|
|
|
border-radius: 2px;
|
|
|
|
|
|
&.sub-filled {
|
|
|
- background: #d4e5f7;
|
|
|
- border-color: #4a90d9;
|
|
|
+ background: #e8d4f7;
|
|
|
+ border-color: #c9a0dc;
|
|
|
}
|
|
|
|
|
|
&.sub-selected {
|