编辑页面

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: #ffffff;
            --secondary: #f8f9fa;
            --accent: #e63946;
            --accent-dark: #c1121f;
            --text: #1a1a2e;
            --text-secondary: #4a4a68;
            --text-muted: #8c8ca1;
            --gold: #d4af37;
            --border: rgba(0,0,0,0.08);
            --shadow: 0 10px 40px rgba(0,0,0,0.08);
        }

        html {
            scroll-behavior: smooth;
            scroll-snap-type: y mandatory;
            overflow-y: scroll;
            overflow-x: hidden;
        }

        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
            background: var(--primary);
            color: var(--text);
            line-height: 1.8;
            font-size: 16px;
        }

        /* 顶部导航 */
        .nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 0 60px;
            height: 90px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            background: rgba(255,255,255,0.98);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border);
        }

        .nav-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        

        .nav-logo .logo-text {
            font-size: 20px;
            font-weight: 700;
            color: var(--text);
            letter-spacing: 2px;
        }

        .nav-menu {
            display: flex;
            gap: 45px;
        }

        .nav-menu a {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 15px;
            font-weight: 500;
            letter-spacing: 1px;
            position: relative;
            transition: color 0.3s;
        }

        .nav-menu a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 0;
            height: 2px;
            background: var(--accent);
            transition: width 0.3s;
        }

        .nav-menu a:hover {
            color: var(--accent);
        }

        .nav-menu a:hover::after {
            width: 100%;
        }

        .nav-menu a.active {
            color: var(--accent);
        }

        .nav-cta {
            padding: 12px 28px;
            background: var(--accent);
            color: white;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            border-radius: 50px;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(230,57,70,0.3);
        }

        .nav-cta:hover {
            background: var(--accent-dark);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(230,57,70,0.4);
        }

        /* 导航点 */
        .nav-dots {
            position: fixed;
            right: 50px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .nav-dot {
            width: 10px;
            height: 10px;
            border: 2px solid var(--text-muted);
            transform: rotate(45deg);
            cursor: pointer;
            transition: all 0.4s;
            position: relative;
            background: transparent;
        }

        .nav-dot::before {
            content: attr(data-label);
            position: absolute;
            right: 25px;
            top: 50%;
            transform: translateY(-50%) rotate(-45deg);
            white-space: nowrap;
            font-size: 12px;
            letter-spacing: 1px;
            color: var(--text-muted);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .nav-dot:hover::before {
            opacity: 1;
        }

        .nav-dot.active {
            background: var(--accent);
            border-color: var(--accent);
            box-shadow: 0 0 15px rgba(230,57,70,0.4);
        }

        /* 咨询按钮 */
        .consult-btn {
            position: fixed;
            right: 50px;
            bottom: 80px;
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 32px;
            background: white;
            color: var(--text);
            cursor: pointer;
            box-shadow: var(--shadow);
            border-radius: 50px;
            transition: all 0.4s;
            font-weight: 600;
            font-size: 15px;
        }

        .consult-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.15);
        }

        .consult-btn .icon {
            width: 36px;
            height: 36px;
            background: var(--accent);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .consult-btn .icon svg {
            width: 18px;
            height: 18px;
            fill: white;
        }

        /* 全屏模块 */
        .section {
            min-height: 100vh;
            width: 100%;
            scroll-snap-align: start;
            position: relative;
            overflow: hidden;
        }

        /* ========== 第一屏：企业概况 ========== */
        .section-1 {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            min-height: 100vh;
            padding-top: 90px;
        }

        .s1-left {
            padding: 80px 80px 80px 120px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }

        .s1-left::before {
            content: '01';
            position: absolute;
            top: 100px;
            left: 30px;
            font-size: 220px;
            font-weight: 900;
            color: rgba(0,0,0,0.03);
            line-height: 1;
        }

        .s1-label {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 30px;
        }

        .s1-label .line {
            width: 40px;
            height: 3px;
            background: var(--accent);
        }

        .s1-label span {
            font-size: 13px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--accent);
            font-weight: 600;
        }

        .s1-title {
            font-size: 64px;
            font-weight: 900;
            line-height: 1.15;
            margin-bottom: 15px;
            letter-spacing: -1px;
            color: var(--text);
        }

        .s1-title .highlight {
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .s1-slogan {
            font-size: 26px;
            font-weight: 300;
            color: var(--text-secondary);
            margin-bottom: 40px;
            letter-spacing: 6px;
        }

        .s1-formula {
            background: var(--secondary);
            padding: 30px 35px;
            margin-bottom: 35px;
            position: relative;
            border-radius: 16px;
            border-left: 4px solid var(--accent);
        }

        .s1-formula p {
            font-size: 15px;
            line-height: 1.9;
            color: var(--text-secondary);
        }

        .s1-formula .formula-main {
            font-size: 17px;
            color: var(--text);
            margin-bottom: 12px;
            font-weight: 500;
        }

        .s1-formula .formula-main span {
            color: var(--accent);
            font-weight: 700;
        }

        .s1-desc {
            font-size: 15px;
            color: var(--text-muted);
            line-height: 2;
            max-width: 520px;
        }

        .s1-right {
            position: relative;
            overflow: hidden;
        }

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

        .s1-right::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, rgba(255,255,255,0.1), transparent);
        }

        /* 数据统计叠加层 */
        .stats-overlay {
            position: absolute;
            bottom: 60px;
            left: 60px;
            right: 60px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            z-index: 10;
        }

        .stat-card {
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(20px);
            padding: 25px;
            border-radius: 16px;
            box-shadow: var(--shadow);
            transition: all 0.4s;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.12);
        }

        .stat-card .stat-label {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 8px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .stat-card .stat-value {
            font-size: 36px;
            font-weight: 900;
            color: var(--text);
            line-height: 1;
        }

        .stat-card .stat-value .unit {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-secondary);
            margin-left: 4px;
        }

        .stat-card .stat-value .highlight {
            color: var(--accent);
        }

        /* ========== 第二屏：解决方案 ========== */
        .section-2 {
            padding: 120px 100px;
            background: var(--secondary);
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 70px;
            position: relative;
        }

        .section-header::before {
            content: attr(data-num);
            position: absolute;
            top: -80px;
            right: 0;
            font-size: 220px;
            font-weight: 900;
            color: rgba(0,0,0,0.03);
            line-height: 1;
        }

        .section-header h2 {
            font-size: 52px;
            font-weight:900;
            letter-spacing: -1px;
            line-height: 1.2;
            color: var(--text);
        }

        .section-header h2 .num {
            color: var(--accent);
            font-size: 68px;
        }

        .section-header .header-right {
            max-width: 450px;
        }

        .section-header p {
            color: var(--text-secondary);
            font-size: 15px;
            line-height: 1.9;
        }

        .solutions-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 25px;
        }

        .solution-card {
            background: white;
            display: flex;
            flex-direction: column;
            transition: all 0.5s;
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.04);
            cursor: pointer;
        }

        .solution-card .card-image {
            height: 140px;
            overflow: hidden;
            flex-shrink: 0;
        }

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

        .solution-card:hover .card-image img {
            transform: scale(1.08);
        }

        .solution-card .card-body {
            padding: 25px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .solution-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--accent), var(--gold));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s;
        }

        .solution-card:hover::before {
            transform: scaleX(1);
        }

        .solution-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
        }

        .solution-card .card-body .card-num {
            font-size: 48px;
            font-weight: 900;
            color: rgba(0,0,0,0.04);
            margin-bottom: 10px;
            transition: color 0.4s;
            line-height: 1;
        }

        .solution-card:hover .card-body .card-num {
            color: rgba(230,57,70,0.1);
        }

        .solution-card .card-body h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 12px;
            color: var(--text);
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border);
        }

        .solution-card .card-body p {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.8;
            flex: 1;
        }

        .solution-card .card-body .card-tag {
            margin-top: 16px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            font-weight: 600;
            color: var(--accent);
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .solution-card .card-body .card-tag svg {
            width: 16px;
            height: 16px;
        }

        /* ========== 第三屏：推荐案例 ========== */
        .section-3 {
            padding: 120px 100px;
        }

        .cases-layout {
            display: grid;
            grid-template-columns: 380px 1fr;
            gap: 60px;
            align-items: start;
        }

        .cases-sidebar {
            position: sticky;
            top: 140px;
        }

        .cases-sidebar::before {
            content: '03';
            position: absolute;
            top: -60px;
            left: 0;
            font-size: 180px;
            font-weight: 900;
            color: rgba(0,0,0,0.03);
            line-height: 1;
        }

        .cases-sidebar h2 {
            font-size: 44px;
            font-weight: 900;
            margin-bottom: 25px;
            line-height: 1.2;
            color: var(--text);
            position: relative;
        }

        .cases-sidebar h2 .num {
            color: var(--accent);
        }

        .cases-sidebar p {
            color: var(--text-secondary);
            font-size: 15px;
            line-height: 1.9;
            margin-bottom: 35px;
        }

        .cases-sidebar .view-all {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            color: var(--accent);
            font-size: 15px;
            font-weight: 600;
            letter-spacing: 1px;
            text-decoration: none;
            transition: gap 0.3s;
        }

        .cases-sidebar .view-all:hover {
            gap: 20px;
        }

        .cases-sidebar .view-all svg {
            width: 20px;
            height: 20px;
        }

        .cases-main {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }

        .case-card {
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.5s;
            border-radius: 20px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        }

        .case-card:nth-child(1) {
            grid-column: span 2;
        }

        .case-card::before {
            content: '';
            display: block;
            padding-top: 65%;
        }

        .case-card::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.75));
            z-index: 1;
        }

        .case-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }

        .case-card .card-bg {
            position: absolute;
            inset: 0;
            transition: transform 0.6s;
        }

        .case-card .card-bg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .case-card:hover .card-bg {
            transform: scale(1.08);
        }

        .case-card .card-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 30px;
            z-index: 2;
        }

        .case-card .card-tag {
            display: inline-block;
            padding: 6px 14px;
            background: var(--accent);
            font-size: 11px;
            letter-spacing: 1px;
            color: white;
            font-weight: 600;
            margin-bottom: 12px;
        }

        .case-card h3 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 6px;
            color: white;
        }

        .case-card p {
            font-size: 13px;
            color: rgba(255,255,255,0.75);
        }

        /* ========== 第四屏：合作客户 ========== */
        .section-4 {
            padding: 120px 100px;
            background: linear-gradient(180deg, var(--secondary) 0%, var(--primary) 100%);
        }

        .clients-header {
            text-align: center;
            margin-bottom: 70px;
            position: relative;
        }

        .clients-header::before {
            content: '04';
            position: absolute;
            top: -60px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 180px;
            font-weight: 900;
            color: rgba(0,0,0,0.03);
            line-height: 1;
        }

        .clients-header h2 {
            font-size: 52px;
            font-weight: 900;
            margin-bottom: 18px;
            color: var(--text);
        }

        .clients-header h2 .num {
            color: var(--accent);
        }

        .clients-header p {
            color: var(--text-secondary);
            font-size: 16px;
        }

        .clients-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
        }

        .client-card {
            aspect-ratio: 1.8;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s;
            cursor: pointer;
            border-radius: 16px;
            overflow: hidden;
            background-size: 50% auto;
            background-position: center;
            background-repeat: no-repeat;
        }

        .client-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255,255,255,0.92);
            z-index: 1;
            transition: all 0.4s;
        }

        .client-card:hover::before {
            background: rgba(230,57,70,0.06);
        }

        .client-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.12);
        }

        .client-card .logo-text {
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 2px;
            color: var(--text);
            position: relative;
            z-index: 2;
            opacity: 0.8;
            transition: opacity 0.4s;
        }

        .client-card:hover .logo-text {
            opacity: 1;
        }

        /* ========== 第五屏：企业消息 ========== */
        .section-5 {
            padding: 120px 100px;
        }

        .news-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 60px;
            position: relative;
        }

        .news-header::before {
            content: '05';
            position: absolute;
            top: -60px;
            right: 0;
            font-size: 180px;
            font-weight: 900;
            color: rgba(0,0,0,0.03);
            line-height: 1;
        }

        .news-header h2 {
            font-size: 52px;
            font-weight: 900;
            color: var(--text);
        }

        .news-header h2 .num {
            color: var(--accent);
        }

        .news-header .more-link {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1px;
            text-decoration: none;
            transition: color 0.3s;
        }

        .news-header .more-link:hover {
            color: var(--accent);
        }

        .news-header .more-link svg {
            width: 18px;
            height: 18px;
        }

        .news-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .news-card {
            background: white;
            border: 1px solid var(--border);
            transition: all 0.5s;
            cursor: pointer;
            overflow: hidden;
            border-radius: 20px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.04);
        }

        .news-card:hover {
            border-color: transparent;
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
        }

        .news-card .news-img {
            height: 220px;
            position: relative;
            overflow: hidden;
        }

        .news-card .news-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s;
        }

        .news-card:hover .news-img img {
            transform: scale(1.08);
        }

        .news-date {
            position: absolute;
            top: 20px;
            left: 20px;
            background: white;
            padding: 12px 18px;
            text-align: center;
            z-index: 1;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .news-date .day {
            font-size: 28px;
            font-weight: 900;
            line-height: 1;
            color: var(--accent);
        }

        .news-date .month {
            font-size: 11px;
            letter-spacing: 1px;
            color: var(--text-muted);
        }

        .news-card .news-content {
            padding: 28px;
        }

        .news-card h3 {
            font-size: 18px;
            font-weight: 700;
            line-height: 1.6;
            margin-bottom: 12px;
            color: var(--text);
            transition: color 0.3s;
        }

        .news-card:hover h3 {
            color: var(--accent);
        }

        .news-card p {
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.8;
        }

        /* ========== 页脚 ========== */
        .footer {
            background: var(--text);
            padding: 80px 100px 40px;
            color: white;
        }

        .footer-top {
            display: grid;
            grid-template-columns: 1.5fr repeat(3, 1fr);
            gap: 60px;
            padding-bottom: 60px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .footer-brand h3 {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 20px;
            letter-spacing: 2px;
        }

        .footer-brand p {
            font-size: 14px;
            color: rgba(255,255,255,0.6);
            line-height: 1.9;
            max-width: 350px;
        }

        .footer-col h4 {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 25px;
            letter-spacing: 2px;
            color: var(--accent);
        }

        .footer-col ul {
            list-style: none;
        }

        .footer-col li {
            margin-bottom: 14px;
        }

        .footer-col a {
            color: rgba(255,255,255,0.6);
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s;
        }

        .footer-col a:hover {
            color: white;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            padding-top: 30px;
            font-size: 13px;
            color: rgba(255,255,255,0.4);
        }

        /* ========== 响应式 ========== */
        @media (max-width: 1200px) {
            .section-1 {
                grid-template-columns: 1fr;
            }

            .s1-right {
                height: 50vh;
            }

            .stats-overlay {
                position: relative;
                bottom: auto;
                left: auto;
                right: auto;
                grid-template-columns: repeat(3, 1fr);
                padding: 0 30px 30px;
            }

            .solutions-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .cases-layout {
                grid-template-columns: 1fr;
            }

            .cases-sidebar {
                position: static;
            }

            .cases-main {
                grid-template-columns: repeat(2, 1fr);
            }

            .case-card:nth-child(1) {
                grid-column: span 2;
            }

            .clients-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (max-width: 768px) {
            .nav {
                padding: 0 30px;
            }

            .nav-menu {
                display: none;
            }

            .nav-dots {
                display: none;
            }

            .section-1,
            .section-2,
            .section-3,
            .section-4,
            .section-5 {
                padding: 80px 30px;
            }

            .s1-title {
                font-size: 40px;
            }

            .s1-slogan {
                font-size: 18px;
                letter-spacing: 3px;
            }

            .stats-overlay {
                grid-template-columns: repeat(2, 1fr);
            }

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

            .cases-main {
                grid-template-columns: 1fr;
            }

            .case-card:nth-child(1) {
                grid-column: span 1;
            }

            .clients-grid {
                grid-template-columns: repeat(2, 1fr);
            }

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

            .footer {
                padding: 60px 30px 30px;
            }

            .footer-top {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .footer-bottom {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <!-- 导航 -->
    <nav class="nav">
        <a href="#" class="nav-logo">
            <img src="logo.png" alt="蓝凤凰" style="height: 48px; width: auto;">
            <span class="logo-text">蓝凤凰</span>
        </a>
        <div class="nav-menu">
            <a href="#" class="active">首页</a>
            <a href="#">关于我们</a>
            <a href="#">服务项目</a>
            <a href="#">成功案例</a>
            <a href="#">新闻资讯</a>
            <a href="#">联系我们</a>
        </div>
        <a href="#" class="nav-cta">立即咨询</a>
    </nav>

    <!-- 导航点 -->
    <div class="nav-dots">
        <div class="nav-dot active" data-section="1" data-label="企业概况"></div>
        <div class="nav-dot" data-section="2" data-label="解决方案"></div>
        <div class="nav-dot" data-section="3" data-label="推荐案例"></div>
        <div class="nav-dot" data-section="4" data-label="合作客户"></div>
        <div class="nav-dot" data-section="5" data-label="企业消息"></div>
    </div>

    <!-- 咨询按钮 -->
    <div class="consult-btn" id="consultBtn">
        <div class="icon">
            <svg viewBox="0 0 24 24">
                <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
            </svg>
        </div>
        <span>在线咨询</span>
    </div>

    <!-- 第一屏：企业概况 -->
    <section class="section section-1" id="section1" data-埋点="enterprise">
        <div class="s1-left">
            <div class="s1-label">
                <span class="line"></span>
                <span>ENTERPRISE OVERVIEW</span>
            </div>
            <h1 class="s1-title">
                蓝凤凰<br>
                <span class="highlight">品牌营销</span>
            </h1>
            <p class="s1-slogan">有十力，才有实力</p>
            
            <div class="s1-formula">
                <p class="formula-main">
                    蓝凤凰品牌营销 = 战略咨询 <span>×</span> 产品设计 <span>×</span> 品牌策划 <span>×</span> 展厅建设 <span>×</span> 内容营销 <span>×</span> 销售转化 <span>×</span> 文化建设
                </p>
                <p>
                    蓝凤凰提出品牌"营销十力"理论，旨在通过战略、产品、品牌、内容、体验、渠道、传播、转化、数字、文化系统、全面提升品牌营销力，解决销售转化第一要务。
                </p>
            </div>
            
            <p class="s1-desc">
                我们专注于为企业提供全方位的品牌营销解决方案，以创新思维和专业能力，助力企业实现品牌价值最大化。
            </p>
        </div>

        <div class="s1-right">
            <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1200&q=80" alt="团队协作">
            
            <div class="stats-overlay">
                <div class="stat-card">
                    <div class="stat-label">成立时间</div>
                    <div class="stat-value"><span class="highlight">2013</span><span class="unit">年</span></div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">实缴资本</div>
                    <div class="stat-value"><span class="highlight">100</span><span class="unit">万</span></div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">累计项目</div>
                    <div class="stat-value"><span class="highlight">900</span><span class="unit">+个</span></div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">系统业务</div>
                    <div class="stat-value"><span class="highlight">10</span><span class="unit">大板块</span></div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">核心技术</div>
                    <div class="stat-value"><span class="highlight">30</span><span class="unit">+项</span></div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">市场覆盖</div>
                    <div class="stat-value"><span class="highlight">20</span><span class="unit">+省区</span></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 第二屏：解决方案 -->
    <section class="section section-2" id="section2" data-埋点="solutions">
        <div class="section-header" data-num="02">
            <div>
                <h2><span class="num">02</span> 解决方案</h2>
                <div class="header-right">
                    <p>
                        蓝凤凰品牌营销基于营销转化与可持续发展，打造品牌筑基工程、品牌建设工程、品牌转化工程、品牌长青工程，通过自研的品牌营销十力体系，全链路增强品牌营销力，帮助品牌创造价值、传递价值和实现价值。
                    </p>
                </div>
            </div>
        </div>

        <div class="solutions-grid">
            <div class="solution-card">
                <div class="card-image">
                    <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&q=80" alt="凤凰十力">
                </div>
                <div class="card-body">
                    <div class="card-num">01</div>
                    <h3>凤凰十力</h3>
                    <p>依托自研品牌营销十力完整体系，从战略、产品、品牌到转化、文化全链路拆解，三三三标准化服务，帮企业搭建可落地、可量化的营销能力底盘。</p>
                    <div class="card-tag">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M5 12h14M12 5l7 7-7 7"/>
                        </svg>
                        核心服务
                    </div>
                </div>
            </div>

            <div class="solution-card">
                <div class="card-image">
                    <img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=400&q=80" alt="课程培训">
                </div>
                <div class="card-body">
                    <div class="card-num">02</div>
                    <h3>课程培训</h3>
                    <p>面向企业创始人、营销团队定制个性化实战课程，拆解品牌打造、文案创作、流量转化、用户运营干货，理论结合落地方法，学完即可直接套用执行。</p>
                    <div class="card-tag">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M5 12h14M12 5l7 7-7 7"/>
                        </svg>
                        能力提升
                    </div>
                </div>
            </div>

            <div class="solution-card">
                <div class="card-image">
                    <img src="https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=400&q=80" alt="专业书籍">
                </div>
                <div class="card-body">
                    <div class="card-num">03</div>
                    <h3>专业书籍</h3>
                    <p>沉淀多年品牌营销实战经验，编撰专业书籍系统讲解十力逻辑、品牌打造路径与营销落地方法论，既是学习教材，也是企业常备经营参考工具书。</p>
                    <div class="card-tag">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M5 12h14M12 5l7 7-7 7"/>
                        </svg>
                        知识沉淀
                    </div>
                </div>
            </div>

            <div class="solution-card">
                <div class="card-image">
                    <img src="https://images.unsplash.com/photo-1600880292089-90a7e086ee0c?w=400&q=80" alt="年度顾问">
                </div>
                <div class="card-body">
                    <div class="card-num">04</div>
                    <h3>年度顾问</h3>
                    <p>全年一对一品牌营销专属顾问服务，战略规划、品牌升级、营销打法、活动策划全程陪跑，定期复盘优化，帮企业少走弯路，稳定实现品牌与业绩双增长。</p>
                    <div class="card-tag">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M5 12h14M12 5l7 7-7 7"/>
                        </svg>
                        深度陪跑
                    </div>
                </div>
            </div>

            <div class="solution-card">
                <div class="card-image">
                    <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=400&q=80" alt="增值服务">
                </div>
                <div class="card-body">
                    <div class="card-num">05</div>
                    <h3>增值服务</h3>
                    <p>建立蓝凤凰虚拟商学院，通过免费的知识、经验、干货、案例分享和读书群，结合企业运营实际需要，打造可持续学习和实践的增值服务体系。</p>
                    <div class="card-tag">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M5 12h14M12 5l7 7-7 7"/>
                        </svg>
                        持续赋能
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 第三屏：推荐案例 -->
    <section class="section section-3" id="section3" data-埋点="cases">
        <div class="cases-layout">
            <div class="cases-sidebar">
                <h2><span class="num">03</span> 推荐案例</h2>
                <p>我们为众多知名品牌打造了成功的营销解决方案，每一个案例都见证着蓝凤凰的专业能力与创新思维。</p>
                <a href="#" class="view-all">
                    查看全部案例
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                </a>
            </div>

            <div class="cases-main">
                <div class="case-card">
                    <div class="card-bg">
                        <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&q=80" alt="商业综合体">
                    </div>
                    <div class="card-content">
                        <span class="card-tag">品牌升级</span>
                        <h3>锦绣东方商业综合体</h3>
                        <p>整体品牌形象设计与数字营销策略</p>
                    </div>
                </div>
                <div class="case-card">
                    <div class="card-bg">
                        <img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=600&q=80" alt="品牌设计">
                    </div>
                    <div class="card-content">
                        <span class="card-tag">营销推广</span>
                        <h3>云上茶业品牌全案</h3>
                        <p>品牌战略规划与电商营销整合</p>
                    </div>
                </div>
                <div class="case-card">
                    <div class="card-bg">
                        <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&q=80" alt="科技园区">
                    </div>
                    <div class="card-content">
                        <span class="card-tag">视觉设计</span>
                        <h3>科技创新园品牌VI</h3>
                        <p>园区品牌视觉识别系统设计</p>
                    </div>
                </div>
                <div class="case-card">
                    <div class="card-bg">
                        <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&q=80" alt="数字营销">
                    </div>
                    <div class="card-content">
                        <span class="card-tag">数字营销</span>
                        <h3>健康生活APP推广</h3>
                        <p>产品上市全渠道营销推广方案</p>
                    </div>
                </div>
                <div class="case-card">
                    <div class="card-bg">
                        <img src="https://images.unsplash.com/photo-1506152983158-b4a74a01c721?w=600&q=80" alt="文旅推广">
                    </div>
                    <div class="card-content">
                        <span class="card-tag">内容创意</span>
                        <h3>城市文旅推广计划</h3>
                        <p>城市品牌形象片与社交媒体内容</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 第四屏：合作客户 -->
    <section class="section section-4" id="section4" data-埋点="partners">
        <div class="clients-header">
            <h2><span class="num">04</span> 合作客户</h2>
            <p>我们与众多优秀企业建立了长期稳定的合作关系</p>
        </div>
        <div class="clients-grid">
            <div class="client-card" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Wanda_Logo.svg/200px-Wanda_Logo.svg.png');"><span class="logo-text">万达集团</span></div>
            <div class="client-card" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Country_Garden_logo.svg/200px-Country_Garden_logo.svg.png');"><span class="logo-text">碧桂园</span></div>
            <div class="client-card" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Huawei_Logo.svg/200px-Huawei_Logo.svg.png');"><span class="logo-text">华为</span></div>
            <div class="client-card" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Tencent_Logo.svg/200px-Tencent_Logo.svg.png');"><span class="logo-text">腾讯</span></div>
            <div class="client-card" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Alibaba_Group_logo.svg/200px-Alibaba_Group_logo.svg.png');"><span class="logo-text">阿里巴巴</span></div>
            <div class="client-card" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/ByteDance_Logo.svg/200px-ByteDance_Logo.svg.png');"><span class="logo-text">字节跳动</span></div>
            <div class="client-card" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Xiaomi_logo.svg/200px-Xiaomi_logo.svg.png');"><span class="logo-text">小米</span></div>
            <div class="client-card" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/360_security_logo.svg/200px-360_security_logo.svg.png');"><span class="logo-text">京东</span></div>
            <div class="client-card" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Meituan_logo.svg/200px-Meituan_logo.svg.png');"><span class="logo-text">美团</span></div>
            <div class="client-card" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Pinduoduo_Logo.svg/200px-Pinduoduo_Logo.svg.png');"><span class="logo-text">拼多多</span></div>
        </div>
    </section>

    <!-- 第五屏：企业消息 -->
    <section class="section section-5" id="section5" data-埋点="news">
        <div class="news-header">
            <h2><span class="num">05</span> 企业消息</h2>
            <a href="#" class="more-link">
                更多新闻
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M5 12h14M12 5l7 7-7 7"/>
                </svg>
            </a>
        </div>

        <div class="news-grid">
            <div class="news-card">
                <div class="news-img">
                    <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=600&q=80" alt="获奖">
                    <div class="news-date">
                        <div class="day">15</div>
                        <div class="month">2024.12</div>
                    </div>
                </div>
                <div class="news-content">
                    <h3>蓝凤凰荣获年度最佳品牌营销服务商</h3>
                    <p>凭借出色的创意能力和服务品质，荣获2024年度品牌营销行业金奖。</p>
                </div>
            </div>

            <div class="news-card">
                <div class="news-img">
                    <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&q=80" alt="合作">
                    <div class="news-date">
                        <div class="day">08</div>
                        <div class="month">2024.12</div>
                    </div>
                </div>
                <div class="news-content">
                    <h3>新项目启动 | 与知名地产集团达成战略合作</h3>
                    <p>双方将在品牌战略、数字营销等领域展开深度合作。</p>
                </div>
            </div>

            <div class="news-card">
                <div class="news-img">
                    <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=600&q=80" alt="团建">
                    <div class="news-date">
                        <div class="day">28</div>
                        <div class="month">2024.11</div>
                    </div>
                </div>
                <div class="news-content">
                    <h3>蓝凤凰团队拓展训练圆满成功</h3>
                    <p>增强团队凝聚力，携手共创未来，迎接新的挑战与机遇。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-top">
            <div class="footer-brand">
                <h3>蓝凤凰品牌营销</h3>
                <p>蓝凤凰品牌营销咨询机构，专注于为企业提供全方位的品牌营销解决方案。我们以创新思维和专业能力，帮助企业构建具有竞争力的品牌，实现商业价值最大化。</p>
            </div>
            <div class="footer-col">
                <h4>服务项目</h4>
                <ul>
                    <li><a href="#">品牌战略咨询</a></li>
                    <li><a href="#">视觉形象设计</a></li>
                    <li><a href="#">数字营销推广</a></li>
                    <li><a href="#">内容创意制作</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>关于我们</h4>
                <ul>
                    <li><a href="#">公司简介</a></li>
                    <li><a href="#">核心团队</a></li>
                    <li><a href="#">服务案例</a></li>
                    <li><a href="#">加入我们</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>联系我们</h4>
                <ul>
                    <li><a href="#">400-888-8888</a></li>
                    <li><a href="#">contact@lanfenghuang.com</a></li>
                    <li><a href="#">上海市静安区某大厦</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <span>© 2024 蓝凤凰品牌营销 All Rights Reserved</span>
            <span>沪ICP备12345678号</span>
        </div>
    </footer>

    <script>
        // 导航点更新
        function updateNavDots() {
            const sections = document.querySelectorAll('.section');
            const dots = document.querySelectorAll('.nav-dot');
            const scrollY = window.scrollY;
            const windowHeight = window.innerHeight;

            sections.forEach((section, index) => {
                const rect = section.getBoundingClientRect();
                const sectionTop = rect.top + scrollY;
                const sectionBottom = sectionTop + rect.height;
                const screenCenter = scrollY + windowHeight / 2;

                if (screenCenter >= sectionTop && screenCenter < sectionBottom) {
                    dots.forEach(dot => dot.classList.remove('active'));
                    dots[index]?.classList.add('active');
                }
            });
        }

        // 点击导航点跳转
        document.querySelectorAll('.nav-dot').forEach(dot => {
            dot.addEventListener('click', () => {
                const sectionIndex = dot.getAttribute('data-section');
                const targetSection = document.getElementById('section' + sectionIndex);
                if (targetSection) {
                    targetSection.scrollIntoView({ behavior: 'smooth' });
                }
            });
        });

        // 咨询按钮
        document.getElementById('consultBtn').addEventListener('click', () => {
            console.log('埋点: consult_button_click');
        });

        // 埋点追踪
        function trackEvent(eventName, data) {
            console.log('埋点:', { event: eventName, data, time: new Date().toISOString() });
        }

        // 滚动埋点
        let lastSection = 0;
        window.addEventListener('scroll', () => {
            updateNavDots();
            
            const sections = document.querySelectorAll('.section');
            const scrollY = window.scrollY;
            const windowHeight = window.innerHeight;

            sections.forEach((section, index) => {
                const rect = section.getBoundingClientRect();
                if (rect.top <= windowHeight / 2 && rect.bottom > windowHeight / 2) {
                    if (lastSection !== index) {
                        const 埋点 = section.getAttribute('data-埋点');
                        trackEvent('section_view', { section: index + 1, 埋点 });
                        lastSection = index;
                    }
                }
            });
        });

        // 卡片点击埋点
        document.querySelectorAll('.case-card, .news-card, .solution-card, .client-card').forEach(card => {
            card.addEventListener('click', () => {
                const title = card.querySelector('h3')?.textContent || card.querySelector('span')?.textContent || 'Unknown';
                trackEvent('card_click', { title });
            });
        });

        // Intersection Observer for animations
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, { threshold: 0.15 });

        document.querySelectorAll('.stat-card, .solution-card, .case-card, .news-card, .client-card').forEach((el, i) => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(25px)';
            el.style.transition = `opacity 0.6s ease ${i * 0.05}s, transform 0.6s ease ${i * 0.05}s`;
            observer.observe(el);
        });

        // Page load
        window.addEventListener('load', () => {
            trackEvent('page_view', { page: '首页' });
        });
    </script>
</body>
</html>