SMANAGE/backup/Manage/Welcome.html

<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <link rel="stylesheet" href="/css/win10ui.css">
    <link rel="stylesheet" href="/css/fold.css">
    <link rel="stylesheet" href="/css/theme.css">
    <script type="text/javascript" src="/js/i18n.js"></script>
    <script type="text/javascript" src="https://www.gvsds.com/assets/js/i18n.lib.js"></script>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script>window.breadcrumbs = [{name: i18n("Home"), url: ""},{name: i18n("Manage"), url: ""},{name: i18n("PersonalCenter")}];</script>
    <script src="/js/address.bar.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
            overflow: hidden;
            background-color: #f8f9fa;
        }
        
        .welcome-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 85vh;
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
            position: relative;
        }
        
        /* 优化后的图标容器设计 */
        .logo-container {
            width: 240px;
            height: 240px;
            overflow: hidden;
            position: relative;
            margin-bottom: 30px;
            animation: float 6s ease-in-out infinite; /* 上下浮动动画 */
        }
        
        .logo-g {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            background-color: transparent; /* 确保图标背景透明 */
        }
        
        /* 移除图标容器的背景动画（保留图标本身动画） */
        .logo-container::before, .logo-container::after {
            display: none; /* 隐藏原有的背景动画效果 */
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); } /* 移除rotate(0deg) */
            50% { transform: translateY(-20px); } /* 移除rotate(2deg) */
        }
        
        .welcome-title {
            font-size: 32px;
            color: #333;
            margin-bottom: 50px;
            font-weight: 300;
            position: relative;
            transition: all 0.3s ease;
        }

        .welcome-title::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, #1E88E5, #42A5F5, #1E88E5);
            background-size: 200% 100%;
            border-radius: 3px;
            animation: flowing 2s linear infinite;
        }

        @keyframes flowing {
            0% {
                background-position: 200% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }
        
        .action-buttons {
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            gap: 20px;
            max-width: 100%;
            margin-top: 20px;
        }
        
        .action-btn {
            min-width: 180px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-size: 16px;
            font-weight: 500;
            border-radius: 8px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden;
            border: none;
            background-color: #fff;
            color: #333;
        }
        
        .action-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(30, 136, 229, 0.15);
            background-color: #f5f7fa;
        }
        
        .action-btn:active {
            transform: translateY(1px);
            box-shadow: 0 2px 8px rgba(30, 136, 229, 0.1);
        }
        
        .action-btn::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: all 0.6s ease;
            z-index: 1;
        }
        
        .action-btn:hover::before {
            left: 100%;
        }
        
        .action-btn i {
            font-size: 20px;
        }
        
        @media (max-width: 1024px) {
            .logo-container {
                width: 200px;
                height: 200px;
            }
            .welcome-title {
                font-size: 28px;
            }
            .action-buttons {
                gap: 15px;
            }
            .action-btn {
                min-width: 160px;
                height: 45px;
                font-size: 14px;
            }
        }
        
        @media (max-width: 768px) {
            .logo-container {
                width: 180px;
                height: 180px;
            }
            .welcome-title {
                font-size: 24px;
                margin-bottom: 40px;
            }
            .action-buttons {
                flex-direction: column;
                align-items: center;
                gap: 15px;
            }
            .action-btn {
                min-width: 240px;
                max-width: 80%;
            }
        }
        
        @media (max-width: 480px) {
            .logo-container {
                width: 160px;
                height: 160px;
            }
            .welcome-title {
                font-size: 20px;
            }
            .action-btn {
                min-width: 200px;
            }
        }
    </style>
</head>
<body>
    <div class="welcome-container">
        <div class="logo-container">
            <img src="/assets/img/CenterICON.png" alt="G" class="logo-g">
        </div>
        <div class="welcome-title">银河锋锐后台管理系统</div>
        
        <div class="action-buttons">
            <button class="layui-btn layui-btn-primary action-btn" id="btn-guide">
                <i class="layui-icon layui-icon-form"></i> 新手指引
            </button>
            <button class="layui-btn layui-btn-primary action-btn" id="btn-personal">
                <i class="layui-icon layui-icon-read"></i> 个人中心
            </button>
            <button class="layui-btn layui-btn-primary action-btn" id="btn-checkin">
                <i class="layui-icon layui-icon-upload-circle"></i> 前往签到
            </button>
        </div>
    </div>
    <script>
        layui.use(['layer'], function(){
            var layer = layui.layer;
            $('#btn-guide').on('click', function(){
                xadmin.add_tab_f(i18n('BeginnerGuide'),'./Studio/help.html');
            });
            $('#btn-personal').on('click', function(){
                xadmin.add_tab_f(i18n('PersonalCenter'),'./PersonalCenter.html');
            });
            $('#btn-checkin').on('click', function(){
                xadmin.add_tab_f(i18n('CheckIn'),'./User/checkin.html');
            });
        });
    </script>
</body>
</html>