数据大屏

图表、边框、装饰组件基于 SVG + Vue3 开发，用于构建数据大屏（数据可视化）页面

年度报表

春季报表：100	夏季报表：200
秋季报表：300	冬季报表：400

年度报表

春季报表：100	夏季报表：200
秋季报表：300	冬季报表：400

66%

100%

图标

这是图标的基础用法

<script setup lang="ts">
import { BorderBox1, BorderBox2, Decoration1, Decoration2 } from '@npc-ui/screen'
</script>

<template>
  <div class="demo">
    <div class="wrap">
      <BorderBox1>
        <h2>年度报表</h2>
        <div class="wrap-content">
          <table>
            <tbody>
              <tr>
                <td>春季报表：100</td>
                <td>夏季报表：200</td>
              </tr>
              <tr>
                <td>秋季报表：300</td>
                <td>冬季报表：400</td>
              </tr>
            </tbody>
          </table>
        </div>
      </BorderBox1>
    </div>
    <div class="wrap">
      <BorderBox2>
        <h2>年度报表</h2>
        <div class="wrap-content">
          <table>
            <tbody>
              <tr>
                <td>春季报表：100</td>
                <td>夏季报表：200</td>
              </tr>
              <tr>
                <td>秋季报表：300</td>
                <td>冬季报表：400</td>
              </tr>
            </tbody>
          </table>
        </div>
      </BorderBox2>
    </div>
    <div class="decoration">
      <Decoration1 style="width:150px; height:150px;">
        <div class="font">
          66%
        </div>
      </Decoration1>

      <Decoration2 style="width:200px; height:60px;">
        <div class="font">
          100%
        </div>
      </Decoration2>
    </div>
  </div>
</template>

<style lang="less">
.demo {
  display: block;
}

.wrap {
  padding: 30px;
  height: 300px;
  color: #41d1ff;
  background-color: #282c34;
  overflow: hidden;

  h2 {
    margin-top: 20px;
    margin-left: 20px;
    padding: 5px 10px;
    display: inline-block;
  }

  .wrap-content {
    margin-top: 10px;
    height: 160px;
    display: flex;
    justify-content: center;

    table {
      width: 80%;
      height: 80%;
      text-align: center;
    }

    td {
      border: 1px solid #41d1ff;
    }
  }
}

.decoration {
  height: 300px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  overflow: hidden;
  background-color: #282c34;

  .font,
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7ec699;
    font-size: 24px;
    font-weight: 700;
    text-shadow: 0 0 3px #7acaec;
  }

  .font {
    height: 150px;
  }
}
</style>