二级城市页面编写

2c0c5dac · 沈良进 · 9abaf484 · 2c0c5dac · 2c0c5dac · 2c0c5dac
Commit 2c0c5dac authored Feb 20, 2023 by 沈良进
4 changed files
--- a/src/index.template.html
+++ b/src/index.template.html
@@ -15,6 +15,7 @@
    <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
    <link rel="icon" type="image/ico" href="statics/icons/favicon.ico">
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v7.0" nonce="bDrSmWhp"></script>
+    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OBd2bhrqKUSbQGpniCZ996suti9YG7Bc"></script>
  </head>
  <body>


--- a/src/pages/city/cityDetail.vue
+++ b/src/pages/city/cityDetail.vue
@@ -58,6 +58,12 @@
 .time-item {
  width: 25%;
 }
+#baidu-map {
+  width: 400px;
+  height: 196px;
+  background: #ffffff;
+  border-radius: 8px;
+}
 </style>
 <template>
  <div class="back">
@@ -87,10 +93,7 @@

      <div class="flex justify-between">
        <div v-for="item in navList" :key="item" class="nav-item">
-          <img
-            class="nav-img"
-            :src="require(`../../assets/img/${item.img}.png`)"
-          />
+          <img class="nav-img" :src="require(`../../assets/img/${item.img}.png`)" />
          <div class="f16 bold text-center">{{item.title}}</div>
        </div>
      </div>
@@ -105,10 +108,10 @@
        <likeCard v-for="item in 4" :key="item" />
      </div>
      <div class="top-title">關於東京</div>
-      <div>
-        <div>虽然曾历战火，京都之美仍然遗世独立。只要亲身到访，你就会发现京都把日本的「侘寂」美学诠释得有多淋漓尽致。 作为日本艺妓发源地，值得你深入认识这个古典的文艺世界。花一个早晨在岚山的竹林里静思，学习正宗怀石料理，或是到金阁寺体验宁谧自在。伏见稻荷大社也是另一个必到景点，那著名的鸟居隧道，仿佛引领你进入仙境。</div>
+      <div class="flex jusify-between">
+        <div style="width: 720px">虽然曾历战火，京都之美仍然遗世独立。只要亲身到访，你就会发现京都把日本的「侘寂」美学诠释得有多淋漓尽致。 作为日本艺妓发源地，值得你深入认识这个古典的文艺世界。花一个早晨在岚山的竹林里静思，学习正宗怀石料理，或是到金阁寺体验宁谧自在。伏见稻荷大社也是另一个必到景点，那著名的鸟居隧道，仿佛引领你进入仙境。</div>
        <div>
-          <map></map>
+          <div id="baidu-map"></div>
        </div>
      </div>
      <div class="top-title">當地天氣</div>
@@ -121,40 +124,28 @@
        </div>
        <div class="flex mt">
          <div class="flex time-item">
-            <img
-              class="info-icon"
-              :src="require(`../../assets/img/info-time.png`)"
-            />
+            <img class="info-icon" :src="require(`../../assets/img/info-time.png`)" />
            <div>
              <div class="f16 bold">時區</div>
              <div>-12° -17°</div>
            </div>
          </div>
          <div class="flex time-item">
-            <img
-              class="info-icon"
-              :src="require('../../assets/img/info-currency.png')"
-            />
+            <img class="info-icon" :src="require('../../assets/img/info-currency.png')" />
            <div>
              <div class="f16 bold">貨幣</div>
              <div>-12° -17°</div>
            </div>
          </div>
          <div class="flex time-item">
-            <img
-              class="info-icon"
-              :src="require(`../../assets/img/info-ele.png`)"
-            />
+            <img class="info-icon" :src="require(`../../assets/img/info-ele.png`)" />
            <div>
              <div class="f16 bold">電壓</div>
              <div>-12° -17°</div>
            </div>
          </div>
          <div class="flex time-item">
-            <img
-              class="info-icon"
-              :src="require(`../../assets/img/info-time.png`)"
-            />
+            <img class="info-icon" :src="require(`../../assets/img/info-time.png`)" />
            <div>
              <div class="f16 bold">旅遊時間</div>
              <div>-12° -17°</div>
@@ -162,6 +153,7 @@
          </div>
        </div>
      </div>
+      <nearCity />
    </div>
  </div>
 </template>
@@ -169,24 +161,43 @@
 import topCard from "./components/top-card.vue";
 import likeCard from "./components/like-card.vue";
 import nearCity from "./components/near-city.vue";
+import Vue from "vue";
 export default {
-  components: { topCard, likeCard },
+  components: { topCard, likeCard, nearCity },
  data() {
    return {
-      navList: [{
-        title: '觀光行程',
-        img: 'nav-map',
-      },{
-        title: '景點門票',
-        img: 'nav-ticket',
-      },{
-        title: '住宿',
-        img: 'nav-hotal',
-      },{
-        title: '交通',
-        img: 'nav-trip',
-      },]
+      navList: [
+        {
+          title: "觀光行程",
+          img: "nav-map"
+        },
+        {
+          title: "景點門票",
+          img: "nav-ticket"
+        },
+        {
+          title: "住宿",
+          img: "nav-hotal"
+        },
+        {
+          title: "交通",
+          img: "nav-trip"
+        }
+      ]
    };
+  },
+  mounted() {
+    this.createMap()
+  },
+  methods: {
+    createMap() {
+      if(!BMapGL) {
+        return
+      }
+      let map = new BMapGL.Map("baidu-map"); // 创建地图实例
+      let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
+      map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
+    }
  }
 };
 </script>
\ No newline at end of file
--- a/src/pages/city/components/like-card.vue
+++ b/src/pages/city/components/like-card.vue
 <style scoped>
 .card {
  width: 550px;
+height: 162px;
+  margin-bottom: 18px;
 }
 .tag {
  position: absolute;

--- a/src/pages/city/components/near-city.vue
+++ b/src/pages/city/components/near-city.vue
 <style scoped>
+.title {
+font-size: 26px;
+font-family: Microsoft JhengHei;
+font-weight: bold;
+color: #000000;
+line-height: 44px;
+margin-top: 30px;
+margin-bottom: 10px;
+}
 .card {
  width: 210px;
 height: 290px;
@@ -10,12 +19,22 @@ height: 290px;
 border-radius: 10px;
 }
 .info {
-  position: abolute;
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  color: #fff;
+}
+.all {
+  margin: 20px auto;
+  width: 320px;
+height: 42px;
+border: 1px solid #474747;
+border-radius: 8px;
 }
 </style>
 <template>
 <div>
-  <div>附近的城市</div>
+  <div class="title">附近的城市</div>
  <div>
    <div class="relative card">
      <img
@@ -28,7 +47,12 @@ border-radius: 10px;
      </div>
    </div>
  </div>
-  <q-btn></q-btn>
+  <div class="flex flex-center">
+  <q-btn
+            label="所有目的地"
+            class="all"
+            unelevated></q-btn>
+  </div>
 </div>
 </template>
 <script>