diff --git a/reserve-attractions-details.html b/reserve-attractions-details.html
new file mode 100644
index 0000000..c8c6bf4
--- /dev/null
+++ b/reserve-attractions-details.html
@@ -0,0 +1,112 @@
+//在线预定的页面
+<!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">
+    <!--header wrapper end-->
+    <!--med_tittle_section-->
+    <div class="med_tittle_section">
+        <div class="med_img_overlay"></div>
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                    <div class="med_tittle_cont_wrapper">
+                        <div class="med_tittle_cont">
+                            <ol class="breadcrumb">
+                                <li><a th:href="@{/}">系统首页</a></li>
+                                <li>景点列表</li>
+                                <li>预订</li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- med_tittle_section End -->
+    <!--service section start-->
+    <div class="page-container">
+        <div class="container">
+            <div class="row med_toppadder50 med_bottompadder50">
+                <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
+                    <div class="news-detail-box">
+                        <h3 th:text="${attractions.name}"></h3>
+                        <div class="author-info">
+                            <span th:text="${#calendars.format(attractions.createDate,'yyyy-MM-dd')}"></span>
+                            <span>所在地：<span th:text="${attractions.address}"></span></span>
+                            <span>浏览次数：13</span>
+                        </div>
+                        <div class="news-detail-content">
+                            <p th:text="${attractions.describe}">
+                            </p>
+                            <div align="right" style="float:right">
+                                <button th:if="${flag == false}" th:onclick="cancelAttractionsReserve([[${attractions.id}]],'预订')"
+                                        type="button" class="btn btn-default btn-info">预订
+                                </button>
+                                <button th:if="${flag == true }" th:onclick="cancelAttractionsReserve([[${attractions.id}]],'取消预订')"
+                                        type="button" class="btn btn-default btn-info">
+                                    取消预订
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
+                    <div class="sider-card">
+                        <div class="sider-card-header">
+                            <h3>热门景点</h3>
+                        </div>
+                        <ul class="sider-list-model-a">
+                            <li th:each="attractions:${top10Attractions}">
+                                <a th:href="@{/reserve/attractionsDetailsUI(id=${attractions.id})}" th:text="${attractions.name}"></a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="sider-card">
+                        <div class="sider-card-header">
+                            <h3>热门酒店</h3>
+                        </div>
+                        <ul class="sider-list-model-b">
+                            <li th:each="hotel:${top10Hotel}">
+                                <a th:href="@{/reserve/hotelDetailsUI(id=${hotel.id})}" th:text="${hotel.name}"></a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+    <!--service section end-->
+    <script th:inline="javascript">
+        function cancelAttractionsReserve(id, str) {
+            $.ajax({
+                url: '/travel/reserve/cancelAttractionsReserve',
+                data: {"id": id},
+                type: 'post',
+                dataType: 'json',
+                success: function (result) {
+                    if (result.code === 200) {
+                        if(str == '预订'){
+                            confirm(str + "成功!"); //在页面上弹出对话框
+                            window.location.href = "/travel/reserve/reserveManageUI";
+                        }else{
+                            confirm(str + "成功!"); //在页面上弹出对话框
+                            window.location.href = "/travel/reserve/reserveAttractionsListUI";
+                        }
+                    } else {
+                        layer.open({
+                            title: '错误提示',
+                            content: result.message
+                        });
+                    }
+                }
+            })
+        }
+    </script>
+</div>
+
+</html>
