知识库的组件开发

haoxuan

2023-11-02 07d88bfb8181fd97f72c24b48929ad651d602907

知识库的组件开发

 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>