From c2147e4e47e522c5425ff6f8219181b95f57283c Mon Sep 17 00:00:00 2001
From: pangdundun <664790274@qq.com>
Date: Mon, 20 Nov 2023 12:03:18 +0800
Subject: [PATCH 1/2] ~

---
 src/views/page/largeScreen.vue  | 317 +++++++++++---------------------
 src/views/page/largeScreen1.vue |  20 +-
 2 files changed, 124 insertions(+), 213 deletions(-)

diff --git a/src/views/page/largeScreen.vue b/src/views/page/largeScreen.vue
index 00bf7b2..93cdc76 100644
--- a/src/views/page/largeScreen.vue
+++ b/src/views/page/largeScreen.vue
@@ -42,17 +42,9 @@
           <div class="weather">
             <div>
               <marquee behavior="" direction="" scrollamount="3">
-                <div
-                  class="item"
-                  v-for="(item, index) in weatherDataList"
-                  :key="index"
-                >
-                  <img
-                    :src="
-                      require(`../../assets/image/real-time-${item.formula}.png`)
-                    "
-                    alt=""
-                  />
+                <div class="item" v-for="(item, index) in weatherDataList" :key="index">
+                  <img :src="require(`../../assets/image/real-time-${item.formula}.png`)
+                    " alt="" />
                   <span>{{ item.environmentDataId }} : </span>
                   <span>{{
                     item.environmentData + getTypeList(item.formula)
@@ -68,11 +60,7 @@
             <div class="e_title">温室环境数据</div>
             <div class="detail">
               <!-- <div class="title_child">一号温室</div> -->
-              <vue-seamless
-                class="e_content"
-                :data="list"
-                :class-option="defaultOption"
-              >
+              <vue-seamless class="e_content" :data="list" :class-option="defaultOption">
                 <div class="item" v-for="(el, index) in list" :key="index">
                   <!-- <img :src="el.formula" alt=""> -->
                   <img :src="el.img" alt="" />
@@ -96,10 +84,7 @@
 
           <div class="thisWeekTemperature">
             <div class="e_title">本周温度统计</div>
-            <div
-              class="thisWeekTemperature_echart"
-              id="thisWeekTemperature_echart"
-            ></div>
+            <div class="thisWeekTemperature_echart" id="thisWeekTemperature_echart"></div>
           </div>
         </div>
         <div class="middle">
@@ -107,48 +92,13 @@
             <div class="map1">
               <div class="drag_box" ref="drag_box">
                 <img class="drag_img" src="../../assets/img/map.png" alt="" />
-                <img
-                  class="axis_1"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_1"
-                />
-                <img
-                  class="axis_2"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_1"
-                />
-                <img
-                  class="axis_3"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_1"
-                />
-                <img
-                  class="axis_4"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_1"
-                />
-                <img
-                  class="axis_5"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_1"
-                />
-                <img
-                  class="axis_6"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_1"
-                />
-                <img
-                  class="axis_7"
-                  src="../../assets/img/axis2.png"
-                  alt=""
-                  @click="handlerAxis_1"
-                />
+                <img class="axis_1" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
+                <img class="axis_2" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
+                <img class="axis_3" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
+                <img class="axis_4" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
+                <img class="axis_5" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
+                <img class="axis_6" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
+                <img class="axis_7" src="../../assets/img/axis2.png" alt="" @click="handlerAxis_1" />
               </div>
             </div>
           </div>
@@ -159,17 +109,9 @@
           <div class="liveVideo_content">
             <div class="swiper-container mySwiper_video">
               <div class="swiper-wrapper">
-                <div
-                  class="swiper-slide swiper-slide_video"
-                  v-for="(item, index) in get_sel_eqbyid_list"
-                  :key="index"
-                >
+                <div class="swiper-slide swiper-slide_video" v-for="(item, index) in get_sel_eqbyid_list" :key="index">
                   <div class="monitor" :id="'monitor' + item.number">
-                    <div
-                      ref="videoPlayer"
-                      class="video-js"
-                      :id="'video-js' + item.number"
-                    ></div>
+                    <div ref="videoPlayer" class="video-js" :id="'video-js' + item.number"></div>
                   </div>
                   <div class="c_bottom">{{ item.deviceTypeName }}</div>
                 </div>
@@ -188,22 +130,13 @@
           <div class="device_detail">
             <div class="swiper_timer">
               <div>
-                <div
-                  class="swiper-container middle_disasterWarningAnalysis"
-                  :style="styleContainer"
-                >
+                <div class="swiper-container middle_disasterWarningAnalysis" :style="styleContainer">
                   <div class="swiper-wrapper">
-                    <div
-                      :class="
-                        current == index
-                          ? 'swiper-slide swiper-slide2'
-                          : 'swiper-slide swiper-slide1'
-                      "
-                      v-for="(item, index) in dataList"
-                      :key="index"
-                      :style="styleItem"
-                      @click="getCurrent(index, item)"
-                    >
+                    <div :class="current == index
+                        ? 'swiper-slide swiper-slide2'
+                        : 'swiper-slide swiper-slide1'
+                      " v-for="(item, index) in dataList" :key="index" :style="styleItem"
+                      @click="getCurrent(index, item)">
                       {{ item.greenhouseName + "温室" }}
                     </div>
                   </div>
@@ -239,47 +172,32 @@
               <div class="i_content">
                 <div class="i_content_item">
                   <span>1#风机</span>
-                  <span
-                    :style="fanStatus.status[0] == 1 ? '' : 'color:#86C2FF;'"
-                    >{{ fanStatus.status[0] == 1 ? "打开" : "关闭" }}</span
-                  >
+                  <span :style="fanStatus.status[0] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[0] == 1 ? "打开" :
+                    "关闭" }}</span>
                   <span class="line"></span>
                   <span>2#风机</span>
