<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>心居商城 - 家居生活平台</title>

  <!-- 引入CSS样式 -->
  <style>
/* 全局样式 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #ccffff; /* 设置背景颜色为品牌主色 */
  box-sizing: border-box; /* 采用盒模型设置 */
}

/* 顶部区域样式 */
body {
  margin: 0;
}

.site-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  width: 100%;
  margin-top: 0;
}

.header-top-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  position: relative; /* 添加相对定位 */
  width: 100%;
  padding-left: 0; /* 确保左边界与网页左边缘对齐 */
}

.logo-container,
.search-container {
  width: 100%;
}

.logo img {
  max-width: 100%;
  height: auto;
}

/* 搜索框样式 */
.search-form {
  display: inline-block;
}

.search-input {
  width: 200px;
  height: 30px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.search-button {
  height: 30px;
  padding: 0 10px;
  background-color: #66cc99;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* 主导航菜单样式 */
 /* 导航栏设计 */
.navbar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999; /* 确保导航栏始终位于最上层 */
}

.navbar {
  display: flex;
  justify-content: space-between; /* 横向布局并均匀分配空间 */
  align-items: center; /* 使子元素垂直居中对齐 */
  background-color: var(--main-color);
  padding: 1rem;
}

.navbar-item { /* 假设每个导航项都有这个类名 */
  margin-right: 1rem; /* 为相邻导航项添加间距 */
  text-align: center;
  cursor: pointer;
}

.navbar-toggle {
  display: none;
}

.navbar-menu {
  display: flex;
  flex-direction: row; /* 默认设置为横向布局 */
}

@media screen and (max-width: 767px) {
  .navbar-toggle {
    display: block;
    cursor: pointer;
  }

  .navbar-menu.open {
    display: flex;
    flex-direction: column;
  }
}

.main-navigation {
  display: flex;
  justify-content: space-between; /* 横向均匀分布 */
  background-color: var(--main-color); /* 使用品牌主色作为背景颜色 */
  padding: 1rem;
}

.main-navigation ul {
  list-style-type: none; /* 去除列表默认样式 */
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem; /* 在导航项之间添加间距 */
}

.main-navigation li a {
  text-decoration: none; /* 去除链接下划线 */
  color: var(--secondary-color); /* 链接文字颜色为次级颜色 */
  font-size: 18px; /* 设置字体大小 */
  font-weight: 700;
  transition: all 0.3s ease; /* 添加平滑过渡效果 */
}

/* 轮播广告区域样式 */
.carousel-container {
  margin: 2px auto 0; /* 上下边缘间距2px */
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: calc(100% * (9 / 16)); /* 根据当前宽度计算高度，保持16:9的比例 */
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.carousel-item img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片宽高比并填充整个容器 */
  object-position: center; /* 图片在容器内居中对齐 */
}

.carousel-item.active {
  opacity: 1;
}

@media (max-width: 768px) {
  .carousel-container {
    max-width: 100%; 
  }
}

/* 轮播指示器样式 */
.carousel-indicators {
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: center;
  z-index: 10;
  list-style: none; /* 移除默认的数字列表样式 */
}

.carousel-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  margin: 0 5px;
  cursor: pointer;
display: inline-block;
}

.carousel-indicator.active {
  background-color: #66cc99;
}

/* 商品推荐模块样式 */
.product-recommendations {
  margin-top: 2rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1rem;
list-style-type: none; /* 取消列表项前的点 */
  margin: 0; /* 清除默认外边距 */
  padding: 0; /* 清除默认内边距 */
}

.product-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.product-card a {
  text-decoration: none;
}

.product-card h3.product-name,
.product-card .product-price {
  color: #333;
}

/* 底部辅助链接区域样式 */
.site-footer {
  background-color: #339999;
  color: white;
  padding: 1rem;
  text-align: center;
}

.footer-links ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.footer-links li {
  margin-right: 1rem;
}

.footer-links a {
  color: white;
  text-decoration: none;
}

.footer-links a:hover {
  color: #66cccc;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .search-form {
    width: 100%;
    margin-bottom: 1rem;
  }

  .search-input {
    width: 100%;
  }

  .main-navigation {
    flex-direction: column;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }
}

</style>

<!-- 通过CDN引入jQuery库 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  
  <script>
  // 轮播广告区域设置
$(document).ready(function () {
  // 初始化轮播项
  var $carouselItems = $('.carousel-item');
  var currentIndex = 0;
  var totalItems = $carouselItems.length;

  function showCarouselItem(index) {
    $carouselItems.removeClass('active').eq(index).addClass('active');
  }

  // 立即显示第一张图片
  showCarouselItem(0);

  // 自动播放轮播广告
  setInterval(function () {
    currentIndex = (currentIndex + 1) % totalItems;
    showCarouselItem(currentIndex);
  }, 5000); // 每隔5秒切换一次

// 轮播指示器点击时切换图片并更改选中指示器的颜色
$('.carousel-indicators').on('click', 'li', function () {
  currentIndex = $(this).index();
  showCarouselItem(currentIndex);

  // 更改当前选中轮播指示器的颜色
  $('.carousel-indicator').removeClass('active');
  $(this).addClass('active');
});
});

  // 商品卡片悬停效果设置
