标准参数管理

whychdw

2025-06-06 d0f98ad8e1047e3161a458399ad3005404ed87b8

标准参数管理

 src/components/HdwButton/images/primary-bg.png

 src/components/HdwButton/images/warning-bg.png

 src/components/HdwButton/index.vue

New file
@@ -0,0 +1,48 @@
<script setup lang="ts">
import {defaultProps} from "element-plus";

const props = defineProps({
  type: {
    type: String,
    default: "primary"
  },
  iconClass: {
    type: String,
    default: "export"
  }
});
</script>

<template>
  <div class="hdw-button-wrapper" :class="{'warning': type==='warning'}">
    <svg-icon class="btn-icon" :icon-class="iconClass"></svg-icon>
    <slot></slot>
  </div>
</template>

<style scoped lang="less">
.hdw-button-wrapper {
  user-select: none;
  display: inline-block;
  padding: 8px 12px;
  text-align: center;
  font-size: 16px;
  background-image: url("./images/primary-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  &:hover {
    font-weight: 700;
  }
  &:active {
    color: #0BF9FE;
  }
  &.warning {
    background-image: url("./images/warning-bg.png");
  }
  .btn-icon {
    font-size: 20px;
    margin-right: 8px;
  }
}
</style>

 src/components/TabButton/images/active-bg.png

 src/components/TabButton/images/bg.png

 src/components/TabButton/index.vue

New file
@@ -0,0 +1,37 @@
<script setup>
const props = defineProps({
  active: {
    type: Boolean,
    default: false
  }
});
</script>

<template>
  <div class="tab-button-wrapper" :class="{'active': active}">
    <slot></slot>
  </div>
</template>

<style scoped lang="less">
.tab-button-wrapper {
  display: inline-block;
  user-select: none;
  padding: 12px 48px;
  text-align: center;
  background-image: url("./images/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  font-size: 16px;
  &:hover {
    font-weight: 700;
  }
  &:active {
    background-image: url("./images/active-bg.png");
  }
  &.active {
    background-image: url("./images/active-bg.png");
  }
}
</style>

 src/components/noData.vue

New file
@@ -0,0 +1,42 @@
<script setup>
const props = defineProps({
  text: {
    type: String,
    default: "暂无数据"
  }
});
</script>

<template>
<div class="no-data-wrapper">
  <div class="no-data-content">
    <div class="no-data-icon">
      <svg-icon class="icon" icon-class="search-data"></svg-icon>
    </div>
    <div class="no-data-text">{{ props.text }}</div>
  </div>
</div>
</template>

<style scoped lang="less">
.no-data-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  .no-data-content {
    display: inline-block;
    text-align: center;
    color: #00feff;
    .no-data-icon {
      margin-bottom: 8px;
      .icon {
        color: #00feff;
        font-size: 40px;
      }
    }

  }
}
</style>

 src/components/pwButton.vue

New file
@@ -0,0 +1,41 @@
<script setup>
const props = defineProps({
  active: {
    type: Boolean,
    default: false
  },
  text: {
    type: String,
    default: ""
  }
});
</script>

<template>
  <div class="pw-button-container" :class="{'active':props.active}">
    <div class="pw-button-wrapper">
      <div class="pw-button-text">{{ text }}</div>
    </div>
  </div>
</template>

