YwxAppThink/app/frontend/view/contact/index.html

<div class="page-header">
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="breadcrumb">
                    <span class="layui-breadcrumb">
                        <a href="{:url('index/index')}"><i class="layui-icon layui-icon-home"></i> 首页</a>
                        <a><cite>联系我们</cite></a>
                    </span>
                </div>
                <h1 class="page-title">联系我们</h1>
                <p class="page-desc">期待与您合作，共创美好未来</p>
            </div>
        </div>
    </div>
</div>

<div class="contact-section">
    <div class="layui-container">
        <div class="layui-row layui-col-space30">
            <div class="layui-col-md6">
                <div class="contact-info-panel">
                    <h2><i class="layui-icon layui-icon-location"></i> 联系方式</h2>
                    <div class="info-grid">
                        <div class="info-item">
                            <div class="icon"><i class="layui-icon layui-icon-cellphone"></i></div>
                            <div class="content">
                                <h4>联系电话</h4>
                                <p><a href="tel:{$contact_phone|default='4008889999'}" class="phone-link">{$contact_phone|default='400-888-9999'}</a></p>
                                <p class="desc">工作日 9:00-18:00</p>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="icon"><i class="layui-icon layui-icon-email"></i></div>
                            <div class="content">
                                <h4>电子邮箱</h4>
                                <p><a href="mailto:{$contact_email|default='service@zhichuang.com'}">{$contact_email|default='service@zhichuang.com'}</a></p>
                                <p class="desc">24小时内回复</p>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="icon"><i class="layui-icon layui-icon-location"></i></div>
                            <div class="content">
                                <h4>公司地址</h4>
                                <p>{$company_address|default='北京市海淀区中关村大厦18层'}</p>
                                <p class="desc">欢迎来访，请提前预约</p>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="icon"><i class="layui-icon layui-icon-time"></i></div>
                            <div class="content">
                                <h4>工作时间</h4>
                                <p>周一至周五 9:00 - 18:00</p>
                                <p class="desc">节假日除外</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="map-container">
                    <h2><i class="layui-icon layui-icon-map"></i> 公司位置</h2>
                    <div id="baiduMap" style="height: 300px; border-radius: 8px; overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,0.1);"></div>
                    <p class="map-tip">* 地图位置仅供参考，具体位置请以实际导航为准</p>
                </div>
            </div>
            
            <div class="layui-col-md6">
                <div class="message-panel">
                    <h2><i class="layui-icon layui-icon-edit"></i> 在线留言</h2>
                    <form class="layui-form" action="" method="post">
                        <div class="layui-form-item">
                            <label class="layui-form-label">您的姓名</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">联系电话</label>
                            <div class="layui-input-block">
                                <input type="tel" name="phone" required lay-verify="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">电子邮箱</label>
                            <div class="layui-input-block">
                                <input type="email" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">留言类型</label>
                            <div class="layui-input-block">
                                <select name="type" lay-verify="required">
                                    <option value="">请选择</option>
                                    <option value="1">商务合作</option>
                                    <option value="2">技术支持</option>
                                    <option value="3">人才招聘</option>
                                    <option value="4">其他咨询</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">留言内容</label>
                            <div class="layui-input-block">
                                <textarea name="content" required lay-verify="required" placeholder="请输入留言内容（至少10字）" class="layui-textarea" lay-verify="content"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">验证码</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" name="captcha" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid">
                                <img src="/static/images/captcha.jpg" alt="验证码" class="captcha-img" id="captchaImg">
                                <a href="javascript:;" id="refreshCaptcha" class="refresh-link">看不清？换一张</a>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn btn-submit" lay-submit lay-filter="formSubmit">提交留言</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置内容</button>
                            </div>
                        </div>
                        <div class="form-tip">
                            <p><i class="layui-icon layui-icon-dialogue"></i> 我们将在24小时内回复您的留言，请保持电话畅通</p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 服务网点 -->