-                  <span
-                    :style="fanStatus.status[1] == 1 ? '' : 'color:#86C2FF;'"
-                    >{{ fanStatus.status[1] == 1 ? "打开" : "关闭" }}</span
-                  >
+                  <span :style="fanStatus.status[1] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[1] == 1 ? "打开" :
+                    "关闭" }}</span>
                 </div>
                 <div class="line1"></div>
                 <div class="i_content_item">
                   <span>3#风机</span>
-                  <span
-                    :style="fanStatus.status[2] == 1 ? '' : 'color:#86C2FF;'"
-                    >{{ fanStatus.status[2] == 1 ? "打开" : "关闭" }}</span
-                  >
+                  <span :style="fanStatus.status[2] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[2] == 1 ? "打开" :
+                    "关闭" }}</span>
                   <span class="line"></span>
                   <span>4#风机</span>
-                  <span
-                    :style="fanStatus.status[3] == 1 ? '' : 'color:#86C2FF;'"
-                    >{{ fanStatus.status[3] == 1 ? "打开" : "关闭" }}</span
-                  >
+                  <span :style="fanStatus.status[3] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[3] == 1 ? "打开" :
+                    "关闭" }}</span>
                 </div>
                 <div class="line1"></div>
                 <div class="i_content_item" style="width: 50%">
                   <span>5#风机</span>
-                  <span
-                    :style="fanStatus.status[4] == 1 ? '' : 'color:#86C2FF;'"
-                    >{{ fanStatus.status[4] == 1 ? "打开" : "关闭" }}</span
-                  >
+                  <span :style="fanStatus.status[4] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[4] == 1 ? "打开" :
+                    "关闭" }}</span>
                   <span class="line"></span>
                 </div>
               </div>
-              <div
-                class="i_title_"
-                style="margin-top: 0.2rem"
-                v-for="(item, index) in statusList"
-                :key="index"
-              >
+              <div class="i_title_" style="margin-top: 0.2rem" v-for="(item, index) in statusList" :key="index">
                 <template v-if="item.open != 0">
                   <img src="../../assets/img/i_title_img.png" alt="" />
                   <span>{{ item.name }}</span>
