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