12.24

travel-app/src/app/tab3/tab3.page.html

@@ -42,17 +42,20 @@
       <div class="underline"></div>
     </div>
 
-    <ion-item>
-      <ion-label position="stacked">标记地点</ion-label>
-      <ion-select interface="popover" [(ngModel)]="location" name="location">
+    <ion-item class="custom-didian">
+      <ion-icon name="location"></ion-icon>
+      <ion-label>标记地点</ion-label>
+      <ion-select interface="popover" [(ngModel)]="location" name="location" slot="end">
+        <ion-select-option *ngFor="let city of cities" [value]="city">{{ city }}</ion-select-option>
       </ion-select>
     </ion-item>
 
     <!-- 公开可见开关 -->
     <div class="input-container">
       <ion-item class="custom-select">
+        <ion-icon name="lock-open"></ion-icon>
         <ion-label>可见性</ion-label>
-        <ion-select [(ngModel)]="visibility" name="publicVisibility">
+        <ion-select [(ngModel)]="visibility" name="publicVisibility" slot="end">
           <ion-select-option value="none">全部可见</ion-select-option>
           <ion-select-option value="onlyTo">仅给谁看</ion-select-option>
           <ion-select-option value="mutualFriends">仅互关好友可见</ion-select-option>
@@ -62,10 +65,10 @@
     </div>
 
     <!-- 高级选项 -->
-    <ion-item>
+    <ion-item class="custom-gaoji" lines="none">
       <ion-label>高级选项</ion-label>
-      <ion-checkbox [(ngModel)]="saveToAlbum" name="saveToAlbum">保存到相册</ion-checkbox>
-    </ion-item>
+      <ion-toggle slot="end">保存到相册</ion-toggle><br /><br />
+  </ion-item>
 
   </form>
 </ion-content>

travel-app/src/app/tab3/tab3.page.scss

@@ -6,6 +6,12 @@ ion-content.custom-content {
   --background: #d0a87d; // 替换#your-color-code为你想要的颜色
 }
 
+ion-item {
+  --background: #F5EBE0;
+  --padding-start:5px;
+  --padding-end:5px;
+}
+
 /* 输入容器 */
 .input-container {
   position: relative;
@@ -99,7 +105,7 @@ ion-content.custom-content {
 
 /* 文件预览容器 */
 .file-preview-container {
-  display: flex; /* 使用 flexbox 来排列文件预览 */
+  
   flex-wrap: wrap; /* 允许换行 */
   gap: 10px; /* 设置间距 */
 }
@@ -123,10 +129,17 @@ ion-content.custom-content {
 .custom-select {
   font-size: 14px; /* 设置字体大小 */
   color: rgba(74, 72, 72, 0.7); /* 设置字体颜色为淡色 */
+  margin: -30px 0px; /* 设置可见性项的底部边距 */
 }
 
-/* 修正ion-item的样式，使其居左 */
-ion-item {
-  --background: #F5EBE0;
-  margin: 10px 0;
+.custom-gaoji {
+  font-size: 12px; /* 设置字体大小 */
+  color: rgba(74, 72, 72, 0.7); 
+  margin: -10px 0; 
+}
+
+.custom-didian {
+  font-size: 14px; /* 设置字体大小 */
+  color: rgba(74, 72, 72, 0.7); /* 设置字体颜色为淡色 */
+  margin: -30px 0px;
 }

travel-app/src/app/tab3/tab3.page.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
 import { addIcons } from 'ionicons';
-import { add,close} from 'ionicons/icons';
+import { add,close,location,lockOpen} from 'ionicons/icons';
 
 
 @Component({
@@ -26,8 +26,15 @@ export class Tab3Page {
   saveToAlbum: boolean = false; // 新增属性，用于存储是否保存到相册
   visibility: string = 'none'; // 初始化可见性变量，默认值可以根据需求设定
 
+  cities: string[] = [
+    '北京', '上海', '广州', '深圳', '杭州', '成都', '武汉',
+    '南京', '西安', '重庆', '天津', '青岛', '沈阳', '郑州',
+    '合肥', '厦门', '福州', '哈尔滨', '长春', '济南', '南昌',
+    // ... 继续添加更多城市
+  ];
+
   constructor() {
-    addIcons({ add,close });
+    addIcons({ add,close,location,lockOpen});
   }