Merge pull request #1 from thetheorange/main

添加音视频板块界面

static/css/video-detail.css

@@ -0,0 +1,108 @@
+/* 基础设置 */
+ul {
+    padding-left: 0;
+    margin: 0;
+}
+
+.detail-content-bg {
+    padding: 0;
+}
+
+#active {
+    color: #0852a2;
+}
+
+/* 视频排序 */
+.detail-content-text {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.detail-content-text .category > span {
+    color: #0852a2;
+}
+
+.detail-content-text .category ul {
+    padding-left: 0;
+    margin: 0;
+}
+
+.detail-content-text .category ul li {
+    margin-left: 10px;
+    text-align: center;
+    vertical-align: middle;
+    display: table-cell;
+}
+
+.detail-content-text .category ul li :hover {
+    color: #0852a2;
+}
+
+
+/* 搜索关键词框 */
+
+#searchVideoInput {
+    background: rgba(255, 255, 255, 0.5);
+    border: none;
+    outline: none;
+    border-radius: 5px;
+    padding: 2px 15px;
+    margin-right: 10px;
+    width: 0;
+    display: none;
+    transition: 0.5s;
+}
+
+.detail-content-text .search {
+    color: white;
+    background-color: #0852a2;
+    padding: 5px;
+    border-radius: 10px;
+    cursor: pointer;
+}
+
+/* 视频展示板块 */
+.video-card {
+    flex-direction: column;
+}
+
+.video-card .video-post {
+    width: 23vw;
+    border-radius: 10px;
+    cursor: pointer;
+}
+
+.video-card .video-info p{
+    margin: 0;
+}
+
+.video-card .video-sub-info {
+    font-size: 0.7em;
+}
+
+.video-card .video-sub-info :nth-child(1) {
+    padding-right: 5px;
+}
+
+.video-card .video-sub-info :nth-child(2) {
+    padding-left: 5px;
+}
+
+/* 最多人播放 */
+#video-hot {
+    color: #0852a2;
+    padding: 0 5px;
+}
+
+/* 针对手机端 */
+@media screen and (max-width: 600px) {
+    /* 视频信息 */
+    .video-card {
+        justify-content: center !important;
+        align-items: center !important;
+    }
+    .video-card .video-post {
+        width: 50vw;
+        border-radius: 10px;
+    }
+}

static/js/video-search.js

@@ -0,0 +1,72 @@
+/* 
+
+中南大学校团委 升华网
+JS Function For 54shenghua Part III
+
+2024.5.26 @thetheorange
+
+本JS定义了以下部分的功能实现:
+搜索功能 响应式 改变搜索框的布局
+
+*/
+
+/**
+ * 视频搜索框的显示隐藏
+ */
+(function () {
+    const searchButton = document.querySelector('.detail-content-text .search span');
+
+    // 获取搜索框元素
+    const searchVideoInput = document.getElementById('searchVideoInput');
+
+    // 显示和隐藏
+    searchButton.addEventListener('click', () => {
+        if (searchVideoInput.style.display !== 'block') {
+            //显示
+            searchVideoInput.style.display = 'block';
+            searchVideoInput.style.padding = "2px 15px";
+            setTimeout(function () {
+                searchVideoInput.style.width = '200px';
+            }, 0);
+        } else {
+            //搜索
+            setTimeout(function () {
+                window.location.href = '/search/' + searchVideoInput.value;
+            }, 0);
+        }
+    });
+
+    // 搜索功能
+    searchVideoInput.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter') {
+            window.location.href = '/search/' + searchVideoInput.value;
+        }
+    });
+    // 点击搜索框外部隐藏
+    document.addEventListener('click', function (e) {
+        if (e.target !== searchVideoInput && e.target !== searchButton) {
+            searchVideoInput.style.padding = '0';
+            searchVideoInput.style.width = '0';
+            setTimeout(function () {
+                searchVideoInput.style.display = 'none';
+            }, 500);
+        }
+    });
+})();
+
+/**
+ * 视频搜索框的响应式布局
+ */
+
+(function(){
+
+    // 搜索按钮
+    const searchContainer = document.querySelector(".detail-content-text");
+
+    let mediaQuery = window.matchMedia("(max-width: 600px)");
+
+    if (mediaQuery.matches) {
+        searchContainer.style.display = "block";
+    }
+
+}())