feat: 优化招生官页面样式和功能

- 新增H5页面相关文件 - 调整CSS样式，修复移动端适配问题 - 优化宣讲会列表显示和时间格式化 - 改进视频播放器交互逻辑 - 修复课程标签显示问题
2025-07-16 19:01:48 +08:00
parent 3a522d5616
commit 4e2461b600
7 changed files with 210 additions and 51 deletions
--- a/H5/h5.css
+++ b/H5/h5.css
@@ -0,0 +1,39 @@
+body {
+  margin: 0;
+  background-color: #f6f6f6;
+}
+.admission-officer {
+  min-height: 100vh;
+  background-color: #f6f6f6;
+}
+.admission-officer * {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+}
+.admission-officer .flexflex {
+  display: flex;
+}
+.admission-officer .flexcenter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.admission-officer .flexacenter {
+  display: flex;
+  align-items: center;
+}
+.admission-officer .flex1 {
+  flex: 1;
+}
+.admission-officer img {
+  object-fit: cover;
+}
+.admission-officer a {
+  text-decoration: none;
+}
+.admission-officer .aaaa {
+  width: 10rem;
+  height: 6.25rem;
+}
--- a/H5/h5.html
+++ b/H5/h5.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Document</title>
+        <link rel="stylesheet" href="./h5.css" />
+    </head>
+    <body>
+        <script>
+            (function (doc, win) {
+                var docEl = doc.documentElement,
+                    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
+                    recalc = function () {
+                        var clientWidth = docEl.clientWidth;
+                        if (!clientWidth) return;
+                        if (clientWidth >= 750) {
+                            docEl.style.fontSize = "100px";
+                        } else {
+                            docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
+                        }
+                    };
+                if (!doc.addEventListener) return;
+                win.addEventListener(resizeEvt, recalc, false);
+                doc.addEventListener("DOMContentLoaded", recalc, false);
+            })(document, window);
+        </script>
+
+        <div id="admission-officer" class="admission-officer" v-cloak>
+
+            <div class="aaaa"></div>
+        </div>
+
+        <!-- 引入了 vue3 js 创建 vue3 实例 -->
+        <script src="../js/vue.global.min.js"></script>
+        <script src="../js/artplayer.js"></script>
+    </body>
+</html>
--- a/H5/h5.less
+++ b/H5/h5.less
@@ -0,0 +1,47 @@
+body {
+    margin: 0;
+    background-color: rgba(246, 246, 246, 1);
+}
+.admission-officer {
+    min-height: 100vh;
+    background-color: rgba(246, 246, 246, 1);
+
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+        scroll-behavior: smooth;
+    }
+
+    .flexflex {
+        display: flex;
+    }
+
+    .flexcenter {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .flexacenter {
+        display: flex;
+        align-items: center;
+    }
+
+    .flex1 {
+        flex: 1;
+    }
+
+    img {
+        object-fit: cover;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    .aaaa {
+        width: 10rem;
+        height: 6.25rem;
+    }
+}