WishListPage whole UI done.

FrontendFolder/switch-room/src/components/WishlistPage.vue

@@ -37,7 +37,7 @@
             </el-aside>
             <!-- Main Coding Area -->
             <el-main>
-              <el-card shadow="never">
+              <el-card shadow="never" class="main-card">
                 <span>Wishlist Item Detail</span>
                 <el-form
                   ref="ruleFormRef"
@@ -50,12 +50,15 @@
                   status-icon
                 >
                   <el-form-item></el-form-item>
+
                   <el-form-item label="City Name:" prop="cityName">
                     <el-input v-model="wishlistItem.cityName" />
                   </el-form-item>
+
                   <el-form-item label="State:" prop="state">
                     <el-input v-model="wishlistItem.state" />
                   </el-form-item>
+
                   <el-form-item label="Trip Start Time" required>
                     <el-form-item prop="startTime">
                       <el-date-picker
@@ -79,6 +82,7 @@
                       />
                     </el-form-item>
                   </el-form-item>
+
                   <el-form-item label="Details:" prop="details">
                     <el-input
                       v-model="wishlistItem.details"
@@ -86,6 +90,7 @@
                       placeholder="Trip plan or want to visit places..."
                     />
                   </el-form-item>
+
                   <el-button type="primary" @click="submitForm(ruleFormRef)"
                     >Create</el-button
                   >
@@ -198,21 +203,6 @@ const options = Array.from({ length: 10000 }).map((_, idx) => ({
   value: `${idx + 1}`,
   label: `${idx + 1}`,
 }));
-
-// export default {
-//   name: "WishListPage",
-//   data() {
-//     return { wishlistList };
-//   },
-//   methods: {
-//     selectItem(idx) {
-//       console.log("Selected wishlist Item: " + idx);
-//     },
-//     addNewWishlistItem() {
-//       console.log("addNewWishlistItem");
-//     },
-//   },
-// };
 </script>
 
 <style scoped>
@@ -229,6 +219,10 @@ const options = Array.from({ length: 10000 }).map((_, idx) => ({
   align-items: center;
 }
 .el-main {
-  --el-main-padding: 0px;
+  --el-main-padding: 0px 20px 20px 20px;
+}
+
+.main-card {
+  padding: 0px 0px 0px 20px;
 }
 </style>