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

矿石管理静态页面

feature/home
zhangjiming 6 months ago
parent
392376a2c7
commit
d7c875fd09
12 changed files with 177 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/assets/Icon-partialselect.svg
  2. 1
      src/assets/Icon-select.svg
  3. 1
      src/assets/Icon-unselect.svg
  4. 1
      src/assets/icon_add_s.svg
  5. 1
      src/assets/icon_arr_s.svg
  6. 8
      src/assets/style/tailwind.css
  7. 57
      src/views/oreManage/components/CraftConfig.vue
  8. 10
      src/views/oreManage/components/StepButton.vue
  9. 12
      src/views/oreManage/components/StepItem.vue
  10. 22
      src/views/oreManage/components/StepItemEx.vue
  11. 62
      src/views/oreManage/index.vue
  12. 22
      tailwind.config.js

1
src/assets/Icon-partialselect.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="30" height="30" viewBox="0 0 30 30"><defs><clipPath id="master_svg0_592_53599"><rect x="0" y="0" width="30" height="30" rx="2"/></clipPath></defs><g clip-path="url(#master_svg0_592_53599)"><rect x="0" y="0" width="30" height="30" rx="2" fill="#479CF1" fill-opacity="1"/><g><rect x="5" y="14" width="20" height="3" rx="1.5" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>

1
src/assets/Icon-select.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="30" height="30" viewBox="0 0 30 30"><defs><clipPath id="master_svg0_592_53615"><rect x="0" y="0" width="30" height="30" rx="2"/></clipPath><clipPath id="master_svg1_644_8201"><rect x="5" y="5" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_592_53615)"><rect x="0" y="0" width="30" height="30" rx="2" fill="#479CF1" fill-opacity="1"/><g clip-path="url(#master_svg1_644_8201)"><g><path d="M22.93840625,9.8510975C22.45970625,9.3725505,21.68380625,9.3725505,21.20510625,9.8510975L13.03758625,18.0194275L8.79675625,13.7785975C8.31906625,13.2898475,7.53418525,13.2853575,7.05093325,13.7686075C6.56768025,14.2518575,6.57217225,15.036737500000001,7.06092425,15.5144275L12.13425625,20.587787499999997C12.63181625,21.0851875,13.43836625,21.0851875,13.93592625,20.587787499999997L22.93840625,11.5852675C23.41700625,11.1065775,23.41700625,10.3306185,22.93840625,9.8519305L22.93840625,9.8510975Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></g></svg>

1
src/assets/Icon-unselect.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="30" height="30" viewBox="0 0 30 30"><defs><clipPath id="master_svg0_592_53615"><rect x="0" y="0" width="30" height="30" rx="2"/></clipPath></defs><g clip-path="url(#master_svg0_592_53615)"><rect x="0" y="0" width="30" height="30" rx="2" fill="#FFFFFF" fill-opacity="1"/><rect x="0.5" y="0.5" width="29" height="29" rx="1.5" fill-opacity="0" stroke-opacity="0.15000000596046448" stroke="#000000" fill="none" stroke-width="1"/></g></svg>

1
src/assets/icon_add_s.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="26.303199768066406" height="26.303173065185547" viewBox="0 0 26.303199768066406 26.303173065185547"><g><path d="M24.5875,14.8666L14.8674,14.8666L14.8674,24.5882C14.8674,25.5356,14.099,26.3032,13.1516,26.3032C12.2043,26.3032,11.4359,25.5356,11.4359,24.5882L11.4359,14.8666L1.71574,14.8666C0.767578,14.8666,0,14.099,0,13.1516C0,12.2046,0.767666,11.4366,1.71574,11.4366L11.4359,11.4366L11.4359,1.71495C11.4359,0.76793,12.2042,0,13.1516,0C14.099,0,14.8673,0.767959,14.8673,1.71495L14.8673,11.4367L24.5874,11.4367C25.5356,11.4367,26.3032,12.2046,26.3032,13.1515C26.3032,14.0989,25.5356,14.8665,24.5874,14.8665L24.5875,14.8666Z" fill="#479CF1" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

