<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业简介 - 环亚祥鹏供应链责任有限公司</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">


    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <style>
        .jumbotron {
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://picsum.photos/1920/600') center/cover;
            color: white;
            padding: 6rem 2rem;
        }
        .product-card {
            transition: transform 0.3s;
        }
        .product-card:hover {
            transform: translateY(-5px);
        }
        .contact-section {
            background-color: #f8f9fa;
        }
        .map-container {
            height: 300px;
            background: #ddd;
        }
    </style>
</head>



<body>

<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">海南环亚祥鹏供应链有限公司</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link" href="#about">关于我们</a></li>
                <li class="nav-item"><a class="nav-link" href="#services">业务范围</a></li>
                <li class="nav-item"><a class="nav-link" href="#products">产品中心</a></li>
                <li class="nav-item"><a class="nav-link" href="#contact">联系我们</a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- 头部Banner -->
<header class="jumbotron">
    <div class="container text-center">
        <h1 class="display-4 mb-4">环亚祥鹏供应链责任有限公司</h1>
        <p class="lead">专注淡水鱼供应20年，致力于提供优质淡水鱼产品</p>
    </div>
</header>

<!-- 主要内容 -->
<main class="container">

    <!-- 公司简介 -->
    <section id="about" class="my-5 py-4">
        <h2 class="text-center mb-4">公司简介</h2>
        <div class="row">
            <div class="col-md-6">
                <img src="https://picsum.photos/600/400" alt="公司环境" class="img-fluid rounded">
            </div>
            <div class="col-md-6 mt-4 mt-md-0">
                <p >在鱼品供应链的璀璨版图中，海南环亚祥鹏供应链有限公司熠熠生辉。公司以淡水鱼为核心业务，凭借对品质的执着追求，从传统鱼档成功蜕变，成长为行业内的领军企业。</p>
                <p>我们始终坚持 “臻选食材，品质至上” 的经营理念，每一条淡水鱼都源自生态优良的纯净水域，经过严格筛选与检测，确保从源头到餐桌的新鲜与安全。依托先进的冷链物流体系和高效的仓储管理，公司构建起了完善的供应链网络，不仅实现了鱼品的快速配送，更保证了鱼品的鲜活品质。</p>
                <p>在业务拓展上，海南环亚祥鹏积极与各地优质供应商合作，不断丰富产品种类，满足不同客户的多元需求。无论是高档餐厅的精致鱼肴，还是家庭厨房的美味佳肴，我们都能提供量身定制的鱼品解决方案。凭借卓越的品质与专业的服务，公司赢得了众多合作伙伴的信赖与赞誉，成为鱼品供应链领域的品质标杆。</p>
            </div>
        </div>
    </section>

    <!-- 业务范围 -->
    <section id="services" class="my-5 py-4 bg-light">
        <h2 class="text-center mb-4">业务范围</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 text-center p-3">
                    <i class="fas fa-laptop-code fa-3x text-primary mb-3"></i>
                    <h4>淡水鱼供应</h4>
                    <p>资源遍布全国各地，为您提供最新鲜的淡水鱼</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 text-center p-3">
                    <i class="fas fa-cloud fa-3x text-info mb-3"></i>
                    <h4>活鱼鲜送</h4>
                    <p>我们有专业的运输团队，为您提供快速、安全的鱼品配送</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 text-center p-3">
                    <i class="fas fa-chart-line fa-3x text-success mb-3"></i>
                    <h4>专业检测</h4>
                    <p>活鱼检测，提供专业权威的检测报告</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 产品中心 -->
    <section id="products" class="my-5 py-4">
        <h2 class="text-center mb-4">产品中心</h2>
        <div class="row g-4">
            <div class="col-md-4" th:each="product : ${bizCardProducts}">
                <div class="card product-card h-100 shadow position-relative">
                    <span class="badge position-absolute top-0 end-0 m-2" th:classappend="${product.status == '库存充足'} ? 'bg-success' : (${product.status == '库存不足'} ? 'bg-warning' : 'bg-danger')" th:text="${product.status}"></span>
                    <img th:src="@{{productName}(productName=${product.imageUrl})}" class="card-img-top img-fluid" alt="产品" style="height: 250px; object-fit: cover;">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="card-title m-0" th:text="${product.productName}">产品标题</h5>
                            <p class="card-text m-0" style="font-weight: bold;">今日价格: <span th:text="${product.currentPrice}">当前价格</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系方式 -->
    <section id="contact" class="my-5 py-4 contact-section">
        <div class="row">
            <div class="col-md-6">
                <h3>联系我们</h3>
                <ul class="list-unstyled">
                    <li class="mb-3">
                        <i class="fas fa-map-marker-alt me-2"></i>
                        海口市美兰区新埠岛海鲜大世界c区68号
                    </li>
                    <li class="mb-3">
                        <i class="fas fa-phone me-2"></i>
                        <tel>19946670555</tel>
                    </li>
                    <li class="mb-3">
                        <i class="fas fa-envelope me-2"></i>
                        19946670555@139.com
                    </li>
                </ul>
                <div class="map-container rounded">
                    <!-- 这里可以嵌入地图API -->
                    <img src="/upload/images/map.png" width="470" height="255" class="card-img-top" alt="产品">
                </div>
            </div>
            <div class="col-md-6 mt-4 mt-md-0">
                <form id="contact-form">
                    <div class="mb-3">
                        <input type="text" class="form-control" placeholder="姓名">
                    </div>
                    <div class="mb-3">
                        <input type="tel" class="form-control" placeholder="电话">
                    </div>
                    <div class="mb-3">
                        <textarea class="form-control" rows="5" placeholder="留言内容"></textarea>
                    </div>
                    <button class="btn btn-primary w-100">发送消息</button>
                </form>
            </div>
        </div>
    </section>
</main>
<input type="hidden" th:value="${baseUrl}" id="baseUrl">
<!-- 页脚 -->
<footer class="bg-dark text-white py-4">
    <div class="container text-center">
        <p class="mb-0">© 2025 环亚祥鹏有限公司 版权所有 <a href="https://beian.miit.gov.cn">琼ICP备2025051178号</a></p>
    </div>
</footer>

<!-- Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

<script th:inline="javascript">

    // 发送消息按钮 通过ajax调用后端接口
    $('#contact-form').on('submit', function(event) {
        event.preventDefault();

        // 获取表单数据
        var baseUrl = $('#baseUrl').val();
        var name = $('#name').val();
        var email = $('#email').val();
        var message = $('#message').val();

        var data = {
            name: name,
            email: email,
            message: message
        };

        var url = baseUrl + '/portalMessage/insert';

        // 发送POST请求到后端接口
        $.ajax({
            url: url,
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function(response) {
                alert('消息发送成功！');
            },
            error: function(xhr, status, error) {
                alert('消息发送失败，请重试。');
            }
        });
    });
</script>
</body>
</html>