|
|
<!DOCTYPE html>
|
|
|
<html
|
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
|
|
|
layout:decorate="~{base/layout}">
|
|
|
<div layout:fragment="content">
|
|
|
<!--slider section-->
|
|
|
<div class="slider_wrapper">
|
|
|
<div class="slider-pro" id="my-slider">
|
|
|
<div class="sp-slides">
|
|
|
|
|
|
<div class="sp-slide">
|
|
|
<h3 class="sp-layer sp-black sp-padding hide-small-screen" data-width="80%" data-position="topRight"
|
|
|
data-horizontal="8%" data-vertical="25%" data-show-transition="right" data-hide-transition="up"
|
|
|
data-show-delay="800" data-hide-delay="100">
|
|
|
<span class="title-aaa">湖南茶陵旅游网</span>——占地面积2500平方公里！茶陵县是中国历史上唯一个以茶命名的行政县。因地处“茶山之阴”，而中华民族始祖炎帝神农氏“崩葬于茶乡之尾”而得名。又因南宋县令刘子迈铸铁犀镇河妖而有“犀城”之美誉。是井冈山革命根据地六县之一，湘赣革命根据地重点县、模范县，是毛泽东亲手缔造的中国第一个红色政权。
|
|
|
<span class="read-more"><a href="javascript:void(0);">查看更多</a></span>
|
|
|
</h3>
|
|
|
</div>
|
|
|
<div class="sp-slide">
|
|
|
<h3 class="sp-layer sp-black sp-padding hide-small-screen" data-width="80%" data-position="topRight"
|
|
|
data-horizontal="8%" data-vertical="25%" data-show-transition="right" data-hide-transition="up"
|
|
|
data-show-delay="800" data-hide-delay="100">
|
|
|
<span class="title-aaa">湖南茶陵旅游系统</span>
|
|
|
——欢迎大家的到来
|
|
|
——欢迎大家的到来
|
|
|
<span class="read-more"><a href="javascript:void(0);">查看更多</a></span>
|
|
|
</h3>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main-page-container">
|
|
|
<div class="container">
|
|
|
<div class="row med_toppadder30">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="cy-title">
|
|
|
<h2>热门酒店</h2>
|
|
|
<div class="pull-right">
|
|
|
|
|
|
<div class="main-tabs">
|
|
|
<ul class="nav nav-tabs">
|
|
|
<li>
|
|
|
<a th:href="@{/reserve/reserveHotelListUI}">更多 <i
|
|
|
class="fa fa-angle-right"></i></a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main-cont">
|
|
|
<div class="tab-content">
|
|
|
<div class="tab-pane active" id="c01">
|
|
|
<div id="oc-news" class="owl-carousel owl-theme">
|
|
|
<div th:each="hotel:${top10Hotel}" class="item">
|
|
|
<div class="cy-news-post clearfix">
|
|
|
<div class="entry-image">
|
|
|
<a th:href="@{/reserve/hotelDetailsUI(id=${hotel.id})}"><img
|
|
|
class="image_fade"
|
|
|
th:src="@{'/images/'+ ${hotel.image} +'.jpg'}"
|
|
|
alt="Image"></a>
|
|
|
</div>
|
|
|
<div class="entry-title">
|
|
|
<h4><a th:href="@{/reserve/hotelDetailsUI(id=${hotel.id})}"
|
|
|
data-toggle="tooltip"
|
|
|
data-container="body"
|
|
|
th:title="${hotel.name}" th:text="${hotel.name}"></a>
|
|
|
</h4>
|
|
|
</div>
|
|
|
<div class="entry-content">
|
|
|
<p th:text="${hotel.describe}">
|
|
|
</p>
|
|
|
</div>
|
|
|
<ul class="entry-meta clearfix">
|
|
|
<li th:text="${#calendars.format(hotel.createDate,'yyyy-MM-dd')}"><i
|
|
|
class="fa fa-calendar"></i></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="row med_bottompadder30">
|
|
|
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
|
|
|
<div class="cy-title">
|
|
|
<h2>热门景点</h2>
|
|
|
<div class="pull-right">
|
|
|
|
|
|
<div class="main-tabs">
|
|
|
<a th:href="@{/reserve/reserveAttractionsListUI}">更多 <i
|
|
|
class="fa fa-angle-right"></i></a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="main-cont">
|
|
|
<div class="tab-content">
|
|
|
<div class="tab-pane active" id="cp01">
|
|
|
<div id="oc-kx" class="owl-carousel owl-theme">
|
|
|
<div th:each="attractions:${top10Attractions}" class="item">
|
|
|
<div class="cy-kx-post clearfix">
|
|
|
<a th:href="@{/reserve/attractionsDetailsUI(id=${attractions.id})}">
|
|
|
<div class="entry-image">
|
|
|
<img th:src="@{'/images/'+ ${attractions.image} +'.jpg'}"
|
|
|
alt="Image">
|
|
|
</div>
|
|
|
<div class="entry-content">
|
|
|
<p th:text="${attractions.name}"></p>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--<div class="item">-->
|
|
|
<!--<div class="cy-kx-post clearfix">-->
|
|
|
<!--<a href="javascript:void(0);">-->
|
|
|
<!--<div class="entry-image">-->
|
|
|
<!--<img class="image_fade" src="images/pic-kx04.jpg" alt="Image">-->
|
|
|
<!--</div>-->
|
|
|
<!--<div class="entry-content">-->
|
|
|
<!--<p>xxxxxxxxxxxx</p>-->
|
|
|
<!--</div>-->
|
|
|
<!--</a>-->
|
|
|
<!--</div>-->
|
|
|
<!--</div>-->
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <div class="tab-pane" id="c02">...</div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="cy-title">
|
|
|
<h2>景区游玩攻略</h2>
|
|
|
<div class="pull-right">
|
|
|
|
|
|
<div class="main-tabs">
|
|
|
<ul class="nav nav-tabs">
|
|
|
<li>
|
|
|
<a th:href="@{/strategy/travelStrategyListUI}">更多 <i
|
|
|
class="fa fa-angle-right"></i></a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<ul class="main-cy-thesis">
|
|
|
<li th:each="strategy:${top10Strategy}"><a th:href="@{/strategy/travelStrategyDetailsUI(id=${strategy.id})}"
|
|
|
data-toggle="tooltip" data-container="body"
|
|
|
th:title="${strategy.title}" th:text="${strategy.title}">xxxxxxxxxxxx</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
<div class="cy-title">
|
|
|
<h2>热门路线</h2>
|
|
|
<div class="pull-right">
|
|
|
<div class="main-tabs">
|
|
|
<ul class="nav nav-tabs">
|
|
|
<li>
|
|
|
<a th:href="@{/route/travelRouteListUI}">更多 <i
|
|
|
class="fa fa-angle-right"></i></a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<ul class="main-cy-thesis">
|
|
|
<li th:each="route:${top10Route}"><a th:href="@{/route/travelRouteDetailsUI(id=${route.id})}"
|
|
|
data-toggle="tooltip" data-container="body"
|
|
|
th:title="${route.name}" th:text="${route.name}">xxxxxxxxxxxx</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
|
|
|
<div class="cy-title">
|
|
|
<h2>订阅信息</h2>
|
|
|
</div>
|
|
|
<div class="text-center med_toppadder5">
|
|
|
<img src="images/pic-wx-qrcode1.jpg" width="200px" alt="">
|
|
|
<p class="med_toppadder10">请关注我们</p>
|
|
|
</div>
|
|
|
<div class="cy-title">
|
|
|
<h2>联系我们</h2>
|
|
|
</div>
|
|
|
<ul class="cy-contact">
|
|
|
<li><i class="fa fa-map-marker"></i> 地址：湖南省茶陵县</li>
|
|
|
<li><i class="fa fa-compass"></i> 邮编：412400</li>
|
|
|
<li><i class="fa fa-phone"></i> 电话：150XXXX6XX4</li>
|
|
|
<li><i class="fa fa-envelope"></i> 电子邮箱：2037XXXXXX@qq.com</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--main section end-->
|
|
|
<script src="js/jquery_min.js"></script>
|
|
|
<script src="js/bootstrap.min.js"></script>
|
|
|
<script src="js/wow.min.js"></script>
|
|
|
<script src="plugins/slider-pro/js/jquery.sliderPro.min.js"></script>
|
|
|
<script src="plugins/owlcarousel/js/owl.carousel.min.js"></script>
|
|
|
<script src="js/custom.js"></script>
|
|
|
<!--js code-->
|
|
|
<script type="text/javascript">
|
|
|
$(document).ready(function () {
|
|
|
$('#my-slider').sliderPro({
|
|
|
arrows: true,
|
|
|
waitForLayers: true,
|
|
|
autoplay: false,
|
|
|
fade: true,
|
|
|
buttons: false,
|
|
|
autoScaleLayers: false,
|
|
|
width: 1170,
|
|
|
height: 400
|
|
|
});
|
|
|
$('.image_fade').hover(function () {
|
|
|
$(this).filter(':not(:animated)').animate({opacity: 0.8}, 400);
|
|
|
}, function () {
|
|
|
$(this).animate({opacity: 1}, 400);
|
|
|
});
|
|
|
$("#oc-news").owlCarousel({
|
|
|
margin: 30,
|
|
|
nav: true,
|
|
|
loop: true,
|
|
|
// autoplay:true,
|
|
|
// autoplayTimeout:6000,
|
|
|
// autoplayHoverPause: true,
|
|
|
dots: false,
|
|
|
navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
|
|
|
responsive: {
|
|
|
0: {items: 1},
|
|
|
480: {items: 2},
|
|
|
768: {items: 3},
|
|
|
992: {items: 4}
|
|
|
}
|
|
|
});
|
|
|
$("#oc-kx").owlCarousel({
|
|
|
margin: 15,
|
|
|
nav: true,
|
|
|
loop: true,
|
|
|
// autoplay:true,
|
|
|
// autoplayTimeout:5000,
|
|
|
// autoplayHoverPause: true,
|
|
|
dots: false,
|
|
|
navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
|
|
|
responsive: {
|
|
|
0: {items: 1},
|
|
|
480: {items: 2},
|
|
|
768: {items: 3},
|
|
|
992: {items: 4}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
setInterval(function () {
|
|
|
var buy = $('.sp-previous-arrow')[0];//给你的a标签加一个id :btnBuy
|
|
|
buy.click();
|
|
|
}, 5000)//后面的500是以毫秒为单位。
|
|
|
});
|
|
|
</script>
|
|
|
</div>
|
|
|
</html>
|