$(document).ready(function () {
  $('.product-card').hover(
    function () {
      $(this).find('.product-name, .product-price').css('color', '#339999'); // 鼠标悬停时变色
    },
    function () {
      $(this).find('.product-name, .product-price').css('color', ''); // 鼠标离开时恢复原色
    }
  );
});

  // 移动端导航菜单汉堡按钮点击展开/收起菜单设置
$(document).ready(function () {
  var $navbarToggle = $('.header-top .navbar-toggle');
  var $mainNavigation = $('.main-navigation');

  $navbarToggle.click(function () {
    $mainNavigation.toggleClass('open');
  });

  // 当点击页面其他地方时，关闭打开的导航菜单（移动端优化）
  $(document).on('click touchstart', function (event) {
    if (!$(event.target).closest('.header-top').length && $mainNavigation.hasClass('open')) {
      $mainNavigation.removeClass('open');
    }
  });
});
  </script>

</head>
<body>
<!-- 顶部区域：Logo、搜索框 -->
<header class="site-header">
   <div class="header-top-container">
   <div class="logo-container">
    <a href="/" class="logo">
      <img src="images/logo.png" alt="心居商城Logo">
    </a>
    </div>

    <!-- 搜索框放在单独的容器中 -->
     <div class="search-container">
    <form action="/search" class="search-form">
      <input type="text" placeholder="搜索家居产品..." class="search-input">
      <button type="submit" class="search-button">搜索</button>
    </form>
    </div>

  <!-- 主导航菜单 -->
  <nav class="main-navigation">
    <ul>
      <li><a href="/category/bedroom">卧室家具</a></li>
      <li><a href="/category/living-room">客厅家具</a></li>
      <li><a href="/category/kitchen">厨房用品</a></li>
      <li><a href="/category/home-office">办公家具</a></li>
      <li><a href="/category/outdoor">户外家具</a></li>
      <li><a href="/category/bathroom">卫浴洁具</a></li>
      <li><a href="/category/decorations">家居饰品</a></li>
      <li><a href="/category/lighting">灯具照明</a></li>
    </ul>
  </nav>
  </div>
  </header>

<!-- 轮播广告区域 -->
<main class="carousel-container">
  <div class="carousel"> 
    <!-- 轮播图片项，可通过JS动态加载 -->
    <div class="carousel-item">
      <img src="images/banner1.png" alt="心居家居广告图1">
    </div>
    <div class="carousel-item">
        <img src="images/banner2.png" alt="心居家居广告图2">
      </div>
      <div class="carousel-item">
        <img src="images/banner3.png" alt="心居家居广告图3">
      </div>
      <div class="carousel-item">
        <img src="images/banner4.png" alt="心居家居广告图4">
      </div>
      <div class="carousel-item">
        <img src="images/banner5.png" alt="心居家居广告图5">
      </div>
  </div> 

   <!-- 轮播指示器 -->
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="carousel-indicator active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1" class="carousel-indicator"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2" class="carousel-indicator"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="3" class="carousel-indicator"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="4" class="carousel-indicator"></li>
  </ol>
</main>

<!-- 商品推荐模块 -->
<section class="product-recommendations">
 <h2 class="section-title">热门推荐</h2>
    
    <ul class="product-grid">
      <!-- 商品卡片 -->
      <li class="product-card">
        <a href="/product/details">
          <img src="images/product1.png" alt="产品名称1">
          <h3 class="product-name">舒适单人沙发</h3>
          <span class="product-price">￥999.00</span>
        </a>
      </li>

      <li class="product-card">
        <a href="/product/details">
          <img src="images/product2.png" alt="产品名称2">
          <h3 class="product-name">时尚双人沙发</h3>
          <span class="product-price">￥1599.00</span>
        </a>
      </li>
      
      <li class="product-card">
        <a href="/product/details">
          <img src="images/product3.png" alt="产品名称3">
          <h3 class="product-name">实木抽屉柜</h3>
          <span class="product-price">￥799.00</span>
        </a>
      </li>
    </ul>
</section>

<!-- 底部辅助链接区域 -->
<footer class="site-footer">
  <div class="footer-links">
 <ul>
        <li><a href="/about">关于我们</a></li>
        <li><a href="/contact">联系我们</a></li>
        <li><a href="/help">帮助中心</a></li>
        <li><a href="/terms">服务条款</a></li>
        <li><a href="/privacy">隐私政策</a></li>
        <li><a href="/shipping">配送与退货</a></li>
      </ul>
  </div>
    <p class="copyright">&copy; 2024 心居商城 版权所有</p>
</footer>
</body>
</html>
