.ticket-detail-wrap {
    padding: 40px 0 128px 0;
    /*background-image: url(../img/body-bg1.png);*/
}

.position-box {
    width: 100%;
    padding-bottom: 29px;
    /*padding: 16px 0;*/
    /* background: #F3F3F3; */
    text-align: left;
    /*border-bottom: 1px solid #F3F3F3;*/
}

.position-box p {
    font-size: 14px;
    line-height: 14px;
    font-weight: normal;
    color: #1D1E1F;
}

.position-box span {
    font-size: 14px;
    line-height: 14px;
    font-weight: normal;
    color: #939599;
}

.ticket-detail-box-head-left {
    width: 654px;
    height: 355px;
    border-radius: 4px;
    float: left;
    background-color: #efefef;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-right: 32px;
}

.ticket-detail-box-head-right {
    width: 514px;
    height: 355px;
    float: right;
    position: relative;
}

.detail-box-head-right-text1 {
    font-size: 24px;
    line-height: 24px;
    font-weight: bold;
    margin-bottom: 32px;
}

.detail-box-head-right-text2 {
    font-size: 14px;
    line-height: 14px;
    color: #646464;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.detail-box-head-right-text3 {
    font-weight: bold;
    font-size: 14px;
    /*line-height: 14px;*/
    color: #333;
    /*overflow: hidden;*/
    /*text-overflow:ellipsis;*/
    /*white-space: nowrap;*/
    margin-bottom: 18px;
    /*display: flex;*/
    /*align-items: center;*/
    /*flex-wrap: wrap;*/
}

.detail-box-head-right-text3 span:nth-child(1) {
    font-weight: normal;
    font-size: 14px;
    line-height: 14px;
}

.detail-box-head-right-text3 span:nth-child(2) {
    margin-left: 14px;
    color: #0076FF;
    cursor: pointer;
}

.detail-box-head-right-text3 span:nth-child(2) img {
    margin-right: 4px;
    cursor: pointer;
}

.box-head-right-text4-text1 {
    font-size: 12px;
    line-height: 12px;
    padding: 4px 6px;
    color: #27AE60;
    background: rgba(39, 174, 96, 0.2);
    border-radius: 2px;
    display: inline-block;
    margin-right: 12px;
    float: left;
}

.box-head-right-text4-text2 {
    font-size: 12px;
    line-height: 12px;
    color: #2F80ED;;
    padding: 4px 6px;
    background: rgba(47, 128, 237, 0.2);
    border-radius: 2px;
    display: inline-block;
    margin-right: 12px;
    float: left;
}

.detail-box-head-right-text4 {
    margin-bottom: 32px;
}

.detail-box-head-right-text4-line {
    width: 514px;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}

.detail-box-head-right-text5 {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0;
}

.detail-box-head-right-text5-right {
    padding: 8px 12px;
    background: #00B448;
    border-radius: 4px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    line-height: 16px;
    display: flex;
    align-items: center;
}

.detail-box-head-right-text5-right img {
    margin-right: 12px;
}

.detail-box-head-right-text5-left {
    font-size: 16px;
    color: #646464;
    display: flex;
    align-items: center;
}

.detail-box-head-right-text5-left span {
    font-size: 40px;
    color: #FC4500;
    line-height: 40px;
    font-weight: bold;
}

.detail-box-head-right-text5-left i {
    margin: 0 6px;
    width: 3px;
    height: 3px;
    background: #646464;
    display: inline-block;
    border-radius: 50%;
}

.ticket-detail-box-head-wrap {
    margin-bottom: 29px;
}

.detail-box-body-top-wrap {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 29px;
}

.detail-box-body-top-item {
    font-size: 16px;
    line-height: 16px;
    color: #282828;
    padding-bottom: 12px;
    float: left;
    margin-right: 24px;
    cursor: pointer;
    position: relative;
}

.box-body-top-item-active {
    color: #AB3D2C;
}

.box-body-top-item-active:after {
    position: absolute;
    bottom: -1px;
    content: "";
    width: 64px;
    height: 2px;
    background: #AB3D2C;
    left: 0;
}

.detail-box-body-top-item:hover {
    color: #AB3D2C;
}

.detail-box-body-top-item:hover:after {
    position: absolute;
    bottom: -1px;
    content: "";
    width: 64px;
    height: 2px;
    background: #AB3D2C;
    left: 0;
}

.detail-box-body-bottom-item.spots {
    padding: 60px 0;
    /*background: #F5F5F5;*/
    /*border-radius: 10px;*/
}

.detail-box-body-bottom-item.traffic {
    padding: 40px;
    background: #F5F5F5;
    border-radius: 10px;
}

.body-bottom-item-title {
    font-size: 24px;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.9);
    font-weight: 900;
    margin-bottom: 16px;
}

.body-bottom-item-content {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    margin-bottom: 60px;
}

.body-bottom-item-content p {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

.body-bottom-item-item {
    font-size: 16px;
    line-height: 16px;
    padding-bottom: 10px;
    position: relative;
    float: left;
    margin-right: 24px;
    cursor: pointer;
}

.body-bottom-item-item.bottom-item-item-active {
    color: #AB3D2C;
}

.body-bottom-item-item.bottom-item-item-active:after {
    position: absolute;
    bottom: 0;
    content: "";
    width: 32px;
    height: 2px;
    left: 0;
    background: #AB3D2C;
}

.body-bottom-item-item:hover {
    color: #AB3D2C;
}

.body-bottom-item-item:hover:after {
    position: absolute;
    bottom: 0;
    content: "";
    width: 32px;
    height: 2px;
    left: 0;
    background: #AB3D2C;
}

.body-bottom-item-list-bottom-right {
    width: 511px;
    height: 336px;
    float: right;
    background: #efefef;
}

.body-bottom-item-list-bottom-left {
    width: 570px;
    float: left;
}

.body-bottom-item-list {
    margin-bottom: 40px;
}

#baidu_map {
    width: 100%;
    height: 100%;
}

.item-list-bottom-left-item-text1 {
    font-size: 20px;
    line-height: 28px;
    color: #000000;
    margin-bottom: 16px;
    font-weight: bold;
}

.item-list-bottom-left-item-text2 {
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    margin-bottom: 16px;
}

.item-list-bottom-left-item-text3 {
    font-size: 14px;
    line-height: 14px;
    color: #000000;
    margin-bottom: 16px;
}

.item-list-bottom-left-item-text3 span {
    color: #0076FF;
    margin-left: 16px;
}

.item-list-bottom-left-item-text3 a {
    color: #0076FF;
    margin-left: 10px;
}

.detail-box-body-bottom-item-left {
    width: 1200px;
    /*height: 356px;*/
    float: left;
}

.detail-box-body-bottom-item-right {
    width: 512px;
    /*height: 356px;*/
    float: right;
    position: relative;
}

.box-body-bottom-item-right-text1 {
    font-weight: 600;
    font-size: 40px;
    line-height: 48px;
    color: #282828;
    margin-bottom: 16px;
}

.box-body-bottom-item-right-text2 {
    /*display: flex;*/
    /*align-items: center;*/
    font-size: 16px;
    color: #000000;
    margin-bottom: 8px;
}

.text2-date {
    font-size: 14px;
    line-height: 22px;
    padding: 8px;
    border: 1px solid #09A79D;
    border-radius: 4px;
    color: #86909C;
    position: relative;
    /*margin-left: 24px;*/
}

.text2-date span {
    margin-left: 8px;
}

.text3-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    /*float: left;*/
}

.text3-title-left-text1 {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: rgba(0, 0, 0, 0.9);
}

.text3-title-left-text2 {
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    color: #FA7233;
}

