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}
|
||||
59
public/static/index/css/topic_nas_header.css
Normal file
59
public/static/index/css/topic_nas_header.css
Normal file
@@ -0,0 +1,59 @@
|
||||
.narsPage-head {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.narsPage-head .headcenter {
|
||||
height: 3.75rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 75rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.narsPage-head .headcenter .navitem {
|
||||
position: relative;
|
||||
margin-left: 4.375rem;
|
||||
color: #000;
|
||||
font-size: 1.0rem;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.narsPage-head .headcenter .downimg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 15px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.narsPage-head .headcenter .children {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 2.5rem;
|
||||
list-style: none;
|
||||
font-size: 1rem;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 1px 0 #88909A;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.narsPage-head .headcenter .children li {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.narsPage-head .headcenter .navitem.hover,
|
||||
.narsPage-head .headcenter .navitem:hover {
|
||||
color: #004bfa;
|
||||
}
|
||||
|
||||
.narsPage-head .headcenter .logico {
|
||||
width: 12.375rem;
|
||||
height: 3.875rem;
|
||||
}
|
||||
508
public/static/index/css/topic_nas_index.css
Executable file
508
public/static/index/css/topic_nas_index.css
Executable file
@@ -0,0 +1,508 @@
|
||||
.narsbanner-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.goico-img {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ainasimg {
|
||||
width: 15.875rem;
|
||||
height: 4.5625rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.jjfabgimg {
|
||||
width: 20.1875rem;
|
||||
height: 37.6875rem;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.narsIndex-banner {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 56.4375rem;
|
||||
}
|
||||
|
||||
.narsIndex-banner .mySwiper .swiper-slide {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.narsIndex-banner .mySwiper .swiper-slide .strct {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 3.375rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.narsIndex-banner .mySwiper .swiper-slide .strct img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.narsIndex-banner .mySwiper .swiper-slide .strct .sw-title {
|
||||
font-size: 3.125rem;
|
||||
}
|
||||
|
||||
.narsIndex-banner .mySwiper .swiper-slide .strct .btmore {
|
||||
cursor: pointer;
|
||||
width: 17.625rem;
|
||||
height: 3.25rem;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
line-height: 3.25rem;
|
||||
position: relative;
|
||||
background: #004bfa;
|
||||
border-radius: 1.625rem;
|
||||
font-size: 1.875rem;
|
||||
color: #fff;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.narsIndex-banner .mySwiper .swiper-slide .strct .btmore .btst {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.narsIndex-banner .mySwiper .swiper-slide .strct .btmore .goico-img {
|
||||
position: absolute;
|
||||
top: 1.0625rem;
|
||||
right: 1.6875rem;
|
||||
}
|
||||
|
||||
.narsIndex-banner .mySwiper .swiper-button-next {
|
||||
position: absolute !important;
|
||||
color: white;
|
||||
margin-right: 170px;
|
||||
margin-left: 0;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.narsIndex-banner .mySwiper .swiper-button-prev {
|
||||
position: absolute !important;
|
||||
color: white;
|
||||
margin-left: 170px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.narsIndex-banner .mySwiper .swiper-pagination {
|
||||
bottom: 5% !important;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.narsIndex-banner .mySwiper .swiper-pagination .swiper-pagination-bullet {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.narsIndex-banner .mySwiper .swiper-pagination-bullet-active {
|
||||
width: 24px !important;
|
||||
height: 24px;
|
||||
border-radius: 10px;
|
||||
color: #ffffff !important;
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.narsIndex-banner .my-pagination-clickable {
|
||||
width: 1200px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.nars-cate {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5.5rem;
|
||||
background: #fff;
|
||||
margin: 0 auto;
|
||||
max-width: 1920px;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter {
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
height: auto;
|
||||
min-width: 1024px;
|
||||
overflow: hidden;
|
||||
margin: 0 7.5rem;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column {
|
||||
width: 33%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
color: #000;
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .cateit {
|
||||
width: 100%;
|
||||
height: 10.25rem;
|
||||
border-radius: 1rem;
|
||||
background: #fff;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .bigcateit {
|
||||
/*height:12.05rem;*/
|
||||
height: 15.05rem
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .smallcateit {
|
||||
height: 5.45rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width:750px) and (max-width:1280px) {
|
||||
.nars-cate .narscatecenter .cate-column .cateit {
|
||||
width: 100%;
|
||||
height: 10.25rem;
|
||||
border-radius: 1rem;
|
||||
background: #fff;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .bigcateit {
|
||||
height: 15.05rem;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .smallcateit {
|
||||
height: 5.45rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width:1281px) and (max-width:1360px) {
|
||||
.nars-cate .narscatecenter .cate-column .cateit {
|
||||
height: 12.25rem;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .bigcateit {
|
||||
height: 17.05rem;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .smallcateit {
|
||||
height: 7.45rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width:1361px) and (max-width:1460px) {
|
||||
.nars-cate .narscatecenter .cate-column .cateit {
|
||||
height: 13.25rem;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .bigcateit {
|
||||
height: 18.05rem;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .smallcateit {
|
||||
height: 8.45rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width:1461px) and (max-width:1660px) {
|
||||
.nars-cate .narscatecenter .cate-column .cateit {
|
||||
height: 15.25rem;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .bigcateit {
|
||||
height: 24.05rem;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .smallcateit {
|
||||
height: 6.45rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width:1661px) and (max-width:1760px) {
|
||||
.nars-cate .narscatecenter .cate-column .cateit {
|
||||
height: 15.25rem;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .bigcateit {
|
||||
height: 23.05rem;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .smallcateit {
|
||||
height: 7.45rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width:1761px) and (max-width:1960px) {
|
||||
.nars-cate .narscatecenter .cate-column .cateit {
|
||||
height: 16.25rem;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .bigcateit {
|
||||
height: 24.05rem;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .smallcateit {
|
||||
height: 8.45rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width:1980px) {
|
||||
.nars-cate .narscatecenter .cate-column .cateit {
|
||||
height: 18.25rem;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .bigcateit {
|
||||
height: 26.05rem;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .smallcateit {
|
||||
height: 10.45rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .cateit .pp1 {
|
||||
margin-top: 2.625rem;
|
||||
margin-left: 2.125rem;
|
||||
color: #020612;
|
||||
font-size: 1.875rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .cateit .pp1 span:last-child {
|
||||
color: #91A5C4;
|
||||
font-size: 1.375rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .cateit .pp1 .zjtitle {
|
||||
margin: 0 auto;
|
||||
font-size: 3.4375rem;
|
||||
font-weight: bold;
|
||||
color: #020612;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column .cateit .pp1 .zjtitle-sm {
|
||||
color: #020612;
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
.nars-cate .narscatecenter .cate-column2 {
|
||||
width: 24.1875rem;
|
||||
}
|
||||
|
||||
.narsVideo {
|
||||
width: 100%;
|
||||
padding-top: 3.25rem;
|
||||
padding-bottom: 4.5rem;
|
||||
}
|
||||
|
||||
.narsVideo .videoview {
|
||||
margin: 0 7.5rem;
|
||||
/*height: 47.5rem;*/
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.narsVideo .videoview .video {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.nars-jjfa {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 3.8125rem;
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nars-jjfa .jjfa-title {
|
||||
font-size: 3.75rem;
|
||||
font-weight: bold;
|
||||
padding-bottom: 3.75rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.nars-jjfa .jjfa-title1 {
|
||||
color:#004BFA
|
||||
}
|
||||
|
||||
.nars-jjfa .jjfaSwiper {
|
||||
margin: 0 7.5rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nars-jjfa .jjfaSwiper .swiper-wrapper .swiper-slide {
|
||||
position: relative;
|
||||
width: 20.1875rem;
|
||||
height: 37.6875rem;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.nars-jjfa .jjfaSwiper .swiper-wrapper .swiper-slide .jjfa-ct {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
height: 5.125rem;
|
||||
background: #3231FF;
|
||||
line-height: 5.125rem;
|
||||
color: #fff;
|
||||
border-top-right-radius: 0.375rem;
|
||||
border-top-left-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.nars-jjfa .jjfaSwiper .swiper-wrapper .swiper-slide .jjfa-ct .st {
|
||||
font-size: 1.875rem;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nars-jjfa .jjfaSwiper .swiper-wrapper .swiper-slide .jjfa-info .jjfa-a {
|
||||
color: #9196a5;
|
||||
line-height: 2.25rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.nars-jjfa .jjfaSwiper .swiper-wrapper .swiper-slide .jjfa-info {
|
||||
background: #ecf2fe;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 37.6875rem;
|
||||
padding: 0 2.875rem;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
text-align:left;
|
||||
white-space:pre-line;
|
||||
cursor: pointer;
|
||||
border-radius: 0.375rem;
|
||||
line-height: 2.375rem;
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
|
||||
.nars-jjfa .jjfaSwiper .swiper-wrapper .swiper-slide .jjfa-info .jjfa-sp-title {
|
||||
color: #020612;
|
||||
font-size: 1.875rem;
|
||||
padding-top: 2.8rem;
|
||||
padding-bottom: 1.5rem;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.nars-jjfa .jjfaSwiper .swiper-wrapper .swiper-slide .jjfa-info .jjfatt {
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
margin-bottom: 1.6875rem;
|
||||
}
|
||||
|
||||
.nars-jjfa .jjfaSwiper .swiper-wrapper .swiper-slide .jjfa-info .jjfa-txt {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
line-height: 2.1875rem;
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
.nars-jjfa .jjfaSwiper .swiper-wrapper .swiper-slide:hover .jjfa-info {
|
||||
display: flex;
|
||||
background: linear-gradient(90deg, #CDD9F1 0%, #ECF2FE 100%);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.nars-wlj {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 7.1875rem;
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nars-wlj .wlj-title {
|
||||
font-size: 3.75rem;
|
||||
font-weight: bold;
|
||||
padding-bottom: 2.8125rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.nars-wlj .wlj-title-sp {
|
||||
color:#004BFA
|
||||
}
|
||||
.nars-wlj .wltitem {
|
||||
margin: 0 7.5rem;
|
||||
min-width: 1024px;
|
||||
background: #000;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1.375rem;
|
||||
background: #ecf2fe !important;
|
||||
border-radius: 8px
|
||||
}
|
||||
|
||||
.nars-wlj .wltitem .wljcp {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: inherit;
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nars-wlj .wltitem .wljcp .tt {
|
||||
font-size: 3.125rem;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
width: 35.5rem;
|
||||
text-align: center;
|
||||
margin-left: 35%;
|
||||
}
|
||||
|
||||
.nars-wlj .wltitem .wljcp .wljimg {
|
||||
width: 100%;
|
||||
/*height: 27.125rem;
|
||||
margin-left: 11.5rem;*/
|
||||
}
|
||||
|
||||
.nars-wlj .wltitem .wljcpinfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
flex: 1;
|
||||
padding: 0 3rem;
|
||||
}
|
||||
|
||||
.nars-wlj .wltitem .wljcpinfo .if-title {
|
||||
font-weight: bold;
|
||||
font-size: 2.25rem;
|
||||
padding-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.nars-wlj .wltitem .wljcpinfo .if-info {
|
||||
font-size: 1.25rem;
|
||||
line-height: 2.15rem;
|
||||
text-align: center;
|
||||
white-space:pre-line;
|
||||
color: #a2a7ba;
|
||||
}
|
||||
|
||||
.nars-wlj .wltitem .wljcpinfo .wlj-xzbt {
|
||||
/*width: 21.75rem;
|
||||
height: 6.5rem;
|
||||
line-height: 6.5rem;*/
|
||||
padding: 0.75rem 6rem;
|
||||
border-radius: 3.25rem;
|
||||
border: 1px solid #FFFFFF;
|
||||
font-size: 2.5rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
BIN
public/static/index/images/logo_nas.png
Normal file
BIN
public/static/index/images/logo_nas.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Reference in New Issue
Block a user