src/app/person/person.page.html

@@ -7,21 +7,15 @@
 <ion-content>
   <!-- 头像 -->
   <ion-card>
-    <ion-card-header>
-      头像
-    </ion-card-header>
     <ion-card-content>
-      <img src="assets/images/avatar.jpg" alt="头像">
-    </ion-card-content>
-  </ion-card>
+      <ion-avatar class="small-avatar">
+        <img src="assets/images/person/touxiang.jpg" alt="头像">
+      </ion-avatar>
 
-  <!-- 设置 -->
-  <ion-card>
-    <ion-card-header>
-      设置
-    </ion-card-header>
-    <ion-card-content>
-      这里展示设置页面的内容
+      <div class="container">
+        <ion-icon name="mail-outline" class="icon-mail"></ion-icon>
+      <ion-icon name="settings-outline" class="icon-settings"></ion-icon>
+      </div>
     </ion-card-content>
   </ion-card>
 
@@ -31,7 +25,7 @@
       我的路线
     </ion-card-header>
     <ion-card-content>
-      这里展示我的路线的内容
+      你还没有规划路线哦
     </ion-card-content>
   </ion-card>
 
@@ -41,7 +35,27 @@
       收藏
     </ion-card-header>
     <ion-card-content>
-      这里展示收藏的内容
+      <ion-list>
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="assets/images/movie/movie4.jpg" alt="你的名字">
+          </ion-thumbnail>
+          <ion-label>
+            <h2>你的名字</h2>
+            <p>2016.12.12</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="assets/images/movie/movie3.jpg" alt="龙兄虎弟">
+          </ion-thumbnail>
+          <ion-label>
+            <h2>龙兄虎弟</h2>
+            <p>2018.12.12</p>
+          </ion-label>
+        </ion-item>
+        <!-- 其他收藏 -->
+      </ion-list>
     </ion-card-content>
   </ion-card>
 
@@ -54,12 +68,12 @@
       <ion-list>
         <ion-item>
           <ion-thumbnail slot="start">
-            <img src="assets/images/movie1.jpg">
+            <img src="assets/images/movie/movie4.jpg" alt="你的名字">
           </ion-thumbnail>
           <ion-label>
-            <h2>电影名</h2>
+            <h2>你的名字</h2>
             <p>评论内容</p>
-            <p>评论时间</p>
+            <p>2016.12.12</p>
           </ion-label>
         </ion-item>
         <!-- 其他评论 -->

src/app/person/person.page.scss

@@ -0,0 +1,22 @@
+.small-avatar img {
+    width: 50px; /* 设置头像图片宽度 */
+    height: 50px; /* 设置头像图片高度 */
+    object-fit: cover; /* 保持图片比例不变，裁剪超出容器的部分 */
+  }
+
+  .icon-mail {
+    font-size: 2rem; /* 设置大图标的大小 */
+    
+  }
+  
+  .icon-settings {
+    font-size: 2rem; /* 设置小图标的大小 */
+    
+  }
+
+  .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  

src/app/place/place.page.html

@@ -7,12 +7,12 @@
 <ion-content>
   <!-- 影视花絮 -->
   <ion-card>
+    <ion-card-content>
+      <img src="assets/images/place/place0.jpg">
+    </ion-card-content> 
     <ion-card-header>
-      影视花絮
+      一起爬山吗?
     </ion-card-header>
-    <ion-card-content>
-      这里展示影视花絮的内容
-    </ion-card-content>
   </ion-card>
 
   <!-- 地图 -->
@@ -25,23 +25,102 @@
     </ion-card-content>
   </ion-card>
 
-  <!-- 附件 -->
-  <ion-card>
-    <ion-card-header>
-      附件
-    </ion-card-header>
-    <ion-card-content>
-      这里展示附件的内容
-    </ion-card-content>
-  </ion-card>
-
   <!-- 全部 -->
   <ion-card>
     <ion-card-header>
-      全部
+      世界地点
     </ion-card-header>
     <ion-card-content>