.box-body-bottom-item-right-text3 {
    /*display: flex;*/
    margin-bottom: 8px;
}

.text3-time-slot-wrap {
    width: 100%;
    /*width: 411px;*/
    /*float: left;*/
    overflow-x: auto;
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: nowrap; /* Safari 6.1+ */
    flex-wrap: nowrap;
    display: flex;
}

.text3-time-slot-item-choose:hover .text3-time-slot-item-title {
    background: #09A79D;
    border-bottom: 1px solid #ECECEC;
    color: #fff;
}

.text3-time-slot-item-choose:hover .text3-time-slot-item-title img {
    display: block;
}

.text3-time-slot-item-title {
    font-size: 14px;
    color: #383838;
    line-height: 14px;
    padding: 9px 12px;
    border-bottom: 1px solid #ECECEC;
    position: relative;
}

.text3-time-slot-item-title img {
    position: absolute;
    bottom: 0;
    right: 0;
    display: none;
}

.time-slot-item-active .text3-time-slot-item-title {
    background: #09A79D;
    border-bottom: 1px solid #ECECEC;
    color: #fff;
}

.time-slot-item-active .text3-time-slot-item-title img {
    display: block;
}

.text3-time-slot-item {
    border: 1px solid #ECECEC;
    margin-right: 16px;
    -webkit-flex-grow: 0;
    -webkit-flex-shrink: 0;
    /*-webkit-flex-basis: 30;*/
    flex-grow: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.text3-time-slot-item.text3-time-slot-item-disabled {
    border-color: #e3e3e3;
}

.text3-time-slot-item-disabled .text3-time-slot-item-title {
    color: #fff;
    background: #e3e3e3;
}

.text3-time-slot-item-disabled .text3-time-slot-item-body p {
    color: #e3e3e3;
}

.text3-time-slot-item-body {
    padding: 9px;
}

.text3-time-slot-item-body p {
    font-size: 14px;
    line-height: 14px;
    color: #646464;
}

.text3-time-slot-item-body p:nth-child(1) {
    margin-bottom: 12px;
}

.box-body-bottom-item-right-text3-line {
    width: 519px;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}

.box-body-bottom-item-right-text4 {
    /*position: absolute;*/
    /*bottom: 0;*/
}

.text4-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    /*float: right;*/
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*align-items: center;*/
}

