From a1a6630f2eabfc78a379b5808b1bf7231a084d0b Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期三, 11 十月 2023 18:02:44 +0800
Subject: [PATCH] 工序弹框的 列表和详情的更新同步

---
 src/components/Knowledge.vue |   72 ++++++++++++++++++++++++++++++------
 1 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/src/components/Knowledge.vue b/src/components/Knowledge.vue
index 3bf17e5..97fa7f8 100644
--- a/src/components/Knowledge.vue
+++ b/src/components/Knowledge.vue
@@ -1,26 +1,62 @@
 <template>
-  <div class="keyword-ring">
-    <svg width="400" height="400">
+  <div class="keyword-ring" style="height:calc(100% - 40px)">
+    <!-- width="400" height="400" -->
+    <svg width="100%"  height="100%">
       <circle cx="200" cy="200" r="155" fill="none" stroke-width="3" />
       <circle cx="200" cy="200" r="125" fill="none" stroke-width="3" />
       <circle cx="200" cy="200" r="95" fill="none" stroke-width="3" />
       <circle cx="200" cy="200" r="65" fill="none" stroke-width="3" />
-      <text x="200" y="40" style="fill: #000; font-weight: bold; font-size: 20px; cursor: pointer" text-anchor="middle">
+      <text class="text-item" x="60" y="80"  style="fill: rgb(211 211 211); font-weight: bold; padding:5px;
+        font-size:14px;
+        display:inline-block;
+        border-radius:8px;
+        background:#007101;
+        cursor: pointer;postion:absolute;left:200;top:40">
         璇姤璀�
       </text>
-      <text x="290" y="145" text-anchor="middle" font-size="20px">绠¤矾鏁村姩</text>
-      <text x="195" y="280" text-anchor="middle" font-size="20px">娓呮磥搴﹁秴宸�</text>
+      <text class="text-item" x="50" y="170" text-anchor="middle" 
+      style="padding:5px;
+        font-size:14px;
+        display:inline-block;
+        border-radius:8px;
+        background:#007101;
+        fill: rgb(211 211 211);">绠¤矾鏁村姩</text>
+      <text class="text-item" x="245" y="250" text-anchor="middle" font-size="20px"
+      style="padding:5px;
+        font-size:14px;
+        display:inline-block;
+        border-radius:8px;
+        background:#007101;
+        fill: rgb(211 211 211);">鍐峰嵈娌瑰害楂�</text>
       <text
-        x="100"
-        y="180"
-        style="fill: #000; font-weight: bold; font-size: 20px; cursor: pointer"
+        x="50"
+        y="270"
+        class="text-item"
+        style="padding:5px;
+        font-size:14px;
+        display:inline-block;
+        border-radius:8px;
+        background:#007101;
+        fill: rgb(211 211 211);"
         text-anchor="middle"
       >
-        璇姤璀�
+        娓呮磥搴﹁秴宸�
       </text>
-      <text x="100" y="75" text-anchor="middle" font-size="20px">绠¤矾鏁村姩</text>
-      <text x="295" y="80" text-anchor="middle" font-size="20px">娓呮磥搴﹁秴宸�</text>
-      <image xlink:href="../../public/璇煶.png" x="105" y="100" width="150" height="150" />
+      <text x="220" class="text-item" y="60" text-anchor="middle" font-size="20px"
+      style="padding:5px;
+        font-size:14px;
+        display:inline-block;
+        border-radius:8px;
+        background:#007101;
+        fill: rgb(211 211 211);">娓呮磥搴﹁秴宸�</text>
+        <text x="280" class="text-item" y="110" text-anchor="middle" font-size="20px"
+      style="padding:5px;
+        font-size:14px;
+        display:inline-block;
+        border-radius:8px;
+        background:#007101;
+        fill:rgb(211 211 211)">淇濇姢鍣ㄦ姤璀�</text>
+      <image xlink:href="../../public/璇煶.png" x="105" y="100" width="110" height="110" />
     </svg>
   </div>
 </template>
@@ -37,3 +73,15 @@
   }
 }
 </script>
+<style>
+.text-item{
+  width:auto;
+        padding:5px;
+        font-size:14px;
+        display:inline-block;
+        border-radius:8px;
+        background:#007101;
+        color:#fff;
+        cursor: pointer
+}
+</style>

--
Gitblit v1.8.0