稿定设计模板页面

发布于 2025-05-08 浏览 144 人次

稿定设计模板页面优化版

我将根据您的反馈进一步优化HTML设计，特别是改进移动端体验、头像交互、搜索框设计和筛选功能。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>稿定设计模板页面</title>
  <style>
    /* 全局样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --primary-color: #3366ff;
      --primary-light: #e6f0ff;
      --secondary-color: #f5f7fa;
      --text-color: #333;
      --light-text: #666;
      --border-color: #eaeaea;
      --hover-color: #f0f5ff;
      --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      --transition: all 0.3s ease;
      --overlay-bg: rgba(0, 0, 0, 0.5);
      --premium-gradient: linear-gradient(135deg, #ff9a00, #ff6b00);
    }

    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      color: var(--text-color);
      background-color: #fff;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* 滚动条美化 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #999;
    }

    /* 顶部导航栏样式 */
    header {
      background-color: #fff;
      padding: 0 20px;
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      position: relative;
      z-index: 100;
    }

    .logo {
      font-size: 24px;
      font-weight: bold;
      color: var(--primary-color);
      display: flex;
      align-items: center;
    }

    .logo svg {
      margin-right: 8px;
    }

    .search-bar {
      flex: 1;
      max-width: 600px;
      margin: 0 20px;
      position: relative;
    }

    .search-bar input {
      width: 100%;
      padding: 12px 20px 12px 50px;
      border: 1px solid var(--border-color);
      border-radius: 30px;
      font-size: 15px;
      transition: var(--transition);
      background-color: var(--secondary-color);
    }

    .search-bar input:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(51, 102, 255, 0.1);
      background-color: #fff;
    }

    .search-bar svg {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
      width: 18px;
      height: 18px;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .vip-button {
      padding: 8px 20px;
      background: var(--premium-gradient);
      color: white;
      border: none;
      border-radius: 24px;
      font-size: 14px;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      align-items: center;
      gap: 5px;
      box-shadow: 0 2px 8px rgba(255, 107, 0, 0.3);
    }

    .vip-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(255, 107, 0, 0.4);
    }

    .notification-icon {
      position: relative;
      cursor: pointer;
    }

    .notification-icon svg {
      width: 22px;
      height: 22px;
      color: var(--light-text);
    }

    .notification-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 16px;
      height: 16px;
      background-color: #ff4d4f;
      color: white;
      border-radius: 50%;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid white;
    }

    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      border: 2px solid var(--border-color);
      transition: var(--transition);
    }

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

    .avatar:hover {
      border-color: var(--primary-color);
    }

    .profile-card {
      position: absolute;
      top: 50px;
      right: 0;
      width: 320px;
      background: white;
      border-radius: 12px;
      box-shadow: var(--shadow);
      padding: 0;
      display: none;
      z-index: 1000;
      animation: fadeIn 0.2s ease;
      overflow: hidden;
    }

    .profile-card.active {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .profile-header {
      display: flex;
      align-items: center;
      padding: 20px;
      background: var(--primary-light);
      border-bottom: 1px solid var(--border-color);
    }

    .profile-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 15px;
      border: 3px solid white;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .profile-info h3 {
      font-size: 16px;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
    }

    .profile-info p {
      font-size: 13px;
      color: var(--light-text);
    }

    .vip-badge {
      background: var(--premium-gradient);
      color: white;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 10px;
      margin-left: 8px;
      display: inline-flex;
      align-items: center;
    }

    .vip-badge svg {
      width: 12px;
      height: 12px;
      margin-right: 3px;
    }

    .profile-stats {
      display: flex;
      justify-content: space-between;
      padding: 15px 20px;
      background-color: white;
    }

    .stat-item {
      text-align: center;
    }

    .stat-item .number {
      font-size: 18px;
      font-weight: bold;
      color: var(--primary-color);
    }

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

    .profile-membership {
      padding: 15px 20px;
      background-color: #fffbf0;
      border-top: 1px solid #ffe7ba;
      border-bottom: 1px solid #ffe7ba;
    }

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

    .membership-title {
      font-size: 14px;
      font-weight: 500;
      display: flex;
      align-items: center;
    }

    .membership-title svg {
      color: #ff9a00;
      margin-right: 5px;
      width: 16px;
      height: 16px;
    }

    .upgrade-link {
      color: #ff6b00;
      font-size: 12px;
      text-decoration: none;
    }

    .progress-bar {
      height: 6px;
      background-color: #f0f0f0;
      border-radius: 3px;
      overflow: hidden;
      margin-bottom: 8px;
    }

    .progress-fill {
      height: 100%;
      background: var(--premium-gradient);
      width: 35%;
    }

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

    .profile-actions {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      padding: 15px 20px;
    }

    .profile-action {
      display: flex;
      align-items: center;
      padding: 10px;
      border-radius: 8px;
      background-color: white;
      border: 1px solid var(--border-color);
      font-size: 13px;
      cursor: pointer;
      transition: var(--transition);
    }

    .profile-action:hover {
      background-color: var(--hover-color);
      border-color: var(--primary-color);
    }

    .profile-action svg {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      color: var(--primary-color);
    }

    .profile-footer {
      padding: 15px 20px;
      border-top: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
    }

    .logout-button {
      display: flex;
      align-items: center;
      color: #ff4d4f;
      background: none;
      border: none;
      font-size: 13px;
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 4px;
      transition: var(--transition);
    }

    .logout-button:hover {
      background-color: #fff1f0;
    }

    .logout-button svg {
      width: 14px;
      height: 14px;
      margin-right: 5px;
    }

    .settings-button {
      display: flex;
      align-items: center;
      color: var(--light-text);
      background: none;
      border: none;
      font-size: 13px;
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 4px;
      transition: var(--transition);
    }

    .settings-button:hover {
      background-color: var(--secondary-color);
      color: var(--text-color);
    }

    .settings-button svg {
      width: 14px;
      height: 14px;
      margin-right: 5px;
    }

    /* 主体布局 */
    .main-container {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    /* 侧边栏样式 */
    aside {
      width: 200px;
      background-color: white;
      border-right: 1px solid var(--border-color);
      padding: 20px 0;
      display: flex;
      flex-direction: column;
      height: calc(100vh - 60px);
      transition: transform 0.3s ease;
      z-index: 90;
    }

    .sidebar-menu {
      flex: 1;
      overflow-y: auto;
    }

    .sidebar-menu ul {
      list-style-type: none;
    }

    .menu-item {
      padding: 12px 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
      transition: var(--transition);
      color: var(--text-color);
      font-size: 14px;
    }

    .menu-item svg {
      margin-right: 10px;
      color: var(--light-text);
      width: 18px;
      height: 18px;
    }

    .menu-item:hover, .menu-item.active {
      background-color: var(--hover-color);
      color: var(--primary-color);
    }

    .menu-item.active svg {
      color: var(--primary-color);
    }

    .sidebar-footer {
      padding: 15px 20px;
      border-top: 1px solid var(--border-color);
    }

    .upgrade-team, .download-app {
      padding: 15px;
      border-radius: 10px;
      margin-bottom: 15px;
      font-size: 13px;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      transition: var(--transition);
    }

    .upgrade-team {
      background-color: #f0f7ff;
      border: 1px solid #d6e8ff;
    }

    .download-app {
      background-color: #fff7e6;
      border: 1px solid #ffe7ba;
    }

    .upgrade-team:hover, .download-app:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

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

    .promo-title {
      font-weight: 500;
      display: flex;
      align-items: center;
    }

    .promo-title svg {
      margin-right: 5px;
      color: var(--primary-color);
      width: 16px;
      height: 16px;
    }

    .download-app .promo-title svg {
      color: #ff9a00;
    }

    .promo-arrow svg {
      width: 14px;
      height: 14px;
      color: var(--light-text);
    }

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

    .qr-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
    }

    .qr-label {
      background-color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 11px;
      border: 1px solid #ffe7ba;
    }

    .qr-code {
      width: 60px;
      height: 60px;
      background-color: white;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      color: var(--light-text);
      border: 1px solid #ffe7ba;
    }

    /* 主内容区样式 */
    main {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: calc(100vh - 60px);
      overflow: hidden;
    }

    /* 筛选栏样式 */
    .filter-bar {
      padding: 15px 20px;
      border-bottom: 1px solid var(--border-color);
      background-color: white;
    }

    .filter-row {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
    }

    .filter-row::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    }

    .filter-row:last-child {
      margin-bottom: 0;
    }

    .filter-label {
      font-size: 14px;
      color: var(--light-text);
      margin-right: 15px;
      min-width: 60px;
      flex-shrink: 0;
    }

    .filter-options {
      display: flex;
      flex-wrap: nowrap;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 5px;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
    }

    .filter-options::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    }

    .filter-option {
      padding: 6px 12px;
      border-radius: 16px;
      font-size: 13px;
      cursor: pointer;
      transition: var(--transition);
      background-color: white;
      border: 1px solid transparent;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .filter-option:hover, .filter-option.active {
      color: var(--primary-color);
      background-color: var(--hover-color);
      border-color: var(--primary-color);
    }

    .filter-option.active {
      font-weight: 500;
    }

    .sort-options {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 15px;
      flex-shrink: 0;
    }

    .sort-option {
      font-size: 13px;
      color: var(--light-text);
      cursor: pointer;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }

    .sort-option svg {
      margin-left: 3px;
      width: 14px;
      height: 14px;
    }

    .sort-option:hover, .sort-option.active {
      color: var(--primary-color);
    }

    /* 模板展示区样式 */
    .template-container {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      background-color: #f9fafb;
    }

    .templates-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 20px;
    }

    .template-item {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: var(--transition);
      cursor: pointer;
      position: relative;
    }

    .template-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .template-image {
      height: 180px;
      overflow: hidden;
      position: relative;
    }

    .template-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .template-item:hover .template-image img {
      transform: scale(1.05);
    }

    .template-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .template-item:hover .template-overlay {
      opacity: 1;
    }

    .template-actions {
      display: flex;
      gap: 10px;
    }

    .template-action {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition);
    }

    .template-action:hover {
      background: var(--primary-color);
      transform: translateY(-3px);
    }

    .template-action:hover svg {
      color: white;
    }

    .template-action svg {
      width: 16px;
      height: 16px;
      color: var(--text-color);
      transition: var(--transition);
    }

    .template-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 500;
      z-index: 1;
    }

    .badge-premium {
      background: var(--premium-gradient);
      color: white;
      display: flex;
      align-items: center;
    }

    .badge-premium svg {
      width: 12px;
      height: 12px;
      margin-right: 3px;
    }

    .badge-new {
      background-color: #52c41a;
      color: white;
    }

    .template-info {
      padding: 12px;
    }

    .template-title {
      font-size: 14px;
      margin-bottom: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .template-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: var(--light-text);
    }

    .template-tag {
      background-color: var(--secondary-color);
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 11px;
    }

    .template-downloads {
      display: flex;
      align-items: center;
    }

    .template-downloads svg {
      margin-right: 3px;
      width: 12px;
      height: 12px;
    }

    /* 移动端菜单按钮 */
    .mobile-menu-button {
      display: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: white;
      border: 1px solid var(--border-color);
      position: fixed;
      bottom: 20px;
      left: 20px;
      z-index: 100;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .mobile-menu-button svg {
      width: 20px;
      height: 20px;
      color: var(--text-color);
    }

    /* 遮罩层 */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--overlay-bg);
      z-index: 80;
      display: none;
      animation: fadeIn 0.2s ease;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
      .search-bar {
        max-width: 300px;
      }
    }

    @media (max-width: 768px) {
      header {
        padding: 0 15px;
      }

      .search-bar {
        max-width: 200px;
        margin: 0 10px;
      }

      .logo span {
        display: none;
      }

      aside {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        transform: translateX(-100%);
        width: 250px;
      }

      aside.active {
        transform: translateX(0);
      }

      .mobile-menu-button {
        display: flex;
      }

      .overlay.active {
        display: block;
      }

      .templates-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 15px;
      }
    }

    @media (max-width: 576px) {
      .header-right {
        gap: 10px;
      }

      .vip-button {
        padding: 6px 10px;
      }

      .vip-button span {
        display: none;
      }

      .search-bar {
        max-width: 150px;
      }

      .search-bar input {
        padding: 8px 15px 8px 35px;
      }

      .search-bar svg {
        left: 12px;
      }

      .filter-row {
        margin-bottom: 8px;
      }

      .filter-label {
        min-width: 40px;
        margin-right: 8px;
      }

      .filter-option {
        padding: 4px 8px;
        font-size: 12px;
      }

      .templates-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
      }

      .template-image {
        height: 140px;
      }
    }
  </style>
