From 3ba64348f5781da6d5810f30b5b6b8c9151a3aa5 Mon Sep 17 00:00:00 2001 From: jsasg <735273025@qq.com> Date: Sat, 7 Jun 2025 13:54:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20mobile=20nas=E4=B8=BB=E9=A2=98=E9=A6=96?= =?UTF-8?q?=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/index/common.php | 12 + app/index/controller/TopicNas.php | 8 +- app/index/lang/en-us/mobile.php | 6 + app/index/view/mobile/topic_nas/index.html | 150 +++++++ .../index/mobile/css/topic_nas_index.css | 368 ++++++++++++++++++ 5 files changed, 543 insertions(+), 1 deletion(-) create mode 100644 app/index/view/mobile/topic_nas/index.html create mode 100644 public/static/index/mobile/css/topic_nas_index.css diff --git a/app/index/common.php b/app/index/common.php index 7e901805..7fc6e0a6 100644 --- a/app/index/common.php +++ b/app/index/common.php @@ -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); + } +} diff --git a/app/index/controller/TopicNas.php b/app/index/controller/TopicNas.php index 4ad0a561..a96d0649 100644 --- a/app/index/controller/TopicNas.php +++ b/app/index/controller/TopicNas.php @@ -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', diff --git a/app/index/lang/en-us/mobile.php b/app/index/lang/en-us/mobile.php index a631377d..6bc8a5f1 100644 --- a/app/index/lang/en-us/mobile.php +++ b/app/index/lang/en-us/mobile.php @@ -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', + ], ]; \ No newline at end of file diff --git a/app/index/view/mobile/topic_nas/index.html b/app/index/view/mobile/topic_nas/index.html new file mode 100644 index 00000000..de30245e --- /dev/null +++ b/app/index/view/mobile/topic_nas/index.html @@ -0,0 +1,150 @@ +{extend name="public/base"/} +{block name="style"} + +{/block} +{block name="main"} +
+ +
+
+ + {notempty name="focus_image"} +
+
+
+ {volist name="focus_image" id="fo"} +
+
+

+ +
+ +
+ {/volist} +
+ +
+
+
+ {/notempty} + + {notempty name="nas_category"} + {assign name="categories" value=":array_flatten($nas_category)"/} +
+ {assign name="categories_idx1" value=":array_shift($categories)"/} + {notempty name="categories_idx1"} + + + + {/notempty} + {assign name="categories_chunk" value=":array_chunk($categories, 2)"/} + {volist name="categories_chunk" id="chunk"} +
+ {volist name="chunk" id="cc"} + + + + {/volist} +
+ {/volist} +
+ {/notempty} + + {notempty name="nas_video"} +
+ +
+ {/notempty} + + {notempty name="nas_solution"} +
+ ORICO{:lang_i18n('网络存储解决方案')} +
+
+ {volist name="nas_solution" id="so"} +
+
$so.title_txt_color])}>{$so.title}
+ + +
+
+

$so.title_txt_color])}>{$so.title}

