LiLongLong
/
graphite_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

适配微调

feature/layout_0214
zhangjiming 6 months ago
parent
3349a3f809
commit
1058ff924d
3 changed files with 32 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/views/debug/debug.vue
  2. 88
      src/views/graphite/index.vue
  3. 10
      src/views/oreManage/index.vue

8
src/views/debug/debug.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="component-page overflow-auto p-4 text-title"> <div class="component-page overflow-auto p-4 text-title">
<div class="frame"> <div class="frame">
<div class="flex items-center gap-4">
<div class="flex items-center gap-4 flex-wrap">
<label>加热区编号:</label> <label>加热区编号:</label>
<input type="number" class="rounded-sm px-2" placeholder="输入加热区编号" /> <input type="number" class="rounded-sm px-2" placeholder="输入加热区编号" />
<label>异常区编号:</label> <label>异常区编号:</label>
@ -19,7 +19,7 @@
</div> </div>
<div class="frame"> <div class="frame">
<div class="flex items-center gap-4">
<div class="flex items-center gap-4 flex-wrap">
<label for="">加液枪编号:</label> <label for="">加液枪编号:</label>
<input type="number" class="rounded-sm px-2" placeholder="输入加液枪编号" /> <input type="number" class="rounded-sm px-2" placeholder="输入加液枪编号" />
<label for="">注入量:</label> <label for="">注入量:</label>
@ -33,7 +33,7 @@
</div> </div>
</div> </div>
<div class="frame"> <div class="frame">
<div class="flex items-center gap-4">
<div class="flex items-center gap-4 flex-wrap">
<label>加热区编号:</label> <label>加热区编号:</label>
<input type="number" class="rounded-sm px-2" placeholder="输入加热区编号" /> <input type="number" class="rounded-sm px-2" placeholder="输入加热区编号" />
<label>温度:</label> <label>温度:</label>
@ -56,7 +56,7 @@
</div> </div>
</div> </div>
<div class="frame"> <div class="frame">
<div class="flex items-center gap-4">
<div class="flex items-center gap-4 flex-wrap">
X:<input type="number" class="rounded-sm px-1 w-16" /> Y:<input type="number" class="rounded-sm px-1 w-16" /> X:<input type="number" class="rounded-sm px-1 w-16" /> Y:<input type="number" class="rounded-sm px-1 w-16" />
Z:<input type="number" class="rounded-sm px-1 w-16" /> Z:<input type="number" class="rounded-sm px-1 w-16" />
<label for="">当前位置：</label> <label for="">当前位置：</label>

88
src/views/graphite/index.vue
View File

@ -163,107 +163,59 @@ const onChooseCaft = () => {
.graphite_btn_container { .graphite_btn_container {
margin: 2rem 0; margin: 2rem 0;
gap: 0.625rem; gap: 0.625rem;
display: grid;
@media (max-width: calc($md - 0.1px)) { @media (max-width: calc($md - 0.1px)) {
display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
.op_open_door { .op_open_door {
grid-column: 1/3;
grid-column: 1/-1;
} }
.op_up_tray { .op_up_tray {
grid-column: 1/3;
grid-column: 1/-1;
} }
} }
@media (min-width: $md) and (max-width: calc($lg - 0.1px)) { @media (min-width: $md) and (max-width: calc($lg - 0.1px)) {
display: grid;
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, 1fr);
.op_open_door {
grid-column: 1/7;
}
.op_start_task {
grid-column: 1/4;
}
.op_stop_task {
grid-column: 4/7;
}
.op_select_craft {
grid-column: 1/4;
> * {
grid-column: span 3;
} }
.op_exec_craft {
grid-column: 4/7;
}
.op_add_liquid {
grid-column: 1/4;
}
.op_shake_up {
grid-column: 4/7;
.op_open_door {
grid-column: 1/-1;
} }
.op_move_heat { .op_move_heat {
grid-column: 1/3;
grid-column: span 2;
} }
.op_move_act { .op_move_act {
grid-column: 3/5;
grid-column: span 2;
} }
.op_move_exception { .op_move_exception {
grid-column: 5/7;
}
.op_start_heat {
grid-column: 1/4;
}
.op_up_tray {
grid-column: 4/7;
grid-column: span 2;
} }
} }
@media (min-width: $lg) {
display: grid;
@media (min-width: $lg) and (max-width: calc($xl - 0.1px)) {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
.op_open_door { .op_open_door {
grid-column: 1/3;
grid-column: 1/-1;
} }
.op_up_tray { .op_up_tray {
grid-column: 1/3;
grid-column: 1/-1;
} }
} }
@media (min-width: $xl) { @media (min-width: $xl) {
display: grid;
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, 1fr);
.op_open_door {
grid-column: 1/7;
}
.op_start_task {
grid-column: 1/4;
}
.op_stop_task {
grid-column: 4/7;
}
.op_select_craft {
grid-column: 1/4;
}
.op_exec_craft {
grid-column: 4/7;
> * {
grid-column: span 3;
} }
.op_add_liquid {
grid-column: 1/4;
}
.op_shake_up {
grid-column: 4/7;
.op_open_door {
grid-column: 1/-1;
} }
.op_move_heat { .op_move_heat {
grid-column: 1/3;
grid-column: span 2;
} }
.op_move_act { .op_move_act {
grid-column: 3/5;
grid-column: span 2;
} }
.op_move_exception { .op_move_exception {
grid-column: 5/7;
}
.op_start_heat {
grid-column: 1/4;
}
.op_up_tray {
grid-column: 4/7;
grid-column: span 2;
} }
} }
} }

10
src/views/oreManage/index.vue
View File

@ -19,20 +19,26 @@
<p class="w-[18rem]">矿石名称</p> <p class="w-[18rem]">矿石名称</p>
<p>工艺</p> <p>工艺</p>
</header> </header>
<div class="h-10 flex items-center text-xs pr-3 text-[#6e6e6e] border-b border-b-[#f8f8f8]">
<div class="min-h-10 flex items-center text-xs pr-3 text-[#6e6e6e] border-b border-b-[#f8f8f8]">
<div class="w-10 self-stretch flex justify-center items-center"> <div class="w-10 self-stretch flex justify-center items-center">
<img class="w-4 h-4" :src="isSelect ? icon_select : icon_unselect" alt="" /> <img class="w-4 h-4" :src="isSelect ? icon_select : icon_unselect" alt="" />
</div> </div>
<p class="w-14">1</p> <p class="w-14">1</p>
<p class="w-[18rem]">矿石名称1</p> <p class="w-[18rem]">矿石名称1</p>
<div class="flex-auto"> <div class="flex-auto">
<ul class="appearance-none flex items-center gap-x-3 text-sm">
<ul class="appearance-none flex items-center gap-3 text-sm flex-wrap my-2">
<li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${true && 'bg-primary text-white'}`"> <li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${true && 'bg-primary text-white'}`">
工艺名称1 工艺名称1
</li> </li>
<li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${false && 'bg-primary text-white'}`"> <li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${false && 'bg-primary text-white'}`">
工艺名称2 工艺名称2
</li> </li>
<li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${true && 'bg-primary text-white'}`">
工艺名称3
</li>
<li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${false && 'bg-primary text-white'}`">
工艺名称4
</li>
</ul> </ul>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save