</head>

<body>
  <!-- 顶部导航栏 -->
  <header>
    <div class="logo">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
        <path d="M2 17l10 5 10-5"></path>
        <path d="M2 12l10 5 10-5"></path>
      </svg>
      <span>稿定设计</span>
    </div>
    <div class="search-bar">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
      </svg>
      <input type="text" placeholder="搜索模板、素材、创意灵感...">
    </div>
    <div class="header-right">
      <button class="vip-button">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
        </svg>
        <span>订购会员</span>
      </button>
      <div class="notification-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
          <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
        </svg>
        <div class="notification-badge">3</div>
      </div>
      <div class="avatar" id="avatar-button">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像">
        <div class="profile-card" id="profile-card">
          <div class="profile-header">
            <img class="profile-avatar" src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像">
            <div class="profile-info">
              <h3>
                张小美
                <span class="vip-badge">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="12 2 15.09 8.26 22 9.27  stroke-linejoin="round">
                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                  </svg>
                  VIP会员
                </span>
              </h3>
              <p>设计爱好者</p>
            </div>
          </div>
          <div class="profile-stats">
            <div class="stat-item">
              <div class="number">128</div>
              <div class="label">作品</div>
            </div>
            <div class="stat-item">
              <div class="number">56</div>
              <div class="label">收藏</div>
            </div>
            <div class="stat-item">
              <div class="number">12</div>
              <div class="label">团队</div>
            </div>
          </div>
          <div class="profile-membership">
            <div class="membership-header">
              <div class="membership-title">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M20.2 7.8l-7.7 7.7-4-4-5.7 5.7"/>
                  <path d="M15 7h6v6"/>
                </svg>
                高级会员
              </div>
              <a href="#" class="upgrade-link">升级套餐</a>
            </div>
            <div class="progress-bar">
              <div class="progress-fill"></div>
            </div>
            <div class="membership-usage">本月已使用 35/100 次下载</div>
          </div>
          <div class="profile-actions">
            <div class="profile-action">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
              </svg>
              个人中心
            </div>
            <div class="profile-action">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
              </svg>
              我的收藏
            </div>
            <div class="profile-action">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="7 10 12 15 17 10"></polyline>
                <line x1="12" y1="15" x2="12" y2="3"></line>
              </svg>
              下载记录
            </div>
            <div class="profile-action">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="18" cy="5" r="3"></circle>
                <circle cx="6" cy="12" r="3"></circle>
                <circle cx="18" cy="19" r="3"></circle>
                <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
                <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
              </svg>
              我的分享
            </div>
          </div>
          <div class="profile-footer">
            <button class="logout-button">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
                <polyline points="16 17 21 12 16 7"></polyline>
                <line x1="21" y1="12" x2="9" y2="12"></line>
              </svg>
              退出登录
            </button>
            <button class="settings-button">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="3"></circle>
                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
              </svg>
              账号设置
            </button>
          </div>
        </div>
      </div>
    </div>
  </header>

  <div class="main-container">
    <!-- 侧边栏 -->
    <aside id="sidebar">
      <div class="sidebar-menu">
        <ul>
          <li class="menu-item">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 19l7-7 3 3-7 7-3-3z"></path>
              <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path>
              <path d="M2 2l7.586 7.586"></path>
              <circle cx="11" cy="11" r="2"></circle>
            </svg>
            <span>创作</span>
          </li>
          <li class="menu-item">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
              <circle cx="12" cy="7" r="4"></circle>
            </svg>
            <span>我的</span>
          </li>
          <li class="menu-item">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <span>创建设计</span>
          </li>
          <li class="menu-item active">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="3" y1="9" x2="21" y2="9"></line>
              <line x1="9" y1="21" x2="9" y2="9"></line>
            </svg>
            <span>模板</span>
          </li>
          <li class="menu-item">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
              <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
              <line x1="12" y1="22.08" x2="12" y2="12"></line>
            </svg>
            <span>AI工具</span>
          </li>
          <li class="menu-item">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
              <circle cx="9" cy="7" r="4"></circle>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
            </svg>
            <span>团队空间</span>
          </li>
        </ul>
      </div>
      <div class="sidebar-footer">
        <div class="upgrade-team">
          <div class="promo-header">
            <div class="promo-title">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                <circle cx="8.5" cy="7" r="4"></circle>
                <line x1="20" y1="8" x2="20" y2="14"></line>
                <line x1="23" y1="11" x2="17" y2="11"></line>
              </svg>
              免费升级为团队
            </div>
            <div class="promo-arrow">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="9 18 15 12 9 6"></polyline>
              </svg>
            </div>
          </div>
          <div class="promo-desc">邀请好友协作，共同创作精彩内容</div>
        </div>
        <div class="download-app">
          <div class="promo-header">
            <div class="promo-title">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
                <line x1="12" y1="18" x2="12.01" y2="18"></line>
              </svg>
              稿定APP，随时创作
            </div>
            <div class="promo-arrow">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="9 18 15 12 9 6"></polyline>
              </svg>
            </div>
          </div>
          <div class="promo-desc">手机扫码下载，随时随地创作</div>
          <div class="qr-container">
            <div class="qr-label">扫码下载</div>
            <div class="qr-code">二维码</div>
          </div>
        </div>
      </div>
    </aside>

    <!-- 遮罩层 -->
    <div class="overlay" id="overlay"></div>

    <!-- 移动端菜单按钮 -->
    <div class="mobile-menu-button" id="mobile-menu-button">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="3" y1="12" x2="21" y2="12"></line>
        <line x1="3" y1="6" x2="21" y2="6"></line>
        <line x1="3" y1="18" x2="21" y2="18"></line>
      </svg>
    </div>

    <!-- 主内容区 -->
    <main>
      <!-- 筛选栏 -->
      <div class="filter-bar">
        <div class="filter-row">
          <div class="filter-options">
            <div class="filter-option active">图片模板</div>
            <div class="filter-option">PPT模板</div>
            <div class="filter-option">视频模板</div>
            <div class="filter-option">H5网页模板</div>
          </div>
        </div>
        <div class="filter-row">
          <div class="filter-label">渠道：</div>
          <div class="filter-options">
            <div class="filter-option active">全部</div>
            <div class="filter-option">电商</div>
            <div class="filter-option">微信/公众号</div>
            <div class="filter-option">社群发圈</div>
            <div class="filter-option">生活娱乐</div>
            <div class="filter-option">小红书</div>
            <div class="filter-option">短视频平台</div>
            <div class="filter-option">线下印刷</div>
            <div class="filter-option">线下电商</div>
          </div>
        </div>
        <div class="filter-row">
          <div class="filter-label">物料：</div>
          <div class="filter-options">
            <div class="filter-option active">全部</div>
            <div class="filter-option">电商竖版海报</div>
            <div class="filter-option">商品主图</div>
            <div class="filter-option">详情页</div>
            <div class="filter-option">LOGO</div>
            <div class="filter-option">视频封面</div>
            <div class="filter-option">直播背景</div>
            <div class="filter-option">胶囊banner</div>
            <div class="filter-option">店铺首页</div>
            <div class="filter-option">电商横版海报</div>
            <div class="filter-option">更多</div>
          </div>
        </div>
        <div class="filter-row">
          <div class="filter-label">行业：</div>
          <div class="filter-options">
            <div class="filter-option active">全部</div>
            <div class="filter-option">通用</div>
            <div class="filter-option">教育培训</div>
            <div class="filter-option">金融保险</div>
            <div class="filter-option">商品零售</div>
            <div class="filter-option">企业行政</div>
            <div class="filter-option">美容美妆</div>
            <div class="filter-option">食品生鲜</div>
            <div class="filter-option">服饰箱包</div>
            <div class="filter-option">更多</div>
          </div>
          <div class="sort-options">
            <div class="sort-option active">
              综合排序
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M6 9l6 6 6-6"/>
              </svg>
            </div>
            <div class="sort-option">最新上传</div>
            <div class="sort-option">最多下载</div>
          </div>
        </div>
        <div class="filter-row">
          <div class="filter-options">
            <div class="filter-option">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
                <line x1="9" y1="9" x2="9.01" y2="9"></line>
                <line x1="15" y1="9" x2="15.01" y2="9"></line>
              </svg>
              颜色
            </div>
            <div class="filter-option">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 20h9"></path>
                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19 3 20l1-4L16.5 3.5z"></path>
              </svg>
              风格
            </div>
            <div class="filter-option">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="3" y1="9" x2="21" y2="9"></line>
                <line x1="9" y1="21" x2="9" y2="9"></line>
              </svg>
              版式
            </div>
            <div class="filter-option">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="9 11 12 14 22 4"></polyline>
                <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
              </svg>
              只看套装
            </div>
          </div>
        </div>
      </div>

      <!-- 模板展示区 -->
      <div class="template-container">
        <div class="templates-grid">
          <!-- 模板项目 -->
          <div class="template-item">
            <div class="template-badge badge-premium">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
              </svg>
              会员
            </div>
            <div class="template-image">
              <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="运动鞋电商主图">
              <div class="template-overlay">
                <div class="template-actions">
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                      <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                  </div>
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                    </svg>
                  </div>
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                      <polyline points="7 10 12 15 17 10"></polyline>
                      <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <div class="template-info">
              <div class="template-title">运动鞋电商主图模板</div>
              <div class="template-meta">
                <div class="template-tag">电商</div>
                <div class="template-downloads">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7 10 12 15 17 10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                  </svg>
                  2.3k
                </div>
              </div>
            </div>
          </div>

          <div class="template-item">
            <div class="template-badge badge-new">新品</div>
            <div class="template-image">
              <img src="https://images.unsplash.com/photo-1583394838336-acd977736f90?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="美妆产品主图">
              <div class="template-overlay">
                <div class="template-actions">
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                      <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                  </div>
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                    </svg>
                  </div>
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                      <polyline points="7 10 12 15 17 10"></polyline>
                      <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <div class="template-info">
              <div class="template-title">高端美妆产品主图设计</div>
              <div class="template-meta">
                <div class="template-tag">美妆</div>
                <div class="template-downloads">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7 10 12 15 17 10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                  </svg>
                  1.8k
                </div>
              </div>
            </div>
          </div>

          <div class="template-item">
            <div class="template-image">
              <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="耳机产品详情">
              <div class="template-overlay">
                <div class="template-actions">
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                      <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                  </div>
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                    </svg>
                  </div>
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                      <polyline points="7 10 12 15 17 10"></polyline>
                      <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <div class="template-info">
              <div class="template-title">数码耳机详情页模板</div>
              <div class="template-meta">
                <div class="template-tag">数码</div>
                <div class="template-downloads">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7 10 12 15 17 10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                  </svg>
                  3.5k
                </div>
              </div>
            </div>
          </div>

          <div class="template-item">
            <div class="template-badge badge-premium">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
              </svg>
              会员
            </div>
            <div class="template-image">
              <img src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="珠宝首饰">
              <div class="template-overlay">
                <div class="template-actions">
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                      <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                  </div>
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                    </svg>
                  </div>
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                      <polyline points="7 10 12 15 17 10"></polyline>
                      <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <div class="template-info">
              <div class="template-title">高端珠宝首饰展示模板</div>
              <div class="template-meta">
                <div class="template-tag">奢侈品</div>
                <div class="template-downloads">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7 10 12 15 17 10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                  </svg>
                  1.2k
                </div>
              </div>
            </div>
          </div>

          <div class="template-item">
            <div class="template-badge badge-new">新品</div>
            <div class="template-image">
              <img src="https://images.unsplash.com/photo-1560343090-f0409e92791a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="服装展示">
              <div class="template-overlay">
                <div class="template-actions">
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                      <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                  </div>
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                    </svg>
                  </div>
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                      <polyline points="7 10 12 15 17 10"></polyline>
                      <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <div class="template-info">
              <div class="template-title">时尚服装电商海报</div>
              <div class="template-meta">
                <div class="template-tag">服饰</div>
                <div class="template-downloads">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7 10 12 15 17 10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                  </svg>
                  2.7k
                </div>
              </div>
            </div>
          </div>

          <div class="template-item">
            <div class="template-image">
              <img src="https://images.unsplash.com/photo-1576402187878-974f70c890a5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="食品生鲜">
              <div class="template-overlay">
                <div class="template-actions">
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                      <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                  </div>
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                    </svg>
                  </div>
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                      <polyline points="7 10 12 15 17 10"></polyline>
                      <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <div class="template-info">
              <div class="template-title">生鲜食品促销海报</div>
              <div class="template-meta">
                <div class="template-tag">食品</div>
                <div class="template-downloads">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7 10 12 15 17 10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                  </svg>
                  1.9k
                </div>
              </div>
            </div>
          </div>

          <div class="template-item">
            <div class="template-badge badge-premium">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
              </svg>
              会员
            </div>
            <div class="template-image">
              <img src="https://images.unsplash.com/photo-1586953208448-b95a79798f07?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="家居装饰">
              <div class="template-overlay">
                <div class="template-actions">
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                      <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                  </div>
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                    </svg>
                  </div>
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                      <polyline points="7 10 12 15 17 10"></polyline>
                      <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <div class="template-info">
              <div class="template-title">北欧风家居详情页模板</div>
              <div class="template-meta">
                <div class="template-tag">家居</div>
                <div class="template-downloads">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7 10 12 15 17 10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                  </svg>
                  2.1k
                </div>
              </div>
            </div>
          </div>

          <div class="template-item">
            <div class="template-image">
              <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="智能手表">
              <div class="template-overlay">
                <div class="template-actions">
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                      <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                  </div>
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                    </svg>
                  </div>
                  <div class="template-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                      <polyline points="7 10 12 15 17 10"></polyline>
                      <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <div class="template-info">
              <div class="template-title">智能手表产品主图</div>
              <div class="template-meta">
                <div class="template-tag">数码</div>
                <div class="template-downloads">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7 10 12 15 17 10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                  </svg>
                  3.2k
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>

  <script>
    // 简单的交互效果
    document.addEventListener('DOMContentLoaded', function() {
      // 筛选选项点击效果
      const filterOptions = document.querySelectorAll('.filter-option');
      filterOptions.forEach(option => {
        option.addEventListener('click', function() {
          const siblings = Array.from(this.parentNode.children);
          siblings.forEach(sib => {
            if (sib !== this && sib.classList.contains('active')) {
              sib.classList.remove('active');
            }
          });
          this.classList.toggle('active');
        });
      });

      // 排序选项点击效果
      const sortOptions = document.querySelectorAll('.sort-option');
      sortOptions.forEach(option => {
        option.addEventListener('click', function() {
          sortOptions.forEach(opt => opt.classList.remove('active'));
          this.classList.add('active');
        });
      });

      // 头像点击显示个人信息卡片
      const avatarButton = document.getElementById('avatar-button');
      const profileCard = document.getElementById('profile-card');
      
      avatarButton.addEventListener('click', function(e) {
        e.stopPropagation();
        profileCard.classList.toggle('active');
      });
      
      document.addEventListener('click', function(e) {
        if (!profileCard.contains(e.target) && e.target !== avatarButton) {
          profileCard.classList.remove('active');
        }
      });

      // 移动端侧边栏
      const mobileMenuButton = document.getElementById('mobile-menu-button');
      const sidebar = document.getElementById('sidebar');
      const overlay = document.getElementById('overlay');
      
      mobileMenuButton.addEventListener('click', function() {
        sidebar.classList.toggle('active');
        overlay.classList.toggle('active');
      });
      
      overlay.addEventListener('click', function() {
        sidebar.classList.remove('active');
        overlay.classList.remove('active');
      });
    });
  </script>