.text4-content-left {
    font-weight: 600;
    font-size: 28px;
    line-height: 36px;@extends('cms::layouts.master')

    @section('content')
    <link rel="stylesheet" href="{{get_asset_url('cms:hengshui/css/ticket_detail.css')}}">
    <script type="text/javascript"
    src="https://api.map.baidu.com/api?v=2.0&ak=X2CQ70Oqu76pG7ka2YAZO440X1ie64Ir"></script>
    <script src="{{get_asset_url('cms:hengshui/common/js/common.js')}}"></script>
    <link rel="stylesheet" href="{{get_asset_url('cms:hengshui/common/css/animate.css')}}">

    <div id="ticket_detail" v-cloak="">
    <!--loading-->
    <div class="vertical-containers" v-if="!isLoad">
    <div class="loading_box">
    <div class="pulse pulse_1"></div>
    <div class="pulse pulse_2"></div>
    <div class="pulse pulse_3"></div>
    <div class="pulse pulse_4"></div>
    </div>
    </div>
    <div class="vertical-containers1" v-if="!isLoadyqs">
    <div class="loading_box">
    <div class="pulse pulse_1"></div>
    <div class="pulse pulse_2"></div>
    <div class="pulse pulse_3"></div>
    <div class="pulse pulse_4"></div>
    </div>
    </div>

    <!--位置-->
    <div class="hotel-list-box-1">
    <div class="hotel-list-title">
    <span><a style="color: #09A79D" href="/index.html">首页</a></span>
    > <span><a style="color: #09A79D" href="/ticket.html">门票列表</a></span>
    > <span>门票详情</span>
    </div>
    </div>
    <div class="ticket-detail-wrap">
    <div class="w-1200 clearfix">
    <div class="hotel-detail-banner-wrap" v-if="ad_head.length>2">
    <div class="hotel-detail-banner-left"
    v-for="(item,index) in ad_head"
    v-if="index<1"
    :style="{'background-image': 'url('+ pich+item.image +'?width=740)'}">
    </div>
    <div class="hotel-detail-banner-right">
    <div class="hotel-detail-banner-right-item"
    v-for="(item,index) in ad_head"
    v-if="index == 1"
    :style="{'background-image': 'url('+ pich+item.image +'?width=452)'}">
    </div>
    <div class="hotel-detail-banner-right-item"
    v-for="(item,index) in ad_head"
    v-if="index>1 && index < 3"
    :style="{'background-image': 'url('+ pich+item.image +'?width=452)'}">
    <div class="banner-r-i-text" @click="getMore">
<img src="{{get_asset_url('cms:hengshui/img/5.png')}}" alt="">显示全部@{{ad_head.length}}张照片
</div>
</div>
</div>
</div>

<div class="hotel-detail-banner-wrap" v-if="ad_head.length == 1">
<div class="hotel-detail-banner-left banner-100" v-for="item in ad_head"
:style="{'background-image': 'url('+ pich+item.image +'?width=1200)'}">
<div class="banner-r-i-text" @click="getMore">
<img src="{{get_asset_url('cms:hengshui/img/5.png')}}" alt="">显示全部@{{ad_head.length}}张照片
</div>
</div>
</div>

<div class="hotel-detail-banner-wrap" v-if="ad_head.length == 2">
<div class="hotel-detail-banner-left" v-for="(item,index) in ad_head" v-if="index<1"
:style="{'background-image': 'url('+ pich+item.image +'?width=740)'}">
<div class="banner-r-i-text" @click="getMore">
<img src="{{get_asset_url('cms:hengshui/img/5.png')}}" alt="">显示全部@{{ad_head.length}}张照片
</div>
</div>
<div class="hotel-detail-banner-right">
<div class="hotel-detail-banner-right-item"
style="height: 100%"
v-for="(item,index) in ad_head" v-if="index==1"
:style="{'background-image': 'url('+ pich+item.image +'?width=452)'}">
<div class="banner-r-i-text" @click="getMore">
<img src="{{get_asset_url('cms:hengshui/img/5.png')}}" alt="">显示全部@{{ad_head.length}}张照片
</div>
</div>
</div>
</div>

<div class="index-news-tab-list-wrap" :class="{'fixTitle':whether}">
<div style="width: 1200px;margin: 0 auto;position: relative">
<div class="index-news-tab-list" style="margin-bottom: 0">
<div class="index-news-tab-item" @click="getTabList(index)"
:class="{'tab-item-active':tab_active == index}" v-for="(item,index) in tab_list">
@{{item}}
</div>
</div>
{{--                        <div class="wx-xcx-wrap" v-on:click="getCode">--}}
{{--                            <img src="{{get_asset_url('cms:hengshui/img/xiaocx.png')}}" alt="">进入微信小程序预订门票--}}
{{--                        </div>--}}
</div>
</div>

<div style="margin-bottom: 119px" v-if="whether"></div>


<div class="hotel-detail-wrapper">
<div class="hotel-detail-list-wrap hotel-detail-wrapper-item">
<div class="detail-box-body-bottom-item clearfix">
<div class="detail-box-body-bottom-item-left">
<div class="detail-swiper-wrap">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in dtl_img"
:style="{'background-image': 'url('+ pich+item +'?width=600)'}"></div>
</div>
<!-- Add Arrows -->
<div class="detail-swiper-prev">
<img src="{{get_asset_url('cms:hengshui/img/left.png')}}" alt="">
</div>
<div class="detail-swiper-next">
<img src="{{get_asset_url('cms:hengshui/img/right.png')}}" alt="">
</div>
</div>

</div>
<div class="detail-box-left-title">
@{{goods.name}}
<div class="detail-box-left-title-tip">@{{other.level}}</div>
</div>
<div class="detail-box-left-address">
地址：@{{other.address || '暂无'}}
<div class="map-img" v-on:click="getMap">
<img src="{{get_asset_url('cms:hengshui/img/ticket_detail/map.png')}}" alt="">导航
</div>
</div>
<div class="detail-box-left-content">
<div class="detail-box-left-con1">
极速入园
</div>
<div class="detail-box-left-con2" v-if="goods.refund_type == 1">
不可退票
</div>
<div class="detail-box-left-con2"
v-if="goods.refund_type == 3 || goods.refund_type == 2">
审核退票
</div>
<div class="detail-box-left-con2" v-if="goods.goods_type == 1">
联票
</div>
<div class="detail-box-left-con3">
@{{other.valid_days}}
</div>
<div class="detail-box-left-con4" @click="getNotice">
预订须知 <img src="{{get_asset_url('cms:hengshui/img/ticket_detail/r1.png')}}"
alt="">
</div>
</div>
<div class="detail-box-left-text1">
门票价格
<div class="box-body-bottom-item-right-text4">
<div class="text3-title">
<div class="text3-title-left">
<div class="text3-title-left-text1">
预售成人票
</div>
<div class="text3-title-left-text2">
成人票：@{{totalprice}}元/张
</div>
</div>
<div class="text3-title-right">
<div class="confirm-left">
<el-input-number v-model="num" @change="handleChange"
size="mini" :min="1"
:max="999"></el-input-number>
<div class="confirm-left-text">预订数量</div>
</div>
</div>
</div>
<div class="text4-content">
<div class="text4-content-left">
<span>¥：</span>¥@{{totalprice*num}}
</div>
<div class="text4-content-right" v-on:click="getCode">
扫码预订
</div>
</div>
</div>
</div>
<div class="detail-box-left-text1">
景区介绍
</div>
<!-- <div class="detail-box-left-text2">
开放时间<span>{ {other.valid_days}}</span>
</div>-->
<div class="detail-box-left-text2" style="margin-bottom: 8px">
景区电话<span style="color: #0C77F5;">@{{other.tel}}</span>
</div>
<div class="detail-box-left-text3" v-html="dtl_data.info">

</div>

</div>
<div class="detail-box-body-bottom-item-right">
{{--                                <div class="box-body-bottom-item-right-text1">--}}
{{--                                    门票价格--}}
{{--                                </div>--}}
{{--                                <div class="box-body-bottom-item-right-text2" v-if="date_arr.length > 0">--}}
{{--                                    <div class="text2-date-title">选择日期</div>--}}
{{--                                    <div class="text2-date">@{{s}}<span>星期@{{week}}</span><img--}}
{{--                                                src="{{get_asset_url('cms:hengshui/img/rl.png')}}" alt=""--}}
{{--                                                class="rl-img"></div>--}}
{{--                                </div>--}}
{{--                                <div class="box-body-bottom-item-right-text3" v-if="getTimeData.length>0">--}}
{{--                                    <div class="text2-date-title">选择时间段</div>--}}
{{--                                    <div class="text3-time-slot-wrap">--}}
{{--                                        <div class="text3-time-slot-item text3-time-slot-item-choose"--}}
{{--                                             v-for="(item,index) in getTimeData"--}}
{{--                                             :class="{'time-slot-item-active':time_active == index}"--}}
{{--                                             v-on:click="getTimeId(index,item.share_id)" v-if="item.buy == 1">--}}
{{--                                            <div class="text3-time-slot-item-title">--}}
{{--                                                @{{item.start_time}}~@{{item.end_time}}--}}
{{--                                                <img src="{{get_asset_url('cms:hengshui/img/ticket_detail/choose.png')}}"--}}
{{--                                                     alt="">--}}
{{--                                            </div>--}}
{{--                                            <div class="text3-time-slot-item-body">--}}
{{--                                                <p>已售：@{{item.sale_num}}</p>--}}
{{--                                                <p>剩余：@{{item.surplus_num}}</p>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                        <div class="text3-time-slot-item text3-time-slot-item-disabled"--}}
{{--                                             v-for="(item,index) in getTimeData" v-if="item.buy == 2">--}}
{{--                                            <div class="text3-time-slot-item-title">--}}
{{--                                                @{{item.start_time}}~@{{item.end_time}}--}}
{{--                                                <img src="{{get_asset_url('cms:hengshui/img/ticket_detail/choose.png')}}"--}}
{{--                                                     alt="">--}}
{{--                                            </div>--}}
{{--                                            <div class="text3-time-slot-item-body">--}}
{{--                                                <p>已售：@{{item.sale_num}}</p>--}}
{{--                                                <p>剩余：@{{item.surplus_num}}</p>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <div id="changedate" v-if="date_arr.length > 0">--}}
{{--                                    <div class="dateBlock">--}}
{{--                                        <div class="head">--}}
{{--                                            <div class="left-icon" v-on:click="edit">--}}
{{--                                                <img src="{{get_asset_url('cms:hengshui/img/ticket_detail/l.png')}}"--}}
{{--                                                     alt="">--}}
{{--                                            </div>--}}
{{--                                            @{{day.year}}年@{{day.month+1}}月--}}
{{--                                            <div class="right-icon" v-on:click="add">--}}
{{--                                                <img src="{{get_asset_url('cms:hengshui/img/ticket_detail/r.png')}}"--}}
{{--                                                     alt="">--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                        <div class="body">--}}
{{--                                            <div class="heads">--}}
{{--                                                <div class="sets">日</div>--}}
{{--                                                <div class="sets">一</div>--}}
{{--                                                <div class="sets">二</div>--}}
{{--                                                <div class="sets">三</div>--}}
{{--                                                <div class="sets">四</div>--}}
{{--                                                <div class="sets">五</div>--}}
{{--                                                <div class="sets">六</div>--}}
{{--                                            </div>--}}
{{--                                            <div class="day">--}}
{{--                                                <div class="in" v-for="(item,index) in days">--}}
{{--                                                    <div :class="s==item.date?'incolor':''"--}}
{{--                                                         v-if="!item.isflag && item.isdays == '0'">--}}
{{--                                                        <div v-if="!item.isshow"--}}
{{--                                                             style="color: rgba(216,216,216,1);width: 100%;line-height: 36px;height: 36px;">--}}
{{--                                                            @{{item.num}}--}}
{{--                                                            <!--<div style="visibility: hidden;font-size: 10px">--}}
{{--                                                          无票--}}
{{--                                                        </div>-->--}}
{{--                                                        </div>--}}
{{--                                                        <div v-else="" v-on:click="getday(item)"--}}
{{--                                                             style="cursor: pointer;width: 100%;height: 36px;line-height: 36px">--}}
{{--                                                            @{{item.num}}--}}
{{--                                                            <!--<div style="font-size: 10px">--}}
{{--                                                          有票--}}
{{--                                                        </div>-->--}}
{{--                                                        </div>--}}
{{--                                                    </div>--}}
{{--                                                    <div v-else="" class="text" style="visibility: hidden;">0--}}
{{--                                                        <div style="visibility: hidden;font-size: 10px">--}}
{{--                                                            无票--}}
{{--                                                        </div>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <div class="box-body-bottom-item-right-text4">--}}
{{--                                    <div class="text3-title">--}}
{{--                                        <div class="text3-title-left">--}}
{{--                                            <div class="text3-title-left-text1">--}}
{{--                                                预售成人票--}}
{{--                                            </div>--}}
{{--                                            <div class="text3-title-left-text2">--}}
{{--                                                成人票：@{{totalprice}}元/张--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                        <div class="text3-title-right">--}}
{{--                                            <div class="confirm-left">--}}
{{--                                                <el-input-number v-model="num" @change="handleChange"--}}
{{--                                                                 size="mini" :min="1"--}}
{{--                                                                 :max="999"></el-input-number>--}}
{{--                                                <div class="confirm-left-text">预订数量</div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                    <div class="text4-content">--}}
{{--                                        <div class="text4-content-left">--}}
{{--                                            <span>实付款：</span>¥@{{totalprice*num}}--}}
{{--                                        </div>--}}
{{--                                        <div class="text4-content-right" v-on:click="getCode">--}}
{{--                                            立即预订--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
</div>

</div>
</div>
<div class="hotel-service-wrap hotel-detail-wrapper-item">
<div class="detail-box-body-bottom-item spots">
<div class="body-bottom-item-title">
简介内容
</div>
<div class="body-bottom-item-content" v-html="intro">
</div>
<div class="body-bottom-item-title">
使用须知
</div>
<div class="body-bottom-item-content" v-html="nodes" style="margin-bottom: 0"></div>
</div>
</div>

<div class="new-index-hotel-wrap hotel-detail-wrapper-item">
<div class="new-index-hotel-box">
<div class="index-scenic-box-title" style="position: relative">
<div class="index-culture-box-left-title" style="margin-bottom: 0">
<div style="display: flex;align-items: center">
推荐景点 · <span
style="font-size: 16px;color: #282828;font-weight: normal;line-height: 16px;display: block;margin-left: 8px;margin-top: 2px">品类多多，福利多多~</span>
</div>
</div>
<div class="wx-xcx-wrap" style="position: absolute;bottom:4px" v-on:click="getCode">
<img src="{{get_asset_url('cms:hengshui/img/xiaocx.png')}}" alt="">进入微信小程序预订门票
</div>
</div>


<div class="new-index-scenic-list">
<div class="new-index-scenic-item scenic-1" v-for="(item,index) in scenicList"
v-if="index<8"
v-on:click="onDetail(item.id)"
:style="'background-image: url( {{get_file_url()}}'+ item.cover  +'?width=259' +');width: 259px;height: 156px;margin-right:12px'">
<div class="new-index-scenic-item-title-box">
<div style="display: flex;justify-content: space-between">
<div></div>
<div class="new-index-scenic-item-title-right">
<div class="new-index-scenic-item-title"
style="border-radius: 10px">
@if($language == 'en')
Details
@elseif($language == 'ja')
詳細はこちら
@elseif($language == 'ko')
자세히 보기
@else
了解详情
@endif
<img
src="{{get_asset_url('cms:hengshui/img/chevron-right.png')}}"
alt=""
style="margin-right: 0">
</div>
</div>
</div>
</div>
<div class="new-index-scenic-item-body" style="width: 259px;height: 156px">
<div class="index-scenic-item-body-text-wrap1">
<div class="index-scenic-item-body-text1">
@{{item.name}}
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</div>

</div>
</div>

<div class="text4-content-right-xuanfu" v-on:click="getCode">
扫码预订
</div>
<div class="code-layer" style="display: none;">
<img :src="imgUrl" alt="" style="width: 100%;height: 100%">
</div>

<div class="notice-layer">
<div v-html="goods.new_notice">
</div>
</div>

<div class="map-layer">
<div id="baidu_map"></div>
</div>

<el-drawer
title="登录"
:visible.sync="drawer"
:with-header="false">
<iframe src="../login.html" frameborder="0" style="width: 100%;height: 100%"></iframe>
</el-drawer>
</div>
<script>
var myvue = new Vue({
    el: '#ticket_detail',
    data: function () {
    return {
        isLoad: false,
        isLoadyqs: true,
        pich: ztx.retailer_api + 'uploads/',
        tab_list: [
                        '景区介绍', '预订须知', '推荐景点'
                    ],
        tab_active: 0,
        year: 2018,
        month: 10,
        days: [],
        s: '',
        p: 0,
        day: {
        year: 2017,
        month: 10,
        day: 23
    },
    nowTime: '',
    showDate: false,
    alldays: null,
    prices: '',
    date_arr: [],
    datas: '',
    price: '',
    totalprice: 0,
    goods: '',
    pivot: '',
    week: '',
    getTimeData: '',
    time_active: 0,
    time_id: '',
    intro: '',
    nodes: '',
    map_1: '',
    map: '',
    imgUrl: '',
    la: '',
    whether: false,
    iTop: 0,
    itop_arr: [],
    num: 1,
    b_scenic_id: "",
    dtl_img: [],
    dtl_data: '',
    other: '',
    ad_head: [],
    rim_scenic: [],
    confirm_type: 1,
    authorization: '',
    userName: '',
    scenicList: [],
    drawer: false
    }
},
mounted: function () {
    var self = this;
    var id = ztx.getQueryString('id');
    self.getList(id);
    if (ztx.getQueryString('la')) {
    self.la = ztx.getQueryString('la');
}

    var url2 = ztx.retailer_api + "api/journey/scenic/list";
    $.ajax({
    url: url2,
    type: "GET",
    data: {
    page: self.page,
    size: self.pageSize,
},
success: function (res) {
    if (res.code == "200") {

    self.scenicList = res.data.scenic
self.$nextTick(function () {
    $.each($(".new-index-scenic-item"), function (idx, itm) {
    $(itm).hover(function () {
    $(this).find('.new-index-scenic-item-title-box').removeClass('animated fadeOutUp');
    $(this).find('.new-index-scenic-item-title-box').show().addClass('animated fadeInDown');
    $(this).find(".index-scenic-item-body-text-wrap").css('bottom', "16px");
    $(this).find(".index-scenic-item-body-text-wrap1").css('bottom', "24px");
    $(this).find(".new-index-scenic-item-body").css('background', 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%)')
}, function () {
    $(this).find('.new-index-scenic-item-title-box').removeClass('animated fadeInDown');
    $(this).find('.new-index-scenic-item-title-box').addClass('animated fadeOutUp');
    $(this).find(".index-scenic-item-body-text-wrap").css('bottom', "-16px");
    $(this).find(".index-scenic-item-body-text-wrap1").css('bottom', "16px");
    $(this).find(".new-index-scenic-item-body").css('background', 'linear-gradient(180deg, rgba(0, 0, 0, 0) 80.19%, rgba(0, 0, 0, 0.5) 100%)')
setTimeout(function () {
    $(this).find('.new-index-scenic-item-title-box').hide();
}, 500)
})
});
})
}
},
error: function (data) {
}
});
},
methods: {
    getNotice: function () {
    layer.open({
    type: 1,
    title: '预订须知',
    area: ['630px', '360px'],
    shade: 0.01,
    shadeClose: true,
    content: $(".notice-layer"),
end: function () {
    $(".notice-layer").hide();
}
});
},
handleChange: function (val) {
    console.log(val)
},
handleScroll: function () {
    var self = this;
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
//                  console.log(scrollTop,self.iTop)
if (self.iTop != 0) {
    if (scrollTop > self.iTop) {
    self.whether = true;
} else {
      self.whether = false;
  }
}
    $.each(self.itop_arr, function (idx, itm) {
    if (scrollTop > itm - 122) {
    self.tab_active = idx
}
})
},
getTabList: function (index) {
    var self = this;
    self.tab_active = index;
    $("body,html").animate({
    scrollTop: self.itop_arr[index] - 68
}, 400)
},
confirm: function () {
    var ticket_list = [{}];
    var data = {};
    var self = this;

    var url = 'api/tickets/order_ticket_confirm';
    var backUrl = 'detail.html?id=' + ztx.getQueryString('id');
    var type = 'POST';

    ticket_list[0].goods_id = self.datas.goods.id;
    ticket_list[0].num = self.num;
    ticket_list[0].date = self.s;
    data.share_id = self.time_id;
    data.ticket_list = ticket_list;
    data.seller_id = ztx.seller_id;
    data.goods_channel = ztx.goods_channel;
    self.isLoadyqs = false;
    ztx.ajaxLogin1(url, data, function (data) {
    self.isLoadyqs = true;
    if (data.code == 401) {
    sessionStorage.setItem("backUrl", backUrl);
    self.confirm_type = 1;
    if (parent.myvue9) {
    myvue9.onLogin();
}
} else if (data.code == 200) {
    sessionStorage.setItem("confirm_data", JSON.stringify(data.data));
    sessionStorage.setItem("link_child", JSON.stringify(self.datas.goods.link_child));
    window.location.href = 'ticket_confirm?la=' + self.la + '&id=' + ztx.getQueryString('id');
} else {
      layer.msg(data.message)
  }

}, type)
},
onLogin: function () {
    var self = this;
    if (self.drawer) {
    self.drawer = false;
    self.authorization = sessionStorage.getItem("Authorization");
    self.userName = sessionStorage.getItem("userName");
    if (parent.myvue9) {
    parent.myvue9.onLogin1()
}
} else {
      self.drawer = true;
  }
    console.log("onLogin");
},
getList: function (id) {
    var self = this;
    $.ajax({
    url: ztx.retailer_api + 'api/tickets/goods_detail/' + id + '/' + ztx.seller_id,
    type: "GET",
    data: {
    goods_channel: ztx.goods_channel
},
success: function (data) {
    self.isLoad = true;
    self.datas = data.data;
    self.goods = data.data.goods;
    self.pivot = self.goods.pivot;
    self.b_scenic_id = self.goods.b_scenic_id;
    self.dtl_img.push(data.data.goods.cover)
self.other = data.data.other;
    if (self.datas.goods.goods_date_price_stock.length == 0) {
    self.price = data.data.goods.pivot.sale_price;
    self.totalprice = self.price;
} else {
      var days = JSON.stringify(self.datas.goods.goods_date_price_stock);
      var day = JSON.parse(days);
      var alldays = [];
      for (var items in day) {
      alldays.push({
      day: items,
      price: day[items].price
  });
  }
      self.date_arr = alldays;
      self.s = self.date_arr[0].day;
      self.totalprice = self.date_arr[0].price;
      self.getTime(self.s);
      self.week = self.getSetWeek(self.s);
      self.alldayss(self.date_arr);
  }
    var info;
    if (self.datas.goods.info) {
    info = self.datas.goods.info.replace(/\<img/gi, '<img style="width:100% !important" ');
}
    var intro;
    if (self.datas.goods.intro) {
    intro = self.datas.goods.intro.replace(/\<img/gi, '<img style="width:100% !important" ');
}
    self.nodes = info ? info : "暂无";
    self.intro = intro ? intro : "暂无";
    self.setDate(self);
    self.getDetail();
    self.initMap(self.other.lon, self.other.lat);
},
error: function (data) {

}
});

    $.ajax({
    url: ztx.retailer_api + 'api/main/wechat_get_app_code_no_cross',
    type: "GET",
    data: {
    path: '/pages/tickets/trdetail?id=' + id
},
success: function (data) {
    if (data.data.url.substr(0, 1) == '/') {
    self.imgUrl = @json(config('app.url')) +'/' + data.data.url.slice(1);
} else {
      self.imgUrl = @json(config('app.url')) +data.data.url;
  }
},
error: function (data) {

}
});
},
getTab: function (index) {
    var self = this;
    self.tab_active = index;
},
getCode: function () {
    layer.open({
    area: ['344px', '344px'],
    type: 1,
    shade: 0.7,
    shadeClose: true, //开启遮罩关闭
    title: false, //不显示标题
    content: $('.code-layer'),
success: function () {

},
end: function () {
    $(".code-layer").hide();
}
});
},
//日历
getday: function (i) {
    var self = this;
    self.s = i.date;
    self.week = self.getSetWeek(self.s);
    self.totalprice = i.price;
    self.getTime(i.date);
//this.p = p;
//console.log(p);
// console.log(this.s);
},
getTimeId: function (idx, id) {
    var self = this;
    self.time_active = idx;
    self.time_id = id;
},
getTime: function (day) {
    var self = this;
    self.isLoadyqs = false;
    $.ajax({
    url: ztx.retailer_api + 'api/tickets/goods_share/' + ztx.getQueryString('id'),
    type: "GET",
    data: {
    date: day,
    goods_channel: ztx.goods_channel
},
success: function (data) {
    self.isLoadyqs = true;
    self.time_active = 0;
    self.getTimeData = [];
    self.time_id = '';
    if (data.data.length > 0) {
    self.getTimeData = data.data;
    var buy_data = [];
    for (var i = 0; i < data.data.length; i++) {
    if (data.data[i].buy == 1) {
    buy_data.push(i)
}
}
    self.time_active = buy_data[0];
    self.time_id = data.data[self.time_active].share_id;
}

},
error: function (data) {

}
});
},
setDate: function (self) { //设置初始值
var myDate = new Date();
    self.day = {
    year: myDate.getFullYear(),
    month: myDate.getMonth(),
    day: myDate.getDate()
};       //获取当前年份(4位)
// console.log(self.day);
},
getSetDay: function (value) { //是星期几
var num = new Date(value).getDay();
    return num;
},
getSetWeek: function (value) {
    var value = new Date(value).getDay();
    var num = ['一', '二', '三', '四', '五', '六', '日'][value - 1];
    return num
},
getCurrentMonthFirst: function () { //当月第一天
var startdate = new Date();
    startdate.setDate(1);
    return startdate;
},
format: function (fmt, date) { //时间格式化处理
var o = {
"M+": date.getMonth() + 1,                 //月份
"d+": date.getDate(),                    //日
"h+": date.getHours(),                   //小时
"m+": date.getMinutes(),                 //分
"s+": date.getSeconds(),                 //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds()             //毫秒
};
    if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
},
getCountDays: function (value) { //获取一个月的天数
var curDate = new Date(value);
    /* 获取当前月份 */
    var curMonth = curDate.getMonth();
    /*  生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
    curDate.setMonth(curMonth + 1);
    /* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */
    curDate.setDate(0);
    /* 返回当月的天数 */
    return curDate.getDate();
},
add: function () {
    var self = this;
    if (self.day.month >= 11) {
    self.day.year++;
    self.day.month = 0;
    self.nowTime = this.getNextMonth(self.nowTime)
var num1 = this.getSetDay(self.nowTime); //当月的1号
var daynum = this.getCountDays(self.nowTime);
    var today = new Date(self.nowTime);//获得当前日期
var year = today.getFullYear();//获得年份
var month = today.getMonth() + 1;//此方法获得的月份是从0---11，所以要加1才是当前月份
if (month < 10) {
    month = '0' + month
}
    self.days = [];
    for (var i = 0; i < 42; i++) {
    var sss = i - (num1 - 1);
    if (sss < 10) {
    sss = '0' + sss
}
    self.days.push({
    num: i - (num1 - 1),
isdays: num1 > (i) ? 1 : 0,
isflag: i - (num1 - 1) > daynum ? true : false,
date: year + '-' + month + '-' + sss
});
}
    for (var j = 0; j < self.alldays.length; j++) {
    for (var k = 0; k < self.days.length; k++) {
    if (self.days[k].date == self.alldays[j].day) {
//              console.log(self.days[k].date)
self.days[k].isshow = true;
    self.days[k].price = self.alldays[j].price
}
}
}
//  console.log(self.days)
} else {
      self.day.month++;
      self.nowTime = this.getNextMonth(self.nowTime)
  var num1 = this.getSetDay(self.nowTime); //当月的1号
  var daynum = this.getCountDays(self.nowTime);
      var today = new Date(self.nowTime);//获得当前日期
  var year = today.getFullYear();//获得年份
  var month = today.getMonth() + 1;//此方法获得的月份是从0---11，所以要加1才是当前月份
  if (month < 10) {
      month = '0' + month
  }
      self.days = [];
      for (var i = 0; i < 42; i++) {
      var sss = i - (num1 - 1);
      if (sss < 10) {
      sss = '0' + sss
  }
      self.days.push({
      num: i - (num1 - 1),
  isdays: num1 > (i) ? 1 : 0,
  isflag: i - (num1 - 1) > daynum ? true : false,
  date: year + '-' + month + '-' + sss
  });
  }
      for (var j = 0; j < self.alldays.length; j++) {
      for (var k = 0; k < self.days.length; k++) {
      if (self.days[k].date == self.alldays[j].day) {
      self.days[k].isshow = true;
      self.days[k].price = self.alldays[j].price
  }
  }
  }
  //  console.log(self.days)
  }
},
edit: function () {
    var self = this;
    if (self.day.month <= 0) {
    self.day.year--;
    self.day.month = 11;
    self.nowTime = this.getPreMonth(self.nowTime)
var num1 = this.getSetDay(self.nowTime); //当月的1号
var daynum = this.getCountDays(self.nowTime);
    var today = new Date(self.nowTime);//获得当前日期
var year = today.getFullYear();//获得年份
var month = today.getMonth() + 1;//此方法获得的月份是从0---11，所以要加1才是当前月份
if (month < 10) {
    month = '0' + month
}
    self.days = [];
    for (var i = 0; i < 42; i++) {
    var sss = i - (num1 - 1);
    if (sss < 10) {
    sss = '0' + sss
}
    self.days.push({
    num: i - (num1 - 1),
isdays: num1 > (i) ? 1 : 0,
isflag: i - (num1 - 1) > daynum ? true : false,
date: year + '-' + month + '-' + sss
});
}
    for (var j = 0; j < self.alldays.length; j++) {
    for (var k = 0; k < self.days.length; k++) {
    if (self.days[k].date == self.alldays[j].day) {
//              console.log(self.days[k].date)
self.days[k].isshow = true;
    self.days[k].price = self.alldays[j].price
}
}
}
//console.log(self.days)
} else {
      self.day.month--;
      self.nowTime = this.getPreMonth(self.nowTime)
  var num1 = this.getSetDay(self.nowTime); //当月的1号
  var daynum = this.getCountDays(self.nowTime);
      var today = new Date(self.nowTime);//获得当前日期
  var year = today.getFullYear();//获得年份
  var month = today.getMonth() + 1;//此方法获得的月份是从0---11，所以要加1才是当前月份
  if (month < 10) {
      month = '0' + month
  }
      self.days = [];
      for (var i = 0; i < 42; i++) {
      var sss = i - (num1 - 1);
      if (sss < 10) {
      sss = '0' + sss
  }
      self.days.push({
      num: i - (num1 - 1),
  isdays: num1 > (i) ? 1 : 0,
  isflag: i - (num1 - 1) > daynum ? true : false,
  date: year + '-' + month + '-' + sss
  });
  }
      for (var j = 0; j < self.alldays.length; j++) {
      for (var k = 0; k < self.days.length; k++) {
      if (self.days[k].date == self.alldays[j].day) {
  //              console.log(self.days[k].date)
  self.days[k].isshow = true;
      self.days[k].price = self.alldays[j].price
  }
  }
  }
  //console.log(self.days)
  }
},
getNextMonth: function (date) {  //获取下一个月
var arr = date.split('-');
    var year = arr[0]; //获取当前日期的年份
var month = arr[1]; //获取当前日期的月份
var day = arr[2]; //获取当前日期的日
var days = new Date(year, month, 0);
    days = days.getDate(); //获取当前日期中的月的天数
var year2 = year;
    var month2 = parseInt(month) + 1;
    if (month2 == 13) {
    year2 = parseInt(year2) + 1;
    month2 = 1;
}
    var day2 = day;
    var days2 = new Date(year2, month2, 0);
    days2 = days2.getDate();
    if (day2 > days2) {
    day2 = days2;
}
    if (month2 < 10) {
    month2 = '0' + month2;
}

    var t2 = year2 + '-' + month2 + '-' + day2;
    return t2;
},
getPreMonth: function (date) { //获取上一个月
var arr = date.split('-');
    var year = arr[0]; //获取当前日期的年份
var month = arr[1]; //获取当前日期的月份
var day = arr[2]; //获取当前日期的日
var days = new Date(year, month, 0);
    days = days.getDate(); //获取当前日期中月的天数
var year2 = year;
    var month2 = parseInt(month) - 1;
    if (month2 == 0) {
    year2 = parseInt(year2) - 1;
    month2 = 12;
}
    var day2 = day;
    var days2 = new Date(year2, month2, 0);
    days2 = days2.getDate();
    if (day2 > days2) {
    day2 = days2;
}
    if (month2 < 10) {
    month2 = '0' + month2;
}
    var t2 = year2 + '-' + month2 + '-' + day2;
    return t2;
},
alldayss: function (e) {
    var self = this;
    self.alldays = e;
// console.log(self.alldays);
    var firstDate = this.getCurrentMonthFirst()
    var time = this.format("yyyy-MM-dd", firstDate);
    var num1 = this.getSetDay(time); //当月的1号
var today = new Date(time);//获得当前日期
// console.log(today.getFullYear())
var year = today.getFullYear();//获得年份
var month = today.getMonth() + 1;//此方法获得的月份是从0---11，所以要加1才是当前月份
if (month < 10) {
    month = '0' + month
}
    self.nowTime = time;
    var daynum = this.getCountDays(time);
    for (var i = 0; i < 42; i++) {
    var sss = i - (num1 - 1);
    if (sss < 10) {
    sss = '0' + sss
}
    self.days.push({
    num: i - (num1 - 1),
isdays: num1 > (i) ? 1 : 0,
isflag: i - (num1 - 1) > daynum ? true : false,
date: year + '-' + month + '-' + sss
});
}
    for (var j = 0; j < self.alldays.length; j++) {
    for (var k = 0; k < self.days.length; k++) {
    if (self.days[k].date == self.alldays[j].day) {
//              console.log(self.days[k].date)
self.days[k].isshow = true;
    self.days[k].price = self.alldays[j].price
}
}
}
// console.log(self.days)

},
getDetail: function () {
    var self = this;
    $.ajax({
    url: ztx.retailer_api + 'api/journey/scenic/detail/' + self.b_scenic_id,
    type: "GET",
    data: {
    seller_id: ztx.seller_id,
    //                          goods_channel:ztx.goods_channel
},
success: function (data) {
//                          console.log(self.dtl_img)
if (data.data.scenic.scenic_tickets.length > 0) {
    self.ad_head = data.data.scenic.scenic_tickets.ad_head;
}

    self.dtl_data = data.data.scenic;
    self.rim_scenic = data.data.rim_scenic;

    self.$nextTick(function () {

    var swiper = new Swiper('.swiper-container', {
    nextButton: '.detail-swiper-next',
    prevButton: '.detail-swiper-prev',
    paginationClickable: true
});

setTimeout(function () {
//滚动tab
var tab_div = document.getElementsByClassName('index-news-tab-list-wrap')[0];
self.iTop = tab_div.offsetTop;
while (tab_div = tab_div.offsetParent) {
self.iTop += tab_div.offsetTop
}

var list_arr = document.getElementsByClassName('hotel-detail-wrapper-item');

self.itop_arr = [];
$.each(list_arr, function (idx, itm) {
self.itop_arr.push(itm.offsetTop)
});

}, 1000);
window.addEventListener("scroll", this.handleScroll);
})
},
error: function (data) {

}
});
},
getMore: function () {
    var self = this;
    var json = {
"title": "", //相册标题
"id": 1, //相册id
"start": 0, //初始显示的图片序号，默认0
"data": []   //相册包含的图片，数组格式
};
    $.each(self.ad_head, function (idx, itm) {
    var obj = {
"alt": '',
"pid": idx, //图片id
"src": self.pich + itm.image, //原图地址
"thumb": self.pich + itm.image //缩略图地址
};
    json.data.push(obj);
});
    self.$nextTick(function () {
    layer.photos({
    photos: json
    , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
})
},
initMap: function (lon, lat) {
    var self = this;
    self.createMap(lon, lat);//创建地图
self.setMapEvent();//设置地图事件
self.addMapControl();//向地图添加控件
},
createMap: function (lon, lat) {
    var self = this;
    self.map = new BMap.Map("baidu_map");//在百度地图容器中创建一个地图
var point = new BMap.Point(lon, lat);//定义一个中心点坐标
//                  var point1 = new BMap.Point(98.466092,25.021138);//定义一个中心点坐标
self.map.centerAndZoom(point, 16);//设定地图的中心点和坐标并将地图显示在地图容器中
// window.map = map;//将map变量存储在全局
var marker = new BMap.Marker(point);        // 创建标注
self.map.addOverlay(marker);                     // 将标注添加到地图中
    /*var infoWindow = new BMap.InfoWindow('<p style="color: #f7931e;font-size:14px;">和顺古镇</p><p>地址：保山市腾冲市和顺镇腾冲和顺景区</p><p>电话：0875-5158369</p>');*/
marker.addEventListener("click", function () {
// this.openInfoWindow(infoWindow);
});
// marker.openInfoWindow(infoWindow);
},
setMapEvent: function () {
    var self = this;
    self.map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
self.map.enableScrollWheelZoom();//启用地图滚轮放大缩小
self.map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
self.map.enableKeyboard();//启用键盘上下左右键移动地图
},
addMapControl: function () {
//向地图中添加缩放控件
var self = this;
    var ctrl_nav = new BMap.NavigationControl({
    anchor: BMAP_ANCHOR_TOP_LEFT,
    type: BMAP_NAVIGATION_CONTROL_LARGE
});
    self.map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1});
    self.map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
    self.map.addControl(ctrl_sca);
},
getMap: function () {
    layer.open({
    area: ['1200px', '500px'],
    type: 1,
    shade: 0.7,
    shadeClose: true, //开启遮罩关闭
    title: false, //不显示标题
    content: $('.map-layer'),
success: function () {

},
end: function () {

}
});
},
goDetail: function (id) {
    window.location.href = 'travel.html?id=' + id + '&la=' + this.la;
},
onDetail: function (id) {
    location.href = '/scenic_detail/' + id + '.html?id=' + id;
},
},
watch: {}
})
</script>
@stop
    color: #F13D15;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.text4-content-left span {
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    color: #666666;
}

.text4-content-right {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #FFFFFF;
    padding: 8px 16px;
    background: #09A79D;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
}

.text4-content-right-xuanfu {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #FFFFFF;
    padding: 8px 16px;
    background: #09A79D;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    position: fixed;
    bottom: 5%;
    right: 2%;
    z-index: 99999;
}


#changedate {
    width: 100%;
    height: 100%;
    /*box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1);*/
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 8px;
    margin-bottom: 16px;
    /*display: none;*/
}

.dateBlock {
    width: 100%;
    height: 100%;
    /*padding: 10px;*/
    /*height: auto;*/
}

.dateBlock .head {
    /*width: 100%;*/
    font-weight: 700;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: #1D2129;
    padding: 12px;
    padding-bottom: 10px;
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-between; /* Safari 6.1+ */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.dateBlock .body {
    padding: 16px;
    height: 287px;
}

.left-icon, .right-icon {
    /*width: 30px;*/
    /*height: 30px;*/
    /*background: #667AFF;*/
    /*border-radius: 50%;*/
    /*color: #fff;*/
    /*text-align: center;*/
    /*line-height: 30px;*/
    /*font-size: 17px;*/
    cursor: pointer;
}

.body .heads {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.body .heads .sets {
    /*font-size: 13px;*/
    /*background: #eaeaea;*/
    width: 14.285%;
    height: 22px;
    line-height: 22px;
    text-align: center;
    color: #999999;
    /*padding: 4px 0px;*/
}

.body .heads .sets:first-child,
.body .heads .sets:last-child {
    /*color: #AB3D2C;*/
}

.day {
    width: 100%;
    position: relative;
    font-size: 0px;
    /*border-left: 1px solid #eaeaea;*/
}

.day .in {
    font-size: 13px;
    text-align: center;
    width: 14.28%;
    /*background: white;*/
    display: inline-block;
    margin-bottom: 4px;
    /*border-right: 1px solid #eaeaea;*/
    /*border-bottom: 1px solid #eaeaea;*/
}

.day .incolor {
    background: #09A79D;
    color: white;
    position: relative;
    width: 100%;
    height: 100%
}

.day .incolor > div {
    position: relative;
    z-index: 1;
}

.day .incolor:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid #09A79D;
    background: #09A79D;
    border-radius: 4px;
    top: -1px;
    left: -1px;
}


.map-laye {
    display: none;
}

.map-layer,
#baidu_map_1 {
    width: 100%;
    height: 100%;
}

.code-layer {
    display: none;
}


.hotel-detail-banner-wrap {
    width: 100%;
    height: 460px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}

.hotel-detail-banner-left {
    width: 740px;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background: #efefef;
}

.hotel-detail-banner-left.banner-100 {
    width: 100%;
}

.hotel-detail-banner-right-item {
    width: 452px;
    height: 226px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background: #efefef;
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*flex-direction: column;*/
    position: relative;
    margin-bottom: 8px;
}

.hotel-detail-banner-right-item:last-child {
    margin-bottom: 0;
}

.hotel-detail-banner-right-item img {
    /*margin-bottom: 12px;*/
    position: relative;
    z-index: 1;
    margin-right: 4px;
}

.hotel-detail-banner-right-item p {
    font-size: 14px;
    line-height: 100%;
    color: #FFFFFF;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.banner-r-i-text {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.6);
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.index-news-tab-list-wrap {
    display: flex;
    margin-bottom: 32px;
    padding-top: 14px;
    position: relative;
    /*background: #fff;*/
}

.index-news-tab-list-wrap.fixTitle {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    background: #fff;
}

.index-news-tab-list {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    /*border-bottom: 1px solid rgba(0, 0, 0, 0.1);*/
    margin-bottom: 32px;
}

.index-news-tab-item {
    font-size: 16px;
    line-height: 100%;
    color: #666666;
    padding-bottom: 14px;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 27px;
    position: relative;
}

.index-news-tab-item.tab-item-active:after {
    position: absolute;
    content: "";
    display: block;
    background: #09A79D;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
}

.index-news-tab-item.tab-item-active {
    font-weight: bold;
    color: #09A79D;
}

.index-news-tab-item:hover {
    font-weight: bold;
    color: #09A79D;
}

.index-news-tab-item:hover:after {
    position: absolute;
    content: "";
    display: block;
    background: #09A79D;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
}

.wx-xcx-wrap {
    position: absolute;
    right: 0;
    font-size: 14px;
    line-height: 22px;
    color: #999999;
    display: flex;
    align-items: center;
    cursor: pointer;
    top: -5px;
}

.wx-xcx-wrap img {
    margin-right: 6px;
}

.index-scenic-box-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.index-culture-box-left-title {
    font-size: 32px;
    line-height: 100%;
    color: #282828;
    font-weight: bold;
    margin-bottom: 24px;
}

.new-index-hotel-list {
    display: flex;
    flex-wrap: wrap;
}

.new-index-hotel-item {
    width: 351px;
    height: 197px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    margin-right: 12px;
    margin-bottom: 12px;
    cursor: pointer;
}

.new-index-hotel-item:nth-child(4n) {
    margin-right: 0;
}

.new-index-hotel-item-img {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    top: 0;
    left: 0;
    border-radius: 4px;
    transition: 0.6s;
}

.new-index-hotel-item-bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    transition: .6s;
    /*display: none;*/
}

.new-index-hotel-item-text-wrap {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    padding: 0 0 17px 24px;
    transition: .6s;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    width: calc(100% - 24px);
}

.hotel-item-text-1 {
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    color: #FFFFFF;
    margin-bottom: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 24px;
}

.text2-date-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #282828;
    margin-bottom: 8px;
}

