diff --git a/website/assets/css/style.css b/website/assets/css/style.css index f835093..604f782 100644 --- a/website/assets/css/style.css +++ b/website/assets/css/style.css @@ -592,6 +592,8 @@ img { max-width: 100%; height: auto; loading: lazy; + will-change: transform; + backface-visibility: hidden; } /* 减少重绘重排 */ @@ -599,12 +601,368 @@ img { box-sizing: border-box; } +.card, .btn, .navbar { + will-change: transform; + backface-visibility: hidden; +} + /* GPU加速 */ .gpu-accelerated { transform: translateZ(0); will-change: transform; } +.hero-section, .feature-card, .case-card, .news-card { + transform: translateZ(0); + backface-visibility: hidden; +} + +/* 新闻页面专用样式 */ +.news-article { + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.news-article:hover { + transform: translateY(-5px); + box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important; +} + +.news-article .card-title a { + transition: color 0.3s ease; +} + +.news-article .card-title a:hover { + color: var(--bs-primary) !important; +} + +.news-content { + line-height: 1.8; + font-size: 16px; +} + +.news-content h6 { + color: var(--bs-primary); + font-weight: 600; + margin-top: 1.5rem; + margin-bottom: 1rem; +} + +.news-content ul { + padding-left: 1.5rem; +} + +.news-content li { + margin-bottom: 0.5rem; +} + +/* 新闻分类按钮样式 */ +.btn-group .btn { + transition: all 0.3s ease; +} + +.btn-group .btn:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0,0,0,0.15); +} + +/* 侧边栏卡片样式 */ +.card-header { + background: linear-gradient(135deg, var(--bs-primary), var(--bs-info)); + color: white; + border: none; +} + +.card-header .card-title { + color: white; +} + +/* 热门新闻列表样式 */ +.list-group-item-action:hover { + background-color: var(--bs-light); + transform: translateX(5px); + transition: all 0.3s ease; +} + +/* 新闻归档样式 */ +.list-group-item .badge { + transition: all 0.3s ease; +} + +.list-group-item:hover .badge { + transform: scale(1.1); +} + +/* 模态框样式优化 */ +.modal-content { + border: none; + border-radius: 15px; + box-shadow: 0 20px 60px rgba(0,0,0,0.3); +} + +.modal-header { + background: linear-gradient(135deg, var(--bs-primary), var(--bs-info)); + color: white; + border-radius: 15px 15px 0 0; +} + +.modal-header .modal-title { + color: white; + font-weight: 600; +} + +.modal-header .btn-close { + filter: invert(1); +} + +.modal-body { + padding: 2rem; +} + +/* 面包屑导航样式 */ +.breadcrumb-item a { + text-decoration: none; + transition: color 0.3s ease; +} + +.breadcrumb-item a:hover { + color: white !important; +} + +/* 搜索框样式 */ +.input-group .form-control:focus { + border-color: var(--bs-primary); + box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); +} + +/* 分页样式 */ +.pagination .page-link { + transition: all 0.3s ease; +} + +.pagination .page-link:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0,0,0,0.15); +} + +/* 案例详情页面样式 */ +.case-detail-content .card { + border: none; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + margin-bottom: 2rem; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-detail-content .card:hover { + transform: translateY(-2px); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); +} + +.case-detail-content .card-header { + border-bottom: none; + font-weight: 600; +} + +.case-detail-content .case-meta p { + margin-bottom: 0.5rem; + color: #6c757d; +} + +.case-detail-content .case-meta strong { + color: #495057; + font-weight: 600; +} + +.case-detail-content .solution-item { + padding: 1rem; + background: #f8f9fa; + border-radius: 8px; + height: 100%; +} + +.case-detail-content .solution-item h6 { + color: #495057; + font-weight: 600; + margin-bottom: 0.75rem; +} + +.case-detail-content .solution-item p { + color: #6c757d; + margin-bottom: 0; + font-size: 0.9rem; +} + +.case-detail-content .effect-item { + padding: 1rem; +} + +.case-detail-content .effect-number { + font-size: 2.5rem; + font-weight: 700; + line-height: 1; + margin-bottom: 0.5rem; +} + +.case-detail-content .effect-label { + color: #6c757d; + font-size: 0.9rem; + font-weight: 500; +} + +.case-detail-content .related-case { + padding: 0.75rem 0; + border-bottom: 1px solid #e9ecef; +} + +.case-detail-content .related-case:last-child { + border-bottom: none; +} + +.case-detail-content .related-case:hover { + background-color: #f8f9fa; + border-radius: 8px; + padding: 0.75rem; + margin: 0 -0.75rem; +} + +.case-detail-content .related-case h6 { + color: #495057; + font-weight: 600; + margin-bottom: 0.25rem; +} + +.case-detail-content .related-case small { + color: #6c757d; +} + +/* 首页案例卡片悬停效果优化 */ +.case-card { + transition: all 0.3s ease; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + background: white; +} + +.case-card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); +} + +.case-card .case-image { + position: relative; + overflow: hidden; +} + +.case-card .case-image img { + transition: transform 0.3s ease; + width: 100%; + height: 200px; + object-fit: cover; +} + +.case-card:hover .case-image img { + transform: scale(1.05); +} + +.case-card .case-content { + padding: 1.5rem; +} + +.case-card .case-content h5 { + color: #495057; + font-weight: 600; + margin-bottom: 0.75rem; +} + +.case-card .case-content p { + color: #6c757d; + margin-bottom: 1rem; + font-size: 0.9rem; +} + +.case-card .case-link .btn { + transition: all 0.3s ease; +} + +.case-card:hover .case-link .btn { + background-color: #0d6efd; + color: white; + border-color: #0d6efd; +} + +/* 面包屑导航样式 */ +.breadcrumb { + background: transparent; + padding: 0; +} + +.breadcrumb-item + .breadcrumb-item::before { + content: ">"; + color: rgba(255, 255, 255, 0.7); +} + +.breadcrumb-item a { + text-decoration: none; + transition: color 0.3s ease; +} + +.breadcrumb-item a:hover { + color: rgba(255, 255, 255, 0.9) !important; +} + +/* 响应式优化 */ +@media (max-width: 768px) { + .case-detail-content .effect-number { + font-size: 2rem; + } + + .case-detail-content .solution-item { + margin-bottom: 1rem; + } + + .case-detail-content .card-body { + padding: 1rem; + } + + .case-card .case-content { + padding: 1rem; + } + + .case-card .case-image img { + height: 150px; + } +} + +@media (max-width: 576px) { + .case-detail-content .effect-item { + padding: 0.5rem; + } + + .case-detail-content .effect-number { + font-size: 1.8rem; + } + + .case-detail-content .effect-label { + font-size: 0.8rem; + } +} + .news-content { + font-size: 14px; + } + + .modal-body { + padding: 1rem; + } + + .btn-group { + flex-wrap: wrap; + } + + .btn-group .btn { + margin-bottom: 0.5rem; + } + + /* 系统入口功能区 */ .systems-section { padding: 5rem 0; diff --git a/website/case-detail.html b/website/case-detail.html new file mode 100644 index 0000000..33ddab7 --- /dev/null +++ b/website/case-detail.html @@ -0,0 +1,387 @@ + + +
+ + ++ 了解我们为客户提供的智慧养殖解决方案的详细实施过程和实际效果 +
+
+ + 该集团是宁夏地区规模最大的现代化养殖企业之一,拥有多个养殖基地,年出栏量超过10万头。 + 为了提高管理效率和产品质量,该集团选择了我们的智慧养殖监管平台。 +
+ +部署物联网传感器,实时监控环境参数、动物健康状态等关键指标。
+建立统一的数据管理平台,实现数据的集中存储和智能分析。
+开发专用移动应用,方便管理人员随时随地查看和管理养殖情况。
+建立智能预警系统,及时发现和处理异常情况,降低养殖风险。
++++ "智慧养殖监管平台的实施让我们的管理水平上了一个新台阶。系统不仅帮助我们实现了全流程数字化管理, + 还大大提高了养殖效率和经济效益。特别是预警系统,让我们能够及时发现和处理问题,避免了很多损失。 + 这是一次非常成功的数字化转型。" +
+ +
想了解更多案例详情或咨询解决方案?
+
- 实现全流程数字化管理,生产效率提升30%
-
+ 实现全流程数字化管理,生产效率提升30%
+