feat: mobile nas主题下载页

app/index/lang/en-us/mobile.php

@@ -179,6 +179,12 @@ return [
         '配套软件' => 'Software',
     ],
 
+    // nas主题 - 下载页
+    'topicnas/download' => [
+        'CyberData赛博云空间'  => 'CyberData',
+        'Weline微链接' => 'Weline'
+    ],
+
     // nas主题 - 帮助页
     'topicnas/help' => [
         '帮助中心' => 'Quick Start Guide',

app/index/view/mobile/topic_nas/download.html

@@ -0,0 +1,86 @@
+{extend name="public/base" /}
+{block name="style"}
+<link rel="stylesheet" href="__CSS__/topic_nas_download.css" />
+{/block}
+{block name="main"}
+<div class="oricoEGapp">
+    <div class="narsDowloadPc">
+        <div class="narsDtabs">
+            {egt name=":count($data)" value="2"}
+            {notempty name="data.cyber"}
+            <div class="narsDtabIt narsDtabIt_active">{:lang_i18n('CyberData赛博云空间')}</div>
+            {/notempty}
+            {notempty name="data.weline"}
+            <div class="narsDtabIt">{:lang_i18n('Weline微链接')}</div>
+            {/notempty}
+            {/egt}
+        </div>
+        <!-- 赛博云 -->
+        {notempty name="data.cyber"}
+        <div class="nDtopCtMian narssbshow" style="display: block;">
+            {notempty name="data.cyber.focus_image"}
+            <div class="nDtopIt">
+                <img src="{$data.cyber.focus_image.image}" class="tpimg">
+            </div>
+            {/notempty}
+            {notempty name="data.cyber.down_items"}
+            <div class="nDtopIt2">
+                {volist name="data.cyber.down_items" id="it" length="4"}
+                <a class="nDitImg" {notempty name="it.link"}href="{$it.link}"{/notempty}>
+                    <div class="nDitImg"><img src="{$it.image}"></div>
+                    {eq name=":cookie('think_lang')" value="en-us"}
+                    <div class="yy_name" {:style(['color'=>$it.title_txt_color])}>{$it.title}</div>
+                    <div class="dwbt">Download</div>
+                    {/eq}
+                </a>
+                {/volist}
+            </div>
+            {volist name="data.cyber.down_items" id="it" offset="4"}
+            <a {notempty name="it.link"}href="{$it.link}"{/notempty}>
+                <div class="nDitImg nrowimg" style="margin-bottom: 25px;">
+                    <img src="{$it.image}">
+                </div>
+            </a>
+            {/volist}
+            {/notempty}
+        </div>
+        {/notempty}
+        <!-- 微链接 -->
+        {notempty name="data.weline"}
+        <div class="nDtopCtMian narswljshow">
+            {notempty name="data.weline.focus_image"}
+            <div class="nDtopIt">
+                <img src="{$data.weline.focus_image.image}" class="tpimg">
+            </div>
+            {/notempty}
+            {notempty name="data.weline.down_items"}
+            <div class="nDtopIt2" style="margin-bottom: 25px;">
+                {volist name="data.weline.down_items" id="it"}
+                <a class="nDitImg" {notempty name="it.link"}href="{$it.link}"{/notempty}>
+                    <div class="nDitImg"><img src="{$it.image}"></div>
+                </a>
+                {/volist}
+            </div>
+            {/notempty}
+        </div>
+        {/notempty}
+    </div>
+</div>
+{/block}
+{block name="script"}
+<script type="text/javascript">
+    $(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>
+{/block}

public/static/index/mobile/css/topic_nas_download.css

@@ -0,0 +1,117 @@
+.header {
+    color: #fff;
+}
+
+.narsDowloadPc {
+    /*height: 100vh;*/
+    background: #F5F5F5;
+    /*position: relative;*/
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+}
+
+.narsDowloadPc .narsDtabs {
+    margin: 0 1.25rem;
+    margin-top: 7rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    height: 2.625rem;
+}
+
+.narsDowloadPc .narsDtabs .narsDtabIt {
+    color: #001717;
+    font-size: 1rem;
+    height: 2.625rem;
+    line-height: 2.625rem;
+    width: 25rem;
+    background: #fff;
+    text-align: center;
+    border-radius: 28px;
+    cursor: pointer;
+}
+
+.narsDowloadPc .narsDtabs .narsDtabIt:first-child {
+    margin-right: 0.9375rem;
+}
+
+.narsDowloadPc .narsDtabs .narsDtabIt_active {
+    color: #fff;
+    background: #004CFA;
+}
+
+.narsDowloadPc .narsDmainConten {
+    margin: 0 1.25rem;
+    background: #fff;
+    margin-bottom: 10px;
+    position: relative;
+}
+
+.narsDowloadPc .nDtopCtMian {
+    padding-top: 1.25rem;
+    position: relative;
+    overflow: hideen;
+    margin: 0 1.25rem;
+    height: auto;
+}
+
+.narsDowloadPc .nDtopCtMian .nDtopIt {
+    width: 100%;
+    background: #fff;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+}
+
+.narsDowloadPc .nDtopCtMian .nDtopIt .tpimg {
+    width: 100%;
+    height: 100%;
+}
+
+.narsDowloadPc .nDtopCtMian .nDtopIt .tpimg {
+    width: 100%;
+    height: 100%;
+}
+
+.narsDowloadPc .nDtopCtMian .nDtopIt2 {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.narsDowloadPc .nDtopCtMian .nDtopIt2 .nDitImg {
+    width: 48.5%;
+    background: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    margin-bottom: 0.625rem;
+}
+
+.narsDowloadPc .nDtopCtMian .nDtopIt2 .nDitImg img {
+    width: 6.25rem;
+    height: 6.25rem;
+    padding: 1.25rem;
+}
+
+.narswljshow {
+    display: none;
+}
+
+.narswljshow .nDtopIt2 .nDitImg {
+    /* width: 291px !important; */
+}
+
+.narssbshow .nrowimg {
+    width: 100%;
+    background: #fff;
+    display: flex;
+    justify-content: center;
+}
+
+.narssbshow .nrowimg img {
+    width: 50%;
+    height: 50%;
+}