feat: mobile nas主题首页
This commit is contained in:
150
app/index/view/mobile/topic_nas/index.html
Normal file
150
app/index/view/mobile/topic_nas/index.html
Normal file
@@ -0,0 +1,150 @@
|
||||
{extend name="public/base"/}
|
||||
{block name="style"}
|
||||
<link rel="stylesheet" href="__CSS__/topic_nas_index.css">
|
||||
{/block}
|
||||
{block name="main"}
|
||||
<div class="oricoEGapp">
|
||||
<!-- 首页 -->
|
||||
<div class="oricoCN-nasindex">
|
||||
<div class="narsMBpage">
|
||||
<!-- 轮播 banner -->
|
||||
{notempty name="focus_image"}
|
||||
<div class="narsMB-banner">
|
||||
<div class="swiper-container narsMBbannerSwiper">
|
||||
<div class="swiper-wrapper">
|
||||
{volist name="focus_image" id="fo"}
|
||||
<div class="swiper-slide">
|
||||
<div class="narsMB-banner-st">
|
||||
<h2></h2>
|
||||
<span class="narsMB-bannersm"></span>
|
||||
</div>
|
||||
<a href="{$fo.link}"><img src="{$fo.image}" class="narsmb-img" /></a>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 九大模块分类 -->
|
||||
{notempty name="nas_category"}
|
||||
{assign name="categories" value=":array_flatten($nas_category)"/}
|
||||
<div class="narsmb-cate">
|
||||
{assign name="categories_idx1" value=":array_shift($categories)"/}
|
||||
{notempty name="categories_idx1"}
|
||||
<a class="{$categories_idx1.link}">
|
||||
<img src="{$categories_idx1.image}" style="width:100%" />
|
||||
</a>
|
||||
{/notempty}
|
||||
{assign name="categories_chunk" value=":array_chunk($categories, 2)"/}
|
||||
{volist name="categories_chunk" id="chunk"}
|
||||
<div class="narsmbcateits">
|
||||
{volist name="chunk" id="cc"}
|
||||
<a class="narsmbcate-it" href="{$cc.link}">
|
||||
<img src="{$cc.image}" style="width:100%" />
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 视频 -->
|
||||
{notempty name="nas_video"}
|
||||
<div class="narsmbvd">
|
||||
<video class="narsmbvideo" poster="{$nas_video.image}" controls autoplay loop muted>
|
||||
<source type="video/mp4" src="{$nas_video.video}">
|
||||
</video>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 解决方案 -->
|
||||
{notempty name="nas_solution"}
|
||||
<div class="narsmb-jjfa">
|
||||
<span class="narsmbjjfa-title"><span style="color:#084BFA">ORICO</span>{:lang_i18n('网络存储解决方案')}</span>
|
||||
<div class="swiper narsmbjjfaSwiper">
|
||||
<div class="swiper-wrapper">
|
||||
{volist name="nas_solution" id="so"}
|
||||
<div class="swiper-slide narsmbjjfa-slide">
|
||||
<div class="narsmb-jjfa-ct" {:style(['color' => $so.title_txt_color])}>{$so.title}</div>
|
||||
<img src="{$so.image}" class="narsmb-jjfabgimg" />
|
||||
<!-- 点击移入效果-->
|
||||
<div class="narsmb-jjfa-info" style="text-align:left;white-space:pre-line;">
|
||||
<div class="box">
|
||||
<p {:style(['color' => $so.title_txt_color])}>{$so.title}</p>
|
||||
<div {:style(['color' => $so.desc_txt_color])}>{$so.desc|raw}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 微链接 -->
|
||||
{notempty name="nas_software"}
|
||||
<div class="narsmb-wlj">
|
||||
<span class="narsmbwlj-title"><span style="color:#084BFA">NAS</span> {:lang_i18n('配套软件')}</span>
|
||||
{volist name="nas_software" id="soft" offset="0" length="3"}
|
||||
<div class="narsmbwltitem">
|
||||
<div class="narsmbwljcp">
|
||||
<img src="{$soft.image}" class="narsmbwljimg" />
|
||||
</div>
|
||||
<div class="narsmbwljcpinfo">
|
||||
<span class="narsmbif-title" {:style(['color' => $soft.title_txt_color])}>{$soft.title}</span>
|
||||
<span class="narsmbif-info" {:style(['color' => $soft.desc_txt_color])}>{$soft.desc|raw}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/volist}
|
||||
{volist name="nas_software" id="soft" offset="3"}
|
||||
<div class="narsmbwltitem">
|
||||
<a style="height:100%;width:100%" {notempty name="soft.link"}href="{$soft.link}"{/notempty}>
|
||||
<img src="{$soft.image}" style="height:100%;width:100%" />
|
||||
</a>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
{/notempty}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
{block name="script"}
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
// banner轮播
|
||||
var bannerswiper = new Swiper('.narsMBbannerSwiper', {
|
||||
// 配置选项
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 3000,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
}
|
||||
});
|
||||
// 解决方案轮播
|
||||
var swiper1 = new Swiper(".narsmbjjfaSwiper", {
|
||||
slidesPerView: "auto",
|
||||
spaceBetween: 6,
|
||||
freeMode: true,
|
||||
autoplay: 5000,
|
||||
loop: true
|
||||
});
|
||||
// 解决方案轮播点击显示文案
|
||||
var swiperSlides = document.querySelectorAll('.narsmbjjfa-slide');
|
||||
// 为每个 swiper-slide 添加点击事件
|
||||
swiperSlides.forEach(function (slide) {
|
||||
slide.addEventListener('click', function () {
|
||||
var infoElement = this.querySelector('.narsmb-jjfa-info');
|
||||
if (window.getComputedStyle(infoElement).display === 'none') {
|
||||
infoElement.style.display = 'flex';
|
||||
swiper1.stopAutoplay()
|
||||
} else {
|
||||
infoElement.style.display = 'none';
|
||||
swiper1.startAutoplay()
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{/block}
|
||||
Reference in New Issue
Block a user