1
src/assets/icon_arr_s.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="15" height="23" viewBox="0 0 15 23"><g transform="matrix(-1,0,0,-1,30,46)"><path d="M27.436500000000002,23C27.436500000000002,23,30,25.37044,30,25.37044C30,25.37044,20.12696,34.5,20.12696,34.5C20.12696,34.5,30,43.629599999999996,30,43.629599999999996C30,43.629599999999996,27.436500000000002,46,27.436500000000002,46C27.436500000000002,46,15,34.5,15,34.5C15,34.5,27.436500000000002,23,27.436500000000002,23C27.436500000000002,23,27.436500000000002,23,27.436500000000002,23Z" fill-rule="evenodd" fill="#384D5D" fill-opacity="1"/></g></svg>

8
src/assets/style/tailwind.css
View File

@ -8,7 +8,7 @@
justify-content: center;
align-items: center;
background: var(--primaryColor);
border: solid 1px var(--primaryColor);
border: solid 2px var(--primaryColor);
border-radius: 4px;
color: white;
}
@ -19,7 +19,11 @@
background-color: transparent;
border-radius: 4px;
color: var(--primaryColor);
border: solid 1px var(--primaryColor);
border: solid 2px var(--primaryColor);
}
.btn-light-disabled {
color: #d6d6d6;
border: solid 2px #d6d6d6;
}
.component-page {
height: calc(100vh - var(--headerHeight) - var(--footerHeight));

57
src/views/oreManage/components/CraftConfig.vue
View File

@ -0,0 +1,57 @@
<template>
<div class="bg-white">
<main class="h-[36rem] flex text-text" style="width: calc(100vw * 3 / 4)">
<section class="w-1/2 border-r-[#e8e8e8] border-r p-8">
<h1 class="text-xl font-medium">添加工艺</h1>
<div class="mt-5 mb-8 flex items-center">
<span class="font-medium mr-4">工艺名称</span>
<input type="text" placeholder="请输入名称" class="flex-auto bg-[#f6f6f6] h-11 leading-10 rounded-sm px-4" />
</div>
<p class="font-medium mb-4">工艺步骤</p>
<div class="grid grid-cols-2 gap-4">
<StepButton title="抬起托盘" />
<StepButton title="降下托盘" />
<StepButton title="添加溶液" />
<StepButton title="移至加溶" />
<StepButton title="移至加热" />
<StepButton title="摇匀" />
<StepButton title="开始加热" />
<StepButton title="停止加热" />
<StepButton title="拍照" />
<StepButton title="移至异常" />
<StepButton title="移出异常" />
<StepButton title="等待" />
</div>
</section>
<section class="w-1/2 relative">
<h1 class="text-xl font-medium ml-8 mt-8">工艺步骤</h1>
<div class="absolute top-[4.75rem] w-full h-[31rem] overflow-y-auto">
<StepItem :order="1" name="抬起托盘" />
<StepItemEx :order="2" name="添加溶液" />
<StepItem :order="3" name="停止加热" />
</div>
</section>
</main>
<footer
class="h-[5.625rem] flex justify-center items-center text-sm font-medium gap-x-5"
style="box-shadow: 0px -2px 13px 0px rgba(137, 137, 137, 0.3)">
<button class="btn-dark px-20 py-2" @click="onConfirm">确定</button>
<button class="btn-light px-20 py-2" @click="$emit('cancel')">取消</button>
</footer>
</div>
</template>
<script setup lang="ts">
import StepButton from "./StepButton.vue";
import StepItem from "./StepItem.vue";
import StepItemEx from "./StepItemEx.vue";
const emit = defineEmits<{
(e: "ok"): void;
(e: "cancel"): void;
}>();
function onConfirm() {
emit("ok");
}
</script>

10
src/views/oreManage/components/StepButton.vue
View File

@ -0,0 +1,10 @@
<template>
<div class="btn-light relative h-11">
{{ title }}
<img src="@/assets/icon_add_s.svg" alt="add" class=" absolute top-1/2 -translate-y-1/2 right-[1.875rem]" />
</div>
</template>
<script setup lang="ts">
const props = defineProps<{ title: string }>();
</script>

12
src/views/oreManage/components/StepItem.vue
View File

@ -0,0 +1,12 @@
<template>
<div class="bg-[#fafafa] border-b border-b-[#f3f3f3] h-12">
<section class="h-full flex items-center text-xl px-8">
<span>{{ order }}.</span>
<span>{{ name }}</span>
<span class="text-primary underline ml-auto self-stretch leading-[3rem] ">删除</span>
</section>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{ order: number; name: string }>();
</script>

22
src/views/oreManage/components/StepItemEx.vue
View File

@ -0,0 +1,22 @@
<template>
<div class="bg-[#fafafa] border-b border-b-[#f3f3f3]">
<section class="h-12 flex items-center text-xl px-8">
<span>{{ order }}.</span>
<span>{{ name }}</span>
<span class="text-primary underline ml-auto self-stretch leading-[3rem] ">删除</span>
</section>
<section class="bg-[#f4f4f4] h-12 flex items-center px-10 text-[#5e5e5e] gap-5">
<div class="h-[1.875rem] rounded-sm bg-[#eaeaea] flex items-center px-3 min-w-[8.125rem]">
<span>盐酸</span>
<img class="ml-auto" src="@/assets/icon_arr_s.svg" alt="arr" />
</div>
<div class="flex items-center">
<input type="number" class="h-[1.875rem] rounded-sm bg-[#eaeaea] px-3 w-[6.25rem] mr-2" />
<span>ml</span>
</div>
</section>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{ order: number; name: string }>();
</script>

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

@ -1,21 +1,65 @@
<template>
<div class="component-page">
<section class="flex items-center h-20 gap-3 pl-3">
<div class="btn-dark px-3 py-1 text-xs">添加矿石</div>
<div class="btn-light px-3 py-1 text-xs">编辑矿石</div>
<div class="btn-light px-3 py-1 text-xs">删除矿石</div>
<button class="btn-light px-3 py-1 text-xs">添加矿石</button>
<button :disabled="opDisable" class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled">编辑矿石</button>
<button class="btn-light px-3 py-1 text-xs">删除矿石</button>
<div class="btn-light px-3 py-1 text-xs ml-12">添加工艺</div>
<div class="btn-light px-3 py-1 text-xs">编辑工艺</div>
<div class="btn-light px-3 py-1 text-xs">删除工艺</div>
<button class="btn-light px-3 py-1 text-xs ml-12" @click="onAddCraft">添加工艺</button>
<button class="btn-light px-3 py-1 text-xs">编辑工艺</button>
<button class="btn-light px-3 py-1 text-xs">删除工艺</button>
</section>
<section>
<header class="h-10 flex items-center bg-[#000]/[0.02]">
<header class="h-10 flex items-center bg-[#000]/[0.02] text-xs px-3 text-text">
<div class="w-20 flex items-center gap-x-4">
<img src="@/assets/Icon-unselect.svg" alt="icon" />
<p>序号</p>
</div>
<p class="w-[18rem]">矿石名称</p>
<p>工艺</p>
</header>
<div class="h-10 flex items-center text-xs px-3 text-[#6e6e6e] border-b border-b-[#f8f8f8]">
<div class="w-20 flex items-center gap-x-4">
<img :src="isSelect ? icon_select : icon_unselect" alt="" />
<p>1</p>
</div>
<p class="w-[18rem]">矿石名称1</p>
<div class="flex-auto">
<ul class="appearance-none flex items-center gap-x-3 text-sm">
<li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${true && 'bg-primary text-white'}`">
工艺名称1
</li>
<li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${false && 'bg-primary text-white'}`">
工艺名称2
</li>
</ul>
</div>
</div>
</section>
<van-overlay :show="showCraftEditDialog">
<div class="flex justify-center items-center h-full">
<CraftConfig @ok="confirmCraftEdit" @cancel="showCraftEditDialog = false" />
</div>
</van-overlay>
</div>
</template>
<script lang="ts"></script>
<script lang="ts" setup>
import CraftConfig from "./components/CraftConfig.vue";
import icon_unselect from "@/assets/Icon-unselect.svg";
import icon_select from "@/assets/Icon-select.svg";
import { ref } from "vue";
const isSelect = ref<boolean>(true);
const opDisable = ref<boolean>(true);
const showCraftEditDialog = ref<boolean>(false);
function confirmCraftEdit() {
showCraftEditDialog.value = false
}
function onAddCraft() {
showCraftEditDialog.value = true
}
</script>

22
tailwind.config.js
View File

@ -1,12 +1,14 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
colors: {
primary: "#1989fa",
white: "#FFF",
title: "#646566",
text: "#333",
},
extend: {},
},
plugins: [],
};
Write Preview
Loading…
Cancel
Save