From 07d88bfb8181fd97f72c24b48929ad651d602907 Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期四, 02 十一月 2023 13:57:21 +0800 Subject: [PATCH] 知识库的组件开发 --- src/views/dashboard/components/KnowledgeInfo.vue | 107 +++++++++++++---------------------------------------- 1 files changed, 26 insertions(+), 81 deletions(-) diff --git a/src/views/dashboard/components/KnowledgeInfo.vue b/src/views/dashboard/components/KnowledgeInfo.vue index 1768889..89f387f 100644 --- a/src/views/dashboard/components/KnowledgeInfo.vue +++ b/src/views/dashboard/components/KnowledgeInfo.vue @@ -1,94 +1,39 @@ <template> <div class="knowledge-info"> - <svg width="100%" height="100%"> - <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; - cursor: pointer; - postion: absolute; - left: 200; - top: 40; - " - > - 璇姤璀� - </text> - <text - class="text-item" - x="50" - y="170" - text-anchor="middle" - style="padding: 5px; font-size: 14px; display: inline-block; border-radius: 8px; 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; fill: rgb(211 211 211)" - > - 鍐峰嵈娌瑰害楂� - </text> - <text - x="50" - y="270" - class="text-item" - style="padding: 5px; font-size: 14px; display: inline-block; border-radius: 8px; fill: rgb(211 211 211)" - text-anchor="middle" - > - 娓呮磥搴﹁秴宸� - </text> - <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; 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" - > - 淇濇姢鍣ㄦ姤璀� - </text> - <image xlink:href="~@/assets/images/voice.png" x="105" y="100" width="110" height="110" /> - </svg> + <div class="text-item" style="left: 20px; top: 80px">璇姤璀�</div> + <div class="text-item" style="left: 0px; top: 190px">绠¤矾鏁村姩</div> + <div class="text-item" style="left: 215px; top: 250px">鍐峰嵈娌瑰害楂�</div> + <div class="text-item" style="left: 160px; top: 20px">娓呮磥搴﹁秴宸�</div> + <div class="text-item" style="left: 30px; top: 280px">娓呮磥搴﹁秴宸�</div> + <div class="text-item" style="right: 0px; top: 120px">淇濇姢鍣ㄦ姤璀�</div> + <img src="~@/assets/images/voice.png" /> </div> </template> -<script setup lang="ts"> -import { toRefs } from 'vue' -</script> +<script setup lang="ts"></script> <style scoped lang="scss"> +$status-ready: #024fdce8; .knowledge-info { - height: calc(100% - 90px - 32px); - margin-top: 10px; + height: calc(100% - 100px - 32px); + margin-top: 30px; + position: relative; + img { + width: 130px; + height: 130px; + position: absolute; + top: 100px; + left: 120px; + } .text-item { - width: 100px; - padding: 5px; + color: #e9e7e7; + cursor: pointer; + font-weight: bold; + padding: 6px 15px; font-size: 14px; display: inline-block; - border-radius: 8px; - fill: #fff; - color: #fff; - cursor: pointer; + border-radius: 10px; + position: absolute; + background: $status-ready; } } </style> -- Gitblit v1.8.0