面板

haoxuan

2023-08-17 126f31c98cc341e052edf8b3dd9b59e17696609e

 src/components/Knowledge.vue

@@ -5,21 +5,56 @@
      <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="70" y="100"  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="70" y="160" 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="195" y="280" 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="60"
        y="220"
        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>
      <text x="280" class="text-item" y="120" 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="260" class="text-item" y="80" 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="150" height="150" />
    </svg>
  </div>
@@ -37,3 +72,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>