503 lines
30 KiB
HTML
503 lines
30 KiB
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>
|
||
<meta name="description" content="活牛采购智能数字化系统成功案例展示，真实客户评价和使用效果验证，为您选择数字化采购解决方案提供参考。">
|
||
|
||
<!-- Bootstrap 5 CSS -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||
<!-- Bootstrap Icons -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css" rel="stylesheet">
|
||
<!-- Font Awesome -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
|
||
<!-- AOS Animation -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
||
<!-- 自定义样式 -->
|
||
<link href="css/custom.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="index.html">
|
||
<span class="ms-2 fw-bold">活牛采购智能数字化系统</span>
|
||
</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="index.html">首页</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="product.html">产品介绍</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="solutions.html">解决方案</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="cases.html">客户案例</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="about.html">关于我们</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="news.html">新闻动态</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="contact.html">联系我们</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 页面内容 -->
|
||
<main>
|
||
<!-- 英雄区域 -->
|
||
<section class="hero-section bg-dark text-white py-5 mt-5">
|
||
<div class="container py-5">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-8 mx-auto text-center">
|
||
<h1 class="display-4 fw-bold mb-4">客户成功案例</h1>
|
||
<p class="lead mb-4">见证我们如何帮助客户实现采购数字化转型升级，提升业务效率和盈利能力</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 案例筛选 -->
|
||
<section class="py-4 bg-white">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="d-flex flex-wrap justify-content-center gap-2">
|
||
<button class="btn btn-outline-primary active" data-filter="all">全部案例</button>
|
||
<button class="btn btn-outline-primary" data-filter="large">大型企业</button>
|
||
<button class="btn btn-outline-primary" data-filter="medium">中型企业</button>
|
||
<button class="btn btn-outline-primary" data-filter="small">小型企业</button>
|
||
<button class="btn btn-outline-primary" data-filter="beef">肉牛养殖</button>
|
||
<button class="btn btn-outline-primary" data-filter="dairy">奶牛牧场</button>
|
||
<button class="btn btn-outline-primary" data-filter="trade">贸易服务</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 案例展示 -->
|
||
<section class="py-5">
|
||
<div class="container">
|
||
<div class="row g-4" id="cases-container">
|
||
<!-- 案例1 -->
|
||
<div class="col-lg-4 col-md-6 case-item" data-category="large beef" data-aos="fade-up">
|
||
<div class="card h-100 border-0 shadow-sm case-card">
|
||
<div class="card-img-top position-relative">
|
||
<div class="placeholder-image bg-primary bg-opacity-10 d-flex align-items-center justify-content-center feature-icon" style="height: 200px;">
|
||
<i class="fas fa-building fs-1 text-primary"></i>
|
||
</div>
|
||
<span class="position-absolute top-0 end-0 m-3 badge bg-primary">大型企业</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<h5 class="fw-bold text-dark mb-2">内蒙古草原牧业集团</h5>
|
||
<span class="badge bg-light text-dark mb-3">肉牛养殖 · 年采购5000+头</span>
|
||
<p class="text-muted mb-3">通过系统实现采购流程标准化，采购效率提升40%，成本降低15%</p>
|
||
|
||
<div class="case-stats mb-3">
|
||
<div class="d-flex justify-content-between small text-muted">
|
||
<span><i class="fas fa-arrow-up text-success me-1"></i> 效率 +40%</span>
|
||
<span><i class="fas fa-arrow-down text-danger me-1"></i> 成本 -15%</span>
|
||
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 3.2倍</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="testimonial bg-light p-3 rounded mb-3">
|
||
<p class="mb-0 small text-muted">"系统帮助我们实现了采购全流程数字化，现在我们可以实时追踪每头牛的状态，大大提升了管理效率。"</p>
|
||
<div class="d-flex align-items-center mt-2">
|
||
<div class="avatar-placeholder bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center feature-icon" style="width: 30px; height: 30px;">
|
||
<i class="fas fa-user text-primary fs-6"></i>
|
||
</div>
|
||
<div>
|
||
<span class="small fw-bold">张总</span>
|
||
<span class="small d-block text-muted">采购总监</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案例2 -->
|
||
<div class="col-lg-4 col-md-6 case-item" data-category="medium dairy" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="card h-100 border-0 shadow-sm case-card">
|
||
<div class="card-img-top position-relative">
|
||
<div class="placeholder-image bg-success bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
|
||
<i class="fas fa-tractor fs-1 text-success"></i>
|
||
</div>
|
||
<span class="position-absolute top-0 end-0 m-3 badge bg-success">中型企业</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<h5 class="fw-bold text-dark mb-2">河北优牧乳业</h5>
|
||
<span class="badge bg-light text-dark mb-3">奶牛牧场 · 年采购2000头</span>
|
||
<p class="text-muted mb-3">数字化管理育种牛只采购，奶牛品质提升20%，产奶量增加15%</p>
|
||
|
||
<div class="case-stats mb-3">
|
||
<div class="d-flex justify-content-between small text-muted">
|
||
<span><i class="fas fa-arrow-up text-success me-1"></i> 品质 +20%</span>
|
||
<span><i class="fas fa-arrow-up text-success me-1"></i> 产量 +15%</span>
|
||
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 2.8倍</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="testimonial bg-light p-3 rounded mb-3">
|
||
<p class="mb-0 small text-muted">"系统的数据分析功能帮助我们筛选出最优质的育种牛只，现在我们的奶牛品质和产奶量都有了显著提升。"</p>
|
||
<div class="d-flex align-items-center mt-2">
|
||
<div class="avatar-placeholder bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
|
||
<i class="fas fa-user text-success fs-6"></i>
|
||
</div>
|
||
<div>
|
||
<span class="small fw-bold">李经理</span>
|
||
<span class="small d-block text-muted">牧场负责人</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案例3 -->
|
||
<div class="col-lg-4 col-md-6 case-item" data-category="small trade" data-aos="fade-up" data-aos-delay="200">
|
||
<div class="card h-100 border-0 shadow-sm case-card">
|
||
<div class="card-img-top position-relative">
|
||
<div class="placeholder-image bg-warning bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
|
||
<i class="fas fa-handshake fs-1 text-warning"></i>
|
||
</div>
|
||
<span class="position-absolute top-0 end-0 m-3 badge bg-warning">小型企业</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<h5 class="fw-bold text-dark mb-2">山东牛贸中介服务</h5>
|
||
<span class="badge bg-light text-dark mb-3">贸易服务 · 年交易3000头</span>
|
||
<p class="text-muted mb-3">通过平台实现买卖双方高效匹配，交易成功率提升50%，佣金收入翻倍</p>
|
||
|
||
<div class="case-stats mb-3">
|
||
<div class="d-flex justify-content-between small text-muted">
|
||
<span><i class="fas fa-arrow-up text-success me-1"></i> 成功率 +50%</span>
|
||
<span><i class="fas fa-arrow-up text-success me-1"></i> 收入 +100%</span>
|
||
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 4.1倍</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="testimonial bg-light p-3 rounded mb-3">
|
||
<p class="mb-0 small text-muted">"这个系统彻底改变了我们的业务模式，现在我们可以同时处理多个交易，客户满意度大幅提升。"</p>
|
||
<div class="d-flex align-items-center mt-2">
|
||
<div class="avatar-placeholder bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
|
||
<i class="fas fa-user text-warning fs-6"></i>
|
||
</div>
|
||
<div>
|
||
<span class="small fw-bold">王总</span>
|
||
<span class="small d-block text-muted">创始人</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案例4 -->
|
||
<div class="col-lg-4 col-md-6 case-item" data-category="medium beef" data-aos="fade-up" data-aos-delay="300">
|
||
<div class="card h-100 border-0 shadow-sm case-card">
|
||
<div class="card-img-top position-relative">
|
||
<div class="placeholder-image bg-info bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
|
||
<i class="fas fa-industry fs-1 text-info"></i>
|
||
</div>
|
||
<span class="position-absolute top-0 end-0 m-3 badge bg-info">中型企业</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<h5 class="fw-bold text-dark mb-2">河南美味肉制品</h5>
|
||
<span class="badge bg-light text-dark mb-3">肉牛加工 · 年采购1500头</span>
|
||
<p class="text-muted mb-3">实现从采购到加工的全程追溯，产品质量提升30%，客户投诉减少80%</p>
|
||
|
||
<div class="case-stats mb-3">
|
||
<div class="d-flex justify-content-between small text-muted">
|
||
<span><i class="fas fa-arrow-up text-success me-1"></i> 质量 +30%</span>
|
||
<span><i class="fas fa-arrow-down text-danger me-1"></i> 投诉 -80%</span>
|
||
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 3.5倍</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="testimonial bg-light p-3 rounded mb-3">
|
||
<p class="mb-0 small text-muted">"追溯系统让我们的产品质量有了保障，现在客户可以扫描二维码了解每块肉的来源，信任度大大提升。"</p>
|
||
<div class="d-flex align-items-center mt-2">
|
||
<div class="avatar-placeholder bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
|
||
<i class="fas fa-user text-info fs-6"></i>
|
||
</div>
|
||
<div>
|
||
<span class="small fw-bold">赵厂长</span>
|
||
<span class="small d-block text-muted">生产总监</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案例5 -->
|
||
<div class="col-lg-4 col-md-6 case-item" data-category="large dairy" data-aos="fade-up" data-aos-delay="400">
|
||
<div class="card h-100 border-0 shadow-sm case-card">
|
||
<div class="card-img-top position-relative">
|
||
<div class="placeholder-image bg-purple bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
|
||
<i class="fas fa-seedling fs-1 text-purple"></i>
|
||
</div>
|
||
<span class="position-absolute top-0 end-0 m-3 badge bg-purple">大型企业</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<h5 class="fw-bold text-dark mb-2">宁夏现代牧业</h5>
|
||
<span class="badge bg-light text-dark mb-3">综合养殖 · 年采购8000头</span>
|
||
<p class="text-muted mb-3">多牧场统一管理平台，运营成本降低25%，管理效率提升60%</p>
|
||
|
||
<div class="case-stats mb-3">
|
||
<div class="d-flex justify-content-between small text-muted">
|
||
<span><i class="fas fa-arrow-down text-danger me-1"></i> 成本 -25%</span>
|
||
<span><i class="fas fa-arrow-up text-success me-1"></i> 效率 +60%</span>
|
||
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 4.3倍</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="testimonial bg-light p-3 rounded mb-3">
|
||
<p class="mb-0 small text-muted">"系统帮助我们实现了多个牧场的统一管理，现在我们可以实时掌握各牧场的运营状况，决策更加科学。"</p>
|
||
<div class="d-flex align-items-center mt-2">
|
||
<div class="avatar-placeholder bg-purple bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
|
||
<i class="fas fa-user text-purple fs-6"></i>
|
||
</div>
|
||
<div>
|
||
<span class="small fw-bold">陈总</span>
|
||
<span class="small d-block text-muted">运营副总裁</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案例6 -->
|
||
<div class="col-lg-4 col-md-6 case-item" data-category="small beef" data-aos="fade-up" data-aos-delay="500">
|
||
<div class="card h-100 border-0 shadow-sm case-card">
|
||
<div class="card-img-top position-relative">
|
||
<div class="placeholder-image bg-orange bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
|
||
<i class="fas fa-home fs-1 text-orange"></i>
|
||
</div>
|
||
<span class="position-absolute top-0 end-0 m-3 badge bg-orange">小型企业</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<h5 class="fw-bold text-dark mb-2">四川家庭农场</h5>
|
||
<span class="badge bg-light text-dark mb-3">家庭养殖 · 年采购500头</span>
|
||
<p class="text-muted mb-3">小规模养殖数字化入门方案，管理成本降低40%，养殖效益提升35%</p>
|
||
|
||
<div class="case-stats mb-3">
|
||
<div class="d-flex justify-content-between small text-muted">
|
||
<span><i class="fas fa-arrow-down text-danger me-1"></i> 成本 -40%</span>
|
||
<span><i class="fas fa-arrow-up text-success me-1"></i> 效益 +35%</span>
|
||
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 2.5倍</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="testimonial bg-light p-3 rounded mb-3">
|
||
<p class="mb-0 small text-muted">"作为家庭农场，我们原本担心数字化门槛太高，但这个系统非常容易上手，现在我们的养殖效益明显提升了。"</p>
|
||
<div class="d-flex align-items-center mt-2">
|
||
<div class="avatar-placeholder bg-orange bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
|
||
<i class="fas fa-user text-orange fs-6"></i>
|
||
</div>
|
||
<div>
|
||
<span class="small fw-bold">刘先生</span>
|
||
<span class="small d-block text-muted">农场主</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据统计 -->
|
||
<div class="row mt-5 pt-5" data-aos="fade-up">
|
||
<div class="col-12 text-center mb-5">
|
||
<h3 class="fw-bold text-dark mb-3">客户成功数据</h3>
|
||
<p class="text-muted">基于200+企业客户的真实使用数据统计</p>
|
||
</div>
|
||
|
||
<div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="display-4 fw-bold text-primary mb-2">85%</div>
|
||
<p class="text-muted">客户续约率</p>
|
||
</div>
|
||
<div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-delay="200">
|
||
<div class="display-4 fw-bold text-success mb-2">3.2倍</div>
|
||
<p class="text-muted">平均投资回报率</p>
|
||
</div>
|
||
<div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-delay="300">
|
||
<div class="display-4 fw-bold text-warning mb-2">45%</div>
|
||
<p class="text-muted">平均效率提升</p>
|
||
</div>
|
||
<div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-delay="400">
|
||
<div class="display-4 fw-bold text-info mb-2">20%</div>
|
||
<p class="text-muted">平均成本降低</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA区域 -->
|
||
<section class="py-5 bg-primary text-white">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-8">
|
||
<h3 class="fw-bold mb-3">Ready to see similar results?</h3>
|
||
<p class="mb-4">加入200+成功企业的行列，开启您的数字化采购转型之旅</p>
|
||
</div>
|
||
<div class="col-lg-4 text-lg-end">
|
||
<a href="contact.html" class="btn btn-light btn-lg px-4">立即咨询</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-dark text-white py-5">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-4 mb-4">
|
||
<h5 class="fw-bold mb-3">活牛采购智能数字化系统</h5>
|
||
<p class="text-light">
|
||
专业的数字化采购管理解决方案，
|
||
为养殖企业提供全流程的采购数字化服务。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="col-lg-2 col-md-4 mb-4">
|
||
<h6 class="fw-bold mb-3">产品</h6>
|
||
<ul class="list-unstyled">
|
||
<li><a href="product.html" class="text-muted text-decoration-none">产品介绍</a></li>
|
||
<li><a href="solutions.html" class="text-muted text-decoration-none">解决方案</a></li>
|
||
<li><a href="#" class="text-muted text-decoration-none">价格方案</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-lg-2 col-md-4 mb-4">
|
||
<h6 class="fw-bold mb-3">资源</h6>
|
||
<ul class="list-unstyled">
|
||
<li><a href="cases.html" class="text-muted text-decoration-none">客户案例</a></li>
|
||
<li><a href="news.html" class="text-muted text-decoration-none">新闻动态</a></li>
|
||
<li><a href="#" class="text-muted text-decoration-none">帮助文档</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-lg-2 col-md-4 mb-4">
|
||
<h6 class="fw-bold mb-3">公司</h6>
|
||
<ul class="list-unstyled">
|
||
<li><a href="about.html" class="text-muted text-decoration-none">关于我们</a></li>
|
||
<li><a href="contact.html" class="text-muted text-decoration-none">联系我们</a></li>
|
||
<li><a href="#" class="text-muted text-decoration-none">加入我们</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-lg-2 col-md-4 mb-4">
|
||
<h6 class="fw-bold mb-3">联系信息</h6>
|
||
<div class="text-muted">
|
||
<p class="mb-1"><i class="fas fa-phone me-2"></i> 400-123-4567</p>
|
||
<p class="mb-1"><i class="fas fa-envelope me-2"></i> info@niumall.com</p>
|
||
<p class="mb-0"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="my-4">
|
||
|
||
<div class="row align-items-center">
|
||
<div class="col-md-6">
|
||
<p class="text-muted mb-0">© 2024 活牛采购智能数字化系统. 保留所有权利.</p>
|
||
</div>
|
||
<div class="col-md-6 text-md-end">
|
||
<div class="d-flex justify-content-md-end">
|
||
<a href="#" class="text-muted me-3"><i class="fab fa-weixin fa-lg"></i></a>
|
||
<a href="#" class="text-muted me-3"><i class="fab fa-weibo fa-lg"></i></a>
|
||
<a href="#" class="text-muted"><i class="fab fa-linkedin fa-lg"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- JavaScript -->
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
|
||
<script src="js/main.js"></script>
|
||
|
||
<script>
|
||
// 初始化AOS动画
|
||
AOS.init({
|
||
duration: 1000,
|
||
once: true,
|
||
offset: 100
|
||
});
|
||
|
||
// 案例筛选功能
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const filterButtons = document.querySelectorAll('[data-filter]');
|
||
const caseItems = document.querySelectorAll('.case-item');
|
||
|
||
filterButtons.forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
// 移除所有active状态
|
||
filterButtons.forEach(btn => btn.classList.remove('active'));
|
||
// 添加当前active状态
|
||
this.classList.add('active');
|
||
|
||
const filterValue = this.getAttribute('data-filter');
|
||
|
||
caseItems.forEach(item => {
|
||
if (filterValue === 'all') {
|
||
item.style.display = 'block';
|
||
} else {
|
||
const categories = item.getAttribute('data-category').split(' ');
|
||
if (categories.includes(filterValue)) {
|
||
item.style.display = 'block';
|
||
} else {
|
||
item.style.display = 'none';
|
||
}
|
||
}
|
||
});
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.bg-purple { background-color: #6f42c1 !important; }
|
||
.bg-orange { background-color: #fd7e14 !important; }
|
||
.text-purple { color: #6f42c1 !important; }
|
||
.text-orange { color: #fd7e14 !important; }
|
||
|
||
.case-card {
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.case-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
|
||
}
|
||
|
||
.placeholder-image {
|
||
background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-light));
|
||
}
|
||
|
||
.avatar-placeholder {
|
||
background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-light));
|
||
}
|
||
</style>
|
||
</body>
|
||
</html> |