workspace/code/base-project/base-uniapp/test.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>后台管理首页</title>
<style>
  body {
    margin: 0;
    font-family: "PingFang SC","Microsoft YaHei",Arial,sans-serif;
    background: #f5f5f5;
    color: #333;
  }

  /* 轮播 */
  .carousel {
    width: 100%;
    height: 160px;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
  }

  .carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.5s ease-in-out;
  }

  /* 功能模块 */
  .modules {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    margin: 0 8px;
    border-radius: 8px;
    overflow: hidden;
  }

  .module {
    width: 25%;
    padding: 14px 0;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
  }

  .module img {
    width: 36px;
    height: 36px;
    margin-bottom: 6px;
  }

  .module span {
    display: block;
    font-size: 13px;
  }

  .module:active {
    background: #e6f0ff;
  }

  /* 数据统计卡片 */
  .cards {
    display: flex;
    overflow-x: auto;
    padding: 12px 8px;
    margin-top: 12px;
  }

  .card {
    min-width: 120px;
    background: #fff;
    margin-right: 12px;
    border-radius: 8px;
    padding: 12px;
    flex-shrink: 0;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  .card h3 {
    margin: 6px 0 0;
    font-size: 18px;
    color: #007bff;
  }

  .card p {
    margin: 2px 0 0;
    font-size: 13px;
    color: #666;
  }

  .cards::-webkit-scrollbar {
    display: none;
  }
</style>
</head>
<body>

<!-- 轮播图 -->
<div class="carousel" id="carousel">
  <img src="https://via.placeholder.com/400x160?text=公告1" alt="公告1">
  <img src="https://via.placeholder.com/400x160?text=公告2" alt="公告2" style="display:none;">
  <img src="https://via.placeholder.com/400x160?text=公告3" alt="公告3" style="display:none;">
</div>

<!-- 功能模块 -->
<div class="modules">
  <div class="module">
    <img src="https://via.placeholder.com/36" alt="用户管理">
    <span>用户管理</span>
  </div>
  <div class="module">
    <img src="https://via.placeholder.com/36" alt="订单管理">
    <span>订单管理</span>
  </div>
  <div class="module">
    <img src="https://via.placeholder.com/36" alt="报表统计">
    <span>报表统计</span>
  </div>
  <div class="module">
    <img src="https://via.placeholder.com/36" alt="系统设置">
    <span>系统设置</span>
  </div>
  <div class="module">
    <img src="https://via.placeholder.com/36" alt="权限管理">
    <span>权限管理</span>
  </div>
  <div class="module">
    <img src="https://via.placeholder.com/36" alt="日志管理">
    <span>日志管理</span>
  </div>
  <div class="module">
    <img src="https://via.placeholder.com/36" alt="消息通知">
    <span>消息通知</span>
  </div>
  <div class="module">
    <img src="https://via.placeholder.com/36" alt="数据导入">
    <span>数据导入</span>
  </div>
</div>

<!-- 数据统计卡片 -->
<div class="cards">
  <div class="card">
    <h3>102</h3>
    <p>今日新增用户</p>
  </div>
  <div class="card">
    <h3>56</h3>
    <p>待处理订单</p>
  </div>
  <div class="card">
    <h3>78</h3>
    <p>本周报表</p>
  </div>
  <div class="card">
    <h3>12</h3>
    <p>系统警告</p>
  </div>
</div>

<script>
  // 简单轮播
  const carousel = document.getElementById('carousel');
  const imgs = carousel.getElementsByTagName('img');
  let current = 0;
  setInterval(() => {
    imgs[current].style.display = 'none';
    current = (current + 1) % imgs.length;
    imgs[current].style.display = 'block';
  }, 3000);
</script>

</body>
</html>