-      这里展示全部内容
+      <ion-card>
+        <ion-card-header>
+          中国大陆
+        </ion-card-header>
+        <ion-card-content>
+          <ion-list>
+            <ion-item>
+              <ion-thumbnail slot="start">
+                <img src="assets/images/place/place4.jpg" alt="陆家嘴天桥">
+              </ion-thumbnail>
+              <ion-label>
+                <h2>陆家嘴天桥</h2>
+                <p>中国 上海市</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-card-content>
+      </ion-card>
+      <ion-card>
+        <ion-card-header>
+          中国香港
+        </ion-card-header>
+        <ion-card-content>
+          <ion-list>
+            <ion-item>
+              <ion-thumbnail slot="start">
+                <img src="assets/images/place/place5.jpg" alt="中环至半山自动扶梯">
+              </ion-thumbnail>
+              <ion-label>
+                <h2>中环至半山自动扶梯</h2>
+                <p>中国香港</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-card-content>
+      </ion-card>
+      <ion-card>
+        <ion-card-header>
+          日本
+        </ion-card-header>
+        <ion-card-content>
+          <ion-list>
+            <ion-item>
+              <ion-thumbnail slot="start">
+                <img src="assets/images/place/place8.jpg" alt="镰仓高校前路口">
+              </ion-thumbnail>
+              <ion-label>
+                <h2>镰仓高校前路口</h2>
+                <p>日本 镰仓市</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-card-content>
+      </ion-card>
+      <ion-card>
+        <ion-card-header>
+          英国
+        </ion-card-header>
+        <ion-card-content>
+          <ion-list>
+            <ion-item>
+              <ion-thumbnail slot="start">
+                <img src="assets/images/place/place6.jpg" alt="国王十字火车站">
+              </ion-thumbnail>
+              <ion-label>
+                <h2>国王十字火车站</h2>
+                <p>英国 伦敦</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-card-content>
+      </ion-card>
+      <ion-card>
+        <ion-card-header>
+          美国
+        </ion-card-header>
+        <ion-card-content>
+          <ion-list>
+            <ion-item>
+              <ion-thumbnail slot="start">
+                <img src="assets/images/place/place7.jpg" alt="时代广场">
+              </ion-thumbnail>
+              <ion-label>
+                <h2>时代广场</h2>
+                <p>美国 纽约</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-card-content>
+      </ion-card>
     </ion-card-content>
   </ion-card>
 
@@ -54,14 +133,31 @@
       <ion-list>
         <ion-item>
           <ion-thumbnail slot="start">
-            <img src="assets/images/place1.jpg">
+            <img src="assets/images/place/place2.jpg" alt="涩谷站前十字路口">
           </ion-thumbnail>
           <ion-label>
             <h2>涩谷站前十字路口</h2>
             <p>日本 东京都</p>
           </ion-label>
         </ion-item>
-        <!-- 其他热门地点 -->
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="assets/images/place/place3.jpg" alt="切瑟尔海滩">
+          </ion-thumbnail>
+          <ion-label>
+            <h2>切瑟尔海滩</h2>
+            <p>英国 波特兰</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="assets/images/place/place12.jpg" alt="稻城亚丁风景区">
+          </ion-thumbnail>
+          <ion-label>
+            <h2>稻城亚丁风景区</h2>
+            <p>中国 甘孜藏族自治州</p>
+          </ion-label>
+        </ion-item>
       </ion-list>
     </ion-card-content>
   </ion-card>
@@ -72,7 +168,114 @@
       主题推荐
     </ion-card-header>
     <ion-card-content>
-      这里展示主题推荐的内容
+      <ion-card>
+        <ion-card-header>
+          旅游景点
+        </ion-card-header>
+        <ion-card-content>
+          <ion-list>
+            <ion-item>
+              <ion-thumbnail slot="start">
+                <img src="assets/images/place/place8.jpg" alt="镰仓高校前路口">
+              </ion-thumbnail>
+              <ion-label>
+                <h2>镰仓高校前路口</h2>
+                <p>日本 镰仓市</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-thumbnail slot="start">
+                <img src="assets/images/place/place9.jpg" alt="小丑台阶">
+              </ion-thumbnail>
+              <ion-label>
+                <h2>小丑台阶</h2>
+                <p>美国 纽约</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-card-content>
+      </ion-card>
+      <ion-card>
+        <ion-card-header>
+          历史建筑
+        </ion-card-header>
+        <ion-card-content>
+          <ion-list>
+            <ion-item>
+              <ion-thumbnail slot="start">
+                <img src="assets/images/place/place10.jpg" alt="阅江楼">
+              </ion-thumbnail>
+              <ion-label>
+                <h2>阅江楼</h2>
+                <p>中国 南京市</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-thumbnail slot="start">
+                <img src="assets/images/place/place11.jpg" alt="埃菲尔铁塔">
+              </ion-thumbnail>
+              <ion-label>
+                <h2>埃菲尔铁塔</h2>
+                <p>法国 巴黎市</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-card-content>
+      </ion-card>
+      <ion-card>
+        <ion-card-header>
+          自然风光
+        </ion-card-header>
+        <ion-card-content>
+          <ion-list>
+            <ion-item>
+              <ion-thumbnail slot="start">
+                <img src="assets/images/place/place12.jpg" alt="稻城亚丁风景区">
+              </ion-thumbnail>
+              <ion-label>
+                <h2>稻城亚丁风景区</h2>
+                <p>中国 甘孜藏族自治州</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-thumbnail slot="start">
+                <img src="assets/images/place/place13.jpg" alt="火焰山">
+              </ion-thumbnail>
+              <ion-label>
+                <h2>火焰山</h2>
+                <p>中国 吐鲁番市</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-card-content>
+      </ion-card>
+      <ion-card>
+        <ion-card-header>
+          地标
+        </ion-card-header>
+        <ion-card-content>
+          <ion-list>
+            <ion-item>
+              <ion-thumbnail slot="start">
+                <img src="assets/images/place/place14.jpg" alt="解放碑">
+              </ion-thumbnail>
+              <ion-label>
+                <h2>解放碑</h2>
+                <p>中国 重庆市</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-thumbnail slot="start">
+                <img src="assets/images/place/place15.jpg" alt="国贸桥">
+              </ion-thumbnail>
+              <ion-label>
+                <h2>国贸桥</h2>
+                <p>中国 北京市</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-card-content>
+      </ion-card>
     </ion-card-content>
   </ion-card>
 </ion-content>

