Skip to content

M
million
Commit 2c0c5dac authored by 沈良进's avatar 沈良进
Browse files
Options

二级城市页面编写

parent 9abaf484
Show whitespace changes
Inline Side-by-side
Showing with 78 additions and 40 deletions
src/index.template.html
View file @ 2c0c5dac
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png"> <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"> <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 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> </head>
<body> <body>
......
src/pages/city/cityDetail.vue
View file @ 2c0c5dac
...@@ -58,6 +58,12 @@ ...@@ -58,6 +58,12 @@
.time-item { .time-item {
width: 25%; width: 25%;
} }
#baidu-map {
width: 400px;
height: 196px;
background: #ffffff;
border-radius: 8px;
}
</style> </style>
<template> <template>
<div class="back"> <div class="back">
...@@ -87,10 +93,7 @@ ...@@ -87,10 +93,7 @@
<div class="flex justify-between"> <div class="flex justify-between">
<div v-for="item in navList" :key="item" class="nav-item"> <div v-for="item in navList" :key="item" class="nav-item">
<img <img class="nav-img" :src="require(`../../assets/img/${item.img}.png`)" />
class="nav-img"
:src="require(`../../assets/img/${item.img}.png`)"
/>
<div class="f16 bold text-center">{{item.title}}</div> <div class="f16 bold text-center">{{item.title}}</div>
</div> </div>
</div> </div>
...@@ -105,10 +108,10 @@ ...@@ -105,10 +108,10 @@
<likeCard v-for="item in 4" :key="item" /> <likeCard v-for="item in 4" :key="item" />
</div> </div>
<div class="top-title">關於東京</div> <div class="top-title">關於東京</div>
<div class="flex jusify-between">
<div style="width: 720px">虽然曾历战火，京都之美仍然遗世独立。只要亲身到访，你就会发现京都把日本的「侘寂」美学诠释得有多淋漓尽致。 作为日本艺妓发源地，值得你深入认识这个古典的文艺世界。花一个早晨在岚山的竹林里静思，学习正宗怀石料理，或是到金阁寺体验宁谧自在。伏见稻荷大社也是另一个必到景点，那著名的鸟居隧道，仿佛引领你进入仙境。</div>
<div> <div>
<div>虽然曾历战火，京都之美仍然遗世独立。只要亲身到访，你就会发现京都把日本的「侘寂」美学诠释得有多淋漓尽致。 作为日本艺妓发源地，值得你深入认识这个古典的文艺世界。花一个早晨在岚山的竹林里静思，学习正宗怀石料理，或是到金阁寺体验宁谧自在。伏见稻荷大社也是另一个必到景点，那著名的鸟居隧道，仿佛引领你进入仙境。</div> <div id="baidu-map"></div>
<div>
<map></map>
</div> </div>
</div> </div>
<div class="top-title">當地天氣</div> <div class="top-title">當地天氣</div>
...@@ -121,40 +124,28 @@ ...@@ -121,40 +124,28 @@
</div> </div>
<div class="flex mt"> <div class="flex mt">
<div class="flex time-item"> <div class="flex time-item">
<img <img class="info-icon" :src="require(`../../assets/img/info-time.png`)" />
class="info-icon"
:src="require(`../../assets/img/info-time.png`)"
/>
<div> <div>
<div class="f16 bold">時區</div> <div class="f16 bold">時區</div>
<div>-12° -17°</div> <div>-12° -17°</div>
</div> </div>
</div> </div>
<div class="flex time-item"> <div class="flex time-item">
<img <img class="info-icon" :src="require('../../assets/img/info-currency.png')" />
class="info-icon"
:src="require('../../assets/img/info-currency.png')"
/>
<div> <div>
<div class="f16 bold">貨幣</div> <div class="f16 bold">貨幣</div>
<div>-12° -17°</div> <div>-12° -17°</div>
</div> </div>
</div> </div>
<div class="flex time-item"> <div class="flex time-item">
<img <img class="info-icon" :src="require(`../../assets/img/info-ele.png`)" />
class="info-icon"
:src="require(`../../assets/img/info-ele.png`)"
/>
<div> <div>
<div class="f16 bold">電壓</div> <div class="f16 bold">電壓</div>
<div>-12° -17°</div> <div>-12° -17°</div>
</div> </div>
</div> </div>
<div class="flex time-item"> <div class="flex time-item">
<img <img class="info-icon" :src="require(`../../assets/img/info-time.png`)" />
class="info-icon"
:src="require(`../../assets/img/info-time.png`)"
/>
<div> <div>
<div class="f16 bold">旅遊時間</div> <div class="f16 bold">旅遊時間</div>
<div>-12° -17°</div> <div>-12° -17°</div>
...@@ -162,6 +153,7 @@ ...@@ -162,6 +153,7 @@
</div> </div>
</div> </div>
</div> </div>
<nearCity />
</div> </div>
</div> </div>
</template> </template>
...@@ -169,24 +161,43 @@ ...@@ -169,24 +161,43 @@
import topCard from "./components/top-card.vue"; import topCard from "./components/top-card.vue";
import likeCard from "./components/like-card.vue"; import likeCard from "./components/like-card.vue";
import nearCity from "./components/near-city.vue"; import nearCity from "./components/near-city.vue";
import Vue from "vue";
export default { export default {
components: { topCard, likeCard }, components: { topCard, likeCard, nearCity },
data() { data() {
return { return {
navList: [{ navList: [
title: '觀光行程', {
img: 'nav-map', title: "觀光行程",
},{ img: "nav-map"
title: '景點門票', },
img: 'nav-ticket', {
},{ title: "景點門票",
title: '住宿', img: "nav-ticket"
img: 'nav-hotal', },
},{ {
title: '交通', title: "住宿",
img: 'nav-trip', 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> </script>
\ No newline at end of file
src/pages/city/components/like-card.vue
View file @ 2c0c5dac
<style scoped> <style scoped>
.card { .card {
width: 550px; width: 550px;
height: 162px;
margin-bottom: 18px;
} }
.tag { .tag {
position: absolute; position: absolute;
......
src/pages/city/components/near-city.vue
View file @ 2c0c5dac
<style scoped> <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 { .card {
width: 210px; width: 210px;
height: 290px; height: 290px;
...@@ -10,12 +19,22 @@ height: 290px; ...@@ -10,12 +19,22 @@ height: 290px;
border-radius: 10px; border-radius: 10px;
} }
.info { .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> </style>
<template> <template>
<div> <div>
<div>附近的城市</div> <div class="title">附近的城市</div>
<div> <div>
<div class="relative card"> <div class="relative card">
<img <img
...@@ -28,7 +47,12 @@ border-radius: 10px; ...@@ -28,7 +47,12 @@ border-radius: 10px;
</div> </div>
</div> </div>
</div> </div>
<q-btn></q-btn> <div class="flex flex-center">
<q-btn
label="所有目的地"
class="all"
unelevated></q-btn>
</div>
</div> </div>
</template> </template>
<script> <script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment