mashangyoujiu/Application/Main/View/Templateone/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="{$webinfo['logo']['keywords']}">
    <meta name="description" content="{$webinfo['logo']['description']}">
    <title>{$webinfo['logo']['indexname']}</title>
    <link href="{$webinfo['logo']['icourl']}" type="image/x-icon" rel="shortcut icon">
    <link rel="stylesheet" href="__PUBLIC__/Webinfo/Templateone/css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <img src="{$webinfo['logo']['weblogo']}" alt="Logo" class="brand-logo">
                <span class="brand-text">码上有酒</span>
            </div>
            <div class="nav-menu">
                <a href="javascript:;" class="nav-link active">首页</a>
                <a href="{:U('Main/Product/index')}" class="nav-link">产品</a>
                <a href="{:U('Main/News/index')}" class="nav-link">动态</a>
                <a href="{:U('Main/About/index')}" class="nav-link">关于</a>
                <a href="{:U('Main/Contact/index')}" class="nav-link">联系</a>
            </div>
            <button class="btn-login" onclick="window.location.href='/index.php/Retail/login/index.html'">
                立即登录
            </button>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="main-content">
        <!-- 英雄区域 -->
        <section class="hero-section">
            <div class="hero-container">
                <div class="hero-content">
                    <div class="hero-badge">🚀 新一代零售管理系统</div>
                    <h1 class="hero-title">码上有酒<br><span class="gradient-text">新零售系列产品</span></h1>
                    <p class="hero-description">企业以互联网为依托，通过运用大数据、人工智能等先进技术手段，对商品的生产、流通与销售过程进行升级改造，进而重塑业态结构与生态圈。</p>
                    <div class="hero-actions">
                        <button class="btn btn-primary">
                            <span>免费试用</span>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                <path d="M5 12h14m-7-7l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                        <button class="btn btn-outline">
                            <span>了解更多</span>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                <polygon points="5,3 19,12 5,21" fill="currentColor"/>
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="hero-visual">
                    <div class="hero-image">
                        <div class="floating-card card-1">
                            <div class="card-icon">📊</div>
                            <div class="card-text">大数据分析</div>
                        </div>
                        <div class="floating-card card-2">
                            <div class="card-icon">🤖</div>
                            <div class="card-text">人工智能</div>
                        </div>
                        <div class="floating-card card-3">
                            <div class="card-icon">🌐</div>
                            <div class="card-text">线上服务</div>
                        </div>
                        <div class="floating-card card-4">
                            <div class="card-icon">🏪</div>
                            <div class="card-text">线下体验</div>
                        </div>
                        <div class="floating-card card-5">
                            <div class="card-icon">🚚</div>
                            <div class="card-text">现代物流</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 新零售概念 -->
        <section class="concept-section">
            <div class="container">
                <div class="section-header">
                    <h2 class="section-title">什么是新零售？</h2>
                    <p class="section-subtitle">线上线下和物流结合在一起，才会产生新零售</p>
                </div>
                <div class="concept-content">
                    <div class="concept-text">
                        <p>新零售，即企业以互联网为依托，通过运用<span class="highlight">大数据</span>、<span class="highlight">人工智能</span>等先进技术手段，对商品的生产、流通与销售过程进行升级改造，进而重塑业态结构与生态圈，并对<span class="highlight">线上服务、线下体验</span>以及<span class="highlight">现代物流</span>进行深度融合的零售新模式。</p>
                        <div class="concept-highlight">
                            <span class="highlight-text">线上线下和物流结合在一起，才会产生新零售</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 解决方案 -->
        <section class="solutions-section">
            <div class="container">
                <div class="section-header">
                    <h2 class="section-title">智慧零售解决方案</h2>
                    <p class="section-subtitle">探索、钻研、悟道，10年的行业及中大型项目实施经验</p>
                </div>
                <div class="solutions-grid">
                    <div class="solution-card">
                        <div class="solution-icon">💡</div>
                        <h3 class="solution-title">智能决策</h3>
                        <p class="solution-description">基于大数据分析的智能决策支持系统，帮助企业做出更精准的商业决策</p>
                        <ul class="solution-features">
                            <li>实时数据分析</li>
                            <li>预测性分析</li>
                            <li>智能推荐</li>
                        </ul>
                    </div>
                    <div class="solution-card">
                        <div class="solution-icon">🔄</div>
                        <h3 class="solution-title">全渠道整合</h3>
                        <p class="solution-description">打通线上线下渠道，实现统一的客户体验和库存管理</p>
                        <ul class="solution-features">
                            <li>多渠道统一</li>
                            <li>库存同步</li>
                            <li>订单管理</li>
                        </ul>
                    </div>
                    <div class="solution-card">
                        <div class="solution-icon">⚡</div>
                        <h3 class="solution-title">极速响应</h3>
                        <p class="solution-description">快速响应市场变化，提供灵活的业务流程和系统配置</p>
                        <ul class="solution-features">
                            <li>快速部署</li>
                            <li>灵活配置</li>
                            <li>实时监控</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- 零售本质 -->
        <section class="essence-section">
            <div class="container">
                <div class="section-header">
                    <h2 class="section-title">零售的本质</h2>
                </div>
                <div class="essence-content">
                    <div class="essence-text">
                        <p>零售的本质不会随着商业模式的改变而改变，还是挖掘和满足客户需求，对商品和客户进行经营，实现销售。零售环节是信息流、商品流、现金流的流通。</p>
                    </div>
                    <div class="essence-diagram">
                        <div class="flow-item">
                            <div class="flow-icon">📄</div>
                            <div class="flow-label">信息流</div>
                        </div>
                        <div class="flow-arrow">→</div>
                        <div class="flow-item">
                            <div class="flow-icon">📦</div>
                            <div class="flow-label">商品流</div>
                        </div>
                        <div class="flow-arrow">→</div>
                        <div class="flow-item">
                            <div class="flow-icon">💰</div>
                            <div class="flow-label">现金流</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 对比分析 -->
        <section class="comparison-section">
            <div class="container">
                <div class="section-header">
                    <h2 class="section-title">"新零售" VS 传统零售</h2>
                    <p class="section-subtitle">全面对比传统零售与新零售模式的优势差异</p>
                </div>
                <div class="comparison-content">
                    <div class="comparison-side traditional">
                        <h3 class="comparison-title">传统模式</h3>
                        <div class="comparison-item">
                            <h4>传统零售</h4>
                            <p>门店经营受时间、空间限制，无法满足客户随时购物，经营成本过高，发展受限</p>
                        </div>
                        <div class="comparison-item">
                            <h4>传统电商</h4>
                            <p>线上无法提供满意的用户体验，快递时间长，成本高</p>
                        </div>
                    </div>
                    <div class="comparison-vs">
                        <div class="vs-circle">
                            <span>VS</span>
                        </div>
                    </div>
                    <div class="comparison-side modern">
                        <h3 class="comparison-title">新零售</h3>
                        <div class="comparison-item">
                            <h4>线上线下融合</h4>
                            <p>线上线下无缝结合，线上订单自动分配就近门店发货，降低快递成本，极速达，消费者体验大大提升</p>
                        </div>
                        <div class="comparison-advantages">
                            <div class="advantage-tag">成本降低</div>
                            <div class="advantage-tag">体验提升</div>
                            <div class="advantage-tag">效率优化</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- CTA区域 -->
        <section class="cta-section">
            <div class="container">
                <div class="cta-content">
                    <h2 class="cta-title">开启您的新零售转型之旅</h2>
                    <p class="cta-description">立即体验码上有酒新零售解决方案，让传统零售焕发新活力</p>
                    <div class="cta-actions">
                        <button class="btn btn-primary btn-large">
                            免费试用 30 天
                        </button>
                        <button class="btn btn-outline btn-large">
                            预约演示
                        </button>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-brand">
                    <img src="{$webinfo['logo']['weblogo']}" alt="Logo" class="footer-logo">
                    <p class="footer-description">码上有酒 - 新一代智慧零售解决方案</p>
                </div>
                <div class="footer-links">
                    <div class="footer-column">
                        <h4>产品</h4>
                        <a href="#">功能特性</a>
                        <a href="#">价格方案</a>
                        <a href="#">API文档</a>
                    </div>
                    <div class="footer-column">
                        <h4>支持</h4>
                        <a href="#">帮助中心</a>
                        <a href="#">技术支持</a>
                        <a href="#">联系我们</a>
                    </div>
                    <div class="footer-column">
                        <h4>公司</h4>
                        <a href="#">关于我们</a>
                        <a href="#">新闻动态</a>
                        <a href="#">招贤纳士</a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 码上有酒. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="__PUBLIC__/Webinfo/Templateone/js/main.js"></script>
</body>
</html>