<template>
  <div style="width:100%;height:100%;position: relative">
    <FJ class="node FJ" style="width: 1vw;height: 1vw;top:4%;left: 3.5%;" />
    <FJ class="node FJ" style="width: 1vw;height: 1vw;top:4%;left: 7.5%;" />

    <CLG :height="Math.random() * 100" class="node CLG" style="width: 2.7%;height: 6.5%;top: 6.5%;left: 2%;" />
    <CLG :height="Math.random() * 100" class="node CLG" style="width: 2.7%;height: 6.5%;top: 6.5%;left: 6%;" />
    <CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 12.9%;" />
    <CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 17.3%;" />
    <CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 21.5%;" />
    <CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 26.3%;" />
    <CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 31%;" />
    <CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 35.4%;" />
    <CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 43%;" />
    <CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 48.2%;" />
    <CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 53.3%;" />
    <CLG :height="Math.random() * 100" class="node CLG" style="width: 3.5%;height: 2.8%;top: 19.8%;left: 7.3%;" />

    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 12.5%;left: 6.5%;" />
    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 13.4%;" />
    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 17.8%;" />
    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 22%;" />
    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 26.8%;" />
    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 31.5%;" />
    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 35.9%;" />
    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 43.5%;" />
    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 48.7%;" />
    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 53.8%;" />
    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 23.5%;left: 7.9%;" />

    <LD class="node LD" style="width: 2.7%;height: 2.1%;top: 10.7%;left: 2%;" />
    <LD class="node LD" style="width: 2.7%;height: 2.1%;top: 10.7%;left: 6%;" />
    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 12.9%;" />
    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 17.3%;" />
    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 21.5%;" />
    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 26.3%;" />
    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 31%;" />
    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 35.4%;" />
    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 43%;" />
    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 48.2%;" />
    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 53.3%;" />
    <LD class="node LD" style="width: 3.5%;height: 1.5%;top: 22%;left: 7.3%;" />

    <LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 41%;left: 25.1%;" />
    <LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 51.5%;left: 25.1%;" />
    <LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 40%;left: 49.7%;" />
    <LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 50.5%;left: 49.7%;" />
    <LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 50.5%;left: 66.2%;" />
    <LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 60.5%;left: 66.2%;" />
    <LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 50.5%;left: 87.5%;" />
    <LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 60.5%;left: 87.5%;" />

    <DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 11.2%;" />
    <DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 15.6%;" />
    <DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 19.8%;" />
    <DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 24.6%;" />
    <DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 29.3%;" />
    <DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 33.7%;" />
    <DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 41.3%;" />
    <DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 46.5%;" />
    <DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 51.6%;" />

    <XL :height="Math.random() * 100" class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(11.2% + 1vw);" />
    <XL :height="Math.random() * 100" class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(15.6% + 1vw);" />
    <XL :height="Math.random() * 100" class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(19.8% + 1vw);" />
    <XL :height="Math.random() * 100" class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(24.6% + 1vw);" />
    <XL :height="Math.random() * 100" class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(29.3% + 1vw);" />
    <XL :height="Math.random() * 100" class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(33.7% + 1vw);" />
    <XL :height="Math.random() * 100" class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(41.3% + 1vw);" />
    <XL :height="Math.random() * 100" class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(46.5% + 1vw);" />
    <XL :height="Math.random() * 100" class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(51.6% + 1vw);" />

    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 27%;top: 11.7%;left: 2%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 13.5%;left: 7.4%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 11.6%;top: 23.2%;left: 14.3%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 8.6%;top: 23.2%;left: 18.7%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5.6%;top: 23.2%;left: 23.0%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5.6%;top: 23.2%;left: 27.7%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 8.6%;top: 23.2%;left: 32.4%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 11.6%;top: 23.2%;left: 36.8%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 8.7%;top: 23.2%;left: 44.4%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 14%;top: 23.2%;left: 49.6%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 8.7%;top: 23.2%;left: 54.7%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 16.7%;top: 23.5%;left: 6.4%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 14.7%;top: 24.5%;left: 8.7%;" />

    <GD2 class="node GD2" style="width: 15%;height: clamp(4px, 0.3vw, 8px);top: 39.5%;left: 8.5%;" />
    <GD2 class="node GD2" style="width: 8%;height: clamp(4px, 0.3vw, 8px);top: 34.9%;left: 14.1%;" />
    <GD2 class="node GD2" style="width: 5%;height: clamp(4px, 0.3vw, 8px);top: 31.9%;left: 18.5%;" />
    <GD2 class="node GD2" style="width: 2%;height: clamp(4px, 0.3vw, 8px);top: 29%;left: 22.8%;" />
    <GD2 class="node GD2" style="width: 2%;height: clamp(4px, 0.3vw, 8px);top: 29%;left: 25.9%;" />
    <GD2 class="node GD2" style="width: 5.8%;height: clamp(4px, 0.3vw, 8px);top: 31.9%;left: 26.8%;" />
    <GD2 class="node GD2" style="width: 9%;height: clamp(4px, 0.3vw, 8px);top: 34.9%;left: 28%;" />
    <GD2 class="node GD2" style="width: 3.7%;height: clamp(4px, 0.3vw, 8px);top: 32%;left: 44.2%;" />
    <GD2 class="node GD2" style="width: 3.7%;height: clamp(4px, 0.3vw, 8px);top: 32%;left: 51.2%;" />

    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 4.9%;top: 34.1%;left: 21.8%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 7.5%;top: 31.1%;left: 23.3%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 11%;top: 28.2%;left: 24.7%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 11%;top: 28.2%;left: 26%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 7.5%;top: 31.1%;left: 27%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 4.9%;top: 34.1%;left: 28%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 7.5%;top: 31.2%;left: 47.7%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 7.5%;top: 31.2%;left: 51.2%;" />

    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5.3%;top: 43.7%;left: 25.1%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 15%;top: 54.1%;left: 25.1%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 42.7%;left: 49.7%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 16.3%;top: 53.1%;left: 49.7%;" />

    <GD2 class="node GD2" style="width: 25%;height: clamp(4px, 0.3vw, 8px);top: 69.2%;left: 24.9%;" />
    <GD2 class="node GD2" style="width: 3%;height: clamp(4px, 0.3vw, 8px);top: 59%;left: 24.9%;" />
    <GD2 class="node GD2" style="width: 3%;height: clamp(4px, 0.3vw, 8px);top: 59%;left: 49.5%;" />


    <GD2 class="node GD2" style="width: 14.6%;height: clamp(4px, 0.3vw, 8px);top: 20.9%;left: 58.9%;" />
    <GD2 class="node GD2" style="width: 14.6%;height: clamp(4px, 0.3vw, 8px);top: 22.8%;left: 58.9%;" />
    <GD2 class="node GD2" style="width: 14.6%;height: clamp(4px, 0.3vw, 8px);top: 25.2%;left: 58.9%;" />

    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 10.5%;top: 20.1%;left: 61.5%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 8.5%;top: 22%;left: 66.2%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 6%;top: 24.4%;left: 70.8%;" />

    <GD2 class="node GD2" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 30.9%;left: 59.5%;" />
    <GD2 class="node GD2" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 30.9%;left: 64.2%;" />
    <GD2 class="node GD2" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 30.9%;left: 68.9%;" />

    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 59.7%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 63.3%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 64.4%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 68%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 69.1%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 72.8%;" />

    <GD2 class="node GD2" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 40.2%;left: 59.5%;" />
    <GD2 class="node GD2" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 40.2%;left: 64.2%;" />
    <GD2 class="node GD2" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 40.2%;left: 68.9%;" />

    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 39.5%;left: 61.4%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 9%;top: 39.5%;left: 66.2%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 39.5%;left: 70.8%;" />

    <GD2 class="node GD2" style="width: 3.7%;height: clamp(4px, 0.3vw, 8px);top: 44.4%;left: 61.2%;" />
    <GD2 class="node GD2" style="width: 3%;height: clamp(4px, 0.3vw, 8px);top: 44.4%;left: 68%;" />

    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 43.7%;left: 64.6%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 43.7%;left: 68.2%;" />

    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 53%;left: 66.2%;" />
    <GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 24%;top: 63.1%;left: 66.2%;" />

    <KG class="node KG" style="top: 12%;left: 1.8%;" />
    <KG class="node KG" style="top: 14%;left: 7.3%;" />
    <KG class="node KG" style="top: 24%;left: 6.3%;" />
    <KG class="node KG" style="top: 25%;left: 8.6%;" />
    <KG class="node KG" style="top: 24%;left: 14.2%;" />
    <KG class="node KG" style="top: 24%;left: 18.6%;" />
    <KG class="node KG" style="top: 24%;left: 22.9%;" />
    <KG class="node KG" style="top: 24%;left: 27.6%;" />
    <KG class="node KG" style="top: 24%;left: 32.3%;" />
    <KG class="node KG" style="top: 24%;left: 36.7%;" />
    <KG class="node KG" style="top: 24%;left: 44.25%" />
    <KG class="node KG" style="top: 24%;left: 49.5%;" />
    <KG class="node KG" style="top: 24%;left: 54.6%;" />

    <KG class="node KG" style="top: 44%;left: 25%;" />
    <KG class="node KG" style="top: 46%;left: 25%;" />
    <KG class="node KG" style="top: 54%;left: 25%;" />
    <KG class="node KG" style="top: 55.5%;left: 25%;" />

    <KG class="node KG" style="top: 42.8%;left: 49.6%;" />
    <KG class="node KG" style="top: 44.5%;left: 49.6%;" />
    <KG class="node KG" style="top: 53.5%;left: 49.6%;" />
    <KG class="node KG" style="top: 55%;left: 49.6%;" />

    <KG class="node KG2" style="top: 58%;left: 27.5%;" />
    <KG class="node KG2" style="top: 58%;left: 52%;" />

    <ST class="node ST1" style="top: 58.6%;left: 49.95%;" />
    <ST class="node ST1" style="top: 58.6%;left: 25.35%" />
  </div>
