暫存版本

2024-07-09 00:28:41 +08:00
parent 8acecadd2a
commit da67c9a62b
11 changed files with 379 additions and 177 deletions
--- a/templates/csdn.html
+++ b/templates/csdn.html
@@ -0,0 +1,112 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>第十九届全国大学生智能汽车竞赛 百度智慧交通创意组 “风雨同舟”比赛规则_全国大学生智能汽车竞赛 智慧交通创意-CSDN博客</title>
+    <script src="/static/vue.js"></script>
+    <script src="static/socket.io.js"></script>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            overflow: hidden;
+        }
+        #app {
+            width: 100vw;
+            height: 100vh;
+            overflow: hidden;
+            position: relative;
+        }
+        .background-container {
+            width: 100%;
+            height: 100%;
+            background-size: cover;
+            background-position: center;
+            transition: background-position 0.1s ease-out;
+        }
+        .floating-buttons {
+            position: fixed;
+            bottom: 20px;
+            left: 0;
+            right: 0;
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            z-index: 10;
+        }
+        .floating-button {
+            width: 160px;
+            height: 40px;
+            border-radius: 20px;
+            background-color: #fc5531;
+            border: none;
+            color: white;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        .floating-button:hover {
+            background-color: #fc5531;
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <div class="background-container" 
+             :style="backgroundStyle" 
+             @mousemove="handleMouseMove" 
+             ref="container">
+        </div>
+        <div class="floating-buttons">
+            <button class="floating-button" @click="handleButton1Click">打开 CSDN APP</button>
+            <button class="floating-button" @click="handleButton2Click">小程序看全文</button>
+        </div>
+    </div>
+
+    <script>
+        new Vue({
+            el: '#app',
+            data: {
+                imageSrc: '/static/csdn.png',  // 使用大尺寸占位图片
+                backgroundPosition: '0%'
+            },
+            computed: {
+                backgroundStyle() {
+                    return {
+                        backgroundImage: `url(${this.imageSrc})`,
+                        backgroundPosition: `center ${this.backgroundPosition}`
+                    };
+                }
+            },
+            methods: {
+                handleMouseMove(event) {
+                    const containerRect = this.$refs.container.getBoundingClientRect();
+                    const mouseY = event.clientY - containerRect.top;
+                    const scrollPercent = (mouseY / containerRect.height) * 100;
+                    this.backgroundPosition = `${scrollPercent}%`;
+                },
+                handleButton1Click() {
+                    // alert('按钮 1 被点击了');
+                },
+                handleButton2Click() {
+                    this.socket.emit('operate', { type: 'skip_task', content: '' });
+                },
+                onImageLoad() {
+                    console.log('背景图片加载完成');
+                    // 这里可以添加图片加载完成后的额外操作
+                }
+            },
+            mounted() {
+                const img = new Image();
+                img.onload = this.onImageLoad;
+                img.src = this.imageSrc;
+                this.socket = io('http://' + document.domain + ':5001');
+
+            }
+        });
+    </script>
+</body>
+</html>