@@ -1177,10 +1095,10 @@ export default {
 <style lang="scss">
 .environmentData {
   .e_content {
-    > div {
+    >div {
       width: 100% !important;
 
-      > div {
+      >div {
         width: 100% !important;
         display: flex;
         flex-wrap: wrap;
@@ -1222,12 +1140,10 @@ export default {
       opacity: 0.9;
       text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);
 
-      background: linear-gradient(
-        to bottom,
-        #ffffff 45%,
-        #e9f8ff 90%,
-        #77baff 100%
-      );
+      background: linear-gradient(to bottom,
+          #ffffff 45%,
+          #e9f8ff 90%,
+          #77baff 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       text-align: center;
@@ -1242,7 +1158,7 @@ export default {
       display: flex;
       align-items: center;
 
-      > span {
+      >span {
         width: 0.8rem;
         height: 0.3rem;
         background: rgba(14, 91, 165, 0.1);
@@ -1258,12 +1174,10 @@ export default {
       }
 
       .act {
-        background: linear-gradient(
-          -35deg,
-          #56a8d5 0%,
-          rgba(0, 55, 110, 0.75) 50%,
-          #56a8d5 100%
-        );
+        background: linear-gradient(-35deg,
+            #56a8d5 0%,
+            rgba(0, 55, 110, 0.75) 50%,
+            #56a8d5 100%);
         border: 1px solid rgba(122, 225, 255, 0.75);
         font-size: 0.18rem;
         font-family: MicrosoftYaHei;
@@ -1284,7 +1198,7 @@ export default {
       align-items: center;
       justify-content: center;
 
-      > img {
+      >img {
         width: 0.2rem;
         height: 0.2rem;
       }
@@ -1300,26 +1214,26 @@ export default {
       align-items: center;
       justify-content: space-between;
 
-      > img {
+      >img {
         width: 0.28rem;
         height: 0.3rem;
       }
 
-      > span:nth-child(2) {
+      >span:nth-child(2) {
         font-size: 0.24rem;
         font-family: PingFang-SC-Bold;
         font-weight: bold;
         color: #7abaff;
       }
 
-      > span:nth-child(4) {
+      >span:nth-child(4) {
         font-size: 0.2rem;
         font-family: PingFang-SC-Bold;
         font-weight: bold;
         color: #7abaff;
       }
 
-      > span:nth-child(6) {
+      >span:nth-child(6) {
         font-size: 0.3rem;
         font-family: PingFang-SC-Bold;
         font-weight: bold;
@@ -1350,12 +1264,12 @@ export default {
         align-items: center;
         justify-content: center;
 
-        > img {
+        >img {
           width: 1.08rem;
           height: 0.91rem;
         }
 
-        > span {
+        >span {
           font-size: 0.2rem;
           font-family: AlibabaPuHuiTiB;
           font-weight: bold;
@@ -1369,12 +1283,12 @@ export default {
         align-items: center;
         justify-content: center;
 
-        > img {
+        >img {
           width: 1.08rem;
           height: 0.91rem;
         }
 
-        > span {
+        >span {
           font-size: 0.2rem;
           font-family: AlibabaPuHuiTiB;
           font-weight: bold;
@@ -1404,8 +1318,7 @@ export default {
         .weatherStation {
           width: 4rem;
           height: 0.43rem;
-          background: url("../../assets/img/weatherStation.png") center
-            no-repeat;
+          background: url("../../assets/img/weatherStation.png") center no-repeat;
           background-size: 100% 100%;
         }
 
@@ -1413,7 +1326,7 @@ export default {
           width: 3.84rem;
           height: 0.34rem;
 
-          > div {
+          >div {
             width: 100%;
             height: 100%;
             box-sizing: border-box;
@@ -1441,7 +1354,7 @@ export default {
                 margin-right: 0.1rem;
                 display: inline-block;
 
-                > img {
+                >img {
                   width: 0.3rem;
                   height: 0.3rem;
                   position: relative;
@@ -1449,7 +1362,7 @@ export default {
                   margin-right: 0.05rem;
                 }
 
-                > span {
+                >span {
                   font-size: 0.16rem;
                   font-weight: 400;
                   color: #fff;
@@ -1470,8 +1383,7 @@ export default {
         .e_title {
           width: 3.98rem;
           height: 0.19rem;
-          background: url("../../assets/img/environmentData_bg.png") center
-            no-repeat;
+          background: url("../../assets/img/environmentData_bg.png") center no-repeat;
           background-size: 100% 100%;
           font-size: 0.18rem;
           font-family: AlibabaPuHuiTiM;
@@ -1516,7 +1428,7 @@ export default {
                 box-sizing: border-box;
                 padding-bottom: 0.1rem;
 
-                > img {
+                >img {
                   width: 0.62rem;
                   height: 0.68rem;
                   margin: 0 0.16rem 0 0.13rem;
@@ -1526,14 +1438,14 @@ export default {
                   display: flex;
                   flex-direction: column;
 
-                  > span:nth-child(1) {
+                  >span:nth-child(1) {
                     font-size: 0.16rem;
                     font-family: MicrosoftYaHei-Bold;
                     font-weight: bold;
                     color: #86c2ff;
                   }
 
-                  > span:nth-child(2) {
+                  >span:nth-child(2) {
                     font-size: 0.22rem;
                     font-family: AlibabaPuHuiTiB;
                     font-weight: bold;
@@ -1564,15 +1476,13 @@ export default {
           top: 0;
           left: 0;
           z-index: 99;
-          -webkit-mask-image: linear-gradient(
-            90deg,
-            transparent 22%,
-            transparent 10%,
-            blue 30%,
-            blue 70%,
-            transparent 75%,
-            transparent 100%
-          );
+          -webkit-mask-image: linear-gradient(90deg,
+              transparent 22%,
+              transparent 10%,
+              blue 30%,
+              blue 70%,
+              transparent 75%,
+              transparent 100%);
 
           .map1 {
             width: 60%;
@@ -1585,12 +1495,10 @@ export default {
             //     blue 80%,
             //     transparent 100%,
             //     transparent 100%);
-            -webkit-mask-image: linear-gradient(
-              transparent 0%,
-              blue 8%,
-              blue 85%,
-              transparent 100%
-            );
+            -webkit-mask-image: linear-gradient(transparent 0%,
+                blue 8%,
+                blue 85%,
+                transparent 100%);
             // transform: scale(0.6);
             position: absolute;
             top: 50%;
@@ -1605,23 +1513,19 @@ export default {
               // top: 0.3rem;
               // left: 0.5rem;
               z-index: 10;
-              -webkit-mask-image: linear-gradient(
-                90deg,
-                transparent 4%,
-                blue 18%,
-                blue 88%,
-                transparent 100%
-              );
+              -webkit-mask-image: linear-gradient(90deg,
+                  transparent 4%,
+                  blue 18%,
+                  blue 88%,
+                  transparent 100%);
 
               .drag_img {
                 width: 100%;
                 height: 100%;
-                -webkit-mask-image: linear-gradient(
-                  transparent 0%,
-                  blue 13%,
-                  blue 73%,
-                  transparent 97%
-                );
+                -webkit-mask-image: linear-gradient(transparent 0%,
+                    blue 13%,
+                    blue 73%,
+                    transparent 97%);
               }
 
               .axis_1 {
@@ -1793,7 +1697,7 @@ export default {
             width: 100%;
             height: 0.54rem;
 
-            > div {
+            >div {
               width: 100%;
               height: 0.54rem;
               cursor: pointer;
@@ -1813,17 +1717,14 @@ export default {
                 width: 0.74rem !important;
               }
 
-              .swiper-slide1 {
-              }
+              .swiper-slide1 {}
 
               ::v-deep .swiper-slide2 {
                 color: #ffffff !important;
-                background: linear-gradient(
-                  -35deg,
-                  #56a8d5 0%,
-                  rgba(0, 55, 110, 0.75) 50%,
-                  #56a8d5 100%
-                ) !important;
+                background: linear-gradient(-35deg,
+                    #56a8d5 0%,
+                    rgba(0, 55, 110, 0.75) 50%,
+                    #56a8d5 100%) !important;
                 border: 1px solid rgba(122, 225, 255, 0.75) !important;
               }
 
@@ -1907,8 +1808,7 @@ export default {
             .i_title {
               // width: 4rem;
               height: 0.5rem;
-              background: url("../../assets/img/i_title_bg.png") center
-                no-repeat;
+              background: url("../../assets/img/i_title_bg.png") center no-repeat;
               background-size: 100% 100%;
               display: flex;
               align-items: center;
@@ -1916,12 +1816,12 @@ export default {
               box-sizing: border-box;
               padding: 0 0.1rem 0 0.05rem;
 
-              > img {
+              >img {
                 width: 0.5rem;
                 height: 0.5rem;
               }
 
-              > span:nth-child(2) {
+              >span:nth-child(2) {
                 font-size: 0.16rem;
                 font-family: MicrosoftYaHei-Bold;
                 font-weight: bold;
@@ -1935,7 +1835,7 @@ export default {
                 opacity: 0.2;
               }
 
-              > span:nth-child(4) {
+              >span:nth-child(4) {
                 font-size: 0.14rem;
                 font-family: MicrosoftYaHei;
                 font-weight: 400;
@@ -1950,14 +1850,12 @@ export default {
               //   margin-right: 0.47rem;
               // }
 
-              > span:nth-child(6) {
+              >span:nth-child(6) {
                 width: 0.66rem;
                 height: 0.3rem;
-                background: linear-gradient(
-                  -35deg,
-                  rgba(122, 225, 255, 0.49) 1%,
-                  rgba(122, 225, 255, 0.5) 100%
-                );
+                background: linear-gradient(-35deg,
+                    rgba(122, 225, 255, 0.49) 1%,
+                    rgba(122, 225, 255, 0.5) 100%);
                 border: 0.01rem solid rgba(122, 225, 255, 0.5);
                 border-radius: 0.15rem;
                 font-size: 0.14rem;
@@ -1972,8 +1870,7 @@ export default {
             .i_title_ {
               // width: 4rem;
               height: 0.5rem;
-              background: url("../../assets/img/i_title_bg.png") center
-                no-repeat;
+              background: url("../../assets/img/i_title_bg.png") center no-repeat;
               background-size: 100% 100%;
               display: flex;
               align-items: center;
@@ -1981,12 +1878,12 @@ export default {
               box-sizing: border-box;
               padding: 0 0.1rem 0 0.05rem;
 
-              > img {
+              >img {
                 width: 0.5rem;
                 height: 0.5rem;
               }
 
-              > span:nth-child(2) {
+              >span:nth-child(2) {
                 width: 18%;
                 font-size: 0.16rem;
                 font-family: MicrosoftYaHei-Bold;
@@ -2002,7 +1899,7 @@ export default {
                 margin-right: 0.1rem;
               }
 
-              > span:nth-child(4) {
+              >span:nth-child(4) {
                 width: 18%;
                 font-size: 0.14rem;
                 font-family: MicrosoftYaHei;
@@ -2010,7 +1907,7 @@ export default {
                 color: #4effd5;
               }
 
-              > span:nth-child(6) {
+              >span:nth-child(6) {
                 width: 18%;
                 font-size: 0.14rem;
                 font-family: MicrosoftYaHei;
@@ -2019,14 +1916,12 @@ export default {
                 margin-right: 0.47rem;
               }
 
-              > span:nth-child(7) {
+              >span:nth-child(7) {
                 width: 0.66rem;
                 height: 0.3rem;
-                background: linear-gradient(
-                  -35deg,
-                  rgba(122, 225, 255, 0.49) 1%,
-                  rgba(122, 225, 255, 0.5) 100%
-                );
+                background: linear-gradient(-35deg,
+                    rgba(122, 225, 255, 0.49) 1%,
+                    rgba(122, 225, 255, 0.5) 100%);
                 border: 0.01rem solid rgba(122, 225, 255, 0.5);
                 border-radius: 0.15rem;
                 font-size: 0.14rem;
@@ -2053,16 +1948,16 @@ export default {
                 align-items: center;
                 justify-content: space-between;
 
-                > span:nth-child(1),
-                > span:nth-child(4) {
+                >span:nth-child(1),
+                >span:nth-child(4) {
                   font-size: 0.14rem;
                   font-family: MicrosoftYaHei;
                   font-weight: 400;
                   color: #ffffff;
                 }
 
-                > span:nth-child(2),
-                > span:nth-child(5) {
+                >span:nth-child(2),
+                >span:nth-child(5) {
                   font-size: 0.14rem;
                   font-family: MicrosoftYaHei;
                   font-weight: 400;
diff --git a/src/views/page/largeScreen1.vue b/src/views/page/largeScreen1.vue
index 3a090fd..8f373be 100644
--- a/src/views/page/largeScreen1.vue
+++ b/src/views/page/largeScreen1.vue
@@ -30,10 +30,10 @@
                   </div>
               <div class="popBox" v-for="(item, index) in popContentList" :key="index">
                 <template>
-                  <div class="pole_item" :class="'pole_item' + (index+1)"  @click="handlerPop(item.id)">
+                  <div class="pole_item" :style="getNamePosition(item.id)"  @click="handlerPop(item.id)">
                     <div class="p_title">
                       <img src="../../assets/img/wenshi.png" alt="" />
-                      <span>{{ item.greenhouseName }}#温室</span>
+                      <span>{{ item.greenhouseName }}温室</span>
                     </div>
                     <img class="pole1" src="../../assets/img/pole1.png" alt="" />
                   </div>
@@ -659,6 +659,22 @@ export default {
       // }
     },
 
+    getNamePosition(id){
+      if(id == 2){
+        return "position: absolute;top: 10%;left: 24%;"
+      }else if(id == 3){
+        return "position: absolute;top: 61%;left: 62%;"
+      }else if(id == 4){
+        return "position: absolute;top: 1%;left: 62%;"
+      }else if(id == 5){
+        return "position: absolute;top: 29%;left: 76%;"
+      }else if(id == 6){
+        return "position: absolute;top: 22%;left: 40%;"
+      }else if(id == 7){
+        return "position: absolute;top: 41%;left: 13%;"
+      }
+    },
+
     // 数据单位
     getTypeList(val) {
       let typeList1 = [];

From 45aed4098e285adea820a312f1b7d31e3802a16a Mon Sep 17 00:00:00 2001
From: pangdundun <664790274@qq.com>
Date: Tue, 21 Nov 2023 10:47:40 +0800
Subject: [PATCH 2/2] ~

---
 src/views/page/largeScreen1.vue | 55 ++++++++++++++-------------------
 1 file changed, 24 insertions(+), 31 deletions(-)

diff --git a/src/views/page/largeScreen1.vue b/src/views/page/largeScreen1.vue
index 8f373be..6e22f02 100644
--- a/src/views/page/largeScreen1.vue
+++ b/src/views/page/largeScreen1.vue
@@ -81,7 +81,7 @@
                     v-if="popContentCurrent == index ? true : false"> -->
                   <div
                     class="pop_content"
-                    :style="getTopOrLeft()"
+                    :style="getTopOrLeft(item.id)"
                     v-show="popContentCurrent == item.id ? true : false"
                   >
                     <img
@@ -636,42 +636,35 @@ export default {
       });
     },
 
-    getTopOrLeft() {
-      return "top:50%;left:50%;transform: translate(-50%,-50%);";
-      // if (name == "二号") {
-      //   // return "top:1rem;left:6.2rem";
-      //   return "top:50%;left:50%;transform: translate(-50%,-50%);";
-      // } else if (name == "一号") {
-      //   // return "top:3.5rem;left:3.8rem";
-      //   return "top:50%;left:50%;transform: translate(-50%,-50%);";
-      // } else if (name == "3号") {
-      //   // return "top:2rem;left:9rem";
-      //   return "top:50%;left:50%;transform: translate(-50%,-50%);";
-      // } else if (name == "4号") {
-      //   // return "top:2rem;left:9.3rem";
-      //   return "top:50%;left:50%;transform: translate(-50%,-50%);";
-      // } else if (name == "5") {
-      //   // return "top:3.5rem;left:6.5rem";
-      //   return "top:50%;left:50%;transform: translate(-50%,-50%);";
-      // } else if (name == "6") {
-      //   // return "top:0.8rem;left:7.2rem";
-      //   return "top:50%;left:50%;transform: translate(-50%,-50%);";
-      // }
+    getTopOrLeft(id) {
+      if (id == 2) {
+        return "top:46%;left:46%;transform: translate(-50%,-50%);";
+      } else if (id == 5) {
+        return "top:53%;left:47%;transform: translate(-50%,-50%);";
+      } else if (id == 6) {
+        return "top:46%;left:51%;transform: translate(-50%,-50%);";
+      } else if (id == 4) {
+        return "top:50%;left:62%;transform: translate(-50%,-50%);";
+      } else if (id == 3) {
+        return "top:50%;left:62%;transform: translate(-50%,-50%);";
+      } else if (id == 1) {
+        return "top:50%;left:35%;transform: translate(-50%,-50%);";
+      }
     },
 
     getNamePosition(id){
-      if(id == 2){
+      if(id == 1){
+        return "position: absolute;top: 41%;left: 13%;"
+      }else if(id == 2){
         return "position: absolute;top: 10%;left: 24%;"
       }else if(id == 3){
-        return "position: absolute;top: 61%;left: 62%;"
-      }else if(id == 4){
-        return "position: absolute;top: 1%;left: 62%;"
-      }else if(id == 5){
-        return "position: absolute;top: 29%;left: 76%;"
-      }else if(id == 6){
         return "position: absolute;top: 22%;left: 40%;"
-      }else if(id == 7){
-        return "position: absolute;top: 41%;left: 13%;"
+      }else if(id == 4){
+        return "position: absolute;top: 29%;left: 76%;"
+      }else if(id == 5){
+        return "position: absolute;top: 61%;left: 62%;"
+      }else if(id == 6){
+        return "position: absolute;top: 1%;left: 62%;"
       }
     },