<script src='https://cdn.myxypt.com/gsgirvje/t/3/assets/public.js?v=1766633635'></script>
<link rel="stylesheet" href="https://cdn.myxypt.com/gsgirvje/t/3/assets/swiper-bundle.min.css?v=1766633635">
<section class="index_case p100 of">
<div class="se_top w1720 wow fadeInUp">
<div class="top_1 df js af">
<div class="pu_title">
<div class="tips f18">案例应用</div>
<div class="text f42">
跨领域覆盖 <span>多场景</span>落地
</div>
</div>
<div class="pu_link">
<a href="/case/" class="df ac js f16">
<span>更多案例</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17px" height="14px">
<path fill-rule="evenodd" fill="rgb(255, 255, 255)"
d="M16.594,8.054 C16.972,7.680 16.972,7.072 16.595,6.697 L16.595,6.697 L10.995,1.138 C10.663,0.807 10.123,0.808 9.790,1.139 C9.456,1.469 9.456,2.005 9.789,2.336 L14.014,6.531 L1.684,6.540 C1.213,6.557 0.845,6.949 0.861,7.416 C0.877,7.860 1.236,8.216 1.683,8.232 L14.013,8.224 L9.782,12.425 C9.449,12.756 9.448,13.292 9.781,13.622 C10.114,13.953 10.654,13.953 10.987,13.621 L16.594,8.056 L16.594,8.054 Z" />
</svg>
</a>
</div>
</div>
<div class="top_2 f16">
<div class="swiper mySwiper3">
<div class="swiper-wrapper">
{% for value in app('category').lists('case') %}
<div class="swiper-slide {% if loop.index == 1 %}active{% endif %}" data-cid="{{ value.cid }}">
<p>{{ value.cname }}</p>
<div class="none">
<div class="swiper-wrapper">
{% for value in cases.show(value.cid,5,0,1) %}
<div class="swiper-slide">
<div><img src="{{ app('content').thumb(value.uploadfiles[0],722,456) }}" alt="{{ value.title }}">
</div>
<div class="post">
<p class="f22">{{ value.title }}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="se_bot p100 p100_ wow fadeInUp">
<div class="swiper mySwiper4 swiper-3d">
<div class="swiper-wrapper">
<!-- 默认内容由 JS 填充 -->
</div>
</div>
<div class="toggle">
<div class="prev pu_qh">
<p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17px" height="14px">
<path fill-rule="evenodd" fill="rgb(230, 33, 41)"
d="M0.847,6.486 C0.472,6.861 0.471,7.469 0.846,7.844 L0.846,7.844 L6.411,13.408 C6.742,13.738 7.278,13.738 7.610,13.407 C7.940,13.076 7.941,12.540 7.610,12.209 L3.411,8.011 L15.665,8.002 C16.132,7.985 16.498,7.593 16.482,7.125 C16.467,6.680 16.111,6.324 15.665,6.309 L3.412,6.316 L7.617,2.112 C7.948,1.781 7.948,1.244 7.618,0.914 C7.287,0.584 6.750,0.584 6.419,0.915 L0.847,6.485 L0.847,6.486 Z" />
</svg>
</p>
</div>
<div class="next pu_qh">
<p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17px" height="14px">
<path fill-rule="evenodd" fill="rgb(230, 33, 41)"
d="M15.872,8.022 C16.247,7.647 16.248,7.039 15.873,6.665 L15.873,6.665 L10.308,1.101 C9.977,0.770 9.441,0.770 9.109,1.102 C8.778,1.432 8.778,1.969 9.109,2.299 L13.308,6.498 L1.054,6.506 C0.587,6.523 0.220,6.916 0.236,7.384 C0.252,7.828 0.608,8.184 1.053,8.200 L13.307,8.193 L9.102,12.397 C8.770,12.727 8.770,13.264 9.101,13.595 C9.432,13.925 9.968,13.925 10.299,13.594 L15.871,8.023 L15.872,8.022 Z" />
</svg>
</p>
</div>
</div>
</div>
</section>
<script>
$(function () {
// -----------------------------
// 初始化 mySwiper3（分类轮播）
// -----------------------------
new Swiper(".mySwiper3", {
speed: 800,
slidesPerView: 12,
spaceBetween: 0,
slideToClickedSlide: true,
navigation: {
nextEl: ".index_news .ws_top .pu_arrow .next",
prevEl: ".index_news .ws_top .pu_arrow .prev",
},
breakpoints: {
320: { slidesPerView: 3, spaceBetween: 10 },
768: { slidesPerView: 6, spaceBetween: 10 },
1280: { slidesPerView: 12, spaceBetween: 0 },
},
});
// -----------------------------
// 全局保存 mySwiper4 实例
// -----------------------------
var mySwiper4 = null;
// -----------------------------
// 初始化 mySwiper4
// -----------------------------
function case_Swiper(html) {
// 1️⃣ 如果已存在，销毁
if (mySwiper4) {
mySwiper4.destroy(true, true);
mySwiper4 = null;
}
// 2️⃣ 替换 wrapper 内容
$('.index_case .se_bot .mySwiper4 .swiper-wrapper').html(html);
// 3️⃣ 重新初始化
mySwiper4 = new Swiper(".mySwiper4", {
speed: 800,
slidesPerView: 'auto',
spaceBetween: 0,
loop: true,
centeredSlides: true,
slideToClickedSlide: true,
navigation: {
nextEl: ".index_case .se_bot .toggle .next",
prevEl: ".index_case .se_bot .toggle .prev",
},
});
// 4️⃣ 强制回到第一个 slide
mySwiper4.slideToLoop(0, 0, false);
}
// -----------------------------
// 页面加载时，默认加载第一个分类
// -----------------------------
var firstHtml = $('.mySwiper3 .swiper-slide').eq(0).find('.none .swiper-wrapper').html();
$('.mySwiper3 .swiper-slide').eq(0).addClass('active');
case_Swiper(firstHtml);
// -----------------------------
// 点击切换分类
// -----------------------------
$('.index_case .se_top .top_2 .swiper .swiper-slide').click(function () {
$(this).addClass('active').siblings().removeClass('active');
var html = $(this).find('.none .swiper-wrapper').html();
case_Swiper(html);
});
});
</script>
.index_case {
background: url('//cdn.myxypt.com/ad485227/25/12/5946a02ff34a73a76a1b5003a827d5475dc01835.jpg') no-repeat;
background-size: cover;
background-position: bottom;
}
.index_case .se_top .top_2 {
margin-top: 0.48rem;
border-bottom: 2px solid #e2e2e3;
}
.index_case .se_top .top_2 .swiper .swiper-slide {
color: #333;
/* transition: 0.4s; */
}
.index_case .se_top .top_2 .swiper .swiper-slide p {
display: inline-block;
padding-bottom: 0.18rem;
cursor: pointer;
position: relative;
}
.index_case .se_top .top_2 .swiper .swiper-slide p::before {
transition: 0.4s;
opacity: 0;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.03rem;
background: #d60f12;
}
.index_case .se_top .top_2 .swiper .swiper-slide .none {
display: none;
}
.index_case .se_top .top_2 .swiper .active {
color: #d60f12;
}
.index_case .se_top .top_2 .swiper .active p::before {
opacity: 1;
}
.index_case .se_bot {
position: relative;
}
.index_case .se_bot .swiper {
padding: 0.16rem 0;
}
.index_case .se_bot .swiper .swiper-slide {
position: relative;
width: 38%;
margin: 0 0.6rem;
transition: 0.8s;
}
.index_case .se_bot .swiper .swiper-slide img {
transition: 0.8s;
width: 100%;
}
.index_case .se_bot .swiper .swiper-slide .post {
transition: 0.8s;
opacity: 0;
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.8));
display: flex;
justify-content: center;
align-items: flex-end;
text-align: center;
}
.index_case .se_bot .swiper .swiper-slide .post p {
width: 100%;
color: #fff;
padding: 4% 0;
}
.index_case .se_bot .swiper .swiper-slide-active {
transform: scale(0.9);
}
.index_case .se_bot .swiper .swiper-slide-active .post {
opacity: 1;
}
.index_case .se_bot .swiper .swiper-slide-prev {
transform: rotateY(16deg);
}
.index_case .se_bot .swiper .swiper-slide-next {
transform: rotateY(-16deg);
}
.index_case .se_bot .toggle .prev, .index_case .se_bot .toggle .next {
z-index: 2;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.index_case .se_bot .toggle .prev {
left: 28%;
}
.index_case .se_bot .toggle .next {
right: 28%;
}上一篇：video 视频兼容性
下一篇：已经是最后一篇