编辑页面

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>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    :root {
      --primary: #0066FF;
      --primary-light: #E6F0FF;
      --accent: #00B38A;
      --accent-light: #E6F7F3;
      --orange: #FF6B35;
      --orange-light: #FFF2ED;
      --purple: #8854D0;
      --purple-light: #F3EDFC;
      --red: #FF4757;
      --red-light: #FFEEF0;
      --text-primary: #1A1F36;
      --text-secondary: #6B7280;
      --text-light: #9CA3AF;
      --bg-light: #F5F7FA;
      --bg-white: #FFFFFF;
      --card-shadow: 0 2px 12px rgba(0,0,0,0.06);
      --card-shadow-hover: 0 4px 20px rgba(0,102,255,0.12);
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background: var(--bg-light);
      color: var(--text-primary);
      min-height: 100vh;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    .page-container {
      max-width: 430px;
      margin: 0 auto;
      min-height: 100vh;
      padding-bottom: 70px;
      background: var(--bg-light);
    }

    /* 头部 */
    .header {
      background: var(--bg-white);
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .header-title {
      font-size: 20px;
      font-weight: 700;
    }

    .header-icons {
      display: flex;
      gap: 16px;
    }

    .header-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--bg-light);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
      font-size: 18px;
    }

    .header-back {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .header-back-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--bg-light);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-primary);
      font-size: 18px;
    }

    /* 通用区块 */
    .section {
      margin: 16px;
    }

    .section-more {
      font-size: 13px;
      color: var(--text-light);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .section-header-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
    }

    .section-header-icon.blue { background: var(--primary-light); color: var(--primary); }
    .section-header-icon.green { background: var(--accent-light); color: var(--accent); }
    .section-header-icon.orange { background: var(--orange-light); color: var(--orange); }

    /* Banner */
    .banner {
      margin: 16px;
      border-radius: var(--radius-lg);
      overflow: hidden;
      position: relative;
      height: 180px;
      box-shadow: var(--card-shadow);
    }

    .banner-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .banner-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(0,102,255,0.85) 0%, rgba(0,179,138,0.7) 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 24px;
    }

    .banner-title {
      font-size: 24px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 6px;
    }

    .banner-subtitle {
      font-size: 14px;
      color: rgba(255,255,255,0.9);
      margin-bottom: 16px;
    }

    .banner-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #fff;
      color: var(--primary);
      padding: 10px 20px;
      border-radius: 24px;
      font-size: 13px;
      font-weight: 600;
      width: fit-content;
    }

    /* 数据概览 - 无标题 */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .stat-card {
      background: var(--bg-white);
      border-radius: var(--radius-md);
      padding: 14px 8px;
      text-align: center;
      box-shadow: var(--card-shadow);
      transition: all 0.3s ease;
    }

    .stat-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--card-shadow-hover);
    }

    .stat-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto 8px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
    }

    .stat-card:nth-child(1) .stat-icon { background: var(--primary-light); color: var(--primary); }
    .stat-card:nth-child(2) .stat-icon { background: var(--accent-light); color: var(--accent); }
    .stat-card:nth-child(3) .stat-icon { background: var(--orange-light); color: var(--orange); }
    .stat-card:nth-child(4) .stat-icon { background: var(--purple-light); color: var(--purple); }

    .stat-value {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 2px;
    }

    .stat-label {
      font-size: 10px;
      color: var(--text-light);
    }

    /* 科技服务&产业空间 - 左右两个模块 */
    .module-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin: 16px;
    }

    .module-card {
      background: var(--bg-white);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--card-shadow);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .module-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--card-shadow-hover);
    }

    .module-img {
      width: 100%;
      height: 100px;
      overflow: hidden;
    }

    .module-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .module-content {
      padding: 12px;
    }

    .module-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .module-title i {
      font-size: 12px;
    }

    .module-card:nth-child(1) .module-title i { color: var(--primary); }
    .module-card:nth-child(2) .module-title i { color: var(--accent); }

    .module-desc {
      font-size: 11px;
      color: var(--text-light);
    }

    /* 功能模块 - 左右滑动 */
    .feature-scroll {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding: 0 16px 12px;
      -webkit-overflow-scrolling: touch;
    }

    .feature-scroll::-webkit-scrollbar {
      display: none;
    }

    .feature-card {
      flex-shrink: 0;
      width: 160px;
      background: var(--bg-white);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--card-shadow);
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .feature-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--card-shadow-hover);
    }

    .feature-img {
      width: 100%;
      height: 100px;
      overflow: hidden;
    }

    .feature-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .feature-content {
      padding: 12px;
    }

    .feature-title {
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .feature-desc {
      font-size: 10px;
      color: var(--text-light);
    }

    /* 快捷工具 */
    .quick-tools {
      margin: 20px 16px;
    }

    .quick-tools-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .quick-tools-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .quick-tool-item {
      background: var(--bg-white);
      border-radius: var(--radius-md);
      padding: 16px 10px;
      text-align: center;
      box-shadow: var(--card-shadow);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .quick-tool-item:hover {
      transform: translateY(-2px);
      box-shadow: var(--card-shadow-hover);
    }

    .quick-tool-icon {
      width: 44px;
      height: 44px;
      margin: 0 auto 10px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }

    .quick-tool-item:nth-child(1) .quick-tool-icon { background: var(--primary-light); color: var(--primary); }
    .quick-tool-item:nth-child(2) .quick-tool-icon { background: var(--accent-light); color: var(--accent); }
    .quick-tool-item:nth-child(3) .quick-tool-icon { background: var(--orange-light); color: var(--orange); }
    .quick-tool-item:nth-child(4) .quick-tool-icon { background: var(--purple-light); color: var(--purple); }
    .quick-tool-item:nth-child(5) .quick-tool-icon { background: var(--red-light); color: var(--red); }
    .quick-tool-item:nth-child(6) .quick-tool-icon { background: var(--primary-light); color: var(--primary); }

    .quick-tool-text {
      font-size: 12px;
      color: var(--text-secondary);
    }

    /* 服务动态 */
    .service-update {
      margin: 20px 16px;
    }

    .service-update-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .update-list {
      background: var(--bg-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--card-shadow);
      overflow: hidden;
    }

    .update-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .update-item:hover {
      background: var(--bg-light);
    }

    .update-item:not(:last-child) {
      border-bottom: 1px solid var(--bg-light);
    }

    .update-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--primary-light);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }

    .update-content {
      flex: 1;
    }

    .update-title {
      font-size: 13px;
      color: var(--text-primary);
      margin-bottom: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .update-time {
      font-size: 11px;
      color: var(--text-light);
    }

    /* 园区公告 */
    .notice-banner {
      margin: 20px 16px;
      background: linear-gradient(135deg, var(--orange-light), #FFF5F0);
      border-radius: var(--radius-md);
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      border: 1px solid rgba(255,107,53,0.2);
    }

    .notice-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: var(--orange);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }

    .notice-text {
      font-size: 14px;
      color: var(--orange);
      font-weight: 500;
    }

    /* 科技服务二级页 */
    .service-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .service-item {
      background: var(--bg-white);
      border-radius: var(--radius-md);
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      box-shadow: var(--card-shadow);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .service-item:hover {
      transform: translateX(4px);
      box-shadow: var(--card-shadow-hover);
    }

    .service-item-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

    .service-item:nth-child(1) .service-item-icon { background: var(--primary-light); color: var(--primary); }
    .service-item:nth-child(2) .service-item-icon { background: var(--accent-light); color: var(--accent); }
    .service-item:nth-child(3) .service-item-icon { background: var(--orange-light); color: var(--orange); }
    .service-item:nth-child(4) .service-item-icon { background: var(--purple-light); color: var(--purple); }
    .service-item:nth-child(5) .service-item-icon { background: var(--red-light); color: var(--red); }
    .service-item:nth-child(6) .service-item-icon { background: var(--primary-light); color: var(--primary); }
    .service-item:nth-child(7) .service-item-icon { background: var(--accent-light); color: var(--accent); }
    .service-item:nth-child(8) .service-item-icon { background: var(--orange-light); color: var(--orange); }
    .service-item:nth-child(9) .service-item-icon { background: var(--purple-light); color: var(--purple); }
    .service-item:nth-child(10) .service-item-icon { background: var(--red-light); color: var(--red); }

    .service-item-content {
      flex: 1;
    }

    .service-item-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .service-item-desc {
      font-size: 12px;
      color: var(--text-light);
    }

    .service-item-arrow {
      color: var(--text-light);
    }

    /* 快速筛选项 */
    .filter-scroll {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 8px;
      margin-bottom: 16px;
    }

    .filter-scroll::-webkit-scrollbar {
      display: none;
    }

    .filter-tag {
      padding: 10px 18px;
      background: var(--bg-white);
      border-radius: 22px;
      font-size: 13px;
      color: var(--text-secondary);
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: var(--card-shadow);
    }

    .filter-tag.active {
      background: var(--primary);
      color: #fff;
    }

    .filter-tag:hover:not(.active) {
      background: var(--primary-light);
      color: var(--primary);
    }

    /* 商家列表 */
    .merchant-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .merchant-card {
      background: var(--bg-white);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--card-shadow);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .merchant-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--card-shadow-hover);
    }

    .merchant-img {
      width: 100%;
      height: 140px;
      overflow: hidden;
    }

    .merchant-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .merchant-info {
      padding: 14px;
    }

    .merchant-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .merchant-name {
      font-size: 15px;
      font-weight: 600;
    }

    .merchant-tag {
      padding: 4px 8px;
      background: var(--primary-light);
      color: var(--primary);
      border-radius: 6px;
      font-size: 11px;
    }

    .merchant-desc {
      font-size: 12px;
      color: var(--text-light);
      margin-bottom: 10px;
      line-height: 1.5;
    }

    .merchant-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .merchant-location {
      font-size: 11px;
      color: var(--text-light);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .merchant-rating {
      font-size: 12px;
      color: var(--orange);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    /* AI助手 - 聊天形式 */
    .chat-container {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      padding-bottom: 80px;
    }

    .chat-welcome {
      text-align: center;
      padding: 30px 20px;
    }

    .chat-welcome-icon {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      color: #fff;
      margin: 0 auto 16px;
    }

    .chat-welcome-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .chat-welcome-desc {
      font-size: 13px;
      color: var(--text-light);
    }

    .preset-questions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 20px;
    }

    .preset-question {
      background: var(--bg-white);
      border-radius: var(--radius-md);
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: var(--card-shadow);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .preset-question:hover {
      background: var(--primary-light);
    }

    .preset-question-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .preset-question:nth-child(1) .preset-question-icon { background: var(--primary-light); color: var(--primary); }
    .preset-question:nth-child(2) .preset-question-icon { background: var(--accent-light); color: var(--accent); }
    .preset-question:nth-child(3) .preset-question-icon { background: var(--orange-light); color: var(--orange); }
    .preset-question:nth-child(4) .preset-question-icon { background: var(--purple-light); color: var(--purple); }

    .preset-question-text {
      font-size: 14px;
      color: var(--text-primary);
    }

    .chat-messages {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .chat-message {
      display: flex;
      gap: 10px;
    }

    .chat-message.user {
      flex-direction: row-reverse;
    }

    .chat-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }

    .chat-message.ai .chat-avatar {
      background: linear-gradient(135deg, var(--primary), var(--accent));
      color: #fff;
    }

    .chat-message.user .chat-avatar {
      background: var(--primary-light);
      color: var(--primary);
    }

    .chat-bubble {
      max-width: 70%;
      padding: 12px 16px;
      border-radius: 16px;
      font-size: 14px;
      line-height: 1.6;
    }

    .chat-message.ai .chat-bubble {
      background: var(--bg-white);
      border-bottom-left-radius: 4px;
    }

    .chat-message.user .chat-bubble {
      background: var(--primary);
      color: #fff;
      border-bottom-right-radius: 4px;
    }

    .chat-input-bar {
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      max-width: 430px;
      background: var(--bg-white);
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 -2px 20px rgba(0,0,0,0.06);
    }

    .chat-input {
      flex: 1;
      border: none;
      background: var(--bg-light);
      border-radius: 24px;
      padding: 12px 18px;
      font-size: 14px;
      outline: none;
    }

    .chat-send-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
    }

    /* 我的页面 - 个人信息底色 */
    .profile-section {
      background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      margin: 0;
      padding: 24px 16px;
    }

    .profile-content {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .profile-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid rgba(255,255,255,0.3);
    }

    .profile-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .profile-info {
      flex: 1;
    }

    .profile-name {
      font-size: 20px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 4px;
    }

    .profile-id {
      font-size: 12px;
      color: rgba(255,255,255,0.8);
    }

    .profile-edit {
      padding: 8px 16px;
      border-radius: 20px;
      background: rgba(255,255,255,0.2);
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }

    /* 订单横条 */
    .order-bar {
      background: var(--bg-white);
      border-radius: var(--radius-lg);
      padding: 18px 16px;
      margin: 0 16px 16px;
      box-shadow: var(--card-shadow);
    }

    .order-bar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .order-bar-title {
      font-size: 15px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .order-bar-title i {
      color: var(--primary);
    }

    .order-bar-more {
      font-size: 12px;
      color: var(--text-light);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .order-status-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .order-status-item {
      text-align: center;
      cursor: pointer;
      padding: 8px;
      border-radius: var(--radius-md);
      transition: background 0.2s ease;
    }

    .order-status-item:hover {
      background: var(--bg-light);
    }

.order-status-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      margin: 0 auto 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      position: relative;
    }

    .order-status-count {
      position: absolute;
      top: -4px;
      right: -4px;
      min-width: 18px;
      height: 18px;
      border-radius: 9px;
      background: var(--red);
      color: #fff;
      font-size: 10px;
      line-height: 18px;
      text-align: center;
    }

    .order-status-item:nth-child(1) .order-status-icon { background: var(--primary-light); color: var(--primary); }
    .order-status-item:nth-child(2) .order-status-icon { background: var(--accent-light); color: var(--accent); }
    .order-status-item:nth-child(3) .order-status-icon { background: var(--orange-light); color: var(--orange); }
    .order-status-item:nth-child(4) .order-status-icon { background: var(--purple-light); color: var(--purple); }

    .order-status-text {
      font-size: 12px;
      color: var(--text-secondary);
    }

    .order-status-count {
      display: inline-block;
      min-width: 18px;
      height: 18px;
      border-radius: 9px;
      background: var(--red);
      color: #fff;
      font-size: 10px;
      line-height: 18px;
      margin-left: 4px;
    }

    /* 功能模块集合 */
    .func-section {
      margin: 0 16px 16px;
    }

    .func-group {
      background: var(--bg-white);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--card-shadow);
    }

    .func-row {
      display: flex;
      align-items: center;
      padding: 14px 16px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .func-row:hover {
      background: var(--bg-light);
    }

    .func-row:not(:last-child) {
      border-bottom: 1px solid var(--bg-light);
    }

    .func-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      margin-right: 12px;
    }

    .func-row:nth-child(4n+1) .func-icon { background: var(--primary-light); color: var(--primary); }
    .func-row:nth-child(4n+2) .func-icon { background: var(--accent-light); color: var(--accent); }
    .func-row:nth-child(4n+3) .func-icon { background: var(--orange-light); color: var(--orange); }
    .func-row:nth-child(4n) .func-icon { background: var(--purple-light); color: var(--purple); }

    .func-text {
      flex: 1;
      font-size: 14px;
      color: var(--text-primary);
    }

    .func-arrow {
      color: var(--text-light);
      font-size: 12px;
    }

    /* 底部导航 */
    .tab-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 430px;
      margin: 0 auto;
      height: 65px;
      background: var(--bg-white);
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 100;
      padding-bottom: env(safe-area-inset-bottom, 0);
      box-shadow: 0 -2px 20px rgba(0,0,0,0.06);
    }

    .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 16px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .tab-icon {
      font-size: 22px;
      color: var(--text-light);
      transition: all 0.3s ease;
    }

    .tab-text {
      font-size: 10px;
      color: var(--text-light);
      transition: all 0.3s ease;
    }

    .tab-item.active .tab-icon {
      color: var(--primary);
    }

    .tab-item.active .tab-text {
      color: var(--primary);
      font-weight: 600;
    }

    /* 页面切换 */
    .page {
      display: none;
    }

    .page.active {
      display: block;
    }

    .page-sub {
      display: none;
    }

    .page-sub.active {
      display: block;
    }
  </style>
