开放航班保障信息等功能

src/app/pages/main/guarantee-tab/guarantee-tab.component.html

@@ -1,3 +1,7 @@
-<p>
+<div class="tab-container">
-  guarantee-tab works!
+    <div class="mb-4 fieldset-card">
-</p>
+        <fieldset>
+            <legend>保障信息</legend>
+        </fieldset>
+    </div>
+</div>

src/app/pages/main/guarantee-tab/guarantee-tab.component.scss

@@ -0,0 +1,22 @@
+.tab-container {
+    padding: 10px 10px;
+    // height: 635px;
+    // overflow: auto;
+    // border: 1px solid #ccc;
+    .fieldset-card {
+        fieldset {
+            padding: 5px 10px 20px 10px;
+            border: 1px solid #ccc;
+            legend {
+                width: auto;
+                padding: 0 5px;
+                margin: 0;
+                font-size: 14px;
+                font-weight: bold;
+            }
+            p{
+                margin: 0;
+            }
+        }
+    }
+}

src/app/pages/main/main.component.html

@@ -148,7 +148,7 @@
                     <input type="checkbox" [(ngModel)]="checkboxGroup.detail" (ngModelChange)="checkboxChange()">
                     <span>详细信息</span>
                 </label>
-                <!-- <label class="radio-inline custom-checkbox nowrap mr-4">
+                <label class="radio-inline custom-checkbox nowrap mr-4">
                     <input type="checkbox" [(ngModel)]="checkboxGroup.vip" (ngModelChange)="checkboxChange()">
                     <span>航班VIP信息</span>
                 </label>
@@ -159,7 +159,7 @@
                 <label class="radio-inline custom-checkbox nowrap">
                     <input type="checkbox" [(ngModel)]="checkboxGroup.special" (ngModelChange)="checkboxChange()">
                     <span>航班特服信息</span>
-                </label> -->
+                </label>
             </div>
         </div>
         <div class="airline-table">

src/app/pages/main/special-tab/special-tab.component.html

@@ -1,3 +1,7 @@
-<p>
+<div class="tab-container">
-  special-tab works!
+    <div class="mb-4 fieldset-card">
-</p>
+        <fieldset>
+            <legend>航班特服信息</legend>
+        </fieldset>
+    </div>
+</div>

src/app/pages/main/special-tab/special-tab.component.scss

@@ -0,0 +1,22 @@
+.tab-container {
+    padding: 10px 10px;
+    // height: 635px;
+    // overflow: auto;
+    // border: 1px solid #ccc;
+    .fieldset-card {
+        fieldset {
+            padding: 5px 10px 20px 10px;
+            border: 1px solid #ccc;
+            legend {
+                width: auto;
+                padding: 0 5px;
+                margin: 0;
+                font-size: 14px;
+                font-weight: bold;
+            }
+            p{
+                margin: 0;
+            }
+        }
+    }
+}

src/app/pages/main/vip-tab/vip-tab.component.html

@@ -1,3 +1,7 @@
-<p>
+<div class="tab-container">
-  vip-tab works!
+    <div class="mb-4 fieldset-card">
-</p>
+        <fieldset>
+            <legend>航班VIP信息</legend>
+        </fieldset>
+    </div>
+</div>

src/app/pages/main/vip-tab/vip-tab.component.scss

@@ -0,0 +1,22 @@
+.tab-container {
+    padding: 10px 10px;
+    // height: 635px;
+    // overflow: auto;
+    // border: 1px solid #ccc;
+    .fieldset-card {
+        fieldset {
+            padding: 5px 10px 20px 10px;
+            border: 1px solid #ccc;
+            legend {
+                width: auto;
+                padding: 0 5px;
+                margin: 0;
+                font-size: 14px;
+                font-weight: bold;
+            }
+            p{
+                margin: 0;
+            }
+        }
+    }
+}