+
$so.desc_txt_color])}>{$so.desc|raw}
+
+
+
+ {/volist} +
+
+
+ {/notempty} + + {notempty name="nas_software"} +
+ NAS {:lang_i18n('配套软件')} + {volist name="nas_software" id="soft" offset="0" length="3"} +
+
+ +
+
+ $soft.title_txt_color])}>{$soft.title} + $soft.desc_txt_color])}>{$soft.desc|raw} +
+
+ {/volist} + {volist name="nas_software" id="soft" offset="3"} +
+ + + +
+ {/volist} +
+ {/notempty} +
+
+
+{/block} +{block name="script"} + +{/block} \ No newline at end of file diff --git a/public/static/index/mobile/css/topic_nas_index.css b/public/static/index/mobile/css/topic_nas_index.css new file mode 100644 index 00000000..fc1b1d84 --- /dev/null +++ b/public/static/index/mobile/css/topic_nas_index.css @@ -0,0 +1,368 @@ +@charset "UTF-8"; + +.oricoCN-nasindex { + /* 针对小屏幕平板电脑的样式 */ +} + +.oricoCN-nasindex .header { + color: #000; +} + +.oricoCN-nasindex .narsMBpage { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + position: relative; + overflow-x: hidden; +} + +.oricoCN-nasindex .narsMBpage .narsMB-banner { + width: 100%; +} + +.oricoCN-nasindex .narsMBpage .narsmb-img { + max-width: 100%; + height: auto; + display: block; + margin-top: 13%; +} + +.oricoCN-nasindex .narsMBpage .narsmb-cate { + margin-top: 2.8125rem; + margin: 0 0.4375rem; + display: flex; + flex-direction: column; +} + +.oricoCN-nasindex .narsMBpage .narsmb-cate .narsmbcatetop, +.oricoCN-nasindex .narsMBpage .narsmb-cate .narsmbcate-it { + background: transparent; + color: #000; + border-radius: 0.3125rem; + /*height: 6.8rem;*/ + width: 100%; + line-height: 1rem; + font-size: 0.75rem; + font-weight: bold; + /*margin-top: 2.8125rem; + display: flex;*/ + align-items: center; +} + +.oricoCN-nasindex .narsMBpage .narsmb-cate .narsmbcatetop, +.oricoCN-nasindex .narsMBpage .narsmb-cate .narsmbcate-it .narsmbcate-sp span:last-child { + font-size: 0.5625rem; + padding-top: 5px; + font-weight: 500; +} + +.oricoCN-nasindex .narsMBpage .narsmb-cate .narsmbcateits { + /*height: 5.8125rem;*/ + display: flex; + flex-direction: row; + justify-content: space-between; + /*margin-bottom: 0.4375rem;*/ +} + +.oricoCN-nasindex .narsMBpage .narsmb-cate .narsmbcateits .narsmbcate-it { + width: 49%; + margin-top: 0.4375rem; +} + +.oricoCN-nasindex .narsMBpage .narsmb-cate .narsmbcate-sp { + margin: 0 0.75rem; +} + +.oricoCN-nasindex .narsMBpage .narsmbvd { + width: 100%; + /*height: 14.5625rem;*/ + margin-top: 2.5rem; +} + +.oricoCN-nasindex .narsMBpage .narsmbvd .narsmbvideo { + height: 100%; + width: 100%; + object-fit: fill; +} + +.oricoCN-nasindex .narsMBpage .narsmb-jjfa { + width: 100%; + display: flex; + flex-direction: column; +} + +.oricoCN-nasindex .narsMBpage .narsmb-jjfa .narsmbjjfa-title { + text-align: center; + font-size: 1.6875rem; + font-weight: bold; + padding-top: 2.0625rem; + padding-bottom: 1.3125rem; +} + +.oricoCN-nasindex .narsMBpage .narsmb-jjfa .narsmbjjfaSwiper { + margin-left: 0.4375rem; +} + +.oricoCN-nasindex .narsMBpage .narsmb-jjfa .narsmbjjfa-slide { + width: 10rem; + height: 18.375rem; + border-radius: 0.125rem; + position: relative; +} + +.oricoCN-nasindex .narsMBpage .narsmb-jjfa .narsmbjjfa-slide .narsmb-jjfa-ct { + color: #fff; + text-align: center; + font-size: 1rem; + font-weight: bold; + line-height: 2.5rem; + height: 2.5rem; + background: #004bfa; +} + +.oricoCN-nasindex .narsMBpage .narsmb-jjfa .narsmbjjfa-slide .narsmb-jjfa-info { + position: absolute; + top: 0; + height: 18.375rem; + padding: 0 1.3rem; + display: none; + flex-direction: column; + justify-content: center; + border-radius: 0.125rem; + z-index: 11; + background: linear-gradient(90deg, #cdd9f1 0%, #ecf2fe 100%); + overflow-y: hidden; + color: #9196a5; +} + +.oricoCN-nasindex .narsMBpage .narsmb-jjfa .narsmbjjfa-slide .narsmb-jjfa-info .box { + width:100%; + display:flex; + flex-direction:column; + height:95%; + overflow-y:auto; +} + +.oricoCN-nasindex .narsMBpage .narsmb-jjfa .narsmbjjfa-slide .narsmb-jjfa-info .box > p { + font-size: 1rem; + padding-bottom:5px; + font-weight:bold; + padding-top: 1.4rem; + color: #000; +} + +.oricoCN-nasindex .narsMBpage .narsmb-jjfa .narsmbjjfa-slide .narsmb-jjfa-info .box > div { + font-size:0.625rem; + color: #000; +} + +.oricoCN-nasindex .narsMBpage .narsmb-jjfa .narsmbjjfa-slide .narsmb-jjfa-info .narsmbjjfatt { + width: 100%; + font-weight: bold; + text-align: center; + font-size: 0.875rem; + margin-bottom: 1.6875rem; +} + +.oricoCN-nasindex .narsMBpage .narsmb-jjfa .narsmbjjfa-slide .narsmb-jjfa-info .narsmbjjfa-txt { + font-size: 0.75rem; + line-height: 1rem; + text-indent: 2em; +} + +.oricoCN-nasindex .narsMBpage .narsmb-jjfa .narsmb-jjfabgimg { + width: 100%; + height: 18.375rem; + position: absolute; + top: 0; + z-index: -1; +} + +.oricoCN-nasindex .narsmb-wlj { + width: 100%; + display: flex; + flex-direction: column; +} + +.oricoCN-nasindex .narsmb-wlj .narsmbwlj-title { + text-align: center; + font-size: 1.6875rem; + font-weight: bold; + padding-top: 2.0625rem; + padding-bottom: 1.3125rem; +} + +.oricoCN-nasindex .narsmb-wlj .narsmbwltitem { + margin: 0 0.4375rem; + /*height: 9.0625rem;*/ + background: #ecf2fe; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 0.5rem; + overflow: hidden; +} + +.oricoCN-nasindex .narsmb-wlj .narsmbwltitem .narsmbwljcp { + display: flex; + flex-direction: row; + align-items: center; + /*justify-content: center;*/ + height: inherit; + width: 50%; +} + +.oricoCN-nasindex .narsmb-wlj .narsmbwltitem .narsmbwljcp .narsmbtt { + font-size: 1.0625rem; + font-weight: bold; + color: #fff; + width: 35.5rem; + text-align: center; + margin-left: 35%; +} + +.oricoCN-nasindex .narsmb-wlj .narsmbwltitem .narsmbwljcp .narsmbwljimg { + height: inherit; + width: 100%; +} + +.oricoCN-nasindex .narsmb-wlj .narsmbwltitem .narsmbwljcpinfo { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: #fff; + flex: 1; + margin: 0 1.25rem; + padding: 0 0.75rem; +} + +.oricoCN-nasindex .narsmb-wlj .narsmbwltitem .narsmbwljcpinfo .narsmbif-title { + font-weight: bold; + font-size: 1.0625rem; + color:#000; + padding-bottom: 0.5rem; +} + +.oricoCN-nasindex .narsmb-wlj .narsmbwltitem .narsmbwljcpinfo .narsmbif-info { + font-size: 0.625rem; + white-space:pre-line; + color:#a2a7ba; + line-height: 1rem; + text-align: center; +} + +@media only screen and (min-width: 640px) { + .oricoCN-nasindex .narsmb-wlj .narsmbwltitem .narsmbwljcpinfo .narsmbif-title { + font-weight: bold; + font-size: 1.25rem; + padding-bottom: 0.25rem; + } + + .oricoCN-nasindex .narsmb-wlj .narsmbwltitem .narsmbwljcpinfo .narsmbif-info { + font-size: 0.65rem; + line-height: 0.875rem; + text-align: center; + } +} + +.oricoCN-nasindex .narsmb-wlj .narsmbwltitem .narsmbwljcpinfo .narsmbwlj-xzbt { + width: 7.25rem; + height: 2.1875rem; + border-radius: 3.25rem; + line-height: 2.1875rem; + border: 1px solid #ffffff; + font-size: 0.875rem; + text-align: center; + cursor: pointer; + margin: 0 1.25rem; +} + +.oricoCN-nasindex .narsmb-wlj .narsmbwltitem .narsmbwljcpinfo .narsmbtt { + font-size: 1.0625rem; + font-weight: bold; + color: #fff; + text-align: center; +} + +.oricoCN-nasindex .narsMBbannerSwiper { + padding-top: 0px; +} + +.oricoCN-nasindex .narsMB-banner .swiper-slide { + position: relative; +} + +.oricoCN-nasindex .narsMB-banner-st { + position: absolute; + margin: 0 auto; + text-align: center; + width: 100%; + color: #07111c; +} + +.oricoCN-nasindex .narsMB-banner-st h2 { + margin: 0 auto; + font-size: 1.4rem; + padding-top: 2.8rem; + padding-bottom: 0.75rem; +} + +.oricoCN-nasindex .narsMB-banner-st .narsMB-bannersm { + font-size: 1rem; + font-size: 0.875rem; + color: #82898f; +} + +.oricoCN-nasindex .narsMB-banner .swiper-container-horizontal>.swiper-pagination-bullets { + bottom: 50px; +} + +.oricoCN-nasindex .narsMB-banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { + width: 10px; + height: 10px; + margin: 0 5px; + outline: 0; +} + +.oricoCN-nasindex .narsMB-banner .swiper-pagination-bullet-active { + background: #004bfa !important; + width: 20px !important; + height: 10px !important; + border-radius: 5px !important; +} + +@media screen and (min-width: 400px) and (max-width: 660px) { + + .oricoCN-nasindex .narsMBpage .narsmb-cate .narsmbcatetop, + .oricoCN-nasindex .narsMBpage .narsmb-cate .narsmbcate-it { + /*height: 8.8rem;*/ + } + + .oricoCN-nasindex .narsmbcate-sp span:first-child { + font-size: 1.125rem !important; + padding-bottom: 0.3125rem; + } + + .oricoCN-nasindex .narsmbcate-sp span:last-child { + font-size: 0.875rem !important; + } +} + +@media screen and (min-width: 661px) and (max-width: 991px) { + + .oricoCN-nasindex .narsMBpage .narsmb-cate .narsmbcatetop, + .oricoCN-nasindex .narsMBpage .narsmb-cate .narsmbcate-it { + /*height: 10.8rem;*/ + } + + .oricoCN-nasindex .narsmbcate-sp span:first-child { + font-size: 1rem !important; + padding-bottom: 0.3125rem; + } + + .oricoCN-nasindex .narsmbcate-sp span:last-child { + font-size: 0.75rem !important; + } +} \ No newline at end of file