.rl-img {
    position: absolute;
    right: 8px;
    top: 8px;
}

.confirm-left .el-input-number--mini {
    width: 116px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #D8D8D8;
    border-radius: 4px;
}

.confirm-left .el-input--mini .el-input__inner {
    height: 32px;
    line-height: 32px;
    /*margin-top: -4px;*/
    padding: 0;
    width: 48px;
    background: #EEEEEE;
    position: absolute;
    border-radius: 0;
    left: 34px;
}

.confirm-left .el-input-number--mini .el-input-number__decrease,
.confirm-left .el-input-number--mini .el-input-number__increase {
    width: 32px;
    height: 32px;
    margin-top: -1px;
    border: 0;
    background: #EEEEEE;
}

.confirm-left .el-input--mini {
    position: relative;
}

.confirm-left .el-input-number__decrease {
    left: 0px;
}

.confirm-left .el-input-number__increase {
    right: 0;
}

.confirm-left .el-input-number__decrease:hover,
.confirm-left .el-input-number__increase:hover {
    color: inherit;
}

.confirm-left-text {
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: #86909C;
    text-align: right;
}

.detail-swiper-wrap {
    width: 1200px;
    height: 600px;
    border-radius: 8px;
    /*background: #efefef;*/
    margin-bottom: 32px;
    overflow: hidden;
}

