|
|
@@ -1,551 +1,552 @@
|
|
|
<template>
|
|
|
- <div :class="{isInEnglish:!isChinese}">
|
|
|
- <div class="bg topImg">
|
|
|
- <div class="topImgText bg" :style="{fontSize:isChinese?'18px':'11px',backgroundImage:'url('+require('../assets/icon_banner_00.png')+')'}">{{wordsJson.topImg}}</div>
|
|
|
- <div class="bg img" :style="{backgroundImage:'url('+require('../assets/home_banner.jpg')+')'}"></div>
|
|
|
- </div>
|
|
|
- <div class="menu">
|
|
|
- <div class="menu-item" :class="{active:item.isChoose,isEnglish:!isChinese}" v-for="item in menuList" @click="takeMenu(item)">{{item.name}}</div>
|
|
|
- </div>
|
|
|
+ <div :class="{isInEnglish:!isChinese}">
|
|
|
+ <div class="bg topImg">
|
|
|
+ <div class="topImgText bg" :style="{fontSize:isChinese?'18px':'11px',backgroundImage:'url('+require('../assets/icon_banner_00.png')+')'}">{{wordsJson.topImg}}</div>
|
|
|
+ <div class="bg img" :style="{backgroundImage:'url('+require('../assets/home_banner.jpg')+')'}"></div>
|
|
|
+ </div>
|
|
|
+ <div class="menu">
|
|
|
+ <div class="menu-item" :class="{active:item.isChoose,isEnglish:!isChinese}" v-for="item in menuList" @click="takeMenu(item)" :key="item.name">{{item.name}}</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="introduction">
|
|
|
- <div class="title">{{wordsJson.homeTitle0}}</div>
|
|
|
- <div class="subtitle">{{wordsJson.homeSubTitle0}}</div>
|
|
|
- <div class="subtitle">{{wordsJson.homeSubTitle1}}</div>
|
|
|
- <img src="../assets/home_icon_02.png" class="img" alt>
|
|
|
- <p v-html="wordsJson.homeContent0"></p>
|
|
|
- <img src="../assets/home_icon_01.png" alt class="leftTop">
|
|
|
- <img src="../assets/home_icon_03.png" class="right" alt>
|
|
|
- </div>
|
|
|
+ <div class="introduction">
|
|
|
+ <div class="title">{{wordsJson.homeTitle0}}</div>
|
|
|
+ <div class="subtitle">{{wordsJson.homeSubTitle0}}</div>
|
|
|
+ <div class="subtitle">{{wordsJson.homeSubTitle1}}</div>
|
|
|
+ <img src="../assets/home_icon_02.png" class="img" alt>
|
|
|
+ <p v-html="wordsJson.homeContent0"></p>
|
|
|
+ <img src="../assets/home_icon_01.png" alt class="leftTop">
|
|
|
+ <img src="../assets/home_icon_03.png" class="right" alt>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="titleContent bg" style="margin-top:23px" :style="{backgroundImage:'url('+require('../assets/home_img_biaoti.png')+')'}">{{wordsJson.homeTitle1}}</div>
|
|
|
+ <div class="titleContent bg" style="margin-top:23px" :style="{backgroundImage:'url('+require('../assets/home_img_biaoti.png')+')'}">{{wordsJson.homeTitle1}}</div>
|
|
|
|
|
|
- <div class="swiper-container" id="swiper1">
|
|
|
- <div class="swiper-wrapper">
|
|
|
- <div class="houseItem swiper-slide" v-for="(item,index) in housList">
|
|
|
- <img :src="item.img" alt @click="preview(index,housList)">
|
|
|
- <div>{{item.title}}</div>
|
|
|
+ <div class="swiper-container" id="swiper1">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="houseItem swiper-slide" v-for="(item,index) in housList" :key="index">
|
|
|
+ <img :src="item.img" alt @click="preview(index,housList)">
|
|
|
+ <div>{{item.title}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="titleContent bg" :style="{backgroundImage:'url('+require('../assets/home_img_biaoti.png')+')'}">{{wordsJson.homeTitle2}}</div>
|
|
|
- <div class="restaurantList">
|
|
|
- <div class="resraurantItem" v-for="item in restaurantList" @click="goDinner(item.title)">
|
|
|
- <img :src="item.img" alt>
|
|
|
- <div class="text">
|
|
|
- <div class="title">{{item.title}}</div>
|
|
|
- <div class="time">{{wordsJson.homeSubTitle2}}{{item.time}}</div>
|
|
|
+ <div class="titleContent bg" :style="{backgroundImage:'url('+require('../assets/home_img_biaoti.png')+')'}">{{wordsJson.homeTitle2}}</div>
|
|
|
+ <div class="restaurantList">
|
|
|
+ <div class="resraurantItem" v-for="item in restaurantList" @click="goDinner(item.title)" :key="item.title">
|
|
|
+ <img :src="item.img" alt>
|
|
|
+ <div class="text">
|
|
|
+ <div class="title">{{item.title}}</div>
|
|
|
+ <div class="time">{{wordsJson.homeSubTitle2}}{{item.time}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="titleContent bg" :style="{backgroundImage:'url('+require('../assets/home_img_biaoti.png')+')'}">{{wordsJson.homeTitle3}}</div>
|
|
|
- <div class="swiper-container" id="swiper2">
|
|
|
- <div class="swiper-wrapper">
|
|
|
- <div class="foodItem swiper-slide" v-for="(item,index) in foodList">
|
|
|
- <img :src="item" alt @click="goDaily">
|
|
|
+ <div class="titleContent bg" :style="{backgroundImage:'url('+require('../assets/home_img_biaoti.png')+')'}">{{wordsJson.homeTitle3}}</div>
|
|
|
+ <div class="swiper-container" id="swiper2">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="foodItem swiper-slide" v-for="(item,index) in foodList">
|
|
|
+ <img :src="item" alt @click="goDaily">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="titleContent bg" :style="{backgroundImage:'url('+require('../assets/home_img_biaoti.png')+')'}">{{wordsJson.homeTitle4}}</div>
|
|
|
+ <div class="map" id="map"></div>
|
|
|
+
|
|
|
+ <div class="address">
|
|
|
+ <div class="address-item">
|
|
|
+ <img src="../assets/icon_dizhi.png" alt>
|
|
|
+ <div class="name">{{wordsJson.homeContent1}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="address-item">
|
|
|
+ <img src="../assets/icon_jingdian.png" alt>
|
|
|
+ <div class="name" v-html="wordsJson.homeContent2"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="titleContent bg" :style="{backgroundImage:'url('+require('../assets/home_img_biaoti.png')+')'}">{{wordsJson.homeTitle4}}</div>
|
|
|
- <div class="map" id="map"></div>
|
|
|
-
|
|
|
- <div class="address">
|
|
|
- <div class="address-item">
|
|
|
- <img src="../assets/icon_dizhi.png" alt>
|
|
|
- <div class="name">{{wordsJson.homeContent1}}</div>
|
|
|
- </div>
|
|
|
- <div class="address-item">
|
|
|
- <img src="../assets/icon_jingdian.png" alt>
|
|
|
- <div class="name" v-html="wordsJson.homeContent2"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="bottom-img">
|
|
|
- <img class="imgRight" src="../assets/home_icon_04.png" alt>
|
|
|
- <img src="../assets/home_icon_05.png" alt class="imgLeft">
|
|
|
+ <div class="bottom-img">
|
|
|
+ <img class="imgRight" src="../assets/home_icon_04.png" alt>
|
|
|
+ <img src="../assets/home_icon_05.png" alt class="imgLeft">
|
|
|
+ </div>
|
|
|
+ <div class="bottom">{{wordsJson.homeBottom}}</div>
|
|
|
</div>
|
|
|
- <div class="bottom">{{wordsJson.homeBottom}}</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { mapState } from 'vuex'
|
|
|
import Swiper from 'swiper'
|
|
|
export default {
|
|
|
- name: 'home',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- img: 'http://img4.imgtn.bdimg.com/it/u=3408617866,1879551538&fm=26&gp=0.jpg',
|
|
|
- foodList: [
|
|
|
- require('../assets/daily/meiri_img_02.jpg'),
|
|
|
- require('../assets/daily/meiri_img_03.jpg'),
|
|
|
- require('../assets/daily/meiri_img_04.jpg'),
|
|
|
- require('../assets/daily/meiri_img_05.jpg'),
|
|
|
- require('../assets/daily/meiri_img_06.jpg')
|
|
|
- ],
|
|
|
- mySwiper1: null,
|
|
|
- mySwiper2: null
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['wordsJson', 'isChinese']),
|
|
|
- menuList() {
|
|
|
- var list = [];
|
|
|
- for (var i = 0; i < 12; i++) {
|
|
|
- var jsonp = {
|
|
|
- name: this.wordsJson['menu' + i],
|
|
|
- isChoose: false
|
|
|
- };
|
|
|
- if (i == 0) {
|
|
|
- jsonp.urlName = 'home'
|
|
|
- }
|
|
|
- else if (i == 1) {
|
|
|
- jsonp.urlName = 'history'
|
|
|
- }
|
|
|
- else if (i == 2) {
|
|
|
- jsonp.urlName = 'meeting'
|
|
|
- }
|
|
|
- else if (i == 3) {
|
|
|
- jsonp.urlName = 'daily'
|
|
|
- }
|
|
|
- else if (i == 4) {
|
|
|
- jsonp.changeLanguage = 'ch';
|
|
|
- }
|
|
|
- else if (i == 5) {
|
|
|
- jsonp.urlName = 'dinner'
|
|
|
- }
|
|
|
- else if (i == 6) {
|
|
|
- jsonp.urlName = 'waterTreatment'
|
|
|
- }
|
|
|
- else if (i == 7) {
|
|
|
- jsonp.urlName = 'foodMenu'
|
|
|
- }
|
|
|
- else if (i == 8) {
|
|
|
- jsonp.changeLanguage = 'en';
|
|
|
- }
|
|
|
- else if (i == 9) {
|
|
|
- jsonp.urlName = 'banquetReservation'
|
|
|
- }
|
|
|
- else if (i == 10) {
|
|
|
- jsonp.urlName = 'location'
|
|
|
- }
|
|
|
- else if (i == 11) {
|
|
|
- jsonp.urlName = 'safeTips'
|
|
|
- }
|
|
|
-
|
|
|
- if (this.$route.name == jsonp.urlName) {
|
|
|
- jsonp.isChoose = true
|
|
|
- }
|
|
|
- list.push(jsonp);
|
|
|
- }
|
|
|
- return list
|
|
|
- },
|
|
|
- housList() {
|
|
|
- return [{
|
|
|
- title: this.wordsJson.homeList1[0],
|
|
|
- img: require("../assets/room/room1.jpg")
|
|
|
- }, {
|
|
|
- title: this.wordsJson.homeList1[1],
|
|
|
- img: require("../assets/room/room2.jpg")
|
|
|
- }, {
|
|
|
- title: this.wordsJson.homeList1[2],
|
|
|
- img: require("../assets/room/room3.jpg")
|
|
|
- }, {
|
|
|
- title: this.wordsJson.homeList1[3],
|
|
|
- img: require("../assets/room/room4.jpg")
|
|
|
- }, {
|
|
|
- title: this.wordsJson.homeList1[4],
|
|
|
- img: require("../assets/room/room5.jpg")
|
|
|
- }, {
|
|
|
- title: this.wordsJson.homeList1[5],
|
|
|
- img: require("../assets/room/room6.jpg")
|
|
|
- }, {
|
|
|
- title: this.wordsJson.homeList1[6],
|
|
|
- img: require("../assets/room/room7.jpg")
|
|
|
- }]
|
|
|
- },
|
|
|
- restaurantList() {
|
|
|
- return [{
|
|
|
- title: "风味餐馆",
|
|
|
- title: this.wordsJson.homeList2[0],
|
|
|
- img: require('../assets/yanhui_img_0001.jpg'),
|
|
|
- time: '10:00～24:00'
|
|
|
- }, {
|
|
|
- title: "娄湖苑万国春中菜馆",
|
|
|
- title: this.wordsJson.homeList2[1],
|
|
|
- img: require('../assets/yanhui_img_0002.jpg'),
|
|
|
- time: '10:00～24:00'
|
|
|
- }]
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.$nextTick(() => {
|
|
|
- setTimeout(() => {
|
|
|
- if (document.getElementById('swiper1')) {
|
|
|
- this.mySwiper1 = new Swiper('#swiper1', {
|
|
|
- slidesPerView: 'auto',
|
|
|
- })
|
|
|
- this.mySwiper2 = new Swiper('#swiper2', {
|
|
|
- slidesPerView: 'auto',
|
|
|
- })
|
|
|
- this.init()
|
|
|
+ name: 'home',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ img: 'http://img4.imgtn.bdimg.com/it/u=3408617866,1879551538&fm=26&gp=0.jpg',
|
|
|
+ foodList: [
|
|
|
+ require('../assets/daily/meiri_img_02.jpg'),
|
|
|
+ require('../assets/daily/meiri_img_03.jpg'),
|
|
|
+ require('../assets/daily/meiri_img_04.jpg'),
|
|
|
+ require('../assets/daily/meiri_img_05.jpg'),
|
|
|
+ require('../assets/daily/meiri_img_06.jpg')
|
|
|
+ ],
|
|
|
+ mySwiper1: null,
|
|
|
+ mySwiper2: null
|
|
|
}
|
|
|
- }, 1)
|
|
|
- })
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
- goDaily(){
|
|
|
- this.$route.push({
|
|
|
- name:'daily'
|
|
|
- })
|
|
|
},
|
|
|
- takeMenu(jsonp) {
|
|
|
- if (jsonp.changeLanguage) {
|
|
|
- if (jsonp.changeLanguage == 'ch') {
|
|
|
- this.$store.commit('updateIsChinese', true);
|
|
|
- }
|
|
|
- else {
|
|
|
- this.$store.commit('updateIsChinese', false);
|
|
|
+ computed: {
|
|
|
+ ...mapState(['wordsJson', 'isChinese']),
|
|
|
+ menuList() {
|
|
|
+ var list = [];
|
|
|
+ for (var i = 0; i < 12; i++) {
|
|
|
+ var jsonp = {
|
|
|
+ name: this.wordsJson['menu' + i],
|
|
|
+ isChoose: false
|
|
|
+ };
|
|
|
+ if (i == 0) {
|
|
|
+ jsonp.urlName = 'home'
|
|
|
+ }
|
|
|
+ else if (i == 1) {
|
|
|
+ jsonp.urlName = 'history'
|
|
|
+ }
|
|
|
+ else if (i == 2) {
|
|
|
+ jsonp.urlName = 'meeting'
|
|
|
+ }
|
|
|
+ else if (i == 3) {
|
|
|
+ jsonp.urlName = 'daily'
|
|
|
+ }
|
|
|
+ else if (i == 4) {
|
|
|
+ jsonp.changeLanguage = 'ch';
|
|
|
+ }
|
|
|
+ else if (i == 5) {
|
|
|
+ jsonp.urlName = 'dinner'
|
|
|
+ }
|
|
|
+ else if (i == 6) {
|
|
|
+ jsonp.urlName = 'waterTreatment'
|
|
|
+ }
|
|
|
+ else if (i == 7) {
|
|
|
+ jsonp.urlName = 'foodMenu'
|
|
|
+ }
|
|
|
+ else if (i == 8) {
|
|
|
+ jsonp.changeLanguage = 'en';
|
|
|
+ }
|
|
|
+ else if (i == 9) {
|
|
|
+ jsonp.urlName = 'banquetReservation'
|
|
|
+ }
|
|
|
+ else if (i == 10) {
|
|
|
+ jsonp.urlName = 'location'
|
|
|
+ }
|
|
|
+ else if (i == 11) {
|
|
|
+ jsonp.urlName = 'safeTips'
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.$route.name == jsonp.urlName) {
|
|
|
+ jsonp.isChoose = true
|
|
|
+ }
|
|
|
+ list.push(jsonp);
|
|
|
+ }
|
|
|
+ return list
|
|
|
+ },
|
|
|
+ housList() {
|
|
|
+ return [{
|
|
|
+ title: this.wordsJson.homeList1[0],
|
|
|
+ img: require("../assets/room/room1.jpg")
|
|
|
+ }, {
|
|
|
+ title: this.wordsJson.homeList1[1],
|
|
|
+ img: require("../assets/room/room2.jpg")
|
|
|
+ }, {
|
|
|
+ title: this.wordsJson.homeList1[2],
|
|
|
+ img: require("../assets/room/room3.jpg")
|
|
|
+ }, {
|
|
|
+ title: this.wordsJson.homeList1[3],
|
|
|
+ img: require("../assets/room/room4.jpg")
|
|
|
+ }, {
|
|
|
+ title: this.wordsJson.homeList1[4],
|
|
|
+ img: require("../assets/room/room5.jpg")
|
|
|
+ }, {
|
|
|
+ title: this.wordsJson.homeList1[5],
|
|
|
+ img: require("../assets/room/room6.jpg")
|
|
|
+ }, {
|
|
|
+ title: this.wordsJson.homeList1[6],
|
|
|
+ img: require("../assets/room/room7.jpg")
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ restaurantList() {
|
|
|
+ return [{
|
|
|
+ title: "风味餐馆",
|
|
|
+ title: this.wordsJson.homeList2[0],
|
|
|
+ img: require('../assets/yanhui_img_0001.jpg'),
|
|
|
+ time: '10:00～24:00'
|
|
|
+ }, {
|
|
|
+ title: "娄湖苑万国春中菜馆",
|
|
|
+ title: this.wordsJson.homeList2[1],
|
|
|
+ img: require('../assets/yanhui_img_0002.jpg'),
|
|
|
+ time: '10:00～24:00'
|
|
|
+ }]
|
|
|
}
|
|
|
- }
|
|
|
- else {
|
|
|
- this.$router.push({ name: jsonp.urlName, params: { isNext: 1 } })
|
|
|
- }
|
|
|
},
|
|
|
- init() {
|
|
|
- var center = new qq.maps.LatLng(32.019220, 118.797040);
|
|
|
- var map = new qq.maps.Map(document.getElementById('map'), {
|
|
|
- center: center,
|
|
|
- zoom: 16,
|
|
|
- scaleControl: false,
|
|
|
- zoomControl: false,
|
|
|
- mapTypeControl: false,
|
|
|
- disableDoubleClickZoom: false
|
|
|
- });
|
|
|
- var marker = new qq.maps.Marker({
|
|
|
- position: center,
|
|
|
- map: map,
|
|
|
- });
|
|
|
- var anchor = new qq.maps.Point(0, 0),
|
|
|
- size = new qq.maps.Size(12, 16),
|
|
|
- origin = new qq.maps.Point(0, 0),
|
|
|
- scaleSize = new qq.maps.Size(12, 16),
|
|
|
- markerIcon = new qq.maps.MarkerImage(
|
|
|
- require('../assets/icon_dian.png'),
|
|
|
- size,
|
|
|
- origin,
|
|
|
- anchor,
|
|
|
- scaleSize
|
|
|
- );
|
|
|
- marker.setIcon(markerIcon);
|
|
|
-
|
|
|
- var label = new qq.maps.Label({
|
|
|
- offset: new qq.maps.Size(-37, -44),
|
|
|
- position: center,
|
|
|
- map: map,
|
|
|
- content: '到这去',
|
|
|
- style: {
|
|
|
- width: '66px',
|
|
|
- height: '28px',
|
|
|
- paddingRight: '8px',
|
|
|
- background: 'rgba(105,69,44,1)',
|
|
|
- borderRadius: '2px',
|
|
|
- fontSize: '14px',
|
|
|
- fontFamily: 'FZKTJW',
|
|
|
- color: 'rgba(255,255,255,1)',
|
|
|
- lineHeight: '28px',
|
|
|
- textAlign: 'right',
|
|
|
- backgroundImage: 'url(' + require('../assets/icon_daohang.png') + ')',
|
|
|
- backgroundPosition: '6px 8px',
|
|
|
- backgroundSize: '13px 13px',
|
|
|
- backgroundRepeat: 'no-repeat'
|
|
|
- }
|
|
|
- });
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ if (document.getElementById('swiper1')) {
|
|
|
+ this.mySwiper1 = new Swiper('#swiper1', {
|
|
|
+ slidesPerView: 'auto',
|
|
|
+ })
|
|
|
+ this.mySwiper2 = new Swiper('#swiper2', {
|
|
|
+ slidesPerView: 'auto',
|
|
|
+ })
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+ }, 1)
|
|
|
+ })
|
|
|
|
|
|
- qq.maps.event.addListener(label, 'click', function () {
|
|
|
- window.location.href = 'https://apis.map.qq.com/tools/routeplan/eword=水街&epointx=118.797040&epointy=32.019220?referer=水街&key=GLFBZ-ZR2W6-76XSA-MF7CQ-GDJ6Z-6FB5K'
|
|
|
- });
|
|
|
},
|
|
|
- goDinner(title) {
|
|
|
- this.$router.push({
|
|
|
- name: 'dinner',
|
|
|
- query: {
|
|
|
- title: title
|
|
|
+ methods: {
|
|
|
+ goDaily() {
|
|
|
+ this.$route.push({
|
|
|
+ name: 'daily'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ takeMenu(jsonp) {
|
|
|
+ if (jsonp.changeLanguage) {
|
|
|
+ if (jsonp.changeLanguage == 'ch') {
|
|
|
+ this.$store.commit('updateIsChinese', true);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.$store.commit('updateIsChinese', false);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.$router.push({ name: jsonp.urlName, params: { isNext: 1 } })
|
|
|
+ }
|
|
|
},
|
|
|
- params: {
|
|
|
- isNext: 1
|
|
|
+ init() {
|
|
|
+ var center = new qq.maps.LatLng(32.019220, 118.797040);
|
|
|
+ var map = new qq.maps.Map(document.getElementById('map'), {
|
|
|
+ center: center,
|
|
|
+ zoom: 16,
|
|
|
+ scaleControl: false,
|
|
|
+ zoomControl: false,
|
|
|
+ mapTypeControl: false,
|
|
|
+ disableDoubleClickZoom: false
|
|
|
+ });
|
|
|
+ var marker = new qq.maps.Marker({
|
|
|
+ position: center,
|
|
|
+ map: map,
|
|
|
+ });
|
|
|
+ var anchor = new qq.maps.Point(0, 0),
|
|
|
+ size = new qq.maps.Size(12, 16),
|
|
|
+ origin = new qq.maps.Point(0, 0),
|
|
|
+ scaleSize = new qq.maps.Size(12, 16),
|
|
|
+ markerIcon = new qq.maps.MarkerImage(
|
|
|
+ require('../assets/icon_dian.png'),
|
|
|
+ size,
|
|
|
+ origin,
|
|
|
+ anchor,
|
|
|
+ scaleSize
|
|
|
+ );
|
|
|
+ marker.setIcon(markerIcon);
|
|
|
+
|
|
|
+ var label = new qq.maps.Label({
|
|
|
+ offset: new qq.maps.Size(-37, -44),
|
|
|
+ position: center,
|
|
|
+ map: map,
|
|
|
+ content: '到这去',
|
|
|
+ style: {
|
|
|
+ width: '66px',
|
|
|
+ height: '28px',
|
|
|
+ paddingRight: '8px',
|
|
|
+ background: 'rgba(105,69,44,1)',
|
|
|
+ borderRadius: '2px',
|
|
|
+ fontSize: '14px',
|
|
|
+ fontFamily: 'FZKTJW',
|
|
|
+ color: 'rgba(255,255,255,1)',
|
|
|
+ lineHeight: '28px',
|
|
|
+ textAlign: 'right',
|
|
|
+ backgroundImage: 'url(' + require('../assets/icon_daohang.png') + ')',
|
|
|
+ backgroundPosition: '6px 8px',
|
|
|
+ backgroundSize: '13px 13px',
|
|
|
+ backgroundRepeat: 'no-repeat'
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ qq.maps.event.addListener(label, 'click', function () {
|
|
|
+ window.location.href = 'https://apis.map.qq.com/tools/routeplan/eword=水街&epointx=118.797040&epointy=32.019220?referer=水街&key=GLFBZ-ZR2W6-76XSA-MF7CQ-GDJ6Z-6FB5K'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goDinner(title) {
|
|
|
+ this.$router.push({
|
|
|
+ name: 'dinner',
|
|
|
+ query: {
|
|
|
+ title: title
|
|
|
+ },
|
|
|
+ params: {
|
|
|
+ isNext: 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ if (this.mySwiper1) {
|
|
|
+ this.mySwiper1.destroy()
|
|
|
+ }
|
|
|
+ if (this.mySwiper2) {
|
|
|
+ this.mySwiper2.destroy()
|
|
|
}
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- destroyed() {
|
|
|
- if (this.mySwiper1) {
|
|
|
- this.mySwiper1.destroy()
|
|
|
- }
|
|
|
- if (this.mySwiper2) {
|
|
|
- this.mySwiper2.destroy()
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.topImg {
|
|
|
- height: 176px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 100%;
|
|
|
- height: 200px;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
+ height: 176px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
z-index: 1;
|
|
|
- }
|
|
|
|
|
|
- .topImgText {
|
|
|
- width: 156px;
|
|
|
- height: 53px;
|
|
|
- font-size: 11px;
|
|
|
- font-family: SourceHanSerifCN;
|
|
|
- font-weight: bold;
|
|
|
- color: rgba(255, 236, 188, 1);
|
|
|
- text-align: center;
|
|
|
- line-height: 53px;
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topImgText {
|
|
|
+ width: 156px;
|
|
|
+ height: 53px;
|
|
|
+ font-size: 11px;
|
|
|
+ font-family: SourceHanSerifCN;
|
|
|
+ font-weight: bold;
|
|
|
+ color: rgba(255, 236, 188, 1);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 53px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.menu {
|
|
|
- padding: 14px 15px 20px;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 12px 12px 0 0;
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .menu-item {
|
|
|
- width: 83px;
|
|
|
- height: 30px;
|
|
|
- background: rgba(242, 244, 245, 1);
|
|
|
- border-radius: 2px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: FZKTJW;
|
|
|
- color: rgba(105, 69, 44, 1);
|
|
|
- line-height: 30px;
|
|
|
- text-align: center;
|
|
|
- margin-top: 6px;
|
|
|
+ padding: 14px 15px 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 12px 12px 0 0;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- &.active,
|
|
|
- &:active {
|
|
|
- background: rgba(105, 69, 44, 1);
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ .menu-item {
|
|
|
+ width: 83px;
|
|
|
+ height: 30px;
|
|
|
+ background: rgba(242, 244, 245, 1);
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: FZKTJW;
|
|
|
+ color: rgba(105, 69, 44, 1);
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 6px;
|
|
|
+
|
|
|
+ &.active,
|
|
|
+ &:active {
|
|
|
+ background: rgba(105, 69, 44, 1);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- &.isEnglish {
|
|
|
- height: 40px;
|
|
|
- line-height: 14px;
|
|
|
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
|
|
|
- Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 12px;
|
|
|
+ &.isEnglish {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 14px;
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
|
+ Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
|
|
|
+ sans-serif;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.introduction {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- .title {
|
|
|
- font-size: 15px;
|
|
|
- font-family: SourceHanSerifCN;
|
|
|
- font-weight: bold;
|
|
|
- color: rgba(0, 0, 0, 1);
|
|
|
- line-height: 21px;
|
|
|
- margin: 38px 0 10px;
|
|
|
- max-width: 246px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .title {
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: SourceHanSerifCN;
|
|
|
+ font-weight: bold;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ line-height: 21px;
|
|
|
+ margin: 38px 0 10px;
|
|
|
+ max-width: 246px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
|
|
|
- .subtitle {
|
|
|
- font-size: 14px;
|
|
|
- font-family: FZKTJW;
|
|
|
- color: rgba(0, 0, 0, 1);
|
|
|
- line-height: 20px;
|
|
|
- margin-top: 10px;
|
|
|
- max-width: 345px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 59px;
|
|
|
- margin: 29px 150px 3px 0;
|
|
|
- }
|
|
|
-
|
|
|
- p {
|
|
|
- font-size: 15px;
|
|
|
- font-family: FZKTJW;
|
|
|
- font-weight: normal;
|
|
|
- color: rgba(0, 0, 0, 1);
|
|
|
- line-height: 26px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .leftTop {
|
|
|
- position: absolute;
|
|
|
- width: 41px;
|
|
|
- height: 35px;
|
|
|
- top: 12px;
|
|
|
- left: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- width: 153px;
|
|
|
- align-self: flex-end;
|
|
|
- }
|
|
|
+ .subtitle {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: FZKTJW;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ line-height: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
+ max-width: 345px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 59px;
|
|
|
+ margin: 29px 150px 3px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: FZKTJW;
|
|
|
+ font-weight: normal;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ line-height: 26px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .leftTop {
|
|
|
+ position: absolute;
|
|
|
+ width: 41px;
|
|
|
+ height: 35px;
|
|
|
+ top: 12px;
|
|
|
+ left: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ width: 153px;
|
|
|
+ align-self: flex-end;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.houseItem {
|
|
|
- width: 120px;
|
|
|
- padding-left: 10px;
|
|
|
- img {
|
|
|
width: 120px;
|
|
|
- height: 90px;
|
|
|
- border-radius: 4px;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- div {
|
|
|
- font-size: 14px;
|
|
|
- font-family: FZKTJW;
|
|
|
- color: rgba(0, 0, 0, 1);
|
|
|
- line-height: 20px;
|
|
|
- margin-top: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- padding-right: 10px;
|
|
|
- }
|
|
|
+ padding-left: 10px;
|
|
|
+ img {
|
|
|
+ width: 120px;
|
|
|
+ height: 90px;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: FZKTJW;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ line-height: 20px;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.resraurantItem {
|
|
|
- margin: 0 15px 15px;
|
|
|
- border-radius: 6px;
|
|
|
- overflow: hidden;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.06);
|
|
|
- img {
|
|
|
- height: 140px;
|
|
|
- width: 100%;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .text {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 0 10px 0 15px;
|
|
|
- height: 42px;
|
|
|
- .title {
|
|
|
- font-size: 13px;
|
|
|
- font-family: SourceHanSerifCN;
|
|
|
- color: rgba(105, 69, 44, 1);
|
|
|
+ margin: 0 15px 15px;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.06);
|
|
|
+ img {
|
|
|
+ height: 140px;
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
}
|
|
|
+ .text {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 10px 0 15px;
|
|
|
+ height: 42px;
|
|
|
+ .title {
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: SourceHanSerifCN;
|
|
|
+ color: rgba(105, 69, 44, 1);
|
|
|
+ }
|
|
|
|
|
|
- .time {
|
|
|
- font-size: 13px;
|
|
|
- font-family: FZKTJW;
|
|
|
- color: rgba(0, 0, 0, 0.9);
|
|
|
+ .time {
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: FZKTJW;
|
|
|
+ color: rgba(0, 0, 0, 0.9);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.foodItem {
|
|
|
- padding-left: 12px;
|
|
|
- width: 130px;
|
|
|
- img {
|
|
|
+ padding-left: 12px;
|
|
|
width: 130px;
|
|
|
- height: 173px;
|
|
|
- border-radius: 4px;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- &:last-child {
|
|
|
- padding-right: 15px;
|
|
|
- }
|
|
|
+ img {
|
|
|
+ width: 130px;
|
|
|
+ height: 173px;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ padding-right: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.isInEnglish {
|
|
|
- .titleContent {
|
|
|
- font-size: 10px;
|
|
|
- }
|
|
|
+ .titleContent {
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
|
|
|
- .houseItem {
|
|
|
- div {
|
|
|
- line-height: 16px;
|
|
|
+ .houseItem {
|
|
|
+ div {
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.map {
|
|
|
- margin: 0 15px;
|
|
|
- height: 140px;
|
|
|
- border-radius: 4px;
|
|
|
+ margin: 0 15px;
|
|
|
+ height: 140px;
|
|
|
+ border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
.address {
|
|
|
- margin: 14px 15px;
|
|
|
- .address-item {
|
|
|
- display: flex;
|
|
|
- margin-bottom: 10px;
|
|
|
- img {
|
|
|
- width: 22px;
|
|
|
- height: 22px;
|
|
|
- }
|
|
|
- .name {
|
|
|
- font-size: 14px;
|
|
|
- font-family: FZKTJW;
|
|
|
- color: rgba(0, 0, 0, 1);
|
|
|
- line-height: 22px;
|
|
|
- margin-left: 14px;
|
|
|
+ margin: 14px 15px;
|
|
|
+ .address-item {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ img {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: FZKTJW;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ line-height: 22px;
|
|
|
+ margin-left: 14px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.bottom-img {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- position: relative;
|
|
|
- .imgRight {
|
|
|
- width: 162px;
|
|
|
- height: 106px;
|
|
|
- }
|
|
|
- .imgLeft {
|
|
|
- width: 33px;
|
|
|
- height: 31px;
|
|
|
- position: absolute;
|
|
|
- left: 93px;
|
|
|
- bottom: 0;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ position: relative;
|
|
|
+ .imgRight {
|
|
|
+ width: 162px;
|
|
|
+ height: 106px;
|
|
|
+ }
|
|
|
+ .imgLeft {
|
|
|
+ width: 33px;
|
|
|
+ height: 31px;
|
|
|
+ position: absolute;
|
|
|
+ left: 93px;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.bottom {
|
|
|
- font-size: 14px;
|
|
|
- font-family: SourceHanSerifCN;
|
|
|
- font-weight: 800;
|
|
|
- color: rgba(255, 231, 122, 1);
|
|
|
- line-height: 36px;
|
|
|
- text-align: center;
|
|
|
- background: rgba(105, 69, 44, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: SourceHanSerifCN;
|
|
|
+ font-weight: 800;
|
|
|
+ color: rgba(255, 231, 122, 1);
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: center;
|
|
|
+ background: rgba(105, 69, 44, 1);
|
|
|
}
|
|
|
</style>
|
