You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
375 lines
16 KiB
375 lines
16 KiB
<template>
|
|
<view class="det_warp">
|
|
<!-- 头部模糊部分 -->
|
|
<view class="det_top">
|
|
<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568870527004&di=837e9607abd8da828591d83bcb1b7783&imgtype=0&src=http%3A%2F%2Fpic.mp.cc%2Fobsolete%2Ffile%2Fupload%2F201606%2F07%2F15-35-41-97-4.jpg"
|
|
mode="widthFix" class="pic_swp_bg"></image>
|
|
</view>
|
|
<!-- 黑色遮罩 -->
|
|
<view class="top_zhe"></view>
|
|
|
|
|
|
<!-- 头部地址与天气 -->
|
|
<view class="dly_flex mmd_top">
|
|
<!-- 地址切换 -->
|
|
<view class="half_unit agn_left mmd_dl">
|
|
<text class="dl_1">邯郸</text>
|
|
|
|
<view class="uni-list-cell-db">
|
|
<picker @change="bindPickerChange" :value="index" :range="array">
|
|
<view class="cur-input">{{array[index]}}</view>
|
|
</picker>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
<!-- 天气 -->
|
|
<view class="half_unit agn_right mmd_dl mmd_whe">
|
|
<image src="../../static/images/whe_cloudy.png" class="mmd_icon"></image>
|
|
<text class="dl_2">多云</text>
|
|
<view class="dl_1">15℃~26℃</view>
|
|
|
|
</view>
|
|
</view>
|
|
<!-- 轮播图 -->
|
|
<view class="mmd_scol">
|
|
<view class="uni-margin-wrap">
|
|
<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
|
|
<swiper-item>
|
|
<view class="swiper-item" style="background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=1722fd8206f7511c3e991475f01cb88a&imgtype=0&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20120425%2Fext-20120425190752-1335974352.jpg) center no-repeat / cover"></view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="swiper-item" style="background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg) center no-repeat / cover"></view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="swiper-item" style="background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=6cebc0a5cd4897ca477b154f0926601d&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fhebei%2Ftransform%2F20161123%2FcMlv-fxyawmn9939531.jpg) center no-repeat / cover"></view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
<!-- 工具栏 -->
|
|
<view class="mmd_line" style="padding-right: 0;">
|
|
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="">
|
|
<view class="scroll-view-item_H">
|
|
<image class="tol_icn" src="../../static/images/menu_jq.png"></image>
|
|
<text class="tol_txt">赏美景</text>
|
|
</view>
|
|
<view class="scroll-view-item_H">
|
|
<image class="tol_icn" src="../../static/images/menu_fod.png"></image>
|
|
<text class="tol_txt">吃美食</text>
|
|
</view>
|
|
<view class="scroll-view-item_H">
|
|
<image class="tol_icn" src="../../static/images/menu_hel.png"></image>
|
|
<text class="tol_txt">住酒店</text>
|
|
</view>
|
|
<view class="scroll-view-item_H">
|
|
<image class="tol_icn" src="../../static/images/menu_xl.png"></image>
|
|
<text class="tol_txt">精品线路</text>
|
|
</view>
|
|
<view class="scroll-view-item_H">
|
|
<image class="tol_icn" src="../../static/images/menu_tc.png"></image>
|
|
<text class="tol_txt">特产</text>
|
|
</view>
|
|
<view class="scroll-view-item_H">
|
|
<image class="tol_icn" src="../../static/images/menu_hd.png"></image>
|
|
<text class="tol_txt">活动</text>
|
|
</view>
|
|
|
|
</scroll-view>
|
|
</view>
|
|
<view class="shadow_fg"></view>
|
|
<!-- 目的地指南 -->
|
|
<view class="mode_com mdd_jj ">
|
|
<text class="tit_com">目的地指南</text>
|
|
<view class="fod_det_inf">正定县位于河北省西南部，华北平原中部的冀中平原，古称常山、真定，历史上曾与北京、保定并称“北方三雄镇”，是国家历史文化名城，中国民间艺术之乡，也是百岁帝王赵佗、常胜将军赵云故里。截至2010年正定有国家级文物保护单位9处，省级文物保护单位6处。</view>
|
|
</view>
|
|
<view class="shadow_fg"></view>
|
|
<!-- 热门景区 -->
|
|
<view class="mode_com mdd_jj">
|
|
<text class="tit_com">热门景区</text>
|
|
<view class="mmd_s_hot">
|
|
<scroll-view class="scroll-view_s" scroll-x="true" @scroll="scroll" scroll-left="">
|
|
<view class="scroll-view-item_s">
|
|
<image class="mmd_jq_pic" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg"
|
|
mode="aspectFill"></image>
|
|
<text class="mmd_s_txt">吃美食</text>
|
|
<text class="mmd_s_adr">地址址地址地址地址址地址地址地址址地址地址地址地址地址地址</text>
|
|
</view>
|
|
|
|
<view class="scroll-view-item_s">
|
|
<image class="mmd_jq_pic" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg"
|
|
mode="aspectFill"></image>
|
|
<text class="mmd_s_txt">吃美食</text>
|
|
<text class="mmd_s_adr">地址址地址地址地址址地址地址地址址地址地址地址地址地址地址</text>
|
|
</view>
|
|
<view class="scroll-view-item_s">
|
|
<image class="mmd_jq_pic" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg"
|
|
mode="aspectFill"></image>
|
|
<text class="mmd_s_txt">吃美食</text>
|
|
<text class="mmd_s_adr">地址址地址地址地址址地址地址地址址地址地址地址地址地址地址</text>
|
|
</view>
|
|
<view class="scroll-view-item_s">
|
|
<image class="mmd_jq_pic" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg"
|
|
mode="aspectFill"></image>
|
|
<text class="mmd_s_txt">吃美食</text>
|
|
<text class="mmd_s_adr">地址址地址地址地址址地址地址地址址地址地址地址地址地址地址</text>
|
|
</view>
|
|
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 旅发大会主题 -->
|
|
<view class="mode_com mdd_jj" style="padding-left: 0; padding-right: 0;">
|
|
|
|
<view class="lfdh_bg">
|
|
<text class="tit_com" >旅发大会主题</text>
|
|
<view class="lvdh_inf">正定县位于河北省西南部，华北平原中部的冀中平原，古称常山、真定，历史上曾与北京、保定并称“北方三雄镇”，是国家历史文化名城，中国民间艺术之乡，也是百岁帝王赵佗、常胜将军赵云故里。截至2010年正定有国家级文物保护单位9处，省级文物保护单位6处。</view>
|
|
<view class="lfdh_link"><text>10秒速览0秒速览0秒速览0秒速览</text><text>10秒</text><text>10秒速览</text></view>
|
|
<view class="lfdh_link"><text>10秒速览0秒速览0秒速览0秒速览</text><text>10秒速览</text><text>10秒速览</text></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 玩转正定 -->
|
|
<view class="mode_com mdd_jj">
|
|
<text class="tit_com">玩转正定</text>
|
|
<view class="tab_mmd">
|
|
<text class="active">美食</text><text>特产</text><text>娱乐</text>
|
|
</view>
|
|
<view class="dly_flex sm_list">
|
|
<view class="half_unit sm_dany">
|
|
<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg"
|
|
class="sm_pic" mode="aspectFill"></image>
|
|
<view class="bt_sm">标题标标题</view>
|
|
<view class="nr_sm">地址地址地址地址地址地址地址地址地址</view>
|
|
</view>
|
|
<view class="half_unit sm_dany">
|
|
<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg"
|
|
class="sm_pic" mode="aspectFill"></image>
|
|
<view class="bt_sm">标题标题标题标题标题</view>
|
|
<view class="nr_sm">地址地址地址地址地</view>
|
|
</view>
|
|
|
|
<view class="half_unit sm_dany">
|
|
<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg"
|
|
class="sm_pic" mode="aspectFill"></image>
|
|
<view class="bt_sm">标题标题标题标题标题</view>
|
|
<view class="nr_sm">地址地址地址地址地址地址地址地地址地地址地址地址地址地</view>
|
|
|
|
</view>
|
|
<view class="half_unit sm_dany">
|
|
<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg"
|
|
class="sm_pic" mode="aspectFill"></image>
|
|
<view class="bt_sm">标题标题标题标题标题</view>
|
|
<view class="nr_sm">地址地址地址地址地址地址地址地</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 精品线路 -->
|
|
<view class="mode_com mdd_jj mmd_xlu_box">
|
|
<text class="tit_com">精品线路</text>
|
|
<view class="xlu_fst">
|
|
<image class="mmd_xl_pic1" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg"
|
|
mode="aspectFill"></image>
|
|
<view class="mssj_tit">标题标题标题标题标题标题标题标题</view>
|
|
<view class="mssj_adr">内容内容内容内容内容内容内容内容内容内容内容内容内容内容</view>
|
|
<text class="xlu_day">3天</text>
|
|
<text class="xlu_bq">力荐热门！</text>
|
|
</view>
|
|
<view class="fod_sp_box">
|
|
<view class="mssj_box">
|
|
<text class="mssj_tit">1111标题标题标题标题标题标题标题标题</text>
|
|
<text class="mssj_adr">内容内容内容内容内容内容内容内容内容内容</text>
|
|
</view>
|
|
<view class="msimg_wrp">
|
|
<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg"
|
|
class="pic_xlu" mode="aspectFill"></image>
|
|
<text class="xlu_day">3天</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fod_sp_box">
|
|
<view class="mssj_box">
|
|
<text class="mssj_tit">1111标题标题标题标题标题标题标题标题</text>
|
|
<text class="mssj_adr">内容内容内容内容内容内容内容内容内容内容</text>
|
|
</view>
|
|
<view class="msimg_wrp">
|
|
<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg"
|
|
class="pic_xlu" mode="aspectFill"></image>
|
|
<text class="xlu_day">3天</text>
|
|
</view>
|
|
</view>
|
|
<view class="fod_sp_box">
|
|
<view class="mssj_box">
|
|
<text class="mssj_tit">1111标题标题标题标题标题标题标题标题</text>
|
|
<text class="mssj_adr">内容内容内容内容内容内容内容内容内容内容</text>
|
|
</view>
|
|
<view class="msimg_wrp">
|
|
<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg"
|
|
class="pic_xlu" mode="aspectFill"></image>
|
|
<text class="xlu_day">3天</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 攻略 -->
|
|
<view class="mode_com mdd_jj">
|
|
<text class="tit_com">景区旅游攻略</text>
|
|
<view class="dly_flex sm_list mmd_glue" style="flex-direction: row;text-align: center;">
|
|
<view class="glue_dany">
|
|
<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg" class="glue_pic" mode="aspectFill"></image>
|
|
<view class="bt_sm">标题标题</view>
|
|
|
|
</view>
|
|
<view class="glue_dany">
|
|
<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg" class="glue_pic" mode="aspectFill"></image>
|
|
<view class="bt_sm">标题题标标题题标标题题标题</view>
|
|
|
|
</view><view class="glue_dany">
|
|
<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg" class="glue_pic" mode="aspectFill"></image>
|
|
<view class="bt_sm">标题题</view>
|
|
|
|
</view><view class="glue_dany">
|
|
<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg" class="glue_pic" mode="aspectFill"></image>
|
|
<view class="bt_sm">标题标题</view>
|
|
|
|
</view>
|
|
<view class="glue_dany">
|
|
<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568880108211&di=97ad9113286767937128ad35b06e07e8&imgtype=0&src=http%3A%2F%2Fpic0.beibaotu.com%2Fitem_images%2F000%2F00%2F26%2F26%2F9025260_b.jpg" class="glue_pic" mode="aspectFill"></image>
|
|
<view class="bt_sm">标标题题</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
const currentDate = this.getDate({
|
|
format: true
|
|
})
|
|
return {
|
|
title: 'picker',
|
|
array: ['正定', '平山', '鹿泉', '井陉'],
|
|
index: 0,
|
|
date: currentDate,
|
|
time: '12:01',
|
|
background: ['color1', 'color2', 'color3'],
|
|
indicatorDots: true,
|
|
autoplay: true,
|
|
interval: 4000,
|
|
duration: 500,
|
|
|
|
scrollTop: 0,
|
|
old: {
|
|
scrollTop: 0
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
startDate() {
|
|
return this.getDate('start');
|
|
},
|
|
endDate() {
|
|
return this.getDate('end');
|
|
}
|
|
},
|
|
methods: {
|
|
bindPickerChange: function(e) {
|
|
console.log('picker发送选择改变，携带值为', e.target.value)
|
|
this.index = e.target.value
|
|
},
|
|
bindDateChange: function(e) {
|
|
this.date = e.target.value
|
|
},
|
|
bindTimeChange: function(e) {
|
|
this.time = e.target.value
|
|
},
|
|
getDate(type) {
|
|
const date = new Date();
|
|
let year = date.getFullYear();
|
|
let month = date.getMonth() + 1;
|
|
let day = date.getDate();
|
|
|
|
if (type === 'start') {
|
|
year = year - 60;
|
|
} else if (type === 'end') {
|
|
year = year + 2;
|
|
}
|
|
month = month > 9 ? month : '0' + month;;
|
|
day = day > 9 ? day : '0' + day;
|
|
return `${year}-${month}-${day}`;
|
|
},
|
|
changeIndicatorDots(e) {
|
|
this.indicatorDots = !this.indicatorDots
|
|
},
|
|
changeAutoplay(e) {
|
|
this.autoplay = !this.autoplay
|
|
},
|
|
intervalChange(e) {
|
|
this.interval = e.target.value
|
|
},
|
|
durationChange(e) {
|
|
this.duration = e.target.value
|
|
},
|
|
scroll: function(e) {
|
|
console.log(e)
|
|
this.old.scrollTop = e.detail.scrollTop
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import "../../static/css/common.css";
|
|
@import "../food/fooddetial/fooddetial.css";
|
|
@import "destination.css";
|
|
|
|
|
|
|
|
|
|
.cur-input:after {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
background: url(../../static/images/icn_down.png) no-repeat center;
|
|
background-size: 100%;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.mssj_jul:before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
background: url(../../static/images/icn_mi.png) no-repeat;
|
|
background-size: 100%;
|
|
margin-right: 5rpx;
|
|
position: relative;
|
|
top: 6rpx
|
|
}
|
|
</style>
|
|
|