feat: nas首页
This commit is contained in:
150
app/index/view/topic_nas/index.html
Normal file
150
app/index/view/topic_nas/index.html
Normal file
@@ -0,0 +1,150 @@
|
||||
{extend name="public/nas_base" /}
|
||||
{block name="style"}
|
||||
<link rel="stylesheet" href="__CSS__/topic_nas_index.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper@9/swiper-bundle.min.css">
|
||||
{/block}
|
||||
{block name="main"}
|
||||
<div class="orico_Page_index">
|
||||
<!--Nas首页 -->
|
||||
<div class="narsPage">
|
||||
<!--banner -->
|
||||
{notempty name="focus_image"}
|
||||
<div class="narsIndex-banner">
|
||||
<div class="swiper-container mySwiper ">
|
||||
<div class="swiper-wrapper">
|
||||
{volist name="focus_image" id="fo"}
|
||||
<div class="swiper-slide">
|
||||
<a href="{$fo.link}"><img src="{$fo.image}" alt="{$fo.title}"></a>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
<!-- 如果需要分页器 -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- 如果需要导航按钮 -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!--九大模块分类 -->
|
||||
{notempty name="nas_category"}
|
||||
<div class="nars-cate">
|
||||
<div class="narscatecenter">
|
||||
{volist name="nas_category" id="category" key="idx"}
|
||||
<div class="cate-column" {eq name="idx" value="2"}style="margin:0 0.875rem;"{/eq}>
|
||||
{volist name="category" id="cate" key="k"}
|
||||
{if condition="$idx == 2 && $k == 1"}
|
||||
{assign name="class" value="cateit bigcateit" /}
|
||||
{elseif condition="$idx == 2 && $k == 2" /}
|
||||
{assign name="class" value="cateit smallcateit" /}
|
||||
{else /}
|
||||
{assign name="class" value="cateit" /}
|
||||
{/if}
|
||||
<a
|
||||
class="{$class}"
|
||||
{notempty name="cate.link"}href="{$cate.link}"{/notempty}
|
||||
style="background: url({$cate.image});background-repeat: no-repeat;background-size: 100% 100%"
|
||||
>
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!--视频 -->
|
||||
{notempty name="nas_video"}
|
||||
<div class="narsVideo" style="height:auto">
|
||||
<div class="videoview">
|
||||
<video class="video" poster="{$nas_video.image}" controls="" autoplay="" loop="" muted="">
|
||||
<source type="video/mp4" src="{$nas_video.video}">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!--解決方案-->
|
||||
{notempty name="nas_solution"}
|
||||
<div class="nars-jjfa">
|
||||
<span class="jjfa-title">{:lang('topic_nas_index.solution_section_title')}</span>
|
||||
<div class="swiper jjfaSwiper">
|
||||
<div class="swiper-wrapper">
|
||||
{volist name="nas_solution" id="so"}
|
||||
<div class="swiper-slide">
|
||||
<img src="{$so.image}" class="jjfabgimg" />
|
||||
<div class="jjfa-ct">
|
||||
<span class="st" {notempty name="so.title_txt_color"}style="color:{$so.title_txt_color};"{/notempty}>{$so.title}</span>
|
||||
</div>
|
||||
<!-- 鼠标移入效果-->
|
||||
<div class="jjfa-info">
|
||||
<span class="jjfa-sp-title" {notempty name="so.title_txt_color"}style="color:{$so.title_txt_color};"{/notempty}>{$so.title}</span>
|
||||
<a href="{$so.link}" class="jjfa-a" {notempty name="so.desc_txt_color"}style="color:{$so.desc_txt_color};"{/notempty}>{$so.desc|raw}</a>
|
||||
</div>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!--微链接 -->
|
||||
{notempty name="nas_software"}
|
||||
<div class="nars-wlj">
|
||||
<span class="wlj-title">{:lang('topic_nas_index.software_section_title')}</span>
|
||||
{volist name="nas_software" id="soft" offset="0" length="3"}
|
||||
<a class="wltitem" {notempty name="soft.link"}href="{$soft.link}"{/notempty}>
|
||||
<div class="wljcp">
|
||||
<img src="{$soft.image}" class="wljimg" />
|
||||
</div>
|
||||
<div class="wljcpinfo">
|
||||
<span class="if-title">{$soft.title}</span>
|
||||
<span class="if-info">{$soft.desc|raw}</span>
|
||||
</div>
|
||||
</a>
|
||||
{/volist}
|
||||
{volist name="nas_software" id="soft" offset="3"}
|
||||
<div class="wltitem">
|
||||
<a {notempty name="soft.link"}href="{$soft.link}"{/notempty} style="height:100%;width:100%">
|
||||
<img src="{$soft.image}" style="height:100%;width:100%" />
|
||||
</a>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
{/notempty}
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
{block name="script"}
|
||||
<script type="text/javascript" src="https://unpkg.com/swiper@9.4.1/swiper-bundle.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
// banner轮播
|
||||
var mySwiper = new Swiper('.mySwiper ', {
|
||||
// 配置选项
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 3000,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
});
|
||||
// 解决方案轮播
|
||||
var swiper1 = new Swiper(".jjfaSwiper", {
|
||||
slidesPerView: 5,
|
||||
spaceBetween: 12,
|
||||
freeMode: true,
|
||||
autoplay: 5000,
|
||||
loop: true,
|
||||
grabCursor: true, //鼠标光标
|
||||
})
|
||||
$('.jjfaSwiper').mouseenter(function () {
|
||||
swiper1.stopAutoplay()
|
||||
}).mouseleave(function () {
|
||||
swiper1.startAutoplay()
|
||||
});
|
||||
})
|
||||
</script>
|
||||
{/block}
|
||||
Reference in New Issue
Block a user