

























































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>北京辉益瑞科技有限公司智能监控平台 - 瑞云智管平台(AI 智慧版)</title>

    




 
    




<script>
	var basePath = "/JDRCloud" ;
	var localUrl = basePath +  "/service";
	var imgUrl = "http://domain.huiyirui.com/JDRCloud/";
	var base_domain="http://"+window.location.host+"/JDRCloud";
 	var userKey= ""; 
	var websocket_url = 'ws://' + window.location.host + '瑞云物联网平台/service/websocket';
	var videoUrl = "";
	var status_code  =  {
			'OK' : 2 ,
			'NO_DATA':4
	}
	var device_status = {
			'OPEN': 65535,
			'CLOSE': 0
	};
	var vf = [118, 101, 114, 115, 105, 111, 110, 58, 48, 46, 51, 46, 57, 46, 49, 32, 44, 32, 231, 137, 136, 230, 157, 131, 230, 137, 128, 230, 156,
	          137, 239, 188, 154, 233, 184, 191, 229, 144, 141, 231, 137, 169, 232, 129, 148, 239, 188, 155, 232, 129, 148, 231, 179, 187, 230, 150,
	          185, 229, 188, 143, 239, 188, 154, 81, 81, 50, 50, 50, 52, 51, 49, 51, 56, 49, 49];
</script>
<title>瑞云物联网平台</title> 
    
<link rel="shortcut icon" href="/JDRCloud/image/oss/iot/favicon2.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="/JDRCloud/lib/jquery/jquery-1.8.3.min.js"></script>

<link type="text/css" href="/JDRCloud/lib/pintuer/pintuer.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="/JDRCloud/lib/layui/layuiadmin/layui/css/layui.css" media="all">
<script type="text/javascript" src="/JDRCloud/lib/pintuer/pintuer.min.js"></script>

<script type="text/javascript" src="/JDRCloud/lib/layer/layer.js"></script>


<script type="text/javascript" src="/JDRCloud/lib/lpro/ljc_0.2.js?0.6425622194992713"></script>
<script type="text/javascript" src="/JDRCloud/lib/lpro/ljc_init_0.1.js"></script>
<script type="text/javascript" src="/JDRCloud/lib/lpro/constant.js"></script>

<script type="text/javascript" src="/JDRCloud/lib/kkpager/kkpager.min.js"></script>
<script type="text/javascript" src="/JDRCloud/lib/jedate/jedate.min.js"></script>

<script type="text/javascript" src="/JDRCloud/lib/tooltip/popover.min.js"></script>

<link rel="stylesheet" type="text/css" href="/JDRCloud/lib/kkpager/kkpager_blue.css"/>
<link type="text/css" href="/JDRCloud/lib/jedate/skin/jedate.css" rel="stylesheet"/>
<link type="text/css" href="/JDRCloud/lib/tooltip/popover.min.css" rel="stylesheet"/>

<link type="text/css" href="/JDRCloud/css/oss/iot/style.css?0.6425622194992713" rel="stylesheet"/>




<script>
	$(function(){
		initPage();
		$(window).resize(function() {
			initPage();
		});
	})
	
	function initPage(){
		if( $(".mapContainer").height()< $(window).height()){
			$(".app-container,.mapContainer").css("height",$(window).height());
		}else{
			$(".app-container,.mapContainer").css("min-height",$(window).height());
		}
	}