.swiper-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.detail-swiper-prev {
    width: 60px;
    height: 96px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    left: 20px;
    top: 50%;
    margin-top: -48px;
    z-index: 1;
    position: absolute;
}

.detail-swiper-next {
    width: 60px;
    height: 96px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    right: 20px;
    top: 50%;
    margin-top: -48px;
    z-index: 1;
    position: absolute;
}

.detail-box-left-title {
    font-weight: 600;
    font-size: 40px;
    line-height: 48px;
    color: #282828;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.detail-box-left-title-tip {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #09A79D;
    padding: 0 4px;
    background: #F5F5F5;
    border: 1px solid #09A79D;
    border-radius: 4px;
    margin-left: 10px;
}

.detail-box-left-address {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #666666;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.map-img {
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    color: #09A79D;
    margin-left: 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.map-img img {
    margin-right: 4px;
}

.detail-box-left-content {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}

.detail-box-left-con1 {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: #FFFFFF;
    padding: 0 4px;
    background: #F13D15;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-right: 10px;
}

.detail-box-left-con2 {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #09A79D;
    padding: 0 4px;
    border: 1px solid #09A79D;
    border-radius: 4px;
    margin-right: 10px;
}

.detail-box-left-con3 {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #0C77F5;
    padding-right: 10px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    margin-right: 10px;
}

.detail-box-left-con4 {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #666666;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.detail-box-left-text1 {
    font-weight: 600;
    font-size: 28px;
    line-height: 36px;
    color: #282828;
    margin-bottom: 8px;
}

.detail-box-left-text2 {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.detail-box-left-text2 span {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
}

.detail-box-left-text3 {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.9);
}

.notice-layer {
    padding: 0 10px;
    /*white-space:pre-line;*/
    display: none;
}

.new-index-scenic-list {
    display: flex;
    flex-wrap: wrap;
}

.new-index-scenic-item {
    width: 682px;
    height: 228px;
    margin-right: 12px;
    margin-bottom: 32px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 16px;
    cursor: pointer;
    border-radius: 20px;
    position: relative;
}

.new-index-scenic-item:nth-child(2n) {
    margin-right: 0;
}

.new-index-scenic-item.scenic-1:nth-child(4n) {
    margin-right: 0 !important;
}

.new-index-scenic-item.scenic-1:nth-child(2n) {
    margin-right: 12px;
}

.new-index-scenic-item-title {
    width: 76px;
    height: 22px;
    padding: 4px 10px 4px 16px;
    display: flex;
    background: #09A79D;
    border-radius: 4px;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    line-height: 100%;
    color: #FFFFFF;
    position: absolute;
    overflow: hidden;
    right: 0;
}

.new-index-scenic-item-title img {
    margin-right: 4px;
}

.new-index-scenic-item-title-box {
    display: none;
    animate-duration: .2s;
    animate-delay: .2s;
    position: relative;
    z-index: 1;
    padding-top: 5px;
}

.new-index-scenic-item-body {
    position: absolute;
    width: 682px;
    height: 228px;
    border-radius: 20px;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 80.19%, rgba(0, 0, 0, 0.5) 100%);
    padding: 16px;
    overflow: hidden;
    transition: 2s;
}

