<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2024/12/14
Time: 下午10:56
To change this template use File | Settings | File Templates.
--%>
<%@ page import="java.sql.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="css/homepage.css">
<title>宿优圈(∠・ω< )⌒★Showyou circle!</title>
<link rel="stylesheet" href="loading.css">
<script>
$(window).on("load", function(){
$(".loader").fadeOut();
});
// 弹出客服电话
function showPhoneNumber() {
alert("客服电话: 123456789"); // 替换为实际的客服电话
}
</script>
<div class="loader"></div>
<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.min.js"></script>
<script>
new WOW({
boxClass: 'wow',
scrollContainer: '#ul',
offset: 100,
live: true,
animateClass: 'bounceInUp'
}).init();
</script>
</head>
<body>
<style>
.all {
display: flex; /* 使用 Flexbox */
flex-direction: row; /* 水平排列 */
justify-content: center; /* 在主轴上居中 */
align-items: flex-start; /* 在交叉轴上顶部对齐 */
width: 50%; /* 设置宽度为60% */
margin: 0 auto; /* 使容器居中 */
}
.carousel {
width: 50%; /* 设置轮播图宽度为50% */
margin-right: 20px; /* 右侧留出间距 */
}
.left{
width: 50%;
margin-right: 20px;
position: relative;
width: 736px; /* 设置宽度为736px */
float: left; /* 使轮播图浮动到左侧 */
margin-right: 20px; /* 右侧留出间距 */
}
.homestay-container {
width: 50%; /* 设置民宿列表宽度为50% */
display: flex;
flex-direction: column; /* 垂直排列 */
align-items: flex-start; /* 左对齐 */
}
/* 轮播图样式 */
.carousel {
top: 42px;
position: relative;
width: 736px; /* 设置宽度为736px */
height: 409px; /* 设置高度为409px */
overflow: hidden;
float: left; /* 使轮播图浮动到左侧 */
margin-right: 20px; /* 右侧留出间距 */
margin-bottom: 10px; /* 向下留出10px的间隔 */
}
.map-container{
width: 100%;
height: 500px;
border: none;
position: relative;
top:50px;
}
.carousel img {
width: 100%;
height: 100%; /* 高度自适应 */
object-fit: cover; /* 保持图片比例 */
}
.carousel .slides {
display: flex;
transition: transform 0.5s ease;
}
.carousel .slide {
min-width: 100%;
}
.carousel .controls {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.carousel .control {
background-color: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
padding: 10px;
}
</style>
<style>
.homestay-container {
position: relative; /* 设置为相对定位 */
top: 25px; /* 设置上边距 */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-left: 20px; /* 留出空间给轮播图 */
}
.pas_item {
width: 266px; /* 设置宽度为266px */
display: flex; /* 使用 Flexbox */
flex-direction: column; /* 垂直排列 */
justify-content: space-between; /* 在垂直方向上分散对齐 */
margin-bottom: 20px; /* 列间距 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
border-radius: 8px; /* 圆角 */
overflow: hidden; /* 防止内容溢出 */
}
.pas_link {
display: flex; /* 使用 Flexbox */
flex-direction: column; /* 垂直排列 */
height: 100%; /* 设置高度为100%以填满父容器 */
text-decoration: none; /* 去掉链接下划线 */
}
.pas_image-container {
height: 200px; /* 固定高度 */
overflow: hidden; /* 防止图片溢出 */
}
.pas_image {
width: 100%; /* 图片宽度100% */
height: auto; /* 高度自适应 */
transition: transform 0.3s; /* 添加过渡效果 */
}
.pas_image-container:hover .pas_image {
transform: scale(1.05); /* 悬停时放大效果 */
}
.pas_info {
padding: 10px; /* 内边距 */
}
.wow.bounceInUp {
width: 100%; /* 确保动画元素宽度为100% */
}
body, html {
margin: 0; /* 添加 margin: 0 */
padding: 0;
overflow: hidden;
height: 100%;
}
</style>
<header class="not-top-img" id="page-header">
<nav id="nav" class="show">
<div id="nav-group">
<span id="blog_name">
<a href="/homepage.jsp">
<img src="images/logo3.png" id="logo1" style="position: absolute; top: 10px; left: 300px; z-index: 3;" />
</a>
</span>
<div id="menus" style="position: relative; top: 25px;">
<div class="menus_items">
<div class="menus_item">
<a class="site-page" href="javascript:void(0);" draggable="false" data-pjax-state="">
<span> 民宿优选</span>
</a>
<ul class="menus_item_child" style="background: #ffffff;">
<li>
<a class="site-page child faa-parent animated-hover" href="/list.jsp" draggable="false" data-pjax-state="">
<i class="anzhiyufont anzhiyu-icon-shapes faa-tada" style="font-size: 0.9em;"></i>
<span> 民宿列表</span>
</a>
</li>
<li>
<a class="site-page child faa-parent animated-hover" href="/bookingList" draggable="false" data-pjax-state="">
<i class="anzhiyufont anzhiyu-icon-shapes faa-tada" style="font-size: 0.9em;"></i>
<span> 我的预约</span>
</a>
</li>
<li>
<a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="/collect" draggable="false">
<i class="anzhiyufont anzhiyu-icon-dice-d20 faa-tada" style="font-size: 0.9em;"></i>
<span> 收藏民宿</span>
</a>
</li>
</ul>
</div>
<div class="menus_item">
<a class="site-page" href="javascript:void(0);" draggable="false" data-pjax-state="">
<span> 宿优社区</span>
</a>
<ul class="menus_item_child" style="background: #ffffff;">
<li>
<a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="/read.jsp" draggable="false">
<i class="anzhiyufont anzhiyu-icon-comments faa-tada" style="font-size: 0.9em;"></i>
<span> 旅游攻略</span>
</a>
</li>
<li>
<a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://s.miku.cyou/2" draggable="false">
<i class="anzhiyufont anzhiyu-icon-paper-plane faa-tada" style="font-size: 0.9em;"></i>
<span> 宿优动态</span>
</a>
</li>
</ul>
</div>
<div class="menus_item">
<a class="site-page" href="javascript:void(0);" draggable="false" data-pjax-state="">
<span> 问宿优优</span>
</a>
<ul class="menus_item_child" style="background: #ffffff;">
<li>
<a class="site-page child faa-parent animated-hover" href="javascript:void(0);" draggable="false" data-pjax-state="">
<i class="anzhiyufont anzhiyu-icon-link faa-tada" style="font-size: 0.9em;"></i>
<span id="run-app"> 优优妙答</span>
</a>
<script>
document.getElementById('run-app').addEventListener('click', function() {
// 添加状态检查
let checkCount = 0;
const maxChecks = 10;
function checkService() {
fetch('http://127.0.0.1:7860')
.then(response => {
if (response.ok) {
window.open('http://127.0.0.1:7860', '_blank');
} else {
retryOrFail();
}
})
.catch(() => retryOrFail());
}
function retryOrFail() {
checkCount++;
if (checkCount < maxChecks) {
console.log(`第 ${checkCount} 次检查失败，2秒后重试...`);
setTimeout(checkService, 2000);
} else {
alert("无法连接到Gradio服务，请检查服务器日志");
}
}
fetch('/run-app', {
method: 'POST'
})
.then(response => response.json())
.then(data => {
if (data.status === "success") {
console.log("开始检查服务...");
setTimeout(checkService, 2000);
} else {
alert("运行失败: " + data.message);
}
})
.catch(error => {
console.error('错误:', error.toString());
alert("请求失败，请检查服务器状态");
});
});
</script>
</li>
</ul>
</div>
<div class="menus_item">
<a class="site-page" href="javascript:void(0);" draggable="false" data-pjax-state="">
<span> 在线客服</span>
</a>
<ul class="menus_item_child" style="background: #ffffff;">
<li>
<a class="site-page child faa-parent animated-hover" href="javascript:void(0);" onclick="showPhoneNumber()" draggable="false">
<i class="anzhiyufont anzhiyu-icon-link faa-tada" style="font-size: 0.9em;"></i>
<span>客服电话</span>
</a>
</li>
<li>
<a class="site-page child faa-parent animated-hover" href="customer_service.jsp" target="_blank" rel="noopener" draggable="false">
<i class="anzhiyufont anzhiyu-icon-plant-fill faa-tada" style="font-size: 0.9em;"></i>
<span>客服中心</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
<div class="all">
<div class="left">
<div class="carousel" style="border-radius: 12px">
<div class="slides">
<div class="slide"><img src="rotating_chart/1.jpg" alt="Image 1"></div>
<div class="slide"><img src="rotating_chart/2.jpg" alt="Image 2"></div>
<div class="slide"><img src="rotating_chart/3.jpg" alt="Image 3"></div>
<div class="slide"><img src="rotating_chart/4.jpg" alt="Image 4"></div>
<!-- 添加更多图片 -->
</div>
<div class="controls">
<button class="control" onclick="prevSlide()">❮</button>
<button class="control" onclick="nextSlide()">❯</button>
</div>
</div>
<div class="map-container">
<iframe src="map.html" style="width: 100%;height: 430px;border-radius: 12px"></iframe>
</div>
</div>
<script>
let currentIndex = 0;
function showSlide(index) {
const slides = document.querySelector('.slides');
const totalSlides = document.querySelectorAll('.slide').length;
if (index >= totalSlides) {
currentIndex = 0;
} else if (index < 0) {
currentIndex = totalSlides - 1;
} else {
currentIndex = index;
}
slides.style.transform = 'translateX(' + (-currentIndex * 100) + '%)';
}
function nextSlide() {
showSlide(currentIndex + 1);
}
function prevSlide() {
showSlide(currentIndex - 1);
}
// 自动轮播
setInterval(nextSlide, 5000); // 每5秒切换一次
</script>
<div class="homestay-container">
<style>
ol, ul, li {
list-style: none;
}
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
unicode-bidi: isolate;
}
#ul{
max-height: 900px; /* 设置最大高度 */
overflow-y: scroll; /* 允许垂直滚动 */
}
</style>
<ul id="ul">
<%
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/showyou_circle", "root", "123456");
stmt = conn.createStatement();
String sql = "SELECT * FROM homestay_info";
rs = stmt.executeQuery(sql);
if (!rs.isBeforeFirst()) { // 检查 ResultSet 是否为空
out.println("<li>没有找到任何民宿信息</li>");
} else {
while (rs.next()) {
int id = rs.getInt("homestay_id");
String name = rs.getString("name");
String image = rs.getString("image");
int star = rs.getInt("star");
int price = rs.getInt("price");
int commentAmount = rs.getInt("comment_amount");
%>
<section class="wow bounceInUp" data-wow-offset="100">
<li class="pas_item">
<a class="pas_link" href="Booking.jsp?id=<%=id%>"> <!-- 修改链接地址 -->
<div class="pas_image-container">
<img class="pas_image" alt="<%= name %>" src="listImages/<%= image %>">
</div>
<div class="pas_info">
<h3 class="pas_name"><%= name %></h3>
<img class="pas_level" alt="" src="https://webresource.c-ctrip.com/ResH5HotelOnline/R1/hotel_detail_icon_star<%= star %>_20180824.png">
<div class="pas_review">
<span><span class="pas_score"><%= star %><em class="pas_total">/5</em></span><span class="pas_rating">超棒</span></span>
</div>
<div class="pas_comment">
<div><%= commentAmount %>条点评</div>
<div class="pas_price">¥<span class="pas_num"><%= price %></span></div>
</div>
</div>
</a>
</li>
</section>
<%
}
}
} catch (Exception e) {
e.printStackTrace(); // 输出异常信息
} finally {
if (rs != null) try { rs.close(); } catch (SQLException e) {}
if (stmt != null) try { stmt.close(); } catch (SQLException e) {}
if (conn != null) try { conn.close(); } catch (SQLException e) {}
}
%>
</ul>
</div>
</div>
</body>
</html>
![Uploading 1735483373407.png…]()