.

src/assets/css/custom.css

@@ -1191,12 +1191,10 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 .vertiport-tab .tab-content{display:block;}
 .uam-layer{background:#fff;top:0;left:0;position:absolute;z-index:999;overflow:auto;padding:14px;max-width:350px;height:100vh;}
 .fato{display:flex;align-items:center;justify-content:center;width:120px;height:120px;border-radius:100%;background:#ddd}
-.gate-wrap{display:flex;}
+.gate-wrap{}
 .gate-box{width:280px;display:flex;align-items:center;justify-content:center;position: relative;}
-.gate{display:flex;align-items:center;justify-content:center;width:100px;height:100px;border-radius:100%;background:pink;position:absolute;top:-50px}
+.gate{display:flex;align-items:center;justify-content:center;width:100px;height:100px;border-radius:100%;background:pink;}
-.vertiport-map-line{display:flex;}
+
-.map-line{display:block;width:200px;height:200px;border-radius:12px;background:#fff;border:1px solid #ccc}
-.map-line::after{content:'';display:block;width:82px;height:1px;background:#ccc;;position: absolute;top:50%;right:-40px;transform: translateY(-50%);}
 .gate-map .gate-box:last-child .map-line::after{display:none}
 .table-st{width:100%}
 .table-st thead tr th{font-weight:500;text-align:center;border:1px solid #ddd;padding:10px 6px;background:#f4f4f4}

src/views/vertiport/VertiportView.js

@@ -36,41 +36,37 @@ export default function VertiportView() {
             <div className='gate-wrap'>
               <div className='gate-box'>
                 <span className='gate'>G1</span>
+                <span className='gate'>G2</span>
                 <span className='map-line'></span>
               </div>
               <div className='gate-box'>
-                <span className='gate'>G2</span>
+                <span className='gate'>G3</span>
+                <span className='gate'>G4</span>
                 <span className='map-line'></span>
               </div>
               <div className='gate-box'>
-                <span className='gate'>G3</span>
+                <span className='gate'>G5</span>
+                <span className='gate'>G6</span>
                 <span className='map-line'></span>
               </div>
               <div className='gate-box'>
-                <span className='gate'>G4</span>
+                <span className='gate'>G7</span>
+                <span className='gate'>G8</span>
                 <span className='map-line'></span>
               </div>
               <div className='gate-box'>
-                <span className='gate'>G5</span>
+                <span className='gate'>G9</span>
+                <span className='gate'>G10</span>
                 <span className='map-line'></span>
               </div>
             </div>
-             <div className='gate-wrap'>
-              <div className='gate-box'><span className='gate'>G6</span></div>
-              <div className='gate-box'><span className='gate'>G7</span></div>
-              <div className='gate-box'><span className='gate'>G8</span></div>
-              <div className='gate-box'><span className='gate'>G9</span></div>
-              <div className='gate-box'><span className='gate'>G10</span></div>
-            </div> 
           </div>
-           <div className='vertiport-map-line'>
+          <div>
-            <div><span className='map-line'></span></div>
+            <div><span className='fato'>H1</span></div>
-            <div><span className='map-line'></span></div>
+            <div><span className='fato'>H2</span></div>
-            <div><span className='map-line'></span></div>
+            <div><span className='fato'>H3</span></div>
-            <div><span className='map-line'></span></div>
-            <div><span className='map-line'></span></div>
-            
           </div>
+
         </div>
       </CustomMainLayout>
       {oepnReportList && (