Skip to content

M
million
Commit d0f0f6de authored by 罗超's avatar 罗超
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/viitto/million

parents 430001b7 2c0c5dac
Hide whitespace changes
Inline Side-by-side
Showing with 542 additions and 22 deletions
src/components/navs/hor-big-one.vue
View file @ d0f0f6de
......@@ -4,28 +4,6 @@
}
</style>
<style scoped>
.flex {
display: flex;
}
.justify-between {
justify-content: space-between;
}
.item-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.padding-top {
padding-top: 10px;
}
.flex-center {
justify-content: center;
align-items: center;
}
.flex-wrap {
flex-wrap: wrap;
}
.header-box {
max-width: 1200px;
margin: 0 auto;
......
src/css/app.scss
View file @ d0f0f6de
// app global css in SCSS form
.flex {
display: flex;
}
.justify-between {
justify-content: space-between;
}
.item-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.padding-top {
padding-top: 10px;
}
.flex-center {
justify-content: center;
align-items: center;
}
.flex-wrap {
flex-wrap: wrap;
}
.margin {
margin: 10px;
}
.mt {
margin-top: 10px;
}
.ml {
margin-left: 10px;
}
.mr {
margin-right: 10px;
}
.mb {
margin-bottom: 10px;
}
.padding {
padding: 10px;
}
.pl {
padding-left: 10px;
}
.pl {
padding-left: 10px;
}
.pr {
padding-right: 10px;
}
.pt {
padding-top: 10px;
}
.pb {
padding-bottom: 10px;
}
.ml-5 {
margin-left: 5px;
}
// 字体和字号
.bold {
font-weight: bold;
}
.normal {
font-weight: normal;
}
.f10 {
font-size: 10px;
}
.f11 {
font-size: 11px;
}
.f12 {
font-size: 12px;
}
.f13 {
font-size: 13px;
}
.f14 {
font-size: 14px;
}
.f15 {
font-size: 15px;
}
.f16 {
font-size: 16px;
}
.f26 {
font-size: 26px;
}
.text-center {
text-align: center;
}
// 定位
.relative {
position: relative;
}
// 多行文本省略
.ellipsis-2 {
overflow:hidden; /* 超出隐藏 */
text-overflow:ellipsis; /* 文本超出呈现方式：省略号 */
display:-webkit-box; /* 盒模型 */
-webkit-line-clamp:2; /* 限制文本行数 */
-webkit-box-orient:vertical; /* 盒内子元素布局方向 */
}
\ No newline at end of file
src/index.template.html
View file @ d0f0f6de
......@@ -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>
......
src/pages/city/cityDetail.vue 0 → 100644
View file @ d0f0f6de
<style scoped>
.back {
background: #ffffff;
}
.wapper {
max-width: 1200px;
margin: 0 auto;
}
.main {
width: 930px;
height: 370px;
background: #e0e0e0;
border-radius: 8px;
}
.card-img-box {
width: 260px;
margin-left: 10px;
}
.card-img {
width: 260px;
height: 180px;
background: #e0e0e0;
border-radius: 8px;
}
.margin-bottom {
margin-bottom: 10px;
}
.nav-item {
width: 276px;
height: 100px;
background: #ffffff;
border: 1px solid #eeeeee;
border-radius: 8px;
}
.nav-item:hover {
background: #ffffff;
border: 1px solid #efefef;
}
.nav-img {
width: 50px;
height: 50px;
margin: 10px auto 3px auto;
display: block;
}
.top-title {
margin-top: 30px;
font-size: 26px;
font-family: Microsoft JhengHei;
font-weight: bold;
color: #000000;
line-height: 44px;
}
.info-icon {
width: 32px;
height: 32px;
margin-right: 10px;
}
.time-item {
width: 25%;
}
#baidu-map {
width: 400px;
height: 196px;
background: #ffffff;
border-radius: 8px;
}
</style>
<template>
<div class="back">
<div class="wapper">
<q-breadcrumbs gutter="none">
<q-breadcrumbs-el label="Home" />
<q-breadcrumbs-el label="Components" />
<q-breadcrumbs-el label="Breadcrumbs" />
</q-breadcrumbs>
<div class="flex">
<img
class="main"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
/>
<div class="card-img-box">
<img
class="card-img margin-bottom"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
/>
<img
class="card-img"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
/>
</div>
</div>
<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`)" />
<div class="f16 bold text-center">{{item.title}}</div>
</div>
</div>
<div class="top-title">TOP榜单</div>
<div>本地销量最好的商品</div>
<div class="flex justify-between mt">
<topCard v-for="item in 4" :key="item" />
</div>
<div class="top-title">最新推荐</div>
<div>已售出商品的最新榜單</div>
<div class="flex justify-between mt">
<likeCard v-for="item in 4" :key="item" />
</div>
<div class="top-title">關於東京</div>
<div class="flex jusify-between">
<div style="width: 720px">虽然曾历战火，京都之美仍然遗世独立。只要亲身到访，你就会发现京都把日本的「侘寂」美学诠释得有多淋漓尽致。 作为日本艺妓发源地，值得你深入认识这个古典的文艺世界。花一个早晨在岚山的竹林里静思，学习正宗怀石料理，或是到金阁寺体验宁谧自在。伏见稻荷大社也是另一个必到景点，那著名的鸟居隧道，仿佛引领你进入仙境。</div>
<div>
<div id="baidu-map"></div>
</div>
</div>
<div class="top-title">當地天氣</div>
<div>
<div class="flex">
<div class="time-item" v-for="item in 4" :key="item">
<div class="f16">12月-2月</div>
<div class="f26 bold">-12° -17°</div>
</div>
</div>
<div class="flex mt">
<div class="flex time-item">
<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')" />
<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`)" />
<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`)" />
<div>
<div class="f16 bold">旅遊時間</div>
<div>-12° -17°</div>
</div>
</div>
</div>
</div>
<nearCity />
</div>
</div>
</template>
<script>
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, nearCity },
data() {
return {
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
src/pages/city/components/like-card.vue 0 → 100644
View file @ d0f0f6de
<style scoped>
.card {
width: 550px;
height: 162px;
margin-bottom: 18px;
}
.tag {
position: absolute;
bottom: 14px;
left: 14px;
color: #fff;
}
.card-img {width: 272px;
height: 162px;
border-radius: 10px 0px 0px 10px;
}
.content {
padding: 10px;
width: 258px;
}
.title {
font-size: 16px;
line-height: 20px;
height: 40px;
}
.tag-item {
height: 24px;
background: #EFF7FE;
border-radius: 4px;
padding: 0 10px;
font-size: 12px;
margin-right: 10px;
color: #36A1FA;
}
</style>
<template>
<div class="card flex">
<div class="relative">
<div class="tag">
<i
class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px"
></i>
<span>大阪·住宿</span>
</div>
<img
class="card-img"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
/>
</div>
<div class="content">
<div class="title ellipsis-2">是否私联粉丝沙发萨芬很多事第三方介绍很舒服舒服是否舒服舒服所发生的多多多多多多多多多多多多多多多多多多是否舒服舒服盛世芳华</div>
<div>
<i
class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px"
></i>
4.6
</div>
<div>
<span class="tag-item mb mt" v-for="item in 4" :key="item">开发日志{{item}}</span>
</div>
<div class="bold mt">
CNY
<span>200000</span>
<span class="ml-5 normal">起</span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
\ No newline at end of file
src/pages/city/components/near-city.vue 0 → 100644
View file @ d0f0f6de
<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;
border-radius: 10px;
}
.card-img {
width: 210px;
height: 290px;
border-radius: 10px;
}
.info {
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 class="title">附近的城市</div>
<div>
<div class="relative card">
<img
class="card-img"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
/>
<div class="info">
<div>大版</div>
<div>10Km</div>
</div>
</div>
</div>
<div class="flex flex-center">
<q-btn
label="所有目的地"
class="all"
unelevated></q-btn>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
\ No newline at end of file
src/pages/city/components/top-card.vue 0 → 100644
View file @ d0f0f6de
<style scoped>
.card {
width: 272px;
/* background-color: #fff; */
}
.address {
position: absolute;
left: 14px;
top: 14px;
color: #fff;
}
.like {
position: absolute;
right: 14px;
top: 14px;
color: #fff;
}
.card-img {
width: 272px;
height: 162px;
border-radius: 10px;
}
.title {
margin-top: 17px;
font-size: 16px;
line-height: 20px;
height: 40px;
}
.tag-item {
height: 24px;
background: #EFF7FE;
border-radius: 4px;
padding: 0 10px;
font-size: 12px;
margin-right: 10px;
color: #36A1FA;
}
</style>
<template>
<div class="card">
<div class="relative">
<div class="address">
<i
class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px"
></i>
<span>大阪·住宿</span>
</div>
<div class="like">
<i
class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px"
></i>
</div>
<img
class="card-img"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
/>
</div>
<div class="title ellipsis-2">是否私联粉丝沙发萨芬很多事第三方介绍很舒服舒服是否舒服舒服所发生的多多多多多多多多多多多多多多多多多多是否舒服舒服盛世芳华</div>
<div>
<i
class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px"
></i>
4.6
</div>
<div>
<span class="tag-item mb mt" v-for="item in 4" :key="item">开发日志{{item}}</span>
</div>
<div class="bold mt">
CNY
<span>200000</span>
<span class="ml-5 normal">起</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
\ No newline at end of file
src/router/routes.js
View file @ d0f0f6de
......@@ -77,6 +77,11 @@ const routes = [{
component: () =>
import('pages/customer.vue')
},
{
path: '/city/:id', //自定义页面
component: () =>
import('pages/city/cityDetail.vue')
},
]
},
......
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