</head>
<body>
  <div class="page-container">
    <!-- 首页 -->
    <div class="page active" id="page-home">
      <div class="header">
        <div class="header-title">园区企业服务</div>
        <div class="header-icons">
          <div class="header-icon"><i class="fas fa-search"></i></div>
          <div class="header-icon"><i class="fas fa-bell"></i></div>
        </div>
      </div>

      <!-- Banner -->
      <div class="banner">
        <img class="banner-img" src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&q=80" alt="智慧园区">
        <div class="banner-overlay">
          <div class="banner-title">智慧园区 赋能企业</div>
          <div class="banner-subtitle">一站式企业服务 助力产业升级</div>
          <div class="banner-btn">
            <span>了解更多</span>
            <i class="fas fa-arrow-right"></i>
          </div>
        </div>
      </div>

      <!-- 园区公告 -->
      <div class="notice-banner" style="margin: 16px;">
        <div class="notice-icon"><i class="fas fa-bullhorn"></i></div>
        <div class="notice-text">热烈欢迎XX科技公司入驻园区！</div>
      </div>

      <!-- 数据概览 - 无标题 -->
      <div class="section">
        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-building"></i></div>
            <div class="stat-value">1,286</div>
            <div class="stat-label">入住企业</div>
          </div>
          <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-handshake"></i></div>
            <div class="stat-value">458</div>
            <div class="stat-label">需求对接</div>
          </div>
          <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-rocket"></i></div>
            <div class="stat-value">86</div>
            <div class="stat-label">科创活动</div>
          </div>
          <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-file-alt"></i></div>
            <div class="stat-value">234</div>
            <div class="stat-label">政策发布</div>
          </div>
        </div>
      </div>

      <!-- 科技服务&产业空间 - 左右两个模块 -->
      <div class="module-row">
        <div class="module-card" onclick="showSubPage('service-detail')">
          <div class="module-img">
            <img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?w=400&q=80" alt="科技服务">
          </div>
          <div class="module-content">
            <div class="module-title"><i class="fas fa-microscope"></i> 科技服务</div>
            <div class="module-desc">10项专业服务</div>
          </div>
        </div>
        <div class="module-card" onclick="showSubPage('space-detail')">
          <div class="module-img">
            <img src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=400&q=80" alt="产业空间">
          </div>
          <div class="module-content">
            <div class="module-title"><i class="fas fa-building"></i> 产业空间</div>
            <div class="module-desc">办公场地租赁</div>
          </div>
        </div>
      </div>

      <!-- 综合服务 - 左右滑动 -->
      <div class="section-header" style="padding: 0 16px; margin-bottom: 12px;">
        <div style="font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px;">
          <div style="width: 4px; height: 18px; background: var(--orange); border-radius: 2px;"></div>
          综合服务
        </div>
      </div>
      <div class="feature-scroll">
        <div class="feature-card" onclick="showSubPage('feature-detail-1')">
          <div class="feature-img">
            <img src="https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?w=400&q=80" alt="空天信息">
          </div>
          <div class="feature-content">
            <div class="feature-title">空天信息党链</div>
            <div class="feature-desc">航天科技服务</div>
          </div>
        </div>
        <div class="feature-card" onclick="showSubPage('feature-detail-2')">
          <div class="feature-img">
            <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&q=80" alt="产品发布">
          </div>
          <div class="feature-content">
            <div class="feature-title">产品发布</div>
            <div class="feature-desc">企业产品展示</div>
          </div>
        </div>
        <div class="feature-card" onclick="showSubPage('feature-detail-3')">
          <div class="feature-img">
            <img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=400&q=80" alt="企业展厅">
          </div>
          <div class="feature-content">
            <div class="feature-title">企业展厅</div>
            <div class="feature-desc">企业文化宣传</div>
          </div>
        </div>
        <div class="feature-card" onclick="showSubPage('feature-detail-4')">
          <div class="feature-img">
            <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&q=80" alt="产业链">
          </div>
          <div class="feature-content">
            <div class="feature-title">产业链图谱</div>
            <div class="feature-desc">产业关联分析</div>
          </div>
        </div>
        <div class="feature-card" onclick="showSubPage('feature-detail-5')">
          <div class="feature-img">
            <img src="https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?w=400&q=80" alt="政策发布">
          </div>
          <div class="feature-content">
            <div class="feature-title">政策发布</div>
            <div class="feature-desc">最新政策速递</div>
          </div>
        </div>
        <div class="feature-card" onclick="showSubPage('feature-detail-6')">
          <div class="feature-img">
            <img src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=400&q=80" alt="科创活动">
          </div>
          <div class="feature-content">
            <div class="feature-title">科创活动</div>
            <div class="feature-desc">科技创新赛事</div>
          </div>
        </div>
        <div class="feature-card" onclick="showSubPage('feature-detail-7')">
          <div class="feature-img">
            <img src="https://images.unsplash.com/photo-1556761175-4b46a572b786?w=400&q=80" alt="供需对接">
          </div>
          <div class="feature-content">
            <div class="feature-title">供需对接</div>
            <div class="feature-desc">资源匹配服务</div>
          </div>
        </div>
      </div>

      <!-- 快捷工具入口 -->
      <div class="quick-tools">
        <div class="quick-tools-header">
          <div style="font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px;">
            <div style="width: 4px; height: 18px; background: var(--primary); border-radius: 2px;"></div>
            快捷工具
          </div>
        </div>
        <div class="quick-tools-grid">
          <div class="quick-tool-item" onclick="showSubPage('tool-detail-1')">
            <div class="quick-tool-icon"><i class="fas fa-calendar-plus"></i></div>
            <div class="quick-tool-text">会议预约</div>
          </div>
          <div class="quick-tool-item" onclick="showSubPage('tool-detail-2')">
            <div class="quick-tool-icon"><i class="fas fa-id-card"></i></div>
            <div class="quick-tool-text">访客登记</div>
          </div>
          <div class="quick-tool-item" onclick="showSubPage('tool-detail-3')">
            <div class="quick-tool-icon"><i class="fas fa-wrench"></i></div>
            <div class="quick-tool-text">报修服务</div>
          </div>
          <div class="quick-tool-item" onclick="showSubPage('tool-detail-4')">
            <div class="quick-tool-icon"><i class="fas fa-comments"></i></div>
            <div class="quick-tool-text">投诉建议</div>
          </div>
          <div class="quick-tool-item" onclick="showSubPage('tool-detail-5')">
            <div class="quick-tool-icon"><i class="fas fa-truck"></i></div>
            <div class="quick-tool-text">快递服务</div>
          </div>
          <div class="quick-tool-item" onclick="showSubPage('tool-detail-6')">
            <div class="quick-tool-icon"><i class="fas fa-parking"></i></div>
            <div class="quick-tool-text">停车缴费</div>
          </div>
        </div>
      </div>

      
    </div>

    <!-- 政策资讯页 -->
    <div class="page" id="page-news">
      <div class="header">
        <div class="header-title">政策资讯</div>
        <div class="header-icons">
          <div class="header-icon"><i class="fas fa-search"></i></div>
        </div>
      </div>

      <div class="filter-scroll" style="margin: 16px 16px 0;">
        <div class="filter-tag active">全部</div>
        <div class="filter-tag">产业链期刊</div>
        <div class="filter-tag">科创活动</div>
        <div class="filter-tag">政策发布</div>
        <div class="filter-tag">党链团链</div>
      </div>

      <div class="section" style="margin-top: 0;">
        <div class="merchant-list">
          <div class="merchant-card">
            <div class="merchant-img">
              <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=600&q=80" alt="">
            </div>
            <div class="merchant-info">
              <div class="merchant-header">
                <div class="merchant-name">关于支持高新技术企业发展若干政策措施的通知</div>
              </div>
              <div class="merchant-desc">为加快推动高新技术产业发展，促进产业结构优化升级，现制定以下政策措施...</div>
              <div class="merchant-footer">
                <div class="merchant-location"><i class="fas fa-clock"></i> 2024-01-15</div>
                <div class="merchant-rating"><i class="fas fa-eye"></i> 1.2k</div>
              </div>
            </div>
          </div>
          <div class="merchant-card">
            <div class="merchant-img">
              <img src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=600&q=80" alt="">
            </div>
            <div class="merchant-info">
              <div class="merchant-header">
                <div class="merchant-name">2024年首场科技创新创业大赛报名开启</div>
              </div>
              <div class="merchant-desc">汇聚全球创新创业人才，最高奖金50万元，优秀项目可获得园区全方位孵化支持...</div>
              <div class="merchant-footer">
                <div class="merchant-location"><i class="fas fa-clock"></i> 2024-01-14</div>
                <div class="merchant-rating"><i class="fas fa-eye"></i> 856</div>
              </div>
            </div>
          </div>
          <div class="merchant-card">
            <div class="merchant-img">
              <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&q=80" alt="">
            </div>
            <div class="merchant-info">
              <div class="merchant-header">
                <div class="merchant-name">园区2023年度产业发展报告出炉</div>
              </div>
              <div class="merchant-desc">年度报告显示园区产值突破百亿，科技创新能力持续提升，产业集群效应显著...</div>
              <div class="merchant-footer">
                <div class="merchant-location"><i class="fas fa-clock"></i> 2024-01-13</div>
                <div class="merchant-rating"><i class="fas fa-eye"></i> 2.3k</div>
              </div>
            </div>
          </div>
          <div class="merchant-card">
            <div class="merchant-img">
              <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&q=80" alt="">
            </div>
            <div class="merchant-info">
              <div class="merchant-header">
                <div class="merchant-name">园区党建工作经验交流会在我司召开</div>
              </div>
              <div class="merchant-desc">深入推进党建工作与业务发展深度融合，打造特色党建品牌，推动企业高质量发展...</div>
              <div class="merchant-footer">
                <div class="merchant-location"><i class="fas fa-clock"></i> 2024-01-12</div>
                <div class="merchant-rating"><i class="fas fa-eye"></i> 1.5k</div>
              </div>
            </div>
          </div>
          <div class="merchant-card">
            <div class="merchant-img">
              <img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?w=600&q=80" alt="">
            </div>
            <div class="merchant-info">
              <div class="merchant-header">
                <div class="merchant-name">科技服务平台升级公告</div>
              </div>
              <div class="merchant-desc">为更好地服务园区企业，科技服务平台已完成功能升级，新增AI智能匹配、一键申报等功能...</div>
              <div class="merchant-footer">
                <div class="merchant-location"><i class="fas fa-clock"></i> 2024-01-11</div>
                <div class="merchant-rating"><i class="fas fa-eye"></i> 980</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 生活服务页 -->
    <div class="page" id="page-life">
      <div class="header">
        <div class="header-title">生活服务</div>
        <div class="header-icons">
          <div class="header-icon"><i class="fas fa-map-marker-alt"></i></div>
        </div>
      </div>

      <div class="filter-scroll" style="margin: 16px 16px 0;">
        <div class="filter-tag active">全部</div>
        <div class="filter-tag">住宿</div>
        <div class="filter-tag">出行</div>
        <div class="filter-tag">美食</div>
        <div class="filter-tag">饮品</div>
        <div class="filter-tag">休闲</div>
        <div class="filter-tag">健康</div>
      </div>

      <div class="section" style="margin-top: 0;">
        <div class="merchant-list">
          <div class="merchant-card">
            <div class="merchant-img">
              <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?w=600&q=80" alt="">
            </div>
            <div class="merchant-info">
              <div class="merchant-header">
                <div class="merchant-name">园区国际酒店</div>
                <div class="merchant-tag">住宿</div>
              </div>
              <div class="merchant-desc">五星级标准，位于园区核心位置，提供高端商务住宿服务</div>
              <div class="merchant-footer">
                <div class="merchant-location"><i class="fas fa-map-marker-alt"></i> A栋1-5层</div>
                <div class="merchant-rating"><i class="fas fa-star"></i> 4.9</div>
              </div>
            </div>
          </div>
          <div class="merchant-card">
            <div class="merchant-img">
              <img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=600&q=80" alt="">
            </div>
            <div class="merchant-info">
              <div class="merchant-header">
                <div class="merchant-name">园区餐厅·云膳</div>
                <div class="merchant-tag">美食</div>
              </div>
              <div class="merchant-desc">主打新派粤菜及创意融合菜，提供商务宴请及私人订制服务</div>
              <div class="merchant-footer">
                <div class="merchant-location"><i class="fas fa-map-marker-alt"></i> B栋2层</div>
                <div class="merchant-rating"><i class="fas fa-star"></i> 4.8</div>
              </div>
            </div>
          </div>
          <div class="merchant-card">
            <div class="merchant-img">
              <img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=600&q=80" alt="">
            </div>
            <div class="merchant-info">
              <div class="merchant-header">
                <div class="merchant-name">星际咖啡</div>
                <div class="merchant-tag">饮品</div>
              </div>
              <div class="merchant-desc">精品咖啡+轻食，舒适办公环境，适合商务洽谈及休闲小憩</div>
              <div class="merchant-footer">
                <div class="merchant-location"><i class="fas fa-map-marker-alt"></i> C栋1层</div>
                <div class="merchant-rating"><i class="fas fa-star"></i> 4.7</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- AI助手页 -->
    <div class="page" id="page-ai">
      <div class="header">
        <div class="header-title">AI助手</div>
        <div class="header-icons">
          <div class="header-icon"><i class="fas fa-history"></i></div>
        </div>
      </div>

      <div class="chat-container" id="chatContainer">
        <div class="chat-welcome" id="chatWelcome">
          <div class="chat-welcome-icon"><i class="fas fa-robot"></i></div>
          <div class="chat-welcome-title">您好，我是AI小助手</div>
          <div class="chat-welcome-desc">可以为您提供园区相关问题解答</div>
          
          <div class="preset-questions">
            <div class="preset-question" onclick="sendPreset('园区有什么优惠政策？')">
              <div class="preset-question-icon"><i class="fas fa-percent"></i></div>
              <div class="preset-question-text">园区有什么优惠政策？</div>
            </div>
            <div class="preset-question" onclick="sendPreset('会议室如何预约？')">
              <div class="preset-question-icon"><i class="fas fa-calendar-alt"></i></div>
              <div class="preset-question-text">会议室如何预约？</div>
            </div>
            <div class="preset-question" onclick="sendPreset('最近的餐厅在哪里？')">
              <div class="preset-question-icon"><i class="fas fa-utensils"></i></div>
              <div class="preset-question-text">最近的餐厅在哪里？</div>
            </div>
            <div class="preset-question" onclick="sendPreset('如何联系物业服务？')">
              <div class="preset-question-icon"><i class="fas fa-headset"></i></div>
              <div class="preset-question-text">如何联系物业服务？</div>
            </div>
          </div>
        </div>

        <div class="chat-messages" id="chatMessages" style="display: none;"></div>
      </div>

      <div class="chat-input-bar">
        <input type="text" class="chat-input" id="chatInput" placeholder="输入您的问题...">
        <button class="chat-send-btn" onclick="sendMessage()">
          <i class="fas fa-paper-plane"></i>
        </button>
      </div>
    </div>

    <!-- 我的页面 -->
    <div class="page" id="page-profile">
      <div class="header">
        <div class="header-title">我的</div>
        <div class="header-icons">
          <div class="header-icon"><i class="fas fa-cog"></i></div>
        </div>
      </div>

      <!-- 个人信息 - 带底色 -->
      <div class="profile-section">
        <div class="profile-content">
          <div class="profile-avatar">
            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&q=80" alt="">
          </div>
          <div class="profile-info">
            <div class="profile-name">张三</div>
            <div class="profile-id">ID: 2024001234</div>
          </div>
          <div class="profile-edit">编辑</div>
        </div>
      </div>

      <!-- 订单横条 -->
      <div class="order-bar">
        <div class="order-bar-header">
          <div class="order-bar-title"><i class="fas fa-clipboard-list"></i> 我的订单</div>
          <div class="order-bar-more">全部订单 <i class="fas fa-angle-right"></i></div>
        </div>
        <div class="order-status-grid">
          <div class="order-status-item">
            <div class="order-status-icon"><i class="fas fa-clock"></i></div>
            <div class="order-status-text">进行中<span class="order-status-count">2</span></div>
          </div>
          <div class="order-status-item">
            <div class="order-status-icon"><i class="fas fa-check-circle"></i></div>
            <div class="order-status-text">已完成</div>
          </div>
          <div class="order-status-item">
            <div class="order-status-icon"><i class="fas fa-times-circle"></i></div>
            <div class="order-status-text">已取消</div>
          </div>
          <div class="order-status-item">
            <div class="order-status-icon"><i class="fas fa-headset"></i></div>
            <div class="order-status-text">售后中<span class="order-status-count">1</span></div>
          </div>
        </div>
      </div>

      <!-- 功能集合 -->
      <div class="func-section">
        <div class="func-group">
          <div class="func-row">
            <div class="func-icon"><i class="fas fa-bell"></i></div>
            <div class="func-text">最新消息</div>
            <div class="func-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
          <div class="func-row">
            <div class="func-icon"><i class="fas fa-star"></i></div>
            <div class="func-text">我的订阅</div>
            <div class="func-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
        </div>
      </div>

      <div class="func-section">
        <div class="func-group">
          <div class="func-row">
            <div class="func-icon"><i class="fas fa-file-alt"></i></div>
            <div class="func-text">我的表单</div>
            <div class="func-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
          <div class="func-row">
            <div class="func-icon"><i class="fas fa-check-square"></i></div>
            <div class="func-text">我的打卡</div>
            <div class="func-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
          <div class="func-row">
            <div class="func-icon"><i class="fas fa-ticket-alt"></i></div>
            <div class="func-text">我的优惠券</div>
            <div class="func-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
          <div class="func-row">
            <div class="func-icon"><i class="fas fa-file-invoice-dollar"></i></div>
            <div class="func-text">我的报价</div>
            <div class="func-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
        </div>
      </div>

      <div class="func-section">
        <div class="func-group">
          <div class="func-row">
            <div class="func-icon"><i class="fas fa-heart"></i></div>
            <div class="func-text">我的收藏</div>
            <div class="func-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
          <div class="func-row">
            <div class="func-icon"><i class="fas fa-bullhorn"></i></div>
            <div class="func-text">我的发布</div>
            <div class="func-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
          <div class="func-row">
            <div class="func-icon"><i class="fas fa-comment-dots"></i></div>
            <div class="func-text">回复我的</div>
            <div class="func-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
          <div class="func-row">
            <div class="func-icon"><i class="fas fa-headset"></i></div>
            <div class="func-text">联系客服</div>
            <div class="func-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 科技服务详情页 -->
    <div class="page-sub" id="page-service-detail">
      <div class="header">
        <div class="header-back">
          <div class="header-back-btn" onclick="hideSubPage()"><i class="fas fa-arrow-left"></i></div>
          <div class="header-title">科技服务</div>
        </div>
      </div>

      <div class="section">
        <div class="service-list">
          <div class="service-item">
            <div class="service-item-icon"><i class="fas fa-calendar-check"></i></div>
            <div class="service-item-content">
              <div class="service-item-title">会场预约</div>
              <div class="service-item-desc">在线预约园区会议场地</div>
            </div>
            <div class="service-item-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
          <div class="service-item">
            <div class="service-item-icon"><i class="fas fa-flask"></i></div>
            <div class="service-item-content">
              <div class="service-item-title">中试平台</div>
              <div class="service-item-desc">产品中试验证服务</div>
            </div>
            <div class="service-item-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
          <div class="service-item">
            <div class="service-item-icon"><i class="fas fa-user-tie"></i></div>
            <div class="service-item-content">
              <div class="service-item-title">技术经纪人服务</div>
              <div class="service-item-desc">技术成果转化对接</div>
            </div>
            <div class="service-item-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
          <div class="service-item">
            <div class="service-item-icon"><i class="fas fa-check-circle"></i></div>
            <div class="service-item-content">
              <div class="service-item-title">质量服务</div>
              <div class="service-item-desc">产品质量检测认证</div>
            </div>
            <div class="service-item-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
          <div class="service-item">
            <div class="service-item-icon"><i class="fas fa-lightbulb"></i></div>
            <div class="service-item-content">
              <div class="service-item-title">知识产权</div>
              <div class="service-item-desc">专利申请与版权服务</div>
            </div>
            <div class="service-item-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
          <div class="service-item">
            <div class="service-item-icon"><i class="fas fa-file-signature"></i></div>
            <div class="service-item-content">
              <div class="service-item-title">申报服务</div>
              <div class="service-item-desc">政策项目申报代理</div>
            </div>
            <div class="service-item-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
          <div class="service-item">
            <div class="service-item-icon"><i class="fas fa-exchange-alt"></i></div>
            <div class="service-item-content">
              <div class="service-item-title">成果转化</div>
              <div class="service-item-desc">科技成果转移转化</div>
            </div>
            <div class="service-item-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
          <div class="service-item">
            <div class="service-item-icon"><i class="fas fa-coins"></i></div>
            <div class="service-item-content">
              <div class="service-item-title">科技金融</div>
              <div class="service-item-desc">科技企业融资服务</div>
            </div>
            <div class="service-item-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
          <div class="service-item">
            <div class="service-item-icon"><i class="fas fa-users"></i></div>
            <div class="service-item-content">
              <div class="service-item-title">人才服务</div>
              <div class="service-item-desc">人才招聘与培训</div>
            </div>
            <div class="service-item-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
          <div class="service-item">
            <div class="service-item-icon"><i class="fas fa-random"></i></div>
            <div class="service-item-content">
              <div class="service-item-title">供需对接</div>
              <div class="service-item-desc">资源需求匹配服务</div>
            </div>
            <div class="service-item-arrow"><i class="fas fa-chevron-right"></i></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 产业空间详情页 -->
    <div class="page-sub" id="page-space-detail">
      <div class="header">
        <div class="header-back">
          <div class="header-back-btn" onclick="hideSubPage()"><i class="fas fa-arrow-left"></i></div>
          <div class="header-title">产业空间</div>
        </div>
      </div>

      <!-- 分类筛选 -->
      <div class="filter-scroll" style="margin: 16px 16px 0;">
        <div class="filter-tag active" data-category="all">全部</div>
        <div class="filter-tag" data-category="park">产业园区</div>
        <div class="filter-tag" data-category="building">产业楼宇</div>
        <div class="filter-tag" data-category="meeting">会议会场</div>
      </div>

      <!-- 产业园列表 -->
      <div class="section" style="margin-top: 0;">
        <div class="merchant-list" id="spaceList">
          <div class="merchant-card" data-category="park">
            <div class="merchant-img">
              <img src="https://images.unsplash.com/photo-1486718448742-163732cd1544?w=600&q=80" alt="">
            </div>
            <div class="merchant-info">
              <div class="merchant-header">
                <div class="merchant-name">高新科技产业园</div>
                <div class="merchant-tag">产业园区</div>
              </div>
              <div class="merchant-desc">位于园区核心地段，绿化覆盖率高，配套设施完善，适合各类企业入驻办公</div>
              <div class="merchant-footer">
                <div class="merchant-location">
                  <i class="fas fa-map-marker-alt"></i> 科技路88号
                  <span style="margin-left: 12px; color: var(--primary);"><i class="fas fa-route"></i> 导航</span>
                </div>
                <div class="merchant-rating"><i class="fas fa-star"></i> 4.9</div>
              </div>
            </div>
          </div>
          <div class="merchant-card" data-category="park">
            <div class="merchant-img">
              <img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=600&q=80" alt="">
            </div>
            <div class="merchant-info">
              <div class="merchant-header">
                <div class="merchant-name">创新创业园</div>
                <div class="merchant-tag">产业园区</div>
              </div>
              <div class="merchant-desc">专注中小企业孵化，提供一站式创业服务，营造良好的创新创业环境</div>
              <div class="merchant-footer">
                <div class="merchant-location">
                  <i class="fas fa-map-marker-alt"></i> 创业大道128号
                  <span style="margin-left: 12px; color: var(--primary);"><i class="fas fa-route"></i> 导航</span>
                </div>
                <div class="merchant-rating"><i class="fas fa-star"></i> 4.8</div>
              </div>
            </div>
          </div>
          <div class="merchant-card" data-category="building">
            <div class="merchant-img">
              <img src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=600&q=80" alt="">
            </div>
            <div class="merchant-info">
              <div class="merchant-header">
                <div class="merchant-name">智慧大厦</div>
                <div class="merchant-tag">产业楼宇</div>
              </div>
              <div class="merchant-desc">5A甲级写字楼，智能化管理，配备高速电梯、中央空调、视频会议系统</div>
              <div class="merchant-footer">
                <div class="merchant-location">
                  <i class="fas fa-map-marker-alt"></i> 商务中心A座
                  <span style="margin-left: 12px; color: var(--primary);"><i class="fas fa-route"></i> 导航</span>
                </div>
                <div class="merchant-rating"><i class="fas fa-star"></i> 4.9</div>
              </div>
            </div>
          </div>
          <div class="merchant-card" data-category="building">
            <div class="merchant-img">
              <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80" alt="">
            </div>
            <div class="merchant-info">
              <div class="merchant-header">
                <div class="merchant-name">金融中心</div>
                <div class="merchant-tag">产业楼宇</div>
              </div>
              <div class="merchant-desc">金融企业专属楼宇，周边配套齐全，地铁上盖，交通便利</div>
              <div class="merchant-footer">
                <div class="merchant-location">
                  <i class="fas fa-map-marker-alt"></i> 金融街288号
                  <span style="margin-left: 12px; color: var(--primary);"><i class="fas fa-route"></i> 导航</span>
                </div>
                <div class="merchant-rating"><i class="fas fa-star"></i> 4.7</div>
              </div>
            </div>
          </div>
          <div class="merchant-card" data-category="meeting">
            <div class="merchant-img">
              <img src="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&q=80" alt="">
            </div>
            <div class="merchant-info">
              <div class="merchant-header">
                <div class="merchant-name">国际会议中心</div>
                <div class="merchant-tag">会议会场</div>
              </div>
              <div class="merchant-desc">可容纳500人，配备同声传译系统、先进视听设备，适合国际会议、商务洽谈</div>
              <div class="merchant-footer">
                <div class="merchant-location">
                  <i class="fas fa-map-marker-alt"></i> 会议中心1号楼
                  <span style="margin-left: 12px; color: var(--primary);"><i class="fas fa-route"></i> 导航</span>
                </div>
                <div class="merchant-rating"><i class="fas fa-star"></i> 4.8</div>
              </div>
            </div>
          </div>
          <div class="merchant-card" data-category="meeting">
            <div class="merchant-img">
              <img src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=600&q=80" alt="">
            </div>
            <div class="merchant-info">
              <div class="merchant-header">
                <div class="merchant-name">多功能报告厅</div>
                <div class="merchant-tag">会议会场</div>
              </div>
              <div class="merchant-desc">可容纳200人，适合培训讲座、产品发布会、学术交流等活动</div>
              <div class="merchant-footer">
                <div class="merchant-location">
                  <i class="fas fa-map-marker-alt"></i> 会议中心2号楼
                  <span style="margin-left: 12px; color: var(--primary);"><i class="fas fa-route"></i> 导航</span>
                </div>
                <div class="merchant-rating"><i class="fas fa-star"></i> 4.6</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航 - AI助手和生活位置调换 -->
    <div class="tab-bar">
      <div class="tab-item active" data-page="home">
        <div class="tab-icon"><i class="fas fa-home"></i></div>
        <div class="tab-text">首页</div>
      </div>
      <div class="tab-item" data-page="news">
        <div class="tab-icon"><i class="fas fa-newspaper"></i></div>
        <div class="tab-text">资讯</div>
      </div>
      <div class="tab-item" data-page="ai">
        <div class="tab-icon"><i class="fas fa-robot"></i></div>
        <div class="tab-text">AI助手</div>
      </div>
      <div class="tab-item" data-page="life">
        <div class="tab-icon"><i class="fas fa-concierge-bell"></i></div>
        <div class="tab-text">生活</div>
      </div>
      <div class="tab-item" data-page="profile">
        <div class="tab-icon"><i class="fas fa-user"></i></div>
        <div class="tab-text">我的</div>
      </div>
    </div>
  </div>

  <script>
    // 底部导航切换
    document.querySelectorAll('.tab-item').forEach(tab => {
      tab.addEventListener('click', () => {
        // 移除所有 active
        document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        
        // 隐藏所有页面（二级页面和一级页面都隐藏）
        document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
        document.querySelectorAll('.page-sub').forEach(p => p.classList.remove('active'));
        
        // 显示对应的一级页面
        const pageName = tab.dataset.page;
        const targetPage = document.getElementById('page-' + pageName);
        if (targetPage) {
          targetPage.classList.add('active');
        }
        
        window.scrollTo(0, 0);
      });
    });

    // 快速筛选项切换
    document.querySelectorAll('.filter-tag').forEach(tag => {
      tag.addEventListener('click', () => {
        const parent = tag.parentElement;
        parent.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
        tag.classList.add('active');
        
        // 产业空间分类筛选
        if (tag.dataset.category !== undefined) {
          const category = tag.dataset.category;
          const list = document.getElementById('spaceList');
          if (list) {
            list.querySelectorAll('.merchant-card').forEach(card => {
              if (category === 'all' || card.dataset.category === category) {
                card.style.display = '';
              } else {
                card.style.display = 'none';
              }
            });
          }
        }
      });
    });

    // 二级页面显示/隐藏
    function showSubPage(pageId) {
      // 隐藏所有一级页面
      document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
      document.querySelectorAll('.page-sub').forEach(p => p.classList.remove('active'));
      // 显示对应的二级页面
      const targetPage = document.getElementById('page-' + pageId);
      if (targetPage) {
        targetPage.classList.add('active');
      }
    }

    function hideSubPage() {
      // 隐藏所有二级页面
      document.querySelectorAll('.page-sub').forEach(p => p.classList.remove('active'));
      // 重置底部导航状态
      document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
      // 回到首页
      const homeTab = document.querySelector('.tab-item[data-page="home"]');
      if (homeTab) homeTab.classList.add('active');
      const homePage = document.getElementById('page-home');
      if (homePage) homePage.classList.add('active');
    }

    // AI聊天功能
    const aiResponses = {
      '园区有什么优惠政策？': '园区为企业提供多项优惠政策，包括：\n1. 税收减免：高新技术企业享受15%所得税优惠\n2. 租金补贴：首年租金减半\n3. 人才引进：高级人才可申请住房补贴\n4. 研发支持：研发费用可加计扣除\n\n如需了解详情，请联系园区服务中心。',
      '会议室如何预约？': '会议室预约方式：\n1. 在首页「科技服务」-「会场预约」在线预约\n2. 联系物业前台：0755-XXXX-XXXX\n3. 通过企业服务小程序预约\n\n支持按小时/半天/全天租用，园区企业享有折扣优惠。',
      '最近的餐厅在哪里？': '园区内有多家餐厅：\n\n🍽️ 园区餐厅·云膳\n位置：B栋2层，主打粤菜\n评分：4.8分\n\n☕ 星际咖啡\n位置：C栋1层，轻食咖啡\n评分：4.7分\n\n您可以去「生活服务」页面查看更多餐厅信息~',
      '如何联系物业服务？': '物业服务联系方式：\n📞 服务热线：0755-XXXX-XXXX\n📧 邮箱：property@park.com\n💬 在线客服：通过「联系客服」提交工单\n📍 物业中心：A栋1层大堂\n\n服务时间：周一至周五 9:00-18:00'
    };

    function sendPreset(question) {
      document.getElementById('chatWelcome').style.display = 'none';
      document.getElementById('chatMessages').style.display = 'flex';
      
      const messagesContainer = document.getElementById('chatMessages');
      messagesContainer.innerHTML = '';
      
      addMessage('user', question);
      
      setTimeout(() => {
        const response = aiResponses[question] || '您好，这个问题我来帮您解答。请稍等...';
        addMessage('ai', response);
      }, 500);
    }

    function sendMessage() {
      const input = document.getElementById('chatInput');
      const text = input.value.trim();
      if (!text) return;
      
      document.getElementById('chatWelcome').style.display = 'none';
      document.getElementById('chatMessages').style.display = 'flex';
      
      addMessage('user', text);
      input.value = '';
      
      setTimeout(() => {
        addMessage('ai', '感谢您的咨询，您的问题已收到。我们将尽快为您处理，如有紧急需求请拨打服务热线。');
      }, 800);
    }

    function addMessage(type, text) {
      const messagesContainer = document.getElementById('chatMessages');
      const messageDiv = document.createElement('div');
      messageDiv.className = `chat-message ${type}`;
      
      const avatarIcon = type === 'ai' ? 'fas fa-robot' : 'fas fa-user';
      const formattedText = text.replace(/\n/g, '<br>');
      
      messageDiv.innerHTML = `
        <div class="chat-avatar"><i class="${avatarIcon}"></i></div>
        <div class="chat-bubble">${formattedText}</div>
      `;
      
      messagesContainer.appendChild(messageDiv);
      messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }

    document.getElementById('chatInput').addEventListener('keypress', function(e) {
      if (e.key === 'Enter') {
        sendMessage();
      }
    });
  </script>
</body>
</html>