168 lines
11 KiB
HTML
168 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Vite + Vue</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js"></script>
|
||
<!-- 引入Vue.js框架 -->
|
||
<!--<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>-->
|
||
<!-- 引入Element UI组件库的样式文件 -->
|
||
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />-->
|
||
</head>
|
||
<body>
|
||
<nav class="bg-gray-500 h-16 fixed top-0 left-0 right-0 z-10 flex items-center">
|
||
<div class="container mx-auto flex justify-between items-center">
|
||
<!-- 网站标题区域：白色粗体文本，字体大小为xl -->
|
||
<div class="text-white font-bold text-xl">网站名称</div>
|
||
<!-- 导航菜单容器：在移动设备上隐藏(hidden)，在中等尺寸(md)以上的屏幕显示为flex布局
|
||
space-x-6表示子元素之间的水平间距为6个单位 -->
|
||
<div class="hidden md:flex md:space-x-6">
|
||
<a href="#" class="text-white hover:text-gray-300 transition duration-300 flex items-center">
|
||
<svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
||
</svg>首页
|
||
</a>
|
||
|
||
<a href="#" class="text-white hover:text-gray-300 transition duration-300 flex items-center">
|
||
<svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
|
||
</svg>产品
|
||
</a>
|
||
<a href="#" class="text-white hover:text-gray-300 transition duration-300 flex items-center">
|
||
<svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||
</svg>服务
|
||
</a>
|
||
<a href="#" class="text-white hover:text-gray-300 transition duration-300 flex items-center">
|
||
<svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||
</svg>关于我们
|
||
</a>
|
||
<a href="#" class="box-decoration-clone bg-gradient-to-r from-indigo-600 to-pink-500 text-white px-2 text-white hover:text-gray-300 transition duration-300">联系我们</a>
|
||
</div>
|
||
|
||
<!-- 移动端菜单按钮 -->
|
||
<div class="md:hidden">
|
||
<button id="mobile-menu-button" class="text-white focus:outline-none">
|
||
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 移动端侧边菜单 -->
|
||
<div id="mobile-menu" class="fixed top-0 right-0 w-64 h-full bg-gray-800 transform translate-x-full transition-transform duration-300 ease-in-out z-20">
|
||
<div class="p-4 border-b border-gray-700">
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-white font-bold">菜单</span>
|
||
<button id="close-menu-button" class="text-white focus:outline-none">
|
||
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="py-4">
|
||
<a href="#" class="block px-4 py-2 text-white hover:bg-gray-700 transition duration-300 flex items-center">
|
||
<svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
||
</svg>首页
|
||
</a>
|
||
<a href="#" class="block px-4 py-2 text-white hover:bg-gray-700 transition duration-300 flex items-center">
|
||
<svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
|
||
</svg>产品
|
||
</a>
|
||
<a href="#" class="block px-4 py-2 text-white hover:bg-gray-700 transition duration-300 flex items-center">
|
||
<svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||
</svg>服务
|
||
</a>
|
||
<a href="#" class="block px-4 py-2 text-white hover:bg-gray-700 transition duration-300 flex items-center">
|
||
<svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||
</svg>关于我们
|
||
</a>
|
||
<a href="#" class="block px-4 py-2 bg-gradient-to-r from-indigo-600 to-pink-500 text-white hover:bg-gray-700 transition duration-300">联系我们</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 遮罩层 -->
|
||
<div id="overlay" class="fixed inset-0 bg-black opacity-50 z-10 hidden"></div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||
const closeMenuButton = document.getElementById('close-menu-button');
|
||
const mobileMenu = document.getElementById('mobile-menu');
|
||
const overlay = document.getElementById('overlay');
|
||
|
||
mobileMenuButton.addEventListener('click', function() {
|
||
mobileMenu.classList.remove('translate-x-full');
|
||
overlay.classList.remove('hidden');
|
||
});
|
||
|
||
closeMenuButton.addEventListener('click', function() {
|
||
mobileMenu.classList.add('translate-x-full');
|
||
overlay.classList.add('hidden');
|
||
});
|
||
|
||
overlay.addEventListener('click', function() {
|
||
mobileMenu.classList.add('translate-x-full');
|
||
overlay.classList.add('hidden');
|
||
});
|
||
});
|
||
</script>
|
||
</div>
|
||
</nav>
|
||
<div class="container mx-auto flex justify-center items-center h-screen p-5 overflow-hidden">
|
||
<div class="login-box bg-white rounded-lg shadow-lg p-8 w-full max-w-md text-center">
|
||
<h1 class="text-2xl font-bold text-blue-600 mb-6">夸克网盘扫码登录</h1>
|
||
<div class="scan-area relative w-full h-80 mb-5 border border-gray-200 rounded-lg overflow-hidden bg-gray-50">
|
||
<div id="camera-container" class="w-full h-full" style="display: none;">
|
||
<video id="video" class="w-full h-full object-cover" playsinline></video>
|
||
<canvas id="canvas" class="hidden" style="display: none;"></canvas>
|
||
</div>
|
||
<div id="scan-placeholder" class="flex flex-col items-center justify-center h-full p-4">
|
||
<p class="text-gray-700 mb-2">点击下方按钮启动扫码</p>
|
||
<p class="small-text text-gray-500 text-sm">请将摄像头对准夸克网盘PC端的二维码</p>
|
||
</div>
|
||
<div id="scan-result" class="flex flex-col items-center justify-center h-full p-4" style="display: none;">
|
||
<p class="text-green-600 font-bold mb-2">扫码成功！</p>
|
||
<div id="result-content" class="text-gray-700"></div>
|
||
</div>
|
||
</div>
|
||
<button id="scan-button" class="btn bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-md transition duration-300 w-full">开始扫码</button>
|
||
<button id="stop-button" class="btn bg-red-500 hover:bg-red-600 text-white py-2 px-6 rounded-md transition duration-300 w-full" style="display: none;">停止扫码</button>
|
||
</div>
|
||
<div id="debug-output" style="position: fixed; bottom: 0px;"></div>
|
||
</div>
|
||
<footer class="bg-gray-800 text-white py-2 mt-10 fixed bottom-0 w-full">
|
||
<div class="container mx-auto px-4">
|
||
<div class="flex flex-col justify-center items-center">
|
||
<div class="mb-4 text-center flex flex-row justify-center items-center">
|
||
<p class="text-xs font-bold mt-2 mr-2">网站名称</p>
|
||
<p class="text-xs text-gray-400 mt-2">© 2023 版权所有</p>
|
||
</div>
|
||
<div class="flex flex-row justify-center space-x-6">
|
||
<a href="#" class="text-xs text-gray-300 hover:text-white transition duration-300">隐私政策</a>
|
||
<a href="#" class="text-xs text-gray-300 hover:text-white transition duration-300">使用条款</a>
|
||
<a href="#" class="text-xs text-gray-300 hover:text-white transition duration-300">联系我们</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<!-- 引入Element UI组件库 -->
|
||
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
|
||
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
|
||
<script src="static/js/app.js"></script>
|
||
<script>
|
||
//var vConsole = new window.VConsole();
|
||
//将控制台输出重定向到我们的调试容器
|
||
//vConsole.execInContext(document.getElementById('debug-output'));
|
||
</script>
|
||
</body>
|
||
</html>
|