feat: nas首页
This commit is contained in:
28
app/index/view/public/nas_base.html
Normal file
28
app/index/view/public/nas_base.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
{block name="title"}<title>{$basic_config['website_seo_title']['value']}</title>{/block}
|
||||
{block name="seo"}
|
||||
<meta name="keywords" content="{$basic_config['website_seo_keyword']['value']}" />
|
||||
<meta name="description" content="{$basic_config['website_seo_description']['value']}" />
|
||||
{/block}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/public.css" />
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/fonts.css" />
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/topic_nas_header.css" />
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/orico_footer.css" />
|
||||
{block name="style"}{/block}
|
||||
<script type="text/javascript" src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
{block name="header"}
|
||||
{include file="public/nas_header"/}
|
||||
{/block}
|
||||
{block name="main"}{/block}
|
||||
{block name="footer"}
|
||||
{include file="public/nas_footer"/}
|
||||
{/block}
|
||||
{block name="script"}{/block}
|
||||
</body>
|
||||
</html>
|
||||
74
app/index/view/public/nas_footer.html
Normal file
74
app/index/view/public/nas_footer.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<footer class="orico_footer">
|
||||
<div class="fotter">
|
||||
<!--中间信息-->
|
||||
<div class="footerMain">
|
||||
<!-- 上面-->
|
||||
<div class="foottxttop">
|
||||
<!--ico -->
|
||||
<a href="/">
|
||||
<img src="__IMAGES__/bottomlogo.png" class="footerico" />
|
||||
</a>
|
||||
<div class="foootCt">
|
||||
<p class="ftitle">{:lang('footer_navigation.product_categorys')}</p>
|
||||
<ul>
|
||||
{volist name="header_categorys" id="vo"}
|
||||
<li><a href="{:url('product/category', ['id' => $vo.id])}" class="fline">{$vo.name}</a></li>
|
||||
{/volist}
|
||||
</ul>
|
||||
</div>
|
||||
{if condition="!empty($footer_navigation)"}
|
||||
{volist name="footer_navigation" id="vo"}
|
||||
<div class="foootCt">
|
||||
<p class="ftitle">{$vo.name}</p>
|
||||
{if condition="!empty($vo.children)"}
|
||||
<ul>
|
||||
{volist name="vo.children" id="vc"}
|
||||
<li><a href="{$vc.link}" class="fline">{$vc.name}</a></li>
|
||||
{/volist}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
{/volist}
|
||||
{/if}
|
||||
<div class="foootCt">
|
||||
<p class="ftitle">{:lang('footer_contact')}</p>
|
||||
{if condition="!empty($contact_config)"}
|
||||
<ul>
|
||||
{volist name="contact_config" id="vo"}
|
||||
<li>
|
||||
<a href="javascript:void(0);" class="fline">
|
||||
{if condition="$vo.type == 'image'"}
|
||||
<img src="{$vo.value}" {if condition="!empty($vo.extra)"}style="{$vo.extra}"{/if} />
|
||||
{else/}
|
||||
{$vo.value}
|
||||
{/if}
|
||||
</a>
|
||||
</li>
|
||||
{/volist}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="foottxtbottom">
|
||||
{if condition="!empty($media_config)"}
|
||||
<div class="ftopicos">
|
||||
<ul>
|
||||
{volist name="media_config" id="vo"}
|
||||
<a href="{$vo.url.value}"><img src="{$vo.image.value}" {if condition="!empty($vo.image.extra)"}style="{$vo.image.extra}"{/if} /></a>
|
||||
{/volist}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
{if condition="!empty($basic_config.website_powerby)"}
|
||||
<div class="ftcopyright">
|
||||
<span>{$basic_config.website_powerby.value}</span>
|
||||
{if condition="!empty($basic_config.website_icp)"}
|
||||
<a href="https://beian.miit.gov.cn/">（{$basic_config.website_icp.value}）</a>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<!-- <div class="batext">粤公网安备 44030702002297号</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
50
app/index/view/public/nas_header.html
Normal file
50
app/index/view/public/nas_header.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<header class="narsPage-head">
|
||||
<div class="headcenter">
|
||||
<img class="logico" style="cursor:pointer;" src="__IMAGES__/logo_nas.png" />
|
||||
{notempty name="header_navigation"}
|
||||
<nav class="headnav">
|
||||
{volist name="header_navigation" id="nav" key="idx"}
|
||||
<a class="navitem {eq name='idx' value='1'}hover{/eq}" href="{$nav.link}" target="{$nav.blank==1?'_blank':'_self'}">
|
||||
{$nav.name}
|
||||
</a>
|
||||
{/volist}
|
||||
</nav>
|
||||
{/notempty}
|
||||
</div>
|
||||
</header>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$('.headnav .navitem').each(function(idx, item) {
|
||||
$(item).removeClass('hover');
|
||||
if (compareUrls(location.href, item.href)) {
|
||||
$(item).addClass('hover').siblings();
|
||||
}
|
||||
});
|
||||
|
||||
// 比较两个URL是否相等（支持只有path的情况，并处理有无.html后缀的情况）
|
||||
function compareUrls(url1, url2) {
|
||||
// 如果输入的是相对路径，添加当前域名
|
||||
if (!url1.startsWith('http')) {
|
||||
url1 = window.location.origin + (url1.startsWith('/') ? '' : '/') + url1;
|
||||
}
|
||||
if (!url2.startsWith('http')) {
|
||||
url2 = window.location.origin + (url2.startsWith('/') ? '' : '/') + url2;
|
||||
}
|
||||
|
||||
// 将两个URL转换为URL对象
|
||||
const urlObj1 = new URL(url1);
|
||||
const urlObj2 = new URL(url2);
|
||||
|
||||
// 获取路径名并移除末尾的斜杠
|
||||
let path1 = urlObj1.pathname.replace(/\/$/, '');
|
||||
let path2 = urlObj2.pathname.replace(/\/$/, '');
|
||||
|
||||
// 移除.html后缀
|
||||
path1 = path1.replace(/\.html$/, '');
|
||||
path2 = path2.replace(/\.html$/, '');
|
||||
|
||||
// 比较处理后的路径
|
||||
return path1 === path2;
|
||||
}
|
||||
})
|
||||
</script>
|
||||
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