From 1b33520b6184573704768fb7440f2434f3b20b57 Mon Sep 17 00:00:00 2001
From: "DESKTOP-FUDKNA8\\znjsz" <tonystark@starkindustries.mil>
Date: Tue, 5 Mar 2024 10:58:38 +0800
Subject: [PATCH] 1

---
 src/MainScreen.vue | 139 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 138 insertions(+), 1 deletion(-)

diff --git a/src/MainScreen.vue b/src/MainScreen.vue
index 78081a0..d54a59a 100644
--- a/src/MainScreen.vue
+++ b/src/MainScreen.vue
@@ -50,7 +50,53 @@ function handleResolutionChange(width, height) {
 
 <template>
   <div id="main-container" ref="mainContainer" class="main-container">
-    <div id="main-container__fulleq"></div>
+    <div id="main-container__fulleq" style="background-color: #cc03">
+      <div class="absolute v-1 tag-container">
+        <span class="name-tag">M1上片</span>
+        <span class="name-tag">M2上片</span>
+        <span class="name-tag">M3上片</span>
+        <span class="name-tag">M4上片</span>
+        <span class="name-tag">M5上片</span>
+        <span class="name-tag">M6上片</span>
+        <span class="name-tag">M7上片</span>
+      </div>
+      <div class="absolute v-2 tag-container">
+        <span class="name-tag">M1磨边机</span>
+        <span class="name-tag">M2磨边机</span>
+        <span class="name-tag">M3磨边机</span>
+        <span class="name-tag">M4磨边机</span>
+        <span class="name-tag">M5磨边机</span>
+        <span class="name-tag">M6磨边机</span>
+        <span class="name-tag">M7磨边机</span>
+      </div>
+      <div class="absolute v-3 tag-container">
+        <span class="name-tag">M1清洗机</span>
+        <span class="name-tag">M2清洗机</span>
+        <span class="name-tag">M3清洗机</span>
+        <span class="name-tag">M4清洗机</span>
+        <span class="name-tag">M5清洗机</span>
+        <span class="name-tag">M6清洗机</span>
+        <span class="name-tag">M7清洗机</span>
+      </div>
+      <div class="absolute z-1 v-4 tag-container">
+        <span class="name-tag">Z1钻孔机</span>
+        <span class="name-tag">Z2钻孔机</span>
+        <span class="name-tag">Z3钻孔机</span>
+        <span class="name-tag">Z4钻孔机</span>
+        <span class="name-tag">Z5钻孔机</span>
+        <span class="name-tag">Z6钻孔机</span>
+        <span class="name-tag">Z7钻孔机</span>
+      </div>
+      <div class="absolute z-1 v-5 tag-container">
+        <span class="name-tag">S1清洗机</span>
+        <span class="name-tag">S2清洗机</span>
+        <span class="name-tag">S3清洗机</span>
+        <span class="name-tag">S4清洗机</span>
+        <span class="name-tag">S5清洗机</span>
+        <span class="name-tag">S6清洗机</span>
+        <span class="name-tag">S7清洗机</span>
+      </div>
+    </div>
     <DatetimeTool />
     <Tools @change-resolution="handleResolutionChange" />
     <AppHeader />
@@ -172,9 +218,100 @@ function handleResolutionChange(width, height) {
   left: 0;
   width: 100%;
   height: 100%;
+  z-index: 10000;
   background: url(./assets/full-lines.png) 100% / cover no-repeat;
 }
 
+.name-tag {
+  padding: 5px;
+  border-radius: 5px;
+  background: #ccc3;
+  backdrop-filter: blur(3px);
+  color: #000a;
+  font-size: 12px;
+  /* font-weight: 600; */
+  transition: background 0.1s ease-out;
+  user-select: none;
+  width: 72px;
+  text-align: center;
+  position: absolute;
+  /* cursor: pointer; */
+  /* transform: rotate(-45deg); */
+  box-shadow: 0 0 5px 2px #0003;
+}
+
+/* .name-tag:hover {
+  background: #666c;
+} */
+
+.tag-container > .name-tag:first-child {
+  bottom: 214px;
+  left: -128px;
+}
+.tag-container > .name-tag:nth-child(2) {
+  bottom: 182px;
+  left: -100px;
+}
+.tag-container > .name-tag:nth-child(3) {
+  bottom: 150px;
+  left: -88px;
+}
+.tag-container > .name-tag:nth-child(4) {
+  bottom: 118px;
+  left: -68px;
+}
+.tag-container > .name-tag:nth-child(5) {
+  bottom: 86px;
+  left: -52px;
+}
+.tag-container > .name-tag:nth-child(6) {
+  bottom: 32px;
+  left: -20px;
+}
+.tag-container > .name-tag:nth-child(7) {
+  top: 0;
+  left: 0;
+}
+
+.absolute {
+  position: absolute;
+  padding: 8px;
+  background: #f001;
+}
+
+.v-1 {
+  bottom: 160px;
+  left: 430px;
+}
+
+.v-2 {
+  bottom: 200px;
+  left: 480px;
+}
+
+.v-3 {
+  bottom: 250px;
+  left: 620px;
+}
+
+.z-1 > .name-tag:first-child {
+  bottom: 205px;
+  left: -155px;
+}
+.z-1 > .name-tag:nth-child(2) {
+  bottom: 180px;
+  left: -130px;
+}
+.v-4 {
+  bottom: 300px;
+  left: 730px;
+}
+
+.v-5 {
+  bottom: 340px;
+  left: 790px;
+}
+
 .pages-wrapper {
   flex: 1;
   display: flex;