<div class="branch-section">
    <div class="layui-container">
        <h2 class="section-title">全国服务网点</h2>
        <div class="branch-grid">
            <div class="branch-item">
                <h4>北京总部</h4>
                <p>北京市海淀区中关村大厦18层</p>
                <p>010-8888 9999</p>
            </div>
            <div class="branch-item">
                <h4>上海分公司</h4>
                <p>上海市浦东新区陆家嘴环路1000号</p>
                <p>021-6666 8888</p>
            </div>
            <div class="branch-item">
                <h4>深圳分公司</h4>
                <p>深圳市南山区科技园科兴科学园A座</p>
                <p>0755-2222 6666</p>
            </div>
            <div class="branch-item">
                <h4>成都分公司</h4>
                <p>成都市高新区天府大道北段1700号</p>
                <p>028-5555 7777</p>
            </div>
        </div>
    </div>
</div>

<script src="https://api.map.baidu.com/api?v=3.0&ak=您的百度地图AK"></script>
<script>
layui.use(['form', 'layer'], function(){
    var form = layui.form;
    var layer = layui.layer;
    
    // 表单验证
    form.verify({
        content: function(value){
            if(value.length < 10){
                return '留言内容不能少于10个字符';
            }
        },
        phone: [/^1[3-9]\d{9}$/, '手机号格式不正确']
    });
    
    // 表单提交
    form.on('submit(formSubmit)', function(data){
        // 实际项目中应通过AJAX提交
        layer.msg('留言提交成功！我们将在24小时内与您联系', {icon: 1, time: 3000});
        // 清空表单（实际项目中应保留用户输入）
        // this.reset();
        return false; // 阻止表单跳转
    });
    
    // 刷新验证码
    document.getElementById('refreshCaptcha').onclick = function(){
        var img = document.getElementById('captchaImg');
        img.src = '/static/images/captcha.jpg?t=' + new Date().getTime();
    };
    
    // 百度地图初始化
    function initMap() {
        var map = new BMap.Map("baiduMap");
        var point = new BMap.Point(116.331398, 39.897445); // 示例坐标（北京）
        map.centerAndZoom(point, 16);
        map.enableScrollWheelZoom(true);
        
        // 添加标注
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        
        // 添加信息窗口
        var infoWindow = new BMap.InfoWindow("<b>智创科技总部</b><br>北京市海淀区中关村大厦18层");
        marker.addEventListener("click", function(){
            this.openInfoWindow(infoWindow);
        });
        marker.openInfoWindow(infoWindow);
    }
    
    // 延迟初始化地图（确保容器已渲染）
    setTimeout(initMap, 500);
});
</script>

<style>
.contact-info-panel h2, .message-panel h2, .map-container h2 { 
    border-left: 3px solid #1E9FFF; 
    padding-left: 12px; 
    margin-bottom: 25px; 
    font-size: 20px; 
}
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.info-item { display: flex; padding: 15px; background: #f9f9f9; border-radius: 6px; transition: all 0.3s; }
.info-item:hover { background: #e9f7fe; transform: translateX(5px); }
.icon { width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; background: #1E9FFF; color: #fff; flex-shrink: 0; margin-right: 15px; font-size: 18px; }
.content h4 { font-weight: bold; margin-bottom: 5px; color: #333; font-size: 16px; }
.content p { margin: 3px 0; color: #666; }
.phone-link { color: #1E9FFF; font-weight: bold; font-size: 18px; display: block; margin: 3px 0; }
.desc { color: #999; font-size: 13px; }
.map-tip { text-align: center; color: #999; font-size: 13px; margin-top: 8px; }
.message-panel .layui-form-label { width: 80px; padding-left: 10px; }
.message-panel .layui-input-block { margin-left: 100px; }
.captcha-img { height: 38px; border-radius: 4px; vertical-align: middle; margin-right: 8px; }
.refresh-link { color: #1E9FFF; font-size: 13px; vertical-align: middle; }
.form-tip { margin-top: 15px; padding: 12px; background: #e9f7fe; border-radius: 4px; color: #1E9FFF; }
.form-tip i { margin-right: 5px; }
.branch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; margin-top: 30px; }
.branch-item { text-align: center; padding: 25px 15px; background: #fff; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.08); transition: all 0.3s; }
.branch-item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.15); }
.branch-item h4 { color: #1E9FFF; font-size: 18px; margin-bottom: 10px; }
.branch-item p { color: #666; line-height: 1.6; margin: 5px 0; }
@media (max-width: 768px) { 
    .info-grid { grid-template-columns: 1fr; } 
    .message-panel .layui-form-label { width: 70px; } 
    .message-panel .layui-input-block { margin-left: 80px; } 
    .branch-grid { grid-template-columns: 1fr; } 
}
</style>