<style scoped lang="less">
.pw-button-container {
  user-select: none;
  display: inline-block;
  border: 1px solid #4095e3;
  font-size: 14px;
  padding: 4px 16px;
  box-sizing: border-box;
  min-width: 80px;
  text-align: center;
  cursor: pointer;
  &.active {
    background: linear-gradient(to top right, #5eb0fb, #529adc,#022345, #022345);
  }
  &:active {
    background: linear-gradient(to top right, #5eb0fb, #529adc,#022345, #022345);
  }
}

</style>

 src/icons/svg/data-line.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749111380616" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="998" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M932.460289 856.177778H157.86635c-6.593939 0-13.187879 0-19.911111-6.59394-6.593939-6.593939-6.593939-13.187879-6.59394-13.187878V102.141414c0-13.187879-6.593939-33.09899-19.911111-39.692929-13.187879-6.593939-33.09899-6.593939-46.286868 0C51.975441 69.042424 45.381501 82.359596 45.381501 102.141414v734.125253c0 33.09899 13.187879 59.60404 33.09899 79.385858C98.391602 935.692929 124.76736 942.286869 157.86635 942.286869h774.464646c26.505051 0 46.286869-19.911111 46.286869-46.286869 0.129293-19.911111-19.652525-39.822222-46.157576-39.822222z" p-id="999"></path><path d="M852.945138 456.40404l76.8-0.129293v55.983839l-74.60202 1.422222s-35.684848 2.715152-47.062627-21.333333c-9.309091-19.523232-43.830303-75.377778-43.70101-75.377778l-91.668687 377.147475c-2.19798 11.894949-12.412121 20.29899-24.436363 20.29899h-0.646465c-12.153535-0.258586-28.832323-9.438384-30.513131-21.59192l-91.539394-495.191919-76.282828 372.105051c-2.19798 12.024242-20.169697 20.040404-31.418182 20.428283-12.153535-0.258586-26.246465-9.179798-28.056566-21.333334l-33.228283-231.175757-17.713131 61.931313c-3.10303 10.731313-12.8 17.971717-23.789899 17.971717H166.011804v-53.527273h122.569697l52.363637-155.927272c3.232323-11.248485 13.575758-18.618182 25.6-17.971718 11.636364 0.775758 21.20404 9.69697 22.884848 21.204041l35.814142 198.852525 79.773737-398.610101c2.19798-12.024242 13.575758-20.686869 25.082828-20.29899 12.153535 0.258586 22.367677 9.438384 24.048485 21.462626l98.004041 534.755556 81.583838-337.066667c2.19798-12.024242 13.705051-20.428283 24.953535-20.428283 12.153535 0.258586 27.539394 9.179798 29.349495 21.333334m-112.355555 497.131313" p-id="1000"></path></svg>

 src/icons/svg/dc-power.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749111045533" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="967" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M853.333333 952.888889H170.666667a56.96 56.96 0 0 1-56.888889-56.888889V128a56.96 56.96 0 0 1 56.888889-56.888889h682.666666a56.96 56.96 0 0 1 56.888889 56.888889v768a56.96 56.96 0 0 1-56.888889 56.888889zM678.030222 582.272v89.443556h115.413334v-89.443556h-115.413334z m-153.856 0v89.443556h115.413334v-89.443556h-115.413334z m-153.856 0v89.443556h115.413334v-89.443556h-115.413334z m-153.912889 0v89.443556h115.384889v-89.443556h-115.384889z m0-230.058667v89.443556H793.457778v-89.443556H216.405333z" p-id="968"></path></svg>

 src/icons/svg/download.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749194662142" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="944" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M827.8 925.4H198.2c-72.6 0-131.6-56.3-131.6-125.4V676.1c0-24.7 20-44.6 44.6-44.6s44.6 20 44.6 44.6V800c0 19.9 19 36.1 42.4 36.1h629.6c23.3 0 42.3-16.2 42.3-36.1V676.1c0-24.7 20-44.6 44.6-44.6 24.7 0 44.6 20 44.6 44.6V800c0.1 69.1-58.9 125.4-131.5 125.4z" p-id="945"></path><path d="M514.6 778.1c-29.6 0-57.8-12.1-79.4-34L225 531c-24.6-25-31.6-62.6-17.7-95.7 12.9-30.8 40.7-49.9 72.5-49.9h41.3V223.2c0-68.9 51.5-125 114.8-125H590c63.3 0 114.8 56.1 114.8 125v163.4h41.7c31.8 0 59.6 19.1 72.5 49.8 13.9 33.1 7.1 70.6-17.4 95.7L594.3 743.8c-21.6 22-49.8 34.2-79.5 34.2-0.1 0.1-0.1 0.1-0.2 0.1z m-220-303.5l204.2 206.8c4.8 4.8 10.2 7.4 15.8 7.4 5.6 0 11.1-2.6 15.8-7.4L731.6 476h-71.4c-24.7 0-44.6-20-44.6-44.6V223.2c0-19-11.9-35.7-25.5-35.7H436c-13.6 0-25.5 16.7-25.5 35.7v206.7c0 24.7-20 44.6-44.6 44.6h-71.3z m475.2 26.2h0.2-0.2z" p-id="946"></path></svg>

 src/icons/svg/export.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749175390074" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5246" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M972.8 614.4c-30.72 0-51.2 20.48-51.2 51.2v61.44c0 107.52-5.12 194.56-204.8 194.56H307.2c-204.8 0-204.8-92.16-204.8-204.8v-256C87.04 302.08 163.84 266.24 256 256h5.12c30.72 0 51.2-20.48 51.2-51.2s-20.48-51.2-51.2-51.2H204.8C92.16 153.6 0 245.76 0 358.4v460.8C0 931.84 92.16 1024 204.8 1024h614.4c112.64 0 204.8-92.16 204.8-204.8V665.6c0-25.6-25.6-51.2-51.2-51.2zM179.2 640c0 51.2 10.24 102.4 25.6 148.48 56.32-168.96 215.04-291.84 399.36-291.84v66.56c0 25.6 15.36 51.2 40.96 66.56 10.24 5.12 20.48 10.24 30.72 10.24 15.36 0 30.72-5.12 40.96-15.36l281.6-220.16c15.36-15.36 25.6-35.84 25.6-61.44 0-20.48-10.24-46.08-25.6-56.32L716.8 66.56c-15.36-10.24-30.72-15.36-46.08-15.36-10.24 0-20.48 0-30.72 10.24-25.6 10.24-40.96 35.84-40.96 66.56v71.68c-230.4 0-419.84 194.56-419.84 440.32z m0 0" p-id="5247"></path></svg>

 src/icons/svg/search-data.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749194816996" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1131" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M614.942 923.829H192.031c-24.757 0-48.55-10.12-66.078-28.25-17.469-18.071-27.347-42.647-27.287-68.187V167.455c0-25.6 9.818-50.116 27.287-68.247 17.528-18.07 41.32-28.31 66.078-28.31h639.276c24.757 0 48.55 10.18 66.078 28.31 17.65 18.191 27.287 42.406 27.287 68.186l-1.446 436.465v0.12a34.997 34.997 0 0 0 34.335 35.238c18.913 0 34.334-15.661 34.575-35.117l1.385-436.525v-0.12c0-44.454-17.047-87.04-47.465-118.483A159.623 159.623 0 0 0 831.307 0H192.031C149.023 0 107.7 17.589 77.282 49.032a170.044 170.044 0 0 0-47.405 118.483v659.877c-0.06 44.394 16.987 87.04 47.405 118.423 30.42 31.442 71.68 49.091 114.749 49.031h422.851a34.936 34.936 0 0 0 34.455-35.539 34.936 34.936 0 0 0-34.395-35.478z" p-id="1132"></path><path d="M983.582 934.25L852.27 798.72c62.284-90.413 47.104-215.04-34.996-286.72a202.09 202.09 0 0 0-279.733 12.047c-76.017 78.487-81.077 204.017-11.686 288.768 69.452 84.751 190.163 100.412 277.745 36.141l131.313 135.53c13.433 13.854 35.238 13.854 48.67 0a36.322 36.322 0 0 0 0-50.237z m-299.67-116.857c-65.657 0-122.278-47.947-135.048-114.447-12.83-66.56 21.685-133.12 82.402-159.081 60.657-25.962 130.71-4.036 167.153 52.344a145.589 145.589 0 0 1-17.107 179.501 134.686 134.686 0 0 1-97.4 41.623z m103.303-497.302c18.974 0 34.334-15.963 34.334-35.539a35.057 35.057 0 0 0-34.334-35.66l-550.791-0.18a34.997 34.997 0 0 0-34.394 35.539c0 19.636 15.36 35.66 34.334 35.66l550.791 0.18zM442.971 533.083a34.214 34.214 0 0 0 29.816-17.77 36.503 36.503 0 0 0 0-35.478 34.214 34.214 0 0 0-29.816-17.77H236.484a34.936 34.936 0 0 0-34.334 35.54 34.936 34.936 0 0 0 34.334 35.417l206.487 0.06zM236.484 675.057a34.936 34.936 0 0 0-34.334 35.539c0 19.576 15.36 35.479 34.334 35.479h137.698a34.153 34.153 0 0 0 30.057-17.59 36.442 36.442 0 0 0 0-35.719 34.153 34.153 0 0 0-30.117-17.588l-137.638-0.12z" p-id="1133"></path></svg>

 src/icons/svg/standard-params.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749111250357" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="939" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M748.8 128h121.6c12.8 0 25.6 12.8 25.6 25.6v774.4c0 12.8-12.8 25.6-25.6 25.6H153.6c-12.8 0-25.6-12.8-25.6-25.6V153.6c0-12.8 12.8-25.6 25.6-25.6h121.6V64H153.6C102.4 64 64 102.4 64 153.6v774.4c0 51.2 38.4 89.6 89.6 89.6h710.4c51.2 0 89.6-38.4 89.6-89.6V153.6c6.4-51.2-32-89.6-83.2-89.6h-121.6v64z" p-id="940"></path><path d="M320 0h384c38.4 0 64 25.6 64 64v64c0 38.4-25.6 64-64 64H320c-38.4 0-64-25.6-64-64V64c0-38.4 25.6-64 64-64z m0 64v64h384V64H320zM544 448h192c19.2 0 32 12.8 32 32s-12.8 32-32 32h-192c-19.2 0-32-12.8-32-32s12.8-32 32-32zM544 640h192c19.2 0 32 12.8 32 32s-12.8 32-32 32h-192c-19.2 0-32-12.8-32-32s12.8-32 32-32zM544 320h192c19.2 0 32 12.8 32 32s-12.8 32-32 32h-192c-19.2 0-32-12.8-32-32s12.8-32 32-32zM544 768h192c19.2 0 32 12.8 32 32s-12.8 32-32 32h-192c-19.2 0-32-12.8-32-32s12.8-32 32-32zM320 320h64c38.4 0 64 25.6 64 64v64c0 38.4-25.6 64-64 64H320c-38.4 0-64-25.6-64-64V384c0-38.4 25.6-64 64-64z m0 64v64h64V384H320zM320 640h64c38.4 0 64 25.6 64 64v64c0 38.4-25.6 64-64 64H320c-38.4 0-64-25.6-64-64v-64c0-38.4 25.6-64 64-64z m0 64v64h64v-64H320z" p-id="941"></path></svg>

 src/router/index.js

@@ -7,6 +7,7 @@
import datasRouter from './modules/datas';
import alarmRouter from './modules/alarm';
import statisticsRouter from './modules/statistics';
import dcPowerStatus from "@/router/modules/dcPowerStatus.js";
/* Layout */
const Layout = () => import('@/layout/index.vue');

@@ -83,6 +84,7 @@
  datasRouter,
  alarmRouter,
  statisticsRouter,
  dcPowerStatus,
  // 404 page must be placed at the end !!!
  { path: '/:pathMatch(.*)*', redirect: '/404', meta: { hidden: true }}
];

 src/router/modules/dcPowerStatus.js

New file
@@ -0,0 +1,28 @@
const Layout = () => import('@/layout/index.vue');

const dcPowerStatusRouter = {
  path: '/dcPowerStatus',
  component: Layout,
  redirect: 'noRedirect',
  name: 'DcPowerStatus',
  meta: {
    title: '直流电源运行状态分析',
    icon: 'dc-power'
  },
  children: [
    {
      path: 'standard-params',
      component: () => import('@/views/dcPowerStatus/standardParams.vue'),
      name: 'StandardParams',
      meta: { title: '标准参数管理', icon: 'standard-params', noCache: false }
    },
    {
      path: 'realtime-data-line',
      component: () => import('@/views/dcPowerStatus/standardParams.vue'),
      name: 'RealtimeDataLine',
      meta: { title: '实时数据曲线统计', icon: 'data-line', noCache: false }
    },
  ]
};

export default dcPowerStatusRouter;

 src/views/dashboard/index.vue

@@ -1,13 +1,22 @@
<script setup name="Dashboard">
import { ref } from "vue";
import PwButton from "@/components/pwButton.vue";

const acIdx = ref(0);
function changeIdx(idx) {
  acIdx.value = idx;
}
</script>

<template>
  <div class="page-contain bg-footer">
    首页
    <pw-button :active="acIdx === 0" text="品牌" @click="changeIdx(0)"></pw-button>
    <pw-button :active="acIdx === 1" @click="changeIdx(1)" style="margin-left: 4px;" text="电压等级"></pw-button>
  </div>
</template>

<style scoped lang="less">

.page-contain {
  padding: 10px 28px;
}
</style>

 src/views/dcPowerStatus/standardParams.vue

New file
@@ -0,0 +1,218 @@
<script setup name="StandardParams">
import {ref} from "vue";
import ycCard from "@/components/ycCard/index.vue";
import PwButton from "@/components/pwButton.vue";
import TabButton from "@/components/TabButton/index.vue";
import HdwButton from "@/components/HdwButton/index.vue";
import NoData from "@/components/noData.vue";
const headers = [
  {
    prop: "standName",
    label: "标准编号",
    width: "160",
  },
  {
    prop: "paramType",
    label: "参数类型",
    width: "160",
  },
  {
    prop: "basisVal",
    label: "基准值",
    width: "160",
  },
  {
    prop: "alarmLimith",
    label: "上限",
    width: "160",
  },
  {
    prop: "alarmLimithUpeper",
    label: "上上限",
    width: "160",
  },
  {
    prop: "alarmLimitl",
    label: "下限",
    width: "160",
  },
  {
    prop: "alarmLimitlLower",
    label: "下下限",
    width: "160",
  },
  {
    prop: "fileName",
    label: "规范文件名称",
    width: "160",
  },
];
const listRef = ref([]);
const acButton = ref(1);
function changeAcButton(num) {
  acButton.value = num;
}

const searchText = ref("");
const downloadText =ref("");
const fileList = ref([]);
</script>

<template>
  <div class="page-wrapper">
    <div class="page-content">
      <yc-card is-full>
        <div class="page-content-wrapper">
          <div class="page-content-tools page-filter">
            <div class="tools-left">
              <tab-button :active="acButton === 1" @click="changeAcButton(1)">直流电源</tab-button>
              <tab-button style="margin-left: 24px;" :active="acButton === 2" @click="changeAcButton(2)">通信电源</tab-button>
            </div>
            <div class="tools-right">
              <hdw-button>导出</hdw-button>
            </div>
          </div>
          <div class="page-content-table-wrapper">
            <div class="page-content-table">
              <div class="pos-rel">
                <div class="pos-abs">
                  <el-table class="yc-table" stripe height="100%" :data="listRef" style="width: 100%">
                    <el-table-column show-overflow-tooltip v-for="header in headers" :key="header.prop" :prop="header.prop" :label="header.label"
                                     :min-width="header.width" align="center">
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="180" align="center">
                      <template #default="scope">
                        <el-button type="primary" size="small">参数设定</el-button>
                        <el-button type="success" size="small">上传</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
            <div class="file-list-wrapper">
              <div class="file-tools">
                <div class="file-tools-item">
                  <input class="file-tools-input" type="text" v-model="searchText" />
                  <hdw-button icon-class="search-data">查 询</hdw-button>
                </div>
                <div class="file-tools-item bottom">
                  <input disabled class="file-tools-input" type="text" v-model="downloadText" />
                  <hdw-button type="warning" icon-class="download">下 载</hdw-button>
                </div>
              </div>
              <div class="file-list-content">
                <div class="pos-rel">
                  <div class="pos-abs">
                    <el-scrollbar v-if="fileList.length !== 0"></el-scrollbar>
                    <no-data v-else text="暂无规范文件"></no-data>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </yc-card>
    </div>
  </div>
</template>

<style scoped lang="less">
.page-wrapper {
  display: flex;
  flex-direction: row;
  height: 100%;
  .page-content {
    flex: 1;
  }
}

.page-content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .page-content-tools {
    padding-bottom: 8px;
    margin-left: 26px;
    margin-right: 26px;
    display: flex;
    flex-direction: row;
    .tools-left {
      flex: 1;
    }
  }
  .page-content-table-wrapper {
    flex: 1;
    display: flex;
    flex-direction: row;
    .page-content-table {
      box-sizing: border-box;
      flex: 1;
      margin-left: 26px;
      margin-right: 8px;
    }
    .file-list-wrapper {
      min-width: 200px;
      padding: 16px;
      background-color: #073451;
      margin-right: 26px;
      display: flex;
      flex-direction: column;
      .file-list-content {
        flex:1;
      }
    }
  }
  .page-content-page {
    padding: 8px 8px 0 8px;
    text-align: center;

    .el-page-container {
      display: inline-block;
      padding: 0 16px;
    }

    .page-tool {
      display: inline-block;
    }
  }
}

.pos-rel {
  position: relative;
  width: 100%;
  height: 100%;

  .pos-abs {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}
.file-tools {
  .file-tools-item {
    &.bottom {
      margin-top: 32px;
    }
    .file-tools-input {
      width: 240px;
      height: 38px;
      border: 0;
      background-color: #FFFFFF10;
      margin-right: 8px;
      color: #FFFFFF;
      font-size: 16px;
      &:hover {
        background-color: #076FE810;
      }
      &:focus {
        outline: 0;
      }
    }
  }
}
</style>