</script>




    <!-- ========================================== -->
    <!-- ✅      无404 + 无样式冲突 + 页面不乱         -->
    <!-- ========================================== -->
    <link rel="stylesheet" href="/JDRCloud/css/tailwind.css">
    <link rel="stylesheet" href="/JDRCloud/fonts/font-awesome.min.css">
    <script src="/JDRCloud/js/oss/particles.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        :root {
            --primary: #00ccff;
            --secondary: #0066ff;
            /*--accent: #ff00ff;*/
            --accent: #7b2fff;
            --neon: 0 0 20px rgba(0, 204, 255, 0.6), 0 0 40px rgba(0, 102, 255, 0.4), 0 0 60px rgba(255, 0, 255, 0.2);
            --glass: rgba(255, 255, 255, 0.05);
            --border: linear-gradient(90deg, transparent, #00ccff, #7b2fff, transparent);
            /* 调亮默认主题背景 */
            --bg-main: radial-gradient(1280px 640px at 50% 50%, #1a2540 0%, #0f1a30 100%);
            --circuit: rgba(0, 204, 255, 0.1);
        }
        [data-theme="dark-black"] {
            --primary: #22d1ee;
            --secondary: #0f3460;
            --accent: #0ea5e9;
            --neon: 0 0 20px rgba(34, 209, 238, 0.5);
            /* 调亮极夜黑主题背景 */
            --bg-main: #0a0a0a;
        }
        [data-theme="cold-cyan"] {
            --primary: #64ffda;
            --secondary: #1a535c;
            --accent: #00b4d8;
            --neon: 0 0 20px rgba(100, 255, 218, 0.5);
            /* 调亮冷调青主题背景 */
            --bg-main: #152a3d;
        }
        body {
            min-height: 100vh;
            overflow-x: hidden;
            color: #fff;
            background: var(--bg-main);
            transition: all 0.5s ease;
        }
        #particle-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            transition: opacity 0.5s;
            opacity: 1;
        }
        .fade-in {
            animation: fadeIn 0.8s ease-out forwards;
            opacity: 0;
        }
        @keyframes fadeIn {
            to { opacity: 1; transform: translateY(0); }
        }
        .parallax-card {
            transform-style: preserve-3d;
            transition: transform 0.3s ease;
        }
        .tech-glass {
            background: var(--glass);
            backdrop-filter: blur(25px) saturate(180%);
            -webkit-backdrop-filter: blur(25px) saturate(180%);
            border: 1px solid rgba(0, 204, 255, 0.2);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }
        .tech-glass::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 204, 255, 0.1), rgba(255, 0, 255, 0.1), transparent);
            animation: sweep 4s infinite linear;
            z-index: 0;
        }
        .tech-glass::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--border);
            animation: borderFlow 3s infinite linear;
            background-size: 400% 400%;
            z-index: 0;
        }
        @keyframes sweep { 100% { left: 150%; } }
        @keyframes borderFlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .tech-heading {
            font-size: clamp(28px, 5vw, 40px) !important;
            background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary), var(--primary));
            background-size: 300% 300%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: 2px;
            animation: glow 3s infinite ease-in-out, gradientFlow 5s linear infinite;
        }
        @keyframes glow {
            0%,100% { filter: drop-shadow(0 0 8px var(--primary)); }
            50% { filter: drop-shadow(0 0 16px var(--accent)); }
        }
        @keyframes gradientFlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .tech-input {
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(0, 204, 255, 0.3);
            border-radius: 12px;
            color: #fff;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            padding-right: 45px !important;
            position: relative;
        }
        .tech-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: var(--neon);
            transform: translateY(-2px);
        }
        .tech-input::placeholder { color: rgba(255, 255, 255, 0.5); }
        .tech-btn {
            background: linear-gradient(90deg, var(--secondary), var(--primary));
            border: none;
            border-radius: 12px;
            color: #fff;
            font-weight: 600;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);
        }
        .tech-btn:hover:not(:disabled) {
            transform: translateY(-3px);
            box-shadow: var(--neon);
        }
        .tech-btn:hover:not(:disabled)::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 120%;
            height: 120%;
            background: radial-gradient(circle, rgba(0,204,255,0.3) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            animation: btnPulse 1s ease-out infinite;
            pointer-events: none;
        }
        @keyframes btnPulse {
            0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
        }
        .tech-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
        }
        .tech-link {
            color: var(--primary);
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .tech-link:hover {
            color: #fff;
            text-shadow: var(--neon);
        }
        .pwd-eye {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255,255,255,0.6);
            cursor: pointer;
            transition: 0.3s;
            z-index: 2;
            font-style: normal;
        }
        .pwd-eye:hover { color: var(--primary); }
        .nav-tab {
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: rgba(255,255,255,0.7);
            white-space: nowrap;
            position: relative;
        }
        .nav-tab.active, .nav-tab:hover {
            background: rgba(0,204,255,0.15);
            color: var(--primary);
        }
        .nav-tab::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            transition: all 0.3s;
            transform: translateX(-50%);
        }
        .nav-tab.active::after {
            width: 60%;
        }
        .tips-toast {
            position: fixed;
            top: 30px;
            left: 50%;
            transform: translateX(-50%);
            padding: 12px 24px;
            background: rgba(10,15,30,0.9);
            border: 1px solid var(--primary);
            border-radius: 8px;
            color: #fff;
            z-index: 9999;
            backdrop-filter: blur(10px);
            display: none;
            white-space: nowrap;
            box-shadow: var(--neon);
        }
        .modal-wrap {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 999;
            backdrop-filter: blur(5px);
        }
        .modal-box {
            width: 90%;
            max-width: 450px;
            padding: 24px;
            background: var(--glass);
            border: 1px solid var(--primary);
            border-radius: 16px;
            backdrop-filter: blur(20px);
            position: relative;
            overflow: hidden;
            box-shadow: var(--neon);
        }
        .modal-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--border);
            animation: borderFlow 3s infinite linear;
            background-size: 400% 400%;
        }
        .modal-box::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--accent), var(--primary), transparent);
            animation: borderFlow 3s infinite linear reverse;
            background-size: 400% 400%;
        }
        .canvas-code {
            border-radius: 8px;
            background: rgba(0,0,0,0.3) !important;
            cursor: pointer;
            transition: transform 0.2s ease;
            z-index: 3;
        }
        .canvas-code:hover {
            transform: scale(1.05);
            box-shadow: 0 0 10px var(--primary);
        }
        .hide { display: none !important; }

        /* 扫描线动画 */
        .login-input::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0,204,255,0.15), rgba(255,0,255,0.1), transparent);
            animation: inputScan 3s infinite;
            pointer-events: none;
            border-radius: 12px;
            z-index: 1;
        }
        .login-input.input-focused::after {
            animation-duration: 1.5s;
            background: linear-gradient(90deg, transparent, rgba(0,204,255,0.3), rgba(255,0,255,0.2), transparent);
        }
        @keyframes inputScan {
            0% { left: -100%; }
            50% { left: 100%; }
            100% { left: 100%; }
        }
        /* 获取验证码按钮和canvas提高层级 */
        .sms-btnGet, .btnGet {
            z-index: 3 !important;
        }
        /* 为包含右侧元素的输入框留足空间 */
        .has-right-addon {
            padding-right: 110px !important;
        }

        .glow-follow {
            position: fixed;
            width: 250px;
            height: 250px;
            background: radial-gradient(circle, rgba(0,204,255,0.15) 0%, rgba(255,0,255,0.05) 50%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 998;
            transform: translate(-50%, -50%);
            transition: opacity 0.3s, width 0.3s, height 0.3s;
        }
        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255,255,255,0.4);
            transform: scale(0);
            animation: ripple 0.6s linear;
            pointer-events: none;
        }
        @keyframes ripple {
            to { transform: scale(4); opacity: 0; }
        }
        .hologram-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 150%;
            height: 150%;
            border: 2px solid transparent;
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: rotateRing 4s linear infinite;
            opacity: 0.3;
            z-index: 0;
            pointer-events: none;
        }
        .hologram-ring::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 80%;
            height: 80%;
            border: 2px solid transparent;
            border-right-color: var(--accent);
            border-radius: 50%;
            animation: rotateRingReverse 3s linear infinite;
            transform: translate(-50%, -50%);
        }
        @keyframes rotateRing {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
        @keyframes rotateRingReverse {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(-360deg); }
        }
        .grid-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                /* 提高网格线透明度，增加亮度 */
                    linear-gradient(rgba(0,204,255,0.15) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,204,255,0.15) 1px, transparent 1px);
            background-size: 40px 40px;
            z-index: -2;
            pointer-events: none;
            animation: gridMove 20s linear infinite;
        }
        @keyframes gridMove {
            0% { background-position: 0 0; }
            100% { background-position: 40px 40px; }
        }
        /* 角落装饰 */
        .corner-decoration {
            position: fixed;
            width: 120px;
            height: 120px;
            pointer-events: none;
            z-index: 1;
            opacity: 0.6;
        }
        .corner-decoration::before, .corner-decoration::after {
            content: '';
            position: absolute;
            background: linear-gradient(45deg, transparent, var(--primary), transparent);
        }
        .corner-tl { top: 0; left: 0; }
        .corner-tl::before { top: 0; left: 0; width: 2px; height: 100%; }
        .corner-tl::after { top: 0; left: 0; width: 100%; height: 2px; }
        .corner-tr { top: 0; right: 0; }
        .corner-tr::before { top: 0; right: 0; width: 2px; height: 100%; }
        .corner-tr::after { top: 0; right: 0; width: 100%; height: 2px; }
        .corner-bl { bottom: 0; left: 0; }
        .corner-bl::before { bottom: 0; left: 0; width: 2px; height: 100%; }
        .corner-bl::after { bottom: 0; left: 0; width: 100%; height: 2px; }
        .corner-br { bottom: 0; right: 0; }
        .corner-br::before { bottom: 0; right: 0; width: 2px; height: 100%; }
        .corner-br::after { bottom: 0; right: 0; width: 100%; height: 2px; }
        /* 加载动画 */
        .btn-loading {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .btn-loading::before {
            content: '';
            width: 16px;
            height: 16px;
            border: 2px solid transparent;
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .login_container.tech-glass {
            width: 100% !important;
            max-width: 380px !important;
            padding: 28px 32px !important;
            margin: 0 auto !important;
            position: relative !important;
        }
    </style>
</head>


<body data-theme="default" class="fade-in">

<!-- 角落装饰 -->
<div class="corner-decoration corner-tl"></div>
<div class="corner-decoration corner-tr"></div>
<div class="corner-decoration corner-bl"></div>
<div class="corner-decoration corner-br"></div>

<canvas id="particle-bg"></canvas>
<div class="grid-bg"></div>
<div class="glow-follow" id="glowFollow"></div>
<div class="tips-toast" id="tipsToast"></div>

<div class="relative min-h-screen flex flex-col">
    <div style="position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; gap: 10px; flex-wrap: wrap;">
        <select id="themeSelect" class="tech-input text-sm py-1 px-2">
            <option value="default">深空蓝主题</option>
            <option value="dark-black">极夜黑主题</option>
            <option value="cold-cyan">冷调青主题</option>
        </select>
        <button id="particleSwitch" class="tech-btn text-sm py-1 px-3">特效关闭</button>
        <button class="tech-btn text-sm py-1 px-3" onclick="showQrLogin()">扫码登录</button>
    </div>

    <!-- 系统标题 -->
    <div class="text-center mt-10 md:mt-14 px-4">

        <h1 class="tech-heading font-bold" id="mainTitle" style="font-size: clamp(48px, 8vw, 72px);">
            北京辉益瑞科技有限公司智能监控平台
        </h1>

        <p class="text-gray-400 mt-3 text-sm tracking-wide">INTELLIGENT IOT MONITORING PLATFORM · 物联网监控管理系统</p>
    </div>

    <!-- 快捷导航 -->
    <div class="flex justify-center gap-2 md:gap-3 mt-6 flex-wrap px-4">
        <div class="nav-tab active" data-type="1">账号登录</div>
        <div class="nav-tab" data-type="5">短信登录</div>
        <div class="nav-tab" data-type="2">邮箱注册</div>
        <div class="nav-tab" data-type="4">短信注册</div>
        <div class="nav-tab" data-type="3">忘记密码</div>
    </div>

    <!-- 访问信息 -->
    <!-- 访问信息 -->
    <div class="text-center text-gray-500 text-xs mt-3 px-2">

        <span>访问时间：2026-06-07 15:44</span>
        <span class="mx-2">|</span>
        <span>瑞云物联网管理平台 · 安全登录</span>
    </div>

    <!-- 表单主体 -->
    <div class="flex-1 flex items-center justify-center px-4 py-6">
        <div id="login-card" class="parallax-card w-full max-w-md relative">
            <div class="hologram-ring"></div>
            <div class="login_container login tech-glass jui-form_submit"
                 data-options="url:'/user/login', submit:'.add-Btn', success:'successReturn'">
                <div class="login-title text-center" style="margin-bottom: 24px;">
                    <h2 style="font-size: 20px; font-weight: 600; color: #fff;">账号密码登录</h2>
                </div>
                <div class="login-input relative" style="margin-bottom: 16px;">
                    <input class="input tech-input w-full"
                           style="padding: 12px 14px; font-size: 14px;"
                           validate="empty:请输入账号" type-name="name" maxlength="30"
                           placeholder="请输入邮箱/登录名">
                </div>
                <div class="login-input relative" style="margin-bottom: 16px;">
                    <!-- 重点：class 里必须有 pd -->
                    <input class="input tech-input w-full pd"
                           style="padding: 12px 14px; font-size: 14px;"
                           validate="empty:请输入密码" type-name="password" type="password" maxlength="50"
                           placeholder="请输入密码">
                    <i class="pwd-eye pwd-toggle" data-target=".pd">👁️</i>
                </div>

                <div class="flex items-center justify-between" style="margin-bottom: 16px;">
                    <label class="flex items-center gap-2 text-gray-300 cursor-pointer">
                        <input type="checkbox" id="saveLogin" class="w-4 h-4 rounded accent-[#00ccff]">
                        <span style="font-size:13px;">记住密码</span>
                    </label>
                    <a class="tech-link" style="font-size:13px;" onclick="changeMode(3);">忘记密码?</a>
                </div>
                <div style="margin-bottom:16px;">
                    <label class="flex items-center gap-2 text-gray-400 cursor-pointer">
                        <input type="checkbox" id="loginAgree" class="w-3 h-3 rounded">
                        <span style="font-size:12px;">我已阅读并同意<a class="tech-link">《用户协议》</a>和<a class="tech-link">《隐私政策》</a></span>
                    </label>
                </div>
                <button class="tech-btn w-full add-Btn" id="loginBtn"
                        style="height: 44px; font-size: 15px; border-radius: 12px; padding: 0;">
                    <span class="btn-text">立即登录</span>
                    <span class="btn-loading hide">登录中...</span>
                </button>
            </div>

            <!-- 短信登录 -->
            <div class="login_container sms-login hide tech-glass p-8 jui-form_submit"
                 data-options="url:'/user/sms/login', submit:'.sms-login-Btn', success:'successReturn'">
                <div class="login-title text-center mb-8"><h2 class="text-2xl font-semibold text-white">短信快捷登录</h2></div>
                <div class="login-input mb-6 relative">
                    <input class="input tech-input w-full p-4 input-big name-phone" placeholder="请输入手机号">
                </div>
                <div class="login-input mb-6 relative">
                    <canvas class="canvas-code absolute right-4 top-4 w-24 h-10" onclick="reflash()" id="canvas"></canvas>
                    <input class="input tech-input w-full p-4 has-right-addon vcode-sms" placeholder="图片验证码">
                </div>
                <div class="login-input mb-6 relative">
                    <span class="sms-btnGet tech-btn absolute right-4 top-4 px-3 py-1.5 text-sm">获取验证码</span>
                    <input class="input tech-input w-full p-4 has-right-addon sms-validate" placeholder="手机验证码">
                </div>
                <button class="tech-btn w-full p-4 text-lg sms-login-Btn">
                    <span class="btn-text">短信登录</span>
                    <span class="btn-loading hide">登录中...</span>
                </button>
            </div>

            <!-- 邮箱注册 -->
            <div class="login_container register hide tech-glass p-8 jui-form_submit"
                 data-options="url:'/user/register', submit:'.register-Btn', success:'registerSuccess', before:'beforefunc'">
                <div class="login-title text-center mb-8"><h2 class="text-2xl font-semibold text-white">邮箱注册</h2></div>
                <div class="login-input mb-6 relative"><input class="input tech-input w-full p-4" type-name="name" placeholder="请输入邮箱账号"></div>
                <div class="login-input mb-6 relative">
                    <input class="input tech-input w-full p-4" type-name="password" type="password" placeholder="设置登录密码">
                    <i class="pwd-eye pwd-toggle" data-target="this">👁️</i>
                </div>
                <div class="login-input mb-6 relative">
                    <input class="input tech-input w-full p-4 comfirm" type="password" placeholder="确认登录密码">
                    <i class="pwd-eye pwd-toggle" data-target="this">👁️</i>
                </div>
                <div class="mb-6">
                    <label class="flex items-center gap-2 text-gray-400 text-sm cursor-pointer">
                        <input type="checkbox" id="registerAgree" class="w-3 h-3 rounded">
                        <span>同意<a class="tech-link">《用户协议》</a>和<a class="tech-link">《隐私政策》</a></span>
                    </label>
                </div>
                <button class="tech-btn w-full p-4 text-lg register-Btn">
                    <span class="btn-text">提交注册</span>
                    <span class="btn-loading hide">注册中...</span>
                </button>
            </div>

            <!-- 短信注册 -->
            <div class="login_container sms-register hide tech-glass p-8 jui-form_submit"
                 data-options="url:'/user/register', submit:'.register-sms-Btn', success:'registerSuccesssms', before:'beforefunc'">
                <div class="login-title text-center mb-8"><h2 class="text-2xl font-semibold text-white">短信注册</h2></div>
                <div class="login-input mb-6"><input class="input tech-input w-full p-4 telphone" placeholder="请输入手机号"></div>
                <div class="login-input mb-6 relative">
                    <input class="input tech-input w-full p-4" type-name="password" type="password" placeholder="设置登录密码">
                    <i class="pwd-eye pwd-toggle" data-target="this">👁️</i>
                </div>
                <input type="hidden" type-name="register_type" value="1">
                <div class="login-input mb-6 relative">
                    <input class="input tech-input w-full p-4 comfirm" type="password" placeholder="确认密码">
                    <i class="pwd-eye pwd-toggle" data-target="this">👁️</i>
                </div>
                <div class="login-input mb-6 relative">
                    <canvas class="canvas-code absolute right-4 top-4 w-24 h-10" onclick="reflash()" id="canvas2"></canvas>
                    <input class="input tech-input w-full p-4 has-right-addon vcode" placeholder="图片验证码">
                </div>
                <div class="login-input mb-6 relative">
                    <span class="btnGet tech-btn absolute right-4 top-4 px-3 py-1.5 text-sm">获取验证码</span>
                    <input class="input tech-input w-full p-4 has-right-addon" type-name="validate_code" placeholder="短信验证码">
                </div>
                <div class="mb-6">
                    <label class="flex items-center gap-2 text-gray-400 text-sm cursor-pointer">
                        <input type="checkbox" id="smsRegisterAgree" class="w-3 h-3 rounded">
                        <span>同意相关协议</span>
                    </label>
                </div>
                <button class="tech-btn w-full p-4 text-lg register-sms-Btn">
                    <span class="btn-text">提交注册</span>
                    <span class="btn-loading hide">注册中...</span>
                </button>
            </div>

            <!-- 找回密码 -->
            <div class="login_container get-password hide tech-glass p-8 jui-form_submit"
                 data-options="url:'/user/reset/password', submit:'.forget-Btn', success:'forgetPasswordSucc'">
                <div class="login-title text-center mb-8"><h2 class="text-2xl font-semibold text-white">找回密码</h2></div>
                <div class="login-input mb-6"><input class="input tech-input w-full p-4" type-name="email" placeholder="请输入注册邮箱"></div>
                <button class="tech-btn w-full p-4 text-lg forget-Btn">
                    <span class="btn-text">发送重置邮件</span>
                    <span class="btn-loading hide">发送中...</span>
                </button>
            </div>
        </div>
    </div>









    <!-- 底部版权 -->
    <div class="footer text-center text-gray-500 py-6 text-sm px-4">
        <div class="copyright-intro">
            <span>Copyright © 2018-2026 &nbsp; 北京辉益瑞科技有限公司版权所有</span>
            <a class="tech-link ml-3" target="_blank" href="https://beian.miit.gov.cn"> 京ICP备2023027389号</a>
        </div>
    </div>
</div>

<!-- 悬浮客服 -->
<div class="fixed bottom-6 right-6 z-40">
    <button class="tech-btn w-12 h-12 rounded-full text-xl" onclick="tip('客服功能开发中...')">🛠️</button>
</div>

<!-- 系统公告 -->
<div class="modal-wrap" id="noticeModal">
    <div class="modal-box">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg text-[var(--primary)]">📢 系统公告</h3>
            <span class="text-gray-400 cursor-pointer text-xl" onclick="closeNotice()">×</span>
        </div>
        <div class="text-gray-300 text-sm leading-relaxed">
            <p>1. 物联网监控系统已全面升级，优化设备数据采集稳定性</p>
            <p class="mt-2">2. 建议使用 Chrome、Edge 最新浏览器访问</p>
            <p class="mt-2">3. 如遇登录问题，请联系管理员处理</p>
        </div>
        <button class="tech-btn w-full mt-6 py-2" onclick="closeNotice()">我知道了</button>
    </div>
</div>

<!-- 扫码登录弹窗 -->
<div class="modal-wrap" id="qrModal">
    <div class="modal-box text-center">
        <h3 class="text-lg text-[var(--primary)] mb-4">扫码快捷登录</h3>

        <!-- 改为本地图片或占位图 -->
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23333'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%2300ccff' font-size='16'%3E扫码登录%3C/text%3E%3C/svg%3E" class="mx-auto rounded-lg bg-white p-2" alt="登录二维码">
        <p class="text-gray-400 text-sm mt-4">请使用APP扫码登录</p>
        <button class="tech-btn w-full mt-6 py-2" onclick="closeQrLogin()">关闭</button>
    </div>
</div>



<script src="/JDRCloud/lib/jquery/jquery-1.11.0.min.js"></script>

<script type="text/javascript">
    // 全局变量
    let timer = null;
    let flag = true;
    const card = document.getElementById('login-card');
    const particleBg = document.getElementById('particle-bg');
    let mouseX = 0, mouseY = 0;

    // 初始化
    $(function () {
        inIframe();
        initParticle();
        initParallax();
        loadRemember();
        loadTheme();
        bindEvents();
        checkNotice();
        reflash();
        bindEnterKey();
        initGlowFollow();
        initRipple();

        // 重写全局提示框
        window.tip = function (msg, time = 1800) {
            const toast = $('#tipsToast');
            toast.text(msg).fadeIn();
            setTimeout(() => toast.fadeOut(), time);
        }
    });

    // 鼠标跟随光晕
    function initGlowFollow() {
        const glow = document.getElementById('glowFollow');
        $(window).mousemove(function (e) {
            mouseX = e.clientX;
            mouseY = e.clientY;
            glow.style.left = e.clientX + 'px';
            glow.style.top = e.clientY + 'px';
        });
    }

    // 按钮波纹
    function initRipple() {
        $(document).on('click', '.tech-btn', function (e) {
            const $btn = $(this);
            const ripple = $('<span class="ripple"></span>');
            const size = Math.max($btn.width(), $btn.height());
            ripple.css({
                width: size,
                height: size,
                left: e.offsetX - size / 2,
                top: e.offsetY - size / 2
            });
            $btn.append(ripple);
            ripple.on('animationend', function () {
                $(this).remove();
            });
        });
    }

    // 绑定所有事件
    function bindEvents() {
        // 导航切换
        $('.nav-tab').click(function () {
            const type = $(this).data('type');
            $('.nav-tab').removeClass('active');
            $(this).addClass('active');
            changeMode(type);
        });

        // 密码显隐
        $('.pwd-toggle').click(function () {
            const input = $(this).data('target') === 'this' ? $(this).prev() : $($(this).data('target'));
            const type = input.attr('type') === 'password' ? 'text' : 'password';
            input.attr('type', type);
            $(this).text(type === 'password' ? '👁️' : '🙈');
        });

        // 主题切换
        $('#themeSelect').change(function () {
            const theme = $(this).val();
            $('body').attr('data-theme', theme);
            localStorage.setItem('loginTheme', theme);
        });

        // 粒子特效开关
        $('#particleSwitch').click(function () {
            const isHidden = particleBg.style.opacity === '0';
            particleBg.style.opacity = isHidden ? '1' : '0';
            $(this).text(isHidden ? '特效关闭' : '特效开启');
        });

        // 输入框焦点动画
        $('.tech-input').focus(function () {
            $(this).parent().addClass('input-focused');
        }).blur(function () {
            $(this).parent().removeClass('input-focused');
        });

        // 按钮提交防重复点击 + 协议校验
        $('button[type], .tech-btn').click(function (e) {
            const $btn = $(this);

            // 登录协议校验
            if ($('.login').is(':visible') && !$('#loginAgree').is(':checked')) {
                tip('请勾选同意用户协议与隐私政策');
                return false;
            }
            // 注册协议校验
            if (($('.register').is(':visible') && !$('#registerAgree').is(':checked')) ||
                ($('.sms-register').is(':visible') && !$('#smsRegisterAgree').is(':checked'))) {
                tip('请勾选同意用户协议');
                return false;
            }

            // 加载状态
            $btn.prop('disabled', true);
            $btn.find('.btn-text').addClass('hide');
            $btn.find('.btn-loading').removeClass('hide');

            // 3秒自动解锁
            setTimeout(() => {
                $btn.prop('disabled', false);
                $btn.find('.btn-text').removeClass('hide');
                $btn.find('.btn-loading').addClass('hide');
            }, 3000);
        });
    }

    // 主题加载
    function loadTheme() {
        const theme = localStorage.getItem('loginTheme') || 'default';
        $('body').attr('data-theme', theme);
        $('#themeSelect').val(theme);
    }

    // 记住密码加载
    function loadRemember() {
        const name = localStorage.getItem("na");
        const pd = localStorage.getItem("pd");
        if (name) {
            $(".na").val(name);
            $(".pd").val(pd);
            $("#saveLogin").prop("checked", true);
        }
    }

    // 回车登录
    function bindEnterKey() {
        $(document).keyup(e => e.keyCode === 13 && $('.add-Btn').trigger("click"));
    }

    // 公告控制
    function checkNotice() {
        if (!localStorage.getItem('closeNotice')) {
            $('#noticeModal').css('display', 'flex');
        }
    }

    function closeNotice() {
        $('#noticeModal').fadeOut();
        localStorage.setItem('closeNotice', '1');
    }

    // 扫码登录
    function showQrLogin() {
        $('#qrModal').css('display', 'flex');
    }

    function closeQrLogin() {
        $('#qrModal').fadeOut();
    }

    // 粒子背景（增强鼠标互动）
    function initParticle() {
        const canvas = document.getElementById('particle-bg');
        const ctx = canvas.getContext('2d');
        let w = canvas.width = window.innerWidth;
        let h = canvas.height = window.innerHeight;
        const particles = [];

        class Particle {
            constructor() {
                this.x = Math.random() * w;
                this.y = Math.random() * h;
                this.size = Math.random() * 2 + 0.5;
                this.speedX = Math.random() * 0.5 - 0.25;
                this.speedY = Math.random() * 0.5 - 0.25;
                this.color = 'rgba(0, 204, 255, 0.6)';
                this.baseSize = this.size;
                this.baseColor = this.color;
            }

            update() {
                // 基础移动
                this.x += this.speedX;
                this.y += this.speedY;
                if (this.x < 0 || this.x > w) this.speedX *= -1;
                if (this.y < 0 || this.y > h) this.speedY *= -1;

                // 鼠标互动
                const dx = mouseX - this.x;
                const dy = mouseY - this.y;
                const dist = Math.sqrt(dx * dx + dy * dy);
                if (dist < 150) {
                    const force = (150 - dist) / 150;
                    this.x -= dx * force * 0.02;
                    this.y -= dy * force * 0.02;
                    this.size = Math.min(4, this.baseSize + force * 1.5);
                    this.color = `rgba(255, 0, 255, 0.6)`;
                } else {
                    this.size = Math.max(this.baseSize, this.size - 0.02);
                    this.color = this.baseColor;
                }
            }

            draw() {
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        function connect() {
            for (let a = 0; a < particles.length; a++) {
                for (let b = a; b < particles.length; b++) {
                    const dx = particles[a].x - particles[b].x;
                    const dy = particles[a].y - particles[b].y;
                    const dist = Math.sqrt(dx * dx + dy * dy);
                    if (dist < 100) {
                        ctx.strokeStyle = `rgba(0, 204, 255, 0.2)`;
                        ctx.lineWidth = 0.5;
                        ctx.beginPath();
                        ctx.moveTo(particles[a].x, particles[a].y);
                        ctx.lineTo(particles[b].x, particles[b].y);
                        ctx.stroke();
                    }
                }
            }
        }

        for (let i = 0; i < 80; i++) particles.push(new Particle());

        function animate() {
            ctx.clearRect(0, 0, w, h);
            particles.forEach(p => {
                p.update();
                p.draw();
            });
            connect();
            requestAnimationFrame(animate);
        }

        animate();

        $(window).resize(() => {
            w = canvas.width = window.innerWidth;
            h = canvas.height = window.innerHeight;
        });
    }

    // 3D视差效果
    function initParallax() {
        if (!card) return;
        $(window).mousemove(e => {
            const x = (window.innerWidth / 2 - e.clientX) / 25;
            const y = (window.innerHeight / 2 - e.clientY) / 25;
            card.style.transform = `rotateY(deg) rotateX(deg) translateZ(10px)`;
        }).mouseleave(() => {
            card.style.transform = 'rotateY(0) rotateX(0) translateZ(0)';
        });
    }

    // 模式切换
    function changeMode(type) {
        delayOperate(300, () => {
            $(".login_container").addClass('hide');
            const map = {1: '.login', 2: '.register', 3: '.get-password', 4: '.sms-register', 5: '.sms-login'};
            $(map[type]).removeClass('hide');
        });
    }

    // ==================== 业务逻辑 ====================
    function successReturn(data) {
        if (data.status == status_code.OK) {
            localStorage.setItem("ucode", data.data.user_key);
            if ($("#saveLogin").is(":checked")) {
                localStorage.setItem("na", $(".na").val());
                localStorage.setItem("pd", $(".pd").val());
            } else {
                localStorage.removeItem("na");
                localStorage.removeItem("pd");
            }
            forwardUrl("/iot/index");
        } else {
            tip(data.statusMsg);
            $('.add-Btn').prop('disabled', false);
        }
    }

    function registerSuccess(data) {
        if (data.status == status_code.OK) {
            forwardUrl("/iot/login", 2000, "激活邮件发送，请到邮箱中激活账户");
        } else {
            $(".register-Btn").removeAttr("disabled");
            tip(data.statusMsg);
        }
    }

    function registerSuccesssms(data) {
        if (data.status == status_code.OK) {
            forwardUrl("/iot/login", 1200, "账户注册成功");
        } else {
            $(".register-sms-Btn").removeAttr("disabled");
            tip(data.statusMsg);
        }
    }

    function forgetPasswordSucc(data) {
        if (data.status == status_code.OK) {
            forwardUrl("/iot/login", 3000, "重置邮件发送成功");
        } else {
            tip(data.statusMsg);
        }
    }

    function beforefunc() {
        if ($(".register .comfirm").val() !== gic("password", ".register").val()) {
            tip("两次密码输入不一致");
            return false;
        }
        $(".register-Btn").attr("disabled", "disabled");
        return true;
    }

    // 验证码倒计时
    function resetTime(time) {
        let s = time;
        clearInterval(timer);
        timer = setInterval(() => {
            s--;
            if (s < 2) {
                flag = true;
                $(".btnGet,.sms-btnGet").html("获取验证码").removeClass('opacity-50');
                clearInterval(timer);
            } else {
                $(".btnGet,.sms-btnGet").html(`(秒)`).addClass('opacity-50');
            }
        }, 1000);
    }

    // 获取验证码
    $(function () {
        $(".btnGet,.sms-btnGet").click(function () {
            if (!flag) return;
            const phone = $(this).hasClass('btnGet') ? $(".telphone").val() : $(".name-phone").val();
            if (validater.empty(phone) || !validater.phone(phone)) return tip("请输入正确手机号");

            const code = $(this).hasClass('btnGet') ? $(".vcode").val() : $(".vcode-sms").val();
            const type = $(this).hasClass('btnGet') ? 1 : 0;

            commonAjax('GET', `/security_code/?code=&type=`, "", data => {
                if (isOK(data)) {
                    resetTime(59);
                    flag = false;
                    tip("验证码发送成功");
                } else {
                    tip(data.statusMsg);
                }
            });
        });
    });

    // 绘制验证码
    function drawCanvas(canvasId, showTxt) {
        const canvas = document.getElementById(canvasId);
        const ctx = canvas.getContext("2d");
        const w = $(canvas).width(), h = $(canvas).height();
        canvas.width = w;
        canvas.height = h;
        ctx.clearRect(0, 0, w, h);

        for (let i = 0; i < 4; i++) {
            const deg = Math.random() - 0.5, x = 10 + i * 20, y = 20 + Math.random() * 8;
            ctx.font = "bold 23px Microsoft YaHei";
            ctx.translate(x, y);
            ctx.rotate(deg);
            ctx.fillStyle = randomColor();
            ctx.fillText(showTxt[i], 0, 0);
            ctx.rotate(-deg);
            ctx.translate(-x, -y);
        }
        for (let i = 0; i <= 5; i++) {
            ctx.strokeStyle = randomColor();
            ctx.beginPath();
            ctx.moveTo(Math.random() * w, Math.random() * h);
            ctx.lineTo(Math.random() * w, Math.random() * h);
            ctx.stroke();
        }
        for (let i = 0; i <= 30; i++) {
            ctx.strokeStyle = randomColor();
            ctx.beginPath();
            const x = Math.random() * w, y = Math.random() * h;
            ctx.moveTo(x, y);
            ctx.lineTo(x + 1, y + 1);
            ctx.stroke();
        }
    }

    function reflash() {
        commonAjax('GET', '/JDRCloud/get/validate/code', "", data => {
            if (isOK(data) && data.data) {
                drawCanvas('canvas', data.data);
                drawCanvas('canvas2', data.data);
            } else {
                const mockCode = Math.random().toString(36).substring(2, 6).toUpperCase();
                drawCanvas('canvas', mockCode);
                drawCanvas('canvas2', mockCode);
            }
        }, function () {
            const mockCode = Math.random().toString(36).substring(2, 6).toUpperCase();
            drawCanvas('canvas', mockCode);
            drawCanvas('canvas2', mockCode);
        });
    }

    // 随机颜色
    function randomColor() {
        return `rgb(34.0,188.0,130.0)`;
    }


        // 客户端显示本地时间，不依赖服务端动态内容
    function fixAccessTime() {
        var span = document.getElementById('accessTime');
        if (span && span.innerText.indexOf('-1-') !== -1) {
        var now = new Date();
        var y = now.getFullYear();
        var m = (now.getMonth() + 1).toString().padStart(2,'0');
        var d = now.getDate().toString().padStart(2,'0');
        var h = now.getHours().toString().padStart(2,'0');
        var min = now.getMinutes().toString().padStart(2,'0');
        span.innerText = '访问时间：' + y + '-' + m + '-' + d + ' ' + h + ':' + min;
    }
    };

</script>
</body>
</html>