feat: 修改Modif Booking 页面

src/views/DestinationDelivery/src/components/ModifyBooking/src/ModifyBooking.vue

@@ -9,11 +9,12 @@ const optionOptions = ref([
 ])
 
 const inputVModel = ref('')
+const radioVModel = ref(1)
 </script>
 <template>
   <div class="modify-booking">
     <div class="header">
-      <span>Chat Log</span>
+      <span>Modify Booking</span>
       <div class="operator">
         <el-button style="height: 40px" type="default">
           <span style="margin-right: 4px" class="font_family icon-icon_filter_b1"></span>
@@ -47,10 +48,21 @@ const inputVModel = ref('')
               </el-button>
             </div>
           </div>
-          <div class="delivery-address-content">这是内容</div>
+          <div class="delivery-address-content">
+            <el-radio-group v-model="radioVModel">
+              <el-radio :value="1" label="string">
+                <div class="delivery-address-label">Main Distribution Center</div>
+                <div class="delivery-address-info">
+                  <p>160#BEIJING ROAD, JINGAN District,</p>
+                  <p>Shenzhen, China</p>
+                  <p class="time">Contact: John Doe (+65 9123 4567)</p>
+                </div>
+              </el-radio>
+            </el-radio-group>
+          </div>
           <div class="filetr-item mode-type">
             <div class="label">*Mode Type</div>
-            <el-select v-model="selectVModel" placeholder="请选择">
+            <el-select v-model="selectVModel" placeholder="Please Select Type">
               <el-option
                 v-for="item in optionOptions"
                 :key="item.key"
@@ -61,7 +73,7 @@ const inputVModel = ref('')
           </div>
           <div class="filetr-item mode-type">
             <div class="label">*Preferred Delivery Date</div>
-            <el-select v-model="selectVModel" placeholder="请选择">
+            <el-select v-model="selectVModel" placeholder="Please Select Date">
               <el-option
                 v-for="item in optionOptions"
                 :key="item.key"
@@ -78,11 +90,14 @@ const inputVModel = ref('')
               <div class="tag-item">Forklift Required</div>
               <div class="tag-item">Special Equipment</div>
             </div>
-            <el-input v-model="inputVModel" placeholder="请输入"></el-input>
+            <el-input
+              v-model="inputVModel"
+              placeholder="Enter any additional requirements or notes..."
+            ></el-input>
           </div>
           <div class="modification-reason">
             <div class="label">*Modification Reason</div>
-            <el-input v-model="inputVModel" placeholder="请输入"></el-input>
+            <el-input v-model="inputVModel" placeholder=""></el-input>
           </div>
         </div>
       </div>
@@ -148,15 +163,15 @@ const inputVModel = ref('')
     padding: 16px;
     border: 1px solid var(--color-border);
     border-radius: 12px;
+    .label {
+      font-weight: 700;
+      line-height: 22px;
+    }
     .delivery-address-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
 
-      & > .label {
-        font-size: 14px;
-        color: var(--color-neutral-2);
-      }
       & > .operator {
         display: flex;
         align-items: center;
@@ -168,9 +183,55 @@ const inputVModel = ref('')
       }
     }
     .delivery-address-content {
-      padding: 12px 12px 8px 8px;
+      height: 122px;
+      margin-bottom: 16px;
+      padding: 10px 12px 8px 8px;
       border-radius: 12px;
       background-color: var(--color-share-link-bg);
+      :deep(.el-radio__label) {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: space-between;
+      }
+      .delivery-address-label {
+        margin-top: 9px;
+        margin-bottom: 2px;
+        font-weight: 700;
+      }
+      .delivery-address-info {
+        margin-top: 8px;
+        p {
+          line-height: 21px;
+          color: var(--color-neutral-2);
+        }
+        & > .time {
+          margin-top: 6px;
+          font-size: 12px;
+        }
+      }
+    }
+    .filetr-item {
+      display: inline-flex;
+      flex-direction: column;
+      width: 240px;
+      margin-right: 16px;
+    }
+    .special-requirements {
+      margin: 16px 0;
+    }
+    .tag-list {
+      margin-top: 6px;
+      margin-bottom: 8px;
+      .tag-item {
+        display: inline-block;
+        height: 32px;
+        padding: 10px 16px;
+        margin-right: 8px;
+        background-color: #efeff0;
+        border-radius: 15px;
+        font-size: 12px;
+      }
     }
   }
 }