feat: nas首页
This commit is contained in:
125
app/index/controller/TopicNas.php
Normal file
125
app/index/controller/TopicNas.php
Normal file
@@ -0,0 +1,125 @@
|
||||
<?php
|
||||
declare (strict_types = 1);
|
||||
|
||||
namespace app\index\controller;
|
||||
|
||||
use app\index\model\SysBannerModel;
|
||||
use think\facade\View;
|
||||
|
||||
/**
|
||||
* 专题-Nas控制器
|
||||
*/
|
||||
class TopicNas extends Common
|
||||
{
|
||||
/**
|
||||
* 重写控制器初始化
|
||||
*/
|
||||
protected function initialize()
|
||||
{
|
||||
// 获取国家/语言列表
|
||||
$languages = $this->getLanguages();
|
||||
|
||||
// 获取当前语言
|
||||
$current_language = $this->getCurrentLanguage($languages);
|
||||
if (!empty($current_language)) {
|
||||
$this->lang_id = $current_language['id'];
|
||||
}
|
||||
|
||||
// 获取产品分类
|
||||
$categorys = $this->getProductCategory($this->lang_id);
|
||||
// 输出产品分类
|
||||
View::assign('header_categorys', $categorys);
|
||||
|
||||
// 输出顶部导航
|
||||
View::assign('header_navigation', $this->getNavigation('NAV_680ef95e9db90', $this->lang_id));
|
||||
|
||||
// 获取系统配置
|
||||
$configs = $this->getSysConfig($this->lang_id, ['basic', 'contact', 'media']);
|
||||
$this->basic_config = $configs['basic'];
|
||||
// 输出系统配置
|
||||
View::assign('basic_config', $configs['basic']);
|
||||
View::assign('contact_config', $configs['contact']);
|
||||
View::assign('media_config', $configs['media']);
|
||||
|
||||
// 获取底部导航
|
||||
$footer_navigation = $this->getNavigation('NAV_67f60be43df8d', $this->lang_id);
|
||||
// 输出底部导航
|
||||
View::assign('footer_navigation', $footer_navigation);
|
||||
}
|
||||
|
||||
/**
|
||||
* 专题-Nas首页
|
||||
*/
|
||||
public function index()
|
||||
{
|
||||
$focus_image = [];
|
||||
$nas_category = [];
|
||||
$nas_video = [];
|
||||
$nas_solution = [];
|
||||
$nas_software = [];
|
||||
// 获取banner数据
|
||||
$banners = SysBannerModel::with(['items' => function($query) {
|
||||
$query->withoutField(['sort', 'created_at', 'updated_at', 'deleted_at']);
|
||||
}])
|
||||
->uniqueLabel([
|
||||
'BANNER_680f156a805a8',
|
||||
'BANNER_680f15ca5482f',
|
||||
'BANNER_680f161b5fd3a',
|
||||
'BANNER_680f16358f14c',
|
||||
'BANNER_680f1e5132184'
|
||||
])
|
||||
->language($this->lang_id)
|
||||
->enabled(true)
|
||||
->select();
|
||||
if (!$banners->isEmpty()) {
|
||||
$banners_map = [];
|
||||
foreach ($banners as $banner) {
|
||||
$banners_map[$banner->unique_label] = $banner;
|
||||
}
|
||||
$focus_image = data_get($banners_map, 'BANNER_680f156a805a8')?->items->toArray();
|
||||
$nas_category = data_get($banners_map, 'BANNER_680f15ca5482f')?->items->chunk(3)?->toArray();
|
||||
$nas_video = data_get($banners_map, 'BANNER_680f161b5fd3a')?->items->first()?->toArray();
|
||||
$nas_solution = data_get($banners_map, 'BANNER_680f16358f14c')?->items->toArray();
|
||||
$nas_software = data_get($banners_map, 'BANNER_680f1e5132184')?->items->toArray();
|
||||
}
|
||||
View::assign('focus_image', $focus_image);
|
||||
View::assign('nas_category', $nas_category);
|
||||
View::assign('nas_video', $nas_video);
|
||||
View::assign('nas_solution', $nas_solution);
|
||||
View::assign('nas_software', $nas_software);
|
||||
|
||||
return View::fetch('index');
|
||||
}
|
||||
|
||||
/**
|
||||
* 专题-Nas产品体验页
|
||||
*/
|
||||
public function product()
|
||||
{
|
||||
return View::fetch('product');
|
||||
}
|
||||
|
||||
/**
|
||||
* 专题-Nas客户合作页
|
||||
*/
|
||||
public function cooperation()
|
||||
{
|
||||
return View::fetch('cooperation');
|
||||
}
|
||||
|
||||
/**
|
||||
* 专题-Nas帮助中心页
|
||||
*/
|
||||
public function help()
|
||||
{
|
||||
return View::fetch('help');
|
||||
}
|
||||
|
||||
/**
|
||||
* 专题-Nas软件下载页
|
||||
*/
|
||||
public function download()
|
||||
{
|
||||
return View::fetch('download');
|
||||
}
|
||||
}
|
||||
@@ -199,4 +199,8 @@ return [
|
||||
'send_success' => 'Add Success！',
|
||||
'send_fail' => 'Add Fail！',
|
||||
],
|
||||
'topic_nas_index' => [
|
||||
'solution_section_title' => '<span style="color:#004BFA;">ORICO</span>网络存储解决方案',
|
||||
'software_section_title' => '<span style="color:#004BFA">NAS</span>配套软件',
|
||||
],
|
||||
];
|
||||
@@ -199,4 +199,8 @@ return [
|
||||
'send_success' => '信息已成功提交',
|
||||
'send_fail' => '信息提交失败',
|
||||
],
|
||||
'topic_nas_index' => [
|
||||
'solution_section_title' => '<span style="color:#004BFA;">ORICO</span>网络存储解决方案',
|
||||
'software_section_title' => '<span style="color:#004BFA">NAS</span>配套软件',
|
||||
],
|
||||
];
|
||||
@@ -83,5 +83,23 @@ Route::group('contactus', function() {
|
||||
// 提交留言批量购买
|
||||
Route::post('bulkbuy', 'ContactUs/bulkbuy');
|
||||
});
|
||||
|
||||
// 专题
|
||||
Route::group('topic', function() {
|
||||
// 专题-Nas
|
||||
Route::group('nas', function() {
|
||||
// 专题-Nas首页
|
||||
Route::get('index', 'TopicNas/index');
|
||||
// 专题-Nas产品体验页
|
||||
Route::get('product', 'TopicNas/product');
|
||||
// 专题-Nas客户合作页
|
||||
Route::get('cooperation', 'TopicNas/cooperation');
|
||||
// 专题-Nas帮助中心页
|
||||
Route::get('help', 'TopicNas/help');
|
||||
// 专题-Nas软件下载页
|
||||
Route::get('download', 'TopicNas/download');
|
||||
});
|
||||
});
|
||||
|
||||
// 数据迁移
|
||||
Route::get('/data/migration', 'DataMigration/index');
|
||||
|
||||
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