From 4336b6e9141f2544363f4880fbd0d67f095e7074 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期六, 19 八月 2023 19:53:39 +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..c1db1f7 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:100%">
+ <!-- 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: #000; font-weight: bold; padding:5px;
+ font-size:14px;
+ display:inline-block;
+ border-radius:8px;
+ background:#007101;
+ color:#fff; 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;
+ color:#fff;">绠¤矾鏁村姩</text>
+ <text class="text-item" x="215" y="250" text-anchor="middle" font-size="20px"
+ style="padding:5px;
+ font-size:14px;
+ display:inline-block;
+ border-radius:8px;
+ background:#007101;
+ color:#fff;">鍐峰嵈娌瑰害楂�</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;
+ color:#fff;"
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;
+ color:#fff;">娓呮磥搴﹁秴宸�</text>
+ <text x="240" 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;
+ color:#fff;">淇濇姢鍣ㄦ姤璀�</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