src/app/tab3/tab3.page.html

@@ -7,12 +7,13 @@
 <ion-content>
   <!-- 城市推荐文章 -->
   <ion-card>
-    <ion-card-header>
-      城市推荐文章
-    </ion-card-header>
     <ion-card-content>
-      这里是城市推荐文章的内容
+      <img src="assets/images/city/hangzhou.jpg" alt="杭州">
+      <p>电视剧《新白娘子传奇》剧照 取景于杭州西湖断桥></p>
     </ion-card-content>
+    <ion-card-header>
+      江南忆，最忆是杭州。一个西湖撑起一座杭州城。虽然在这里取景的电影大多冲着西湖而来，但西湖赋予杭州的独特水乡气息，总会透过画面，直抵心灵。
+    </ion-card-header>
   </ion-card>
 
   <!-- 中国城市列表 -->
@@ -24,7 +25,7 @@
       <ion-list>
         <ion-item>
           <ion-thumbnail slot="start">
-            <img src="assets/images/city/beijing.jpg">
+            <img src="assets/images/city/beijing.jpg" alt="北京">
           </ion-thumbnail>
           <ion-label>
             北京
@@ -32,7 +33,26 @@
             <p>在此取过景的景点路线推荐</p>
           </ion-label>
         </ion-item>
-        <!-- 其他城市列表项 -->
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="assets/images/city/qingdao.jpg">
+          </ion-thumbnail>
+          <ion-label>
+            青岛
+            <p>在此取景的影片推荐</p>
+            <p>在此取过景的景点路线推荐</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="assets/images/city/suzhou.jpg">
+          </ion-thumbnail>
+          <ion-label>
+            苏州
+            <p>在此取景的影片推荐</p>
+            <p>在此取过景的景点路线推荐</p>
+          </ion-label>
+        </ion-item>
       </ion-list>
     </ion-card-content>
   </ion-card>
@@ -43,7 +63,38 @@
       亚洲城市列表
     </ion-card-header>
     <ion-card-content>
-      这里展示亚洲城市列表的内容
+      <ion-list>
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="assets/images/city/dongjing.jpg" alt="东京">
+          </ion-thumbnail>
+          <ion-label>
+            东京
+            <p>在此取景的影片推荐</p>
+            <p>在此取过景的景点路线推荐</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="assets/images/city/mangu.jpg" alt="曼谷">
+          </ion-thumbnail>
+          <ion-label>
+            曼谷
+            <p>在此取景的影片推荐</p>
+            <p>在此取过景的景点路线推荐</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="assets/images/city/dibai.jpg" alt="迪拜">
+          </ion-thumbnail>
+          <ion-label>
+            迪拜
+            <p>在此取景的影片推荐</p>
+            <p>在此取过景的景点路线推荐</p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
     </ion-card-content>
   </ion-card>
 
@@ -53,7 +104,38 @@
       欧洲城市列表
     </ion-card-header>
     <ion-card-content>
-      这里展示欧洲城市列表的内容
+      <ion-list>
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="assets/images/city/bingdao.jpg" alt="冰岛">
+          </ion-thumbnail>
+          <ion-label>
+            冰岛
+            <p>在此取景的影片推荐</p>
+            <p>在此取过景的景点路线推荐</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="assets/images/city/weinisi.jpg" alt="威尼斯">
+          </ion-thumbnail>
+          <ion-label>
+            威尼斯
+            <p>在此取景的影片推荐</p>
+            <p>在此取过景的景点路线推荐</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="assets/images/city/geerlici.jpg" alt="格尔利茨">
+          </ion-thumbnail>
+          <ion-label>
+            格尔利茨
+            <p>在此取景的影片推荐</p>
+            <p>在此取过景的景点路线推荐</p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
     </ion-card-content>
   </ion-card>
 
@@ -63,7 +145,38 @@
       其它城市列表
     </ion-card-header>
     <ion-card-content>
-      这里展示其它城市列表的内容
+      <ion-list>
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="assets/images/city/wusihuaiya.jpg" alt="乌斯怀亚">
+          </ion-thumbnail>
+          <ion-label>
+            乌斯怀亚
+            <p>在此取景的影片推荐</p>
+            <p>在此取过景的景点路线推荐</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="assets/images/city/tunisi.jpg" alt="突尼斯">
+          </ion-thumbnail>
+          <ion-label>
+            突尼斯
+            <p>在此取景的影片推荐</p>
+            <p>在此取过景的景点路线推荐</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="assets/images/city/namibiya.jpg" alt="纳米比亚">
+          </ion-thumbnail>
+          <ion-label>
+            纳米比亚
+            <p>在此取景的影片推荐</p>
+            <p>在此取过景的景点路线推荐</p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
     </ion-card-content>
   </ion-card>
 </ion-content>