2025-01-25 10:25:30

This commit is contained in:
2025-01-24 10:25:32 +08:00
parent 9df93a243f
commit e993caaa2c
13 changed files with 1182 additions and 534 deletions

View File

@@ -7,30 +7,250 @@
<link rel="stylesheet" href="__PUBLIC__/web/css/swiper-3.4.2.min.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/web/css/nas.css" />
{include file='include/head-nas'/}
<style type="text/css">
.narsZTPC {
width: 100%;
height: 100vh;
position: relative;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.narsZTPC .nZTabs {
display: flex;
flex-direction: row;
justify-content: center;
margin: 2.5rem auto;
}
.narsZTPC .nZTabs .nZTabIt {
color: #001717;
font-size: 18px;
height: 3.25rem;
line-height: 3.25rem;
padding: 0 3.125rem;
background: #fff;
text-align: center;
border-radius: 28px;
cursor: pointer;
border: 1px solid #001717;
}
.narsZTPC .nZTabs .nZTabIt:first-child {
margin-right: 6.25rem;
}
.narsZTPC .nZTabs .nZTabIt_active {
border: 1px solid #004CFA;
color: #fff;
background: #004CFA;
}
.narsZTPC .nZTtopCtMian {
width: 100%;
margin: 0 auto;
height: auto;
}
.narsZTPC .nZTtopCtMian .narsZCimg {
width: 100%;
height: auto;
}
.narsZTPC .nZTtopCtMian .narsZTicos {
width: 65%;
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding: 100px 0;
}
.narsZTPC .nZTtopCtMian .narsZTicos .nztit {
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.narsZTPC .nZTtopCtMian .narsZTicos .nztit .narsicimg {
width: 57px;
height: 57px;
margin-bottom: 10px;
}
.narsZTPC .nZTtopCtMian .narsZTicos .nztit .narsstep {
color: #685557;
padding: 0.625rem 0;
font-size: 1rem;
}
.narsZTPC .nZTtopCtMian .narsZTicos .nztit .narszttext {
color: #2D2C2C;
font-size: 18px;
font-weight: bold;
}
.narswljshow {
display: none;
}
.nZTtopCtMian .narsZTinfo{
width: 65%;
background: #F5F5F7;
border-radius: 8px;
padding: 75px 90px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
margin: 0 auto;
margin-bottom: 100px;
}
.nZTtopCtMian .narsZTinfo .nztif-left{
display: flex;
flex-direction: row;
align-items: center;
}
.nZTtopCtMian .narsZTinfo .nztif-left .narsztewmit {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin-right: 50px;
}
.nZTtopCtMian .narsZTinfo .nztif-left .narsztewmit .nztewmimg{
width: 150px;
height: 150px;
margin-bottom: 1.25rem;
}
.nZTtopCtMian .narsZTinfo .nztif-left .narsztewmit p{
font-weight: bold;
font-size: 18px;
color: F5F5F7;
padding-bottom: 0.5rem;
}
.nZTtopCtMian .narsZTinfo .nztif-left .narsztewmit span{
font-size: 1rem;
}
.nZTtopCtMian .narsZTinfo .nztif-right{
display: flex;
flex-direction: column;
}
.nZTtopCtMian .narsZTinfo .nztif-right .sysmtxt{
font-size: 18px;
color: #001717;
padding-bottom: 1.25rem;
font-weight: 700;
}
.nZTtopCtMian .narsZTinfo .nztif-right .sminfo{
display: flex;
flex-direction: column;
font-size: 18px;
color: #001717;
padding-bottom: 40px;
}
.nZTtopCtMian .narsZTinfo .nztif-right .sminfo span{
padding-bottom: 0.9rem;
font-size: 18px;
}
.nztbzyj{
display: flex;
flex-direction: row;
}
.nztbzyj a{
font-size: 1rem;
color: #2D2C2C;
padding-bottom: 2px;
border-bottom: 1px solid #CBCBCD;
margin-right: 4.5rem;
}
</style>
</head>
<body>
<div class="narsPage">
<!--顶部导航-->
<div class="narsZTPC">
<!--顶部导航-->
{include file='include/top-header-nas'/}
<!--banner -->
<div class="narsIndex-banner">
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- banner内容-->
<img src="/uploads/nas/pc-beta.png" alt="" class="narsbanner-img" />
<!--<div class="nZTabs">-->
<!-- <div class="nZTabIt nZTabIt_active">软件体验</div>-->
<!-- <div class="nZTabIt">新品公测</div>-->
<!--</div>-->
<!-- 软件体验-->
<div class="nZTtopCtMian narssbshow">
<img src="__PUBLIC__/web/images/nas/nars-zt-rjtu-bg.jpg" class="narsZCimg" />
<div class="narsZTicos">
<div class="nztit">
<img src="__PUBLIC__/web/images/nas/nars-zt-ico1.jpg" class="narsicimg" />
<span class="narsstep">步骤1</span>
<span class="narszttext">添加体验官微</span>
</div>
<div class="nztit">
<img src="__PUBLIC__/web/images/nas/nars-zt-ico2.jpg" class="narsicimg" />
<span class="narsstep">步骤2</span>
<span class="narszttext">下载赛博云空间APP</span>
</div>
<div class="nztit">
<img src="__PUBLIC__/web/images/nas/nars-zt-ico3.jpg" class="narsicimg" />
<span class="narsstep">步骤3</span>
<span class="narszttext">获取邀请码</span>
</div>
<div class="nztit">
<img src="__PUBLIC__/web/images/nas/nars-zt-ico4.jpg" class="narsicimg" />
<span class="narsstep">步骤4</span>
<span class="narszttext">开始体验 一 反馈宝贵意见</span>
</div>
</div>
<div class="narsZTinfo">
<div class="nztif-left">
<div class="narsztewmit">
<img src="__PUBLIC__/web/images/nas/nars-sbyrj-ewm.jpg" class="nztewmimg" />
<p>官方微信</p>
<span>手机微信扫码添加</span>
</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 class="narsztewmit">
<a href="https://orico.com.cn/downpc" target="_blank"><img src="__PUBLIC__/web/images/nas/nars-sby-ewm2.jpg" class="nztewmimg" /></a>
<p>赛博云空间APP</p>
<span>点击/扫码下载</span>
</div>
</div>
<div class="nztif-right">
<span class="sysmtxt">试用说明</span>
<div class="sminfo">
<span>1.建议在100M以上网络环境下体验</span>
<span>2.免费试用时间为绑定后24小时试用结束后已上传数据将被删除</span>
<span>3.请遵守国家相关法律、法规,勿上传、下载和分享非法数据</span>
</div>
<div class="nztbzyj">
<a>意见反馈</a>
<a>帮助中心</a>
</div>
</div>
</div>
</div>
<!--新品公测-->
<div class="nZTtopCtMian narswljshow">
<img src="__PUBLIC__/web/images/nas/nars-zt-xpgc-bg.jpg" class="narsZCimg" />
</div>
{include file='include/bottom2023'/}
</div>
{include file='include/bottom2023'/}
</body>
<script>
$(document).ready(function() {
$('.nZTabIt').click(function() {
$('.nZTabIt').removeClass('nZTabIt_active');
$(this).addClass('nZTabIt_active');
if ($(this).index() === 0) {
$('.narssbshow').show();
$('.narswljshow').hide();
} else {
$('.narssbshow').hide();
$('.narswljshow').show();
}
});
});
</script>
</html>

View File

@@ -7,30 +7,173 @@
<link rel="stylesheet" href="__PUBLIC__/web/css/swiper-3.4.2.min.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/web/css/nas.css" />
{include file='include/head-nas'/}
<style type="text/css">
.narsDowloadPc {
width: 100%;
height: 100vh;
background: #F5F5F5;
position: relative;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.narsDowloadPc .narsDtabs {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 70px;
margin-bottom: 30px;
}
.narsDowloadPc .narsDtabs .narsDtabIt {
color: #001717;
font-size: 24px;
height: 52px;
line-height: 52px;
width: 300px;
background: #fff;
text-align: center;
border-radius: 28px;
cursor: pointer;
}
.narsDowloadPc .narsDtabs .narsDtabIt:first-child {
margin-right: 60px;
}
.narsDowloadPc .narsDtabs .narsDtabIt_active {
color: #fff;
background: #004CFA;
}
.narsDowloadPc .narsDmainConten {
width: 1200px;
height: 409px;
background: #fff;
margin-bottom: 10px;
}
.narsDowloadPc .nDtopCtMian {
width: 1200px;
margin: 0 auto;
height: auto;
}
.narsDowloadPc .nDtopCtMian .nDtopIt {
width: 1200px;
height: 409px;
background: #fff;
margin-bottom: 10px;
}
.narsDowloadPc .nDtopCtMian .nDtopIt .tpimg {
width: 100%;
height: 100%;
}
.narsDowloadPc .nDtopCtMian .nDtopIt .tpimg {
width: 100%;
height: 100%;
}
.narsDowloadPc .nDtopCtMian .nDtopIt2 {
width: 1200px;
height: 205px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.narsDowloadPc .nDtopCtMian .nDtopIt2 .nDitImg {
width: 231px;
height: 205px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.narsDowloadPc .nDtopCtMian .nDtopIt2 .nDitImg img{
width: 126px;
height: 126px;
}
.narswljshow{
display: none;
}
.narswljshow .nDtopIt2 .nDitImg{
width: 291px !important;
}
</style>
</head>
<body>
<div class="narsPage">
<!--顶部导航-->
<body>
<div class="narsDowloadPc">
<!--顶部导航-->
{include file='include/top-header-nas'/}
<!--banner -->
<div class="narsIndex-banner">
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- banner内容-->
<img src="/uploads/nas/pc-beta.png" alt="" class="narsbanner-img" />
</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 class="narsDtabs">
<div class="narsDtabIt narsDtabIt_active">CyberData赛博云空间</div>
<div class="narsDtabIt">Weline微链接</div>
</div>
<!-- 赛博云-->
<div class="nDtopCtMian narssbshow">
<div class="nDtopIt">
<img src="__PUBLIC__/web/images/nas/narDl-sbimg.jpg" class="tpimg" />
</div>
<div class="nDtopIt2">
<a href="https://appversion.oriconas.com/api/latest/url?appcode=cyberdata&platform=android">
<div class="nDitImg"><img src="__PUBLIC__/web/images/nas/narsdl_d1.png" /></div>
</a>
<a href="https://apps.apple.com/app/6695746746" target="_blank">
<div class="nDitImg"><img src="__PUBLIC__/web/images/nas/narsdl_d2.png" /></div>
</a>
<a href="https://appversion.oriconas.com/api/latest/url?appcode=cyberdata&platform=windows">
<div class="nDitImg"><img src="__PUBLIC__/web/images/nas/narsdl_d3.png" /></div>
</a>
<a href="https://apps.apple.com/app/6695746746" target="_blank">
<div class="nDitImg"><img src="__PUBLIC__/web/images/nas/narsdl_d4.png" /></div>
</a>
<a>
<div class="nDitImg"><img src="__PUBLIC__/web/images/nas/narsdl_d5.png" /></div>
</a>
</div>
</div>
<!-- 微链接-->
<div class="nDtopCtMian narswljshow">
<div class="nDtopIt">
<img src="__PUBLIC__/web/images/nas/narDl-wljimg.jpg" class="tpimg" />
</div>
<div class="nDtopIt2">
<a href="http://orico.com.cn/static/download/WeLineApp.apk" download="WeLineApp.apk">
<div class="nDitImg"><img src="__PUBLIC__/web/images/nas/narsdl_d1.png" /></div>
</a>
<a href="https://apps.apple.com/us/app/weline-io/id1495146123" target="_blank">
<div class="nDitImg"><img src="__PUBLIC__/web/images/nas/narsdl_d2.png" /></div>
</a>
<a href="http://orico.com.cn/static/download/WelinePC.exe" download="WelinePC.exe">
<div class="nDitImg"><img src="__PUBLIC__/web/images/nas/narsdl_d3.png" /></div>
</a>
<a href="http://orico.com.cn/static/download/WelineMac.dmg" download="WelineMac.dmg">
<div class="nDitImg"><img src="__PUBLIC__/web/images/nas/narsdl_d4.png" /></div>
</a>
</div>
</div>
</div>
{include file='include/bottom2023'/}
{include file='include/bottom2023'/}
</body>
<script>
$(document).ready(function () {
//点击切换
$('.narsDtabIt').click(function () {
$('.narsDtabIt').removeClass('narsDtabIt_active');
$(this).addClass('narsDtabIt_active');
if ($(this).index() === 0) {
$('.narssbshow').show();
$('.narswljshow').hide();
} else {
$('.narssbshow').hide();
$('.narswljshow').show();
}
});
});
</script>
</html>

View File

@@ -158,7 +158,7 @@
</div>
<!--微链接 -->
<div class="nars-wlj">
<span class="wlj-title"><span style="color:#004BFA">Weline </span>微链接</span>
<span class="wlj-title"><span style="color:#004BFA">NAS</span>配套软件</span>
{volist name='data.weline.banners' id='vo'}
<div class="wltitem">
<div class="wljcp">
@@ -171,27 +171,10 @@
</div>
{/volist}
<div class="wltitem">
<div class="wljcp">
{if condition="!empty($data.download.banners[0]['picture'])"}
<img src="{$data.download.banners[0]['picture']|getImage}" class="wljimg" />
{else}
<span class="tt">{$data.download.banners[0]['name']|default='软件多平台支持'}</span>
{/if}
</div>
<div class="wljcpinfo">
{assign name='download_color' value="$data.download.banners[0]['alt']|default='#ffffff'"}
{assign name='download_background' value="$data.download.banners[0]['btn_color']|default='#004cfa'"}
<a
class="wlj-xzbt"
target="_blank"
href="{$data.download.banners[0]['link']}"
style="background-color:{$download_background};color:{$download_color};border-color:{$download_color};"
>
下载
</a>
</div>
</div>
<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>