.index-scenic-item-body-text-wrap {
    position: absolute;
    /*bottom: 16px;*/
    padding-right: 16px;
    transition: .6s;
    bottom: -38px;
}

.index-scenic-item-body-text-wrap1 {
    bottom: 16px;
    position: absolute;
    /*bottom: 16px;*/
    padding-right: 16px;
    transition: .6s;
}

.index-scenic-item-body-text1 {
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #FFFFFF;
}

.index-scenic-item-body-text2 {
    margin-top: 12px;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #FFFFFF;
    width: 100%;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.index-scenic-item-body-text3 {
    margin-top: 12px;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #FFFFFF;
    width: 100%;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.hotel-list-box-1 {
    background: #FFFFFF;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);

    /*margin-bottom: 32px;*/
}

.hotel-list-title {
    width: 1200px;
    margin: 0 auto;
    padding: 12px 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #09A79D;
}

.hotel-list-title span:nth-child(1) {
    /*margin-left: 6px;*/
    margin-right: 6px;
    color: #09A79D;
}

.hotel-list-title span:nth-child(2) {
    margin-left: 6px;
    margin-right: 6px;
    color: #09A79D;
    /*color: #444D59;*/
    /*margin-left: 6px;*/
}

.hotel-list-title span:nth-child(3) {
    color: #444D59;
    margin-left: 6px;
}