</template>
<script setup>
import FJ from './nodes/fj.vue';
import CLG from './nodes/clg.vue';
import LD from './nodes/ld.vue';
import DENG from './nodes/deng.vue';
import XL from './nodes/xl.vue';
import FM1 from './nodes/fm1.vue';
import GD1 from './nodes/gd1.vue';
import GD2 from './nodes/gd2.vue';
import GD3 from './nodes/gd3.vue';
import KG from './nodes/kg.vue';
import ST from './nodes/st.vue';

</script>
<style scoped>
.node {
  position: absolute;
  display: inline-block;
  transform: translate(-50%, -50%);
}

.LD {
  z-index: 1;
}

.LD-h {
  z-index: 10;
}

.CLG {
  z-index: 2;
}

.FJ {
  z-index: 3;
  transform: translate(-50%, -100%);
}

.DENG {
  z-index: 3;
  transform: translate(0%, -100%);
}

.XL {
  z-index: 3;
  transform: translate(0%, -100%);
}

.GD1 {
  z-index: 3;
  transform: translate(-50%, 0%);
}

.GD2 {
  z-index: 3;
  transform: translate(0%, -100%);
}

.GD3 {
  z-index: 3;
  transform: translate(-50%, -100%);
}

.KG {
  z-index: 10;
  //width: clamp(9.94px, 0.7455vw, 19.88px);
  width: clamp(6.667px, 0.5vw, 13.3334px);
  height: clamp(9.334px, 0.7vw, 18.667px);
  transform-origin: center;
  transform: rotate(90deg);
}

.KG2 {
  z-index: 10;
  width: clamp(6.667px, 0.5vw, 13.3334px);
  height: clamp(9.334px, 0.7vw, 18.667px);
}

.ST1 {
  z-index: 20;
  width: clamp(12px, 0.9vw, 24px);
  height: clamp(12px, 0.9vw, 24px);
}

.ST2 {
  z-index: 20;
  width: clamp(12px, 0.9vw, 24px);
  height: clamp(12px, 0.9vw, 24px);
  transform-origin: center;
  transform: rotate(90deg);
}

.ST3 {
  z-index: 20;
  width: clamp(12px, 0.9vw, 24px);
  height: clamp(12px, 0.9vw, 24px);
  transform-origin: center;
  transform: rotate(180deg);
}
</style>
