259 lines
13 KiB
PHTML
Executable File
259 lines
13 KiB
PHTML
Executable File
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
|
||
<title>元创官网</title>
|
||
{include file='include/head-nas'/}
|
||
</head>
|
||
<body>
|
||
<div class="narsPage">
|
||
<!--顶部导航-->
|
||
{include file='include/top-header-nas'/}
|
||
<!--banner -->
|
||
<div class="narsIndex-banner">
|
||
<div class="swiper-container mySwiper">
|
||
<div class="swiper-wrapper">
|
||
{volist name='data.swiper.banners' id='vo'}
|
||
<div class="swiper-slide">
|
||
<!--banner内容-->
|
||
<div class="strct">
|
||
<span class="sw-title">{$vo.name}</span>
|
||
{if condition="!empty($vo.name)"}
|
||
<a class="btmore" href="{$vo.link}" style="background:{$vo.btn_color|default='#004bfa'}">
|
||
<span class="btst" style="color:{$alt|default='#ffffff'}">Click to view</span>
|
||
<img src="__PUBLIC__/web/images/goico.png" class="goico-img" />
|
||
</a>
|
||
{/if}
|
||
</div>
|
||
<img src="{$vo.picture|getImage}" alt="" class="narsbanner-img" />
|
||
</div>
|
||
{/volist}
|
||
</div>
|
||
<!--Add Pagination -->
|
||
<div class="swiper-pagination"></div>
|
||
<!--Add Arrows -->
|
||
<div class="swiper-button-next swiper-button-white"></div>
|
||
<div class="swiper-button-prev swiper-button-white"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--九大模块分类 -->
|
||
<div class="nars-cate">
|
||
<div class="narscatecenter">
|
||
<!--左边三个 -->
|
||
<div class="cate-column">
|
||
<a class="cateit" href="{$data.product.banners[0]['link']}" style="background: url({$data.product.banners[0]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||
<!-- <span class="pp1">-->
|
||
<!-- <span style="color:{$data.product.banners[0]['alt']|default='#000000'}">{$data.product.banners[0]['name']}</span>-->
|
||
<!-- {if condition="!empty($data.product.banners[0]['desc'])"}-->
|
||
<!-- <br /><span style="color:{$data.product.banners[0]['desc_color']|default='#000000'}">{$data.product.banners[0]['desc']}</span>-->
|
||
<!-- {/if}-->
|
||
<!--</span>-->
|
||
</a>
|
||
<a class="cateit" href="{$data.product.banners[3]['link']}" style="background: url({$data.product.banners[3]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||
<!-- <span class="pp1">-->
|
||
<!-- <span style="color:{$data.product.banners[3]['alt']|default='#000000'}">{$data.product.banners[3]['name']}</span>-->
|
||
<!-- {if condition="!empty($data.product.banners[3]['desc'])"}-->
|
||
<!-- <br /><span style="color:{$data.product.banners[3]['desc_color']|default='#000000'}">{$data.product.banners[3]['desc']}</span>-->
|
||
<!-- {/if}-->
|
||
<!--</span>-->
|
||
</a>
|
||
<a class="cateit" href="{$data.product.banners[6]['link']}" style="background: url({$data.product.banners[6]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||
<!-- <span class="pp1">-->
|
||
<!-- <span style="color:{$data.product.banners[6]['alt']|default='#000000'}">{$data.product.banners[6]['name']}</span>-->
|
||
<!-- {if condition="!empty($data.product.banners[6]['desc'])"}-->
|
||
<!-- <br /><span style="color:{$data.product.banners[6]['desc_color']|default='#000000'}">{$data.product.banners[6]['desc']}</span>-->
|
||
<!-- {/if}-->
|
||
<!--</span>-->
|
||
</a>
|
||
</div>
|
||
<!--中间三个 -->
|
||
<div class="cate-column " style="margin: 0 0.875rem;">
|
||
<a class="cateit cateit2 cateit2top bigcateit" href="{$data.product.banners[1]['link']}" style="background: url({$data.product.banners[1]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||
<!--<span class="pp1" style="margin: 0 auto;margin-top: 3.0625rem; display: flex;flex-direction: column;align-items: center;">-->
|
||
<!-- <span class="zjtitle">AI NAS</span>-->
|
||
<!-- <span class="zjtitle-sm">智慧数据管理</span>-->
|
||
<!--</span>-->
|
||
</a>
|
||
<a class="cateit cateit2 cateit2mid smallcateit" href="{$data.product.banners[4]['link']}" style="background: url({$data.product.banners[4]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||
<!-- <span class="pp1" style="margin-top: 0;flex-direction: row;display: flex;align-items: center;justify-content: space-between;width: 85%;">-->
|
||
<!-- <span style="color:{$data.product.banners[4]['alt']|default='#000000'};font-size:3.4375rem;">{$data.product.banners[4]['name']}</span>-->
|
||
<!-- {if condition="!empty($data.product.banners[4]['desc'])"}-->
|
||
<!-- <br /><span style="color:{$data.product.banners[4]['desc_color']|default='#000000'}">{$data.product.banners[4]['desc']}</span>-->
|
||
<!-- {/if}-->
|
||
<!--</span>-->
|
||
</a>
|
||
<a class="cateit cateit2 cateit2bottom" href="{$data.product.banners[7]['link']}" style="background: url({$data.product.banners[7]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||
<!-- <span class="pp1">-->
|
||
<!-- <span style="color:{$data.product.banners[7]['alt']|default='#000000'}">{$data.product.banners[7]['name']}</span>-->
|
||
<!-- {if condition="!empty($data.product.banners[7]['desc'])"}-->
|
||
<!-- <br /><span style="color:{$data.product.banners[7]['desc_color']|default='#000000'}">{$data.product.banners[7]['desc']}</span>-->
|
||
<!-- {/if}-->
|
||
<!--</span>-->
|
||
</a>
|
||
</div>
|
||
<!--右边三个 -->
|
||
<div class="cate-column">
|
||
<a class="cateit" href="{$data.product.banners[2]['link']}" style="background: url({$data.product.banners[2]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||
<!-- <span class="pp1">-->
|
||
<!-- <span style="color:{$data.product.banners[2]['alt']|default='#000000'}">{$data.product.banners[2]['name']}</span>-->
|
||
<!-- {if condition="!empty($data.product.banners[2]['desc'])"}-->
|
||
<!-- <br /><span style="color:{$data.product.banners[2]['desc_color']|default='#000000'}">{$data.product.banners[2]['desc']}</span>-->
|
||
<!-- {/if}-->
|
||
<!--</span>-->
|
||
</a>
|
||
<a class="cateit" href="{$data.product.banners[5]['link']}" style="background: url({$data.product.banners[5]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||
<!-- <span class="pp1">-->
|
||
<!-- <span style="color:{$data.product.banners[5]['alt']|default='#000000'}">{$data.product.banners[5]['name']}</span>-->
|
||
<!-- {if condition="!empty($data.product.banners[5]['desc'])"}-->
|
||
<!-- <br /><span style="color:{$data.product.banners[5]['desc_color']|default='#000000'}">{$data.product.banners[5]['desc']}</span>-->
|
||
<!-- {/if}-->
|
||
<!--</span>-->
|
||
</a>
|
||
<a class="cateit" href="{$data.product.banners[8]['link']}" style="background: url({$data.product.banners[8]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||
<!-- <span class="pp1">-->
|
||
<!-- <span style="color:{$data.product.banners[8]['alt']|default='#000000'}">{$data.product.banners[8]['name']}</span>-->
|
||
<!-- {if condition="!empty($data.product.banners[8]['desc'])"}-->
|
||
<!-- <br /><span style="color:{$data.product.banners[8]['desc_color']|default='#000000'}">{$data.product.banners[8]['desc']}</span>-->
|
||
<!-- {/if}-->
|
||
<!--</span>-->
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--视频-->
|
||
<div class="narsVideo" style="height:auto">
|
||
<div class="videoview">
|
||
<video class="video" poster="{$data.video.banners[0]['picture']|getImage}" controls autoplay loop muted>
|
||
<source type="video/mp4" src="{$data.video.banners[0]['video_url']}">
|
||
</video>
|
||
</div>
|
||
</div>
|
||
<!--解決方案-->
|
||
<div class="nars-jjfa">
|
||
<span class="jjfa-title"><span style="color:#004BFA">ORICO</span>网络存储解决方案</span>
|
||
<div class="swiper jjfaSwiper">
|
||
<div class="swiper-wrapper">
|
||
{volist name='data.plan.banners' id='vo'}
|
||
<div class="swiper-slide">
|
||
<img src="{$vo.picture|getImage}" class="jjfabgimg" />
|
||
<div class="jjfa-ct">
|
||
<span class="st" style="color:{$vo.alt|default='#000000'}">{$vo.name}</span>
|
||
</div>
|
||
<!-- 鼠标移入效果-->
|
||
<div class="jjfa-info" style="text-align:left;white-space:pre-line;">
|
||
<span style="color:#020612;font-size:1.875rem;padding-top:2.8rem;padding-bottom:1.5rem;font-weight:bold">{$vo.name}</span>
|
||
<a href="{$vo.link}" style="color:{$vo.desc_color|default='#000'};line-height: 36px;display:flex;">
|
||
<span>{$vo.desc}</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
{/volist}
|
||
</div>
|
||
<!-- <div class="swiper-pagination"></div> -->
|
||
</div>
|
||
</div>
|
||
<!--微链接 -->
|
||
<div class="nars-wlj">
|
||
<span class="wlj-title"><span style="color:#004BFA">NAS</span>配套软件</span>
|
||
{volist name='data.weline.banners' id='vo'}
|
||
<div class="wltitem">
|
||
<div class="wljcp">
|
||
<img src="{$vo.picture|getImage}" class="wljimg" />
|
||
</div>
|
||
<div class="wljcpinfo">
|
||
<span class="if-title" style="color:{$vo.alt|default='#ffffff'}">{$vo.name}</span>
|
||
<span class="if-info" style="color:{$vo.desc_color|default='#ffffff'};white-space:pre-line">{$vo.desc}</span>
|
||
</div>
|
||
</div>
|
||
{/volist}
|
||
<div class="wltitem">
|
||
<a href="{$data.download.banners[0]['link']}" style="height:100%;width:100%">
|
||
<img src="__PUBLIC__/web/images/nars_atdbimg.jpg" style="height:100%;width:100%" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
{include file='include/bottom2023'/}
|
||
</body>
|
||
<script>
|
||
$(document).ready(function() {
|
||
// banner轮播
|
||
var swiper = new Swiper(".mySwiper", {
|
||
pagination: '.swiper-pagination',
|
||
nextButton: '.swiper-button-next',
|
||
prevButton: '.swiper-button-prev',
|
||
paginationClickable: true,
|
||
spaceBetween: 30,
|
||
centeredSlides: true,
|
||
autoplay: 5000,
|
||
autoplayDisableOnInteraction: false,
|
||
loop: true
|
||
})
|
||
// 解决方案轮播
|
||
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()
|
||
});
|
||
})
|
||
|
||
// 原始图片的宽高
|
||
var originalWidth = 400;
|
||
var originalHeight = 260;
|
||
var originalWidth2=449
|
||
var originalHeight2=387
|
||
var originalWidth3=449
|
||
var originalHeight3=136
|
||
|
||
// // 窗口调整大小时的处理函数
|
||
// function adjustImage() {
|
||
// var windowWidth = $(window).width(); // 获取当前窗口宽度
|
||
|
||
// // 计算新的图片宽度，这里假设最大宽度不超过窗口宽度的90%
|
||
// var newWidth = Math.min(windowWidth * 0.9, originalWidth);
|
||
// // 计算新的图片宽度，这里假设最大宽度不超过窗口宽度的90%
|
||
// var newWidth2 = Math.min(windowWidth * 0.9, originalWidth2);
|
||
// var newWidth3 = Math.min(windowWidth * 0.9, originalWidth3);
|
||
// // 根据宽高比计算新的图片高度
|
||
// var newHeight = (newWidth / originalWidth) * originalHeight;
|
||
// var newHeight2 = (newWidth2 / originalWidth2) * originalHeight2;
|
||
// var newHeight3 = (newWidth3 / originalWidth3) * originalHeight3;
|
||
|
||
// // 应用新的尺寸到图片
|
||
// $('.cateit').css({
|
||
// width: newWidth + 'px',
|
||
// height: newHeight + 'px'
|
||
// });
|
||
// // 应用新的尺寸到图片
|
||
// $('.cateit2top').css({
|
||
// width: newWidth2 + 'px',
|
||
// height: newHeight2 + 'px'
|
||
// });
|
||
// // 应用新的尺寸到图片
|
||
// $('.cateit2mid').css({
|
||
// width: newWidth3 + 'px',
|
||
// height: newHeight3 + 'px'
|
||
// });
|
||
// $('.cateit2bottom').css({
|
||
// width: newWidth2 + 'px',
|
||
// height: newHeight + 'px'
|
||
// });
|
||
// }
|
||
// // 初始时调用一次
|
||
// adjustImage();
|
||
// // 监听窗口大小变化
|
||
// $(window).resize(adjustImage);
|
||
</script>
|
||
</html>
|