<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课堂点名系统</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <style> .move-button { margin-top: 300px; /* 向下移动 30 像素 */ margin-left: 200px; /* 向右移动 20 像素 */ } body { font-family: 'Arial', sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; display: flex; flex-direction: column; align-items: center; } h1 { color: #333; margin-bottom: 20px; } input[type="file"] { margin-bottom: 10px; padding: 10px; border: 2px solid #007BFF; border-radius: 5px; width: 250px; } button { background-color: #020202; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; margin: 5px; transition: background-color 0.3s; margin-top: 20px; /* 向下移动 20 像素 */ margin: 5px 0; } button:hover { background-color: #0056b3; } #result { margin-top: 100px; padding: 10px; background: white; border: 1px solid #ddd; border-radius: 5px; width: 500px; text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } </style> </head> <body> <div id="app"> <h1>课堂点名系统</h1> <button @click="goToAboutPage">创建房间</button> <button @click="goToAboutPage">加入房间</button> <!-- <input type="file" id="fileInput" accept=".xlsx" @change="handleFileUpload" /> --> </div> <script> new Vue({ el: '#app', data: { result: '' }, methods: { goToAboutPage() { window.location.href = 'index.html'; // 跳转到 index.html }, handleFileUpload(event) { // 这里可以添加处理文件上传的逻辑 } } }); </script> </body> </html>