</body>

</html>

优化说明

我已经根据您的反馈对稿定设计模板页面进行了全面优化，主要改进包括：

  1. 移动端侧边栏与遮罩：
  2. 添加了固定在左下角的菜单按钮
  3. 点击按钮时，侧边栏从左侧滑入
  4. 添加了半透明遮罩层覆盖主内容区
  5. 点击遮罩可关闭侧边栏
  1. 头像点击显示个人信息卡片：
  2. 改为点击头像显示个人信息卡片（而非悬停）
  3. 卡片内容更丰富，包含VIP会员状态
  4. 添加了会员使用进度条
  5. 增加了更多个人数据统计和操作选项
  1. 搜索框优化：
  2. 搜索框更大更突出
  3. 添加了圆角和阴影效果
  4. 改进了搜索图标和占位文本
  5. 添加了聚焦效果
  1. 移动端筛选横向滚动：
  2. 所有筛选选项行都支持横向滚动
  3. 隐藏了滚动条以保持美观
  4. 确保筛选标签不会被截断
  5. 优化了移动端的显示效果
  1. 其他改进：
  2. 添加了模板悬停效果和操作按钮
  3. 改进了会员和新品标签的显示
  4. 优化了侧边栏的团队升级和APP下载区域
  5. 添加了通知图标和未读消息提示

