YwxAppThink/app/frontend/view/about/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="about-section">
    <div class="layui-container">
        <div class="about-intro">
            <div class="layui-row layui-col-space30">
                <div class="layui-col-md6">
                    <div class="intro-content">
                        <h2>企业简介</h2>
                        <p class="highlight">{$site_name|default='智创科技'}成立于2010年，是一家专注于企业数字化转型的高新技术企业。</p>
                        <p>我们拥有200+专业团队，服务覆盖全国30+城市，累计为1000+企业提供优质解决方案。公司始终秉持"客户至上、创新驱动、诚信共赢"的核心价值观，致力于成为最受尊敬的企业服务品牌。</p>
                        <p>凭借深厚的技术积累和行业洞察，我们已成功帮助众多企业实现业务增长与效率提升，在金融、制造、零售、政务等多个领域树立了标杆案例。</p>
                        <a href="{:url('page/contact')}" class="layui-btn intro-btn">联系我们 <i class="layui-icon layui-icon-right"></i></a>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="intro-image">
                        <img src="/static/images/about-img.jpg" alt="公司环境" loading="lazy">
                        <div class="image-badge">10年行业经验</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="stats-section">
            <div class="layui-row layui-col-space20">
                <div class="layui-col-md3 layui-col-sm6">
                    <div class="stat-item">
                        <div class="num">10<span>年</span></div>
                        <div class="label">行业经验</div>
                    </div>
                </div>
                <div class="layui-col-md3 layui-col-sm6">
                    <div class="stat-item">
                        <div class="num">1000<span>+</span></div>
                        <div class="label">服务客户</div>
                    </div>
                </div>
                <div class="layui-col-md3 layui-col-sm6">
                    <div class="stat-item">
                        <div class="num">200<span>+</span></div>
                        <div class="label">专业团队</div>
                    </div>
                </div>
                <div class="layui-col-md3 layui-col-sm6">
                    <div class="stat-item">
                        <div class="num">99<span>%</span></div>
                        <div class="label">客户满意度</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="culture-section">
            <h2 class="section-title">企业文化</h2>
            <div class="layui-row layui-col-space30">
                <div class="layui-col-md4">
                    <div class="culture-card">
                        <div class="culture-icon"><i class="layui-icon layui-icon-heart"></i></div>
                        <h3>企业使命</h3>
                        <p>用科技赋能企业，助力客户实现可持续增长</p>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="culture-card">
                        <div class="culture-icon"><i class="layui-icon layui-icon-auz"></i></div>
                        <h3>企业愿景</h3>
                        <p>成为全球领先的企业数字化服务提供商</p>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="culture-card">
                        <div class="culture-icon"><i class="layui-icon layui-icon-dialogue"></i></div>
                        <h3>核心价值观</h3>
                        <p>诚信 · 创新 · 协作 · 共赢</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="timeline-section">
            <h2 class="section-title">发展历程</h2>
            <div class="timeline">
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">
                        <h4>2010年</h4>
                        <p>公司成立，专注企业软件定制开发</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">
                        <h4>2015年</h4>
                        <p>服务客户突破300家，获得国家高新技术企业认证</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">
                        <h4>2019年</h4>
                        <p>推出企业数字化平台，服务范围扩展至全国</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">
                        <h4>2023年</h4>
                        <p>客户数量突破1000家，启动国际化战略</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.about-intro { margin: 50px 0; }
.intro-content h2 { font-size: 28px; margin-bottom: 20px; color: #333; }
.highlight { font-weight: bold; color: #1E9FFF; margin: 15px 0; display: block; }
.intro-btn { margin-top: 20px; background: #1E9FFF; border-color: #1E9FFF; }
.intro-image { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.15); }
.image-badge { position: absolute; bottom: 20px; right: 20px; background: rgba(30, 159, 255, 0.9); color: #fff; padding: 5px 15px; border-radius: 20px; font-weight: bold; }
.stats-section { background: #f9f9f9; padding: 40px 0; margin: 40px 0; border-radius: 8px; }
.stat-item { text-align: center; padding: 20px; }
.num { font-size: 42px; font-weight: bold; color: #1E9FFF; margin-bottom: 10px; }
.num span { font-size: 24px; }
.label { font-size: 16px; color: #666; }
.culture-card { text-align: center; padding: 30px 20px; border-radius: 8px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.08); transition: transform 0.3s; margin-bottom: 20px; }
.culture-card:hover { transform: translateY(-5px); }
.culture-icon { width: 80px; height: 80px; line-height: 80px; margin: 0 auto 20px; border-radius: 50%; background: #e9f7fe; color: #1E9FFF; font-size: 32px; }
.timeline { position: relative; padding-left: 30px; margin-top: 30px; }
.timeline::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: #e9e9e9; }
.timeline-item { position: relative; padding-left: 30px; margin-bottom: 30px; }
.timeline-dot { position: absolute; left: -9px; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: #1E9FFF; border: 3px solid #fff; box-shadow: 0 0 0 2px #1E9FFF; }
.timeline-content { background: #f9f9f9; padding: 15px 20px; border-radius: 6px; position: relative; }
.timeline-content::before { content: ''; position: absolute; left: -10px; top: 15px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 10px solid #f9f9f9; }
@media (max-width: 768px) { 
    .stats-section .layui-col-sm6 { margin-bottom: 20px; } 
    .timeline { padding-left: 25px; } 
    .timeline::before { left: 5px; } 
    .timeline-item { padding-left: 25px; } 
    .timeline-dot { left: -7px; } 
}
</style>