jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: mobile nas主题首页

Browse Source
This commit is contained in:
jsasg
2025-06-07 13:54:34 +08:00
parent c4e25484bf
commit 6c5f66ef54
5 changed files with 543 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/index/common.php
View File

@@ -111,3 +111,15 @@ if (!function_exists('lang_i18n')) {
return Lang::get($lang_key, $vars, $lang);
}
}
if (!function_exists('array_flatten')) {
/**
* 将多维数组转换为一维数组
* @param array $array
* @return array
*/
function array_flatten(array $array, int $depth = 1): array
{
return \think\helper\Arr::flatten($array, $depth);
}
}

8
app/index/controller/TopicNas.php
View File

@@ -20,6 +20,10 @@ class TopicNas extends Common
{
// 获取国家/语言列表
$languages = $this->getLanguages();
// 输出国家/语言列表
if (request()->isMobile()) {
View::assign('header_languages', $languages);
}
// 获取当前语言
$current_language = $this->getCurrentLanguage($languages);
@@ -61,8 +65,10 @@ class TopicNas extends Common
$nas_software = [];
// 获取banner数据
$banners = SysBannerModel::with(['items' => function($query) {
$query->withoutField(['sort', 'created_at', 'updated_at', 'deleted_at']);
$query->withoutField(['sort', 'created_at', 'updated_at', 'deleted_at'])
->order(['sort' => 'asc', 'id' => 'desc']);
}])
->atPlatform(request()->from)
->uniqueLabel([
'BANNER_680f156a805a8',
'BANNER_680f15ca5482f',

6
app/index/lang/en-us/mobile.php
View File

@@ -172,4 +172,10 @@ return [
'为了得到深圳市元创时代科技有限公司给予您的“包修、包换、包退”的权益，请您：' => 'For a smooth return and refund, quality warranty, please follow these steps:',
'特别说明' => 'ORICO is not liable for:'
],
// nas主题 - 首页
'topicnas/index' => [
'网络存储解决方案' => 'Network Storage Solutions',
'配套软件' => 'Software',
],
];

150
app/index/view/mobile/topic_nas/index.html Normal file
View 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}