feat: mobile视频页

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

@@ -36,12 +36,18 @@ return [
     '信息提交失败！' => 'Add Fail！',
 
     // 附件下载
-    '软件下载' => 'Software download',
-    '支持型号' => 'Supported Models',
-    '支持系统' => 'Supported Systems',
-    '全站搜索' => 'Search',
-    '搜索' => 'Search',
-    '请搜索' => 'Please search...',
+    'attachment/index' => [
+        '软件下载' => 'Software download',
+        '支持型号' => 'Supported Models',
+        '支持系统' => 'Supported Systems',
+        '全站搜索' => 'Search',
+        '搜索' => 'Search',
+        '请搜索' => 'Please search...',
+    ],
+    'attachment/video' => [
+        '软件和驱动程序' => 'Software and Drivers',
+        '您的浏览器不支持 video 标签。' => 'Your browser does not support HTML5 video.', 
+    ],
 
     // 成为分销商页面
     '成为经销商' => 'Become a Distributor',

app/index/view/mobile/attachment/video.html

@@ -0,0 +1,41 @@
+{extend name="public/base" /}
+{block name="style"}
+<link rel="stylesheet" type="text/css" href="__CSS__/attachment_video.css" />
+{/block}
+{block name="main"}
+<div class="oricoEGapp">
+    <!-- 主体内容-->
+    <div class="oricoEGapp-softDrviersVideo">
+        <div class="topbanner">
+            <img src="__IMAGES__/video-banner.webp" class="bannerimg" />
+            <span class="bannertitle">{:lang_i18n('软件和驱动程序')}</span>
+        </div>
+        <!-- 分类切换-->
+        <div class="tabs">
+            {notempty name="video_categorys"}
+            {volist name="video_categorys" id="va"}
+            <a href="{:url('attachment/index', ['id' => $va.id])}"><div class="tabit active">{$va.name}</div></a>
+            {/volist}
+            {/notempty}
+        </div>
+        <div class="infolist">
+            {notempty name="videos"}
+            {assign name="flat_videos" value=":\think\helper\Arr::flatMap(fn($item) => $item->toArray(), $videos->items())" /}
+            {volist name="flat_videos" id="vo"}
+            <div class="vd-item">
+                <video controls="" poster="{$vo.image|default=''}">
+                    <source src="{$vo.video}" type="video/mp4">
+                    {:lang_i18n('您的浏览器不支持 video 标签。')}
+                </video>
+                <div class="texts">
+                    <span class="t1">{$vo.name}</span>
+                    <span class="t2">{$vo.desc}</span>
+                </div>
+            </div>
+            {/volist}
+            <div>{$page|raw}</div>
+            {/notempty}
+        </div>
+    </div>
+</div>
+{/block}

public/static/index/mobile/css/attachment_video.css

@@ -0,0 +1,76 @@
+.oricoEGapp-softDrviersVideo {
+  display: flex;
+  flex-direction: column;
+  background: #f5f5f5;
+}
+.oricoEGapp-softDrviersVideo .topbanner {
+  margin-top: 3.125rem;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+.oricoEGapp-softDrviersVideo .topbanner .bannerimg {
+  width: 100%;
+}
+.oricoEGapp-softDrviersVideo .topbanner .bannertitle {
+  font-size: 1.5rem;
+  position: absolute;
+  top: 50%;
+  margin-top: -0.75rem;
+  color: #fff;
+  z-index: 9;
+  text-align: center;
+  width: 100%;
+}
+.oricoEGapp-softDrviersVideo .tabs {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 1rem 1.25rem 0;
+}
+.oricoEGapp-softDrviersVideo .tabs .tabit {
+  padding: 0.5rem 0.75rem;
+  border-radius: 1rem;
+  background-color: #fff;
+  color: #6b6c6e;
+  font-family: "Montserrat-Medium";
+  font-size: 0.875rem;
+  display: inline-block;
+  margin-bottom: 0.5rem;
+  margin-right: 0.5rem;
+}
+.oricoEGapp-softDrviersVideo .tabs .tabit.active {
+  background-color: #004bfa;
+  color: #ffffff;
+}
+.oricoEGapp-softDrviersVideo .infolist {
+  display: flex;
+  flex-direction: column;
+  margin: 0 1rem;
+}
+.oricoEGapp-softDrviersVideo .infolist .vd-item {
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.5rem;
+  background-color: #fff;
+  overflow: hidden;
+  margin-bottom: 0.75rem;
+}
+.oricoEGapp-softDrviersVideo .infolist .vd-item .texts {
+  padding: 1.5rem;
+  word-wrap: break-word;
+  word-break: normal;
+  display: flex;
+  flex-direction: column;
+}
+.oricoEGapp-softDrviersVideo .infolist .vd-item .texts .t1 {
+  font-size: 0.875rem;
+  color: #000;
+  line-height: 1.25rem;
+}
+.oricoEGapp-softDrviersVideo .infolist .vd-item .texts .t2 {
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: #9E9E9F;
+  margin-top: 0.75rem;
+}