FilmTraceExplore/src/app/tab3/tab3.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>城市</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 城市推荐文章 -->
  <ion-card>
    <ion-card-content>
      <img src="assets/images/city/hangzhou.jpg" alt="杭州">
      <p>电视剧《新白娘子传奇》剧照 取景于杭州西湖断桥></p>
    </ion-card-content>
    <ion-card-header>
      江南忆，最忆是杭州。一个西湖撑起一座杭州城。虽然在这里取景的电影大多冲着西湖而来，但西湖赋予杭州的独特水乡气息，总会透过画面，直抵心灵。
    </ion-card-header>
  </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/city/beijing.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/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>

  <!-- 亚洲城市列表 -->
  <ion-card>
    <ion-card-header>
      亚洲城市列表
    </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>

  <!-- 欧洲城市列表 -->
  <ion-card>
    <ion-card-header>
      欧洲城市列表
    </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>

  <!-- 其它城市列表 -->
  <ion-card>
    <ion-card-header>
      其它城市列表
    </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>