这些优化使页面更加美观大气，同时提升了用户体验和移动端兼容性。

相关推荐

现代化后台管理系统

现代化后台管理系统

阅读量 159 · 2025-05-13
帮助中心 - 专业问题解决方案

帮助中心 - 专业问题解决方案

阅读量 162 · 2025-05-03
创意素材库 - 高品质设计资源平台

创意素材库 - 高品质设计资源平台

阅读量 117 · 2025-05-02
响应式后台管理系统

响应式后台管理系统

阅读量 123 · 2025-04-28
透明素材库 - 免费PNG透明背景图片下载

透明素材库 - 免费PNG透明背景图片下载

阅读量 132 · 2025-04-26
亮色响应式网站

亮色响应式网站

阅读量 139 · 2025-04-26
漂亮的搜索模块

漂亮的搜索模块

阅读量 136 · 2025-04-25
管理系统登录后台登陆

管理系统登录后台登陆

阅读量 135 · 2025-04-25
高级登录模块布局设计

高级登录模块布局设计

阅读量 128 · 2025-04-25
企业官网科技未来 - 企业官网

企业官网科技未来 - 企业官网

阅读量 152 · 2025-04-25
程序员主页

程序员主页

阅读量 164 · 2025-04-25
现代聊天界面

现代聊天界面

阅读量 145 · 2025-04-25
优雅登录界面

优雅登录界面

阅读量 142 · 2025-04-25
AI聊天窗口

AI聊天窗口

阅读量 123 · 2025-04-25
高级编程助手聊天界面

高级编程助手聊天界面

阅读量 127 · 2025-04-25
高级登录系统

高级登录系统

阅读量 121 · 2025-04-25
会员中心

会员中心

阅读量 139 · 2025-04-25
CodeVerse | 极客代码分享社区

CodeVerse | 极客代码分享社区

阅读量 142 · 2025-04-24
炫酷响应式网站

炫酷响应式网站

阅读量 149 · 2025-04-24
炫酷代码分享社区 - HTML实现

炫酷代码分享社区 - HTML实现

阅读量 169 · 2025-04-23