29网课userinfo.php优化方案1

<?php
include('head.php');
?>
<style>
    :root {
        --primary: #6366f1;
        --primary-dark: #4f46e5;
        --secondary: #8b5cf6;
        --success: #22c55e;
        --info: #06b6d4;
        --warning: #f59e0b;
        --danger: #ef4444;
        --dark: #1e293b;
        --light: #f8fafc;
    }

    body {
        background: #f1f5f9;
        font-family: 'Inter', system-ui, -apple-system, sans-ser󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮if;
        min-h󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮eight: 100vh;
    }

    #userindex {
        max-width: 1400px;
        margin: 0 auto;
        padding: 2rem;
    }

    /* 主卡片容器 */
    .card {
        background: white;
        border-radius: 30px;
        box-shadow: 0 25px 50p󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮x -12px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        position: relative;
        margin-bottom: 2rem;
        border: none;
    }

    /* 标题栏 */
    .panel-heading {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: whit󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮e;
        padding: 2.5rem;
        font-size: 1.75rem;
        font-weight: 800;
        letter-spacing: 0.5px;
        position: relative;
        overflow: hidden;
        text-align: center;
        text-transform: uppercase;
    }

    .panel󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮-heading::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
        opacity: 0.5;
    }

    /* 用户信息区域 */
    .edit-avatar {
        display: flex;
        align-items: center;
        padding: 3rem;
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        margin: 2rem;
        border-radius: 20px;
    󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        position󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮: relative;
        overflow: hidden;
    }

    .avatar-section {
        flex: 0 0 auto;
        margin-right: 3rem;
        text-align: center;
    }

    .info-section {
        flex: 1;
    }

    .img-avatar {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        border: 8px solid white;
        box-shadow: 0 20px 4󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮0px rgba(0, 0, 0, 0.1);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        object-fit: cover;
    }

    .img-avatar:hover {
        transform: scale(1.05) rotate(5deg);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    }

    .h5 {
        font-size: 2rem;
        font-weight: 800;
        color󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮: var(--dark);
        margin: 0 0 1rem;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .text-muted {
        color: #64748b !important;
        font-size: 1.1rem;
        line-height: 1.8;
    }

    /* 表单区域 */
    .site-form {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        padding: 2rem;
    }

    .form-group {
        position: relative;
        margin-bottom: 0;
    }

    .form-group label {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        color:󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮 #64748b;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        l󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮etter-spacing: 0.5px;
    }

    .form-control {
        width: 100%;
        padding: 1rem;
        font-size: 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 15px;
        ba󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮ckground: #f8fafc;
󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮        transition: all 0.3s ease;
    }

    .form-control:focus {
        border-color: var(--primary);
        background: white;
     󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮   box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
        outline: none;
    }

    /* 按钮样式 */
    .btn-floating {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        font-size: 0.87󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮5rem;
        font-weight: 600;
        border-radius: 12px;
        transition: all 0.3s ease;
        margin: 0.5rem;
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        text-transf󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮orm: uppercase;
        letter-spacing: 0.5px;
    }

    .btn-floating::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: 0.5s;
    }

    .btn-floating:hover::before {
        left: 100%;
    }

    .btn-floating:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .btn-success {
        background: linear-gradient(135deg, var(--success), #16a34a);
        color: white;
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: white;
    }

    .btn-info {
        background: linear-gradient(135deg, var(--info), #0e7490);
        color: white;
    }

    .btn-warning {
        background: linear-gradient(135deg, var(--warning), #d97706);
        color: white;
    }

    /* 分割线 */
    hr {
        margin: 2rem 0;
        border: none;
        height: 1px;
        background: linear-gradient(to right, transparent, #e2e8f0, transparent);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        #userindex {
            padding: 1rem;
     󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮   }

        .edit-avatar {
            flex-direction: column;
            text-align: center;
            padding: 2rem 1r󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮em;
        }

        .avatar-section {
            margin-right: 0;
            margin-bottom: 2rem;
        }

        .img-avatar {
            width: 140px;
            height: 140px;
        }

        .site-form {
            grid-template-columns: 1fr;
        }

        .btn-floating {
            width: 100%;
            margin: 0.5rem 0;
        }
    }

    /* 动画效果 */
    @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
        100% { transform: translateY(0px); }
󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮    }

    .img-avatar {
        animation: float 6s ease-in-out infinite;
    }

    /* 玻璃态效果 */
    .card {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.9);
    }

    /* 悬浮效果 */
    .form-group {
        transition: transform 0.3s ease;
    }

    .form-group:hover {
        transform: translateY(-5px);
    }

    /* 霓虹灯效果 */󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮
    .panel-head󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮ing {
        animation: neon 1.5s ease-in-out infinite alternate;
    }

    @keyframes neon {
        from {
            box-shadow: 0 0 5px #fff,
                       0 0 10px #fff,
                       0 0 15px var(--primary),
                       0󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮 0 20px var(--primary);
        }
        to {
            box-shadow: 0 0 10px #fff,
                       0 0 20px #fff,
                       0 0 30px var(--primary),
                       0 0 40px var(--primary);
        }
    }
</style>
<div id="useri󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮ndex󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮">
    <div class="container-fluid p-t-15">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="panel-heading font-bold layui-bg-blue" style="box-shadow: 3px 3px 8px #d1d9e6, -3px -3px 8px #d1d9e6;󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮border-radius: 7px;󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮">个人资料</div>
                    <div class="card-body">
                        <div class="edit-avatar">
                            <img src="http://q2.qlogo.cn/headimg_dl?dst_uin=<?=$userrow['user'];?>&spec=100" alt="..." class="img-avatar">
                            <div class="avatar-divider"></div>
                            <div class="clear">
                                <div v-if="row.name==''" c󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮lass="h5 m-t-xs"><?=$conf['sitename'];?></div>
                                <div v-else class="h5 m-t-xs"><?=$userrow['name'];?></div>
                                <div class="text-muted">
                                    <span style="color:red;">UID: {{row.uid}}</span>（{{row.user}}）<br>
                                    <span style="color:green">KEY:</span> 
                         󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮           <span v-if="row.key==0">未开通 API 接口 
                                        <button @click="ktapi" class="btn btn-xs btn-success">开通 KEY</button>
                   󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮                 </span>
                                    <span v-else>
                                        <span v-if="isKeyHidden">{{'*'.repeat(row.key.length)}}</span>
                                        <span v-else>{{row.key}}</span>
                                        <button @click="toggleKeyVisibility" class="btn btn-xs btn-primary btn-floating">
                    󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮                        {{isKeyHidden ? '显示 KEY' : '隐藏 KEY'}}
                               󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮         </button>
                                        <button @click="ghapi" class="btn btn-xs btn-info btn-floating">更换 KEY</button>
          󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮                              <button @click="gbapi" class="btn btn-xs btn-warning btn-floating">关闭 KEY</button>
                             󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮       </span>
                                </div>
                            </div>
                        </div>
                        󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮<hr>
                        <form class="site-form">
                            <div class="form-group">
                                <label>UID</label>
                  󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮              <input type="text" class="form-control" :value="row.uid" disabled="disabled" />
                            </div>
                            <div class="form-group">
                                <label>用户名</label>
                                <input type="text" class="form-control" :value="row.user" disabled="disabled" />
                            </div>
                            <div class="form-group">
                                <label>剩余积分</label>
                                <input type="text" class="form-contr󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮ol" :value="row.money" disabled="disabled" />
                            </div>
                            <div class="form-group">
                                <label>总充值</label>
                                <input type="text" class="form-control" :value="row.zcz" disabled="disabled" />
                            </div>
                            <div class="form-group">
                                <label>费率</label>
                                <input type="text" class="form-control" :value="row.addprice" disabled="disabled" />
                            </div>
                            <div class="form-group">
                                <label>邀请码</label>
                                <input type="text" class="form-control" :value="row.yqm==''?'无':row.yqm" disabled="disabled" />
                            </div>
                            <div class="form-group">
                                <label>邀请费率</label>
                                <span class="btn btn-xs btn-success btn-floating" @click="szyqprice">设置</span>
                                <input type="text" class="form-control" :value="row.yqprice==''?'无':row.yqprice" disabled="disabled" />
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="assets/js/aes.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#userindex",
        data: {
            row: null,
            inte: '',
            isKeyHidden: true
        },
        methods: {
            userinfo: function () {
                var load = l󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮ayer.load(2);
                this.$http.post("/apisub.php?act=userinfo")
                   .then(function (data) {
                        layer.close(load);
                        if (data.data.code == 1) {󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮
                            this.row = data.data;
                        } else {
                            layer.alert(data.data.msg, { icon: 2 });
                        }
                    });
            },
            yecz: function () {
                layer.alert('请联系您的上级 QQ：' + this.row.sjuser + '，进行充值。（下级点充值，此处将显示您的 QQ）', { icon: 1, title: "温馨提示" });
            },
            ktapi: function () {
                layer.confirm('后台剩余积分满 300 积分可免费开通，反之需花费 10 积分开通', { title: '温馨提示', icon: 1,
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    var load = layer.load(2);
                    axios.get("/apisub.php?act=ktapi&type=1")
                       .then(function (data) {
                            layer.close(load);
                            if (data.data.code == 1) {
                                layer.alert(data.data.msg, { icon: 1, title: "温󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮馨提示" }, function () {
                                    setTimeout(function () {
                                        window.location.href = "";
                                    });
                                });
                            } else {
                                layer.msg(data.data.msg, { icon: 2 });
                            }
                        });
                });
            },
    󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮        ghapi: function () {
                layer.confirm('确定更换 key 吗，更换之后原有的 key 将失效！', { title: '温馨提示', icon: 1,
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    var load = layer.load(2);
                    axios.get("/apisub.php?act=ktapi&type=3")
                       .then(function (data) {
                            layer.close(load);
                            if (data.data.code == 1) {
                                layer.alert(data.data.msg, { icon: 1, title: "温馨提示" }, function () {
                                  󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮  setTimeout(function () {
                                        window.location.href = "";
                                    });
                                });
                            } else {
                                layer.msg(data.data.msg, { icon: 2 });
                            }
         󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮               });
                });
            },
            gbapi: function () {
                layer.confirm('确定关闭 key 吗，关闭之后无法使用对接功能！', { title: '温馨提示', icon: 1,
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    var load = layer.load(2);
                    axios.get("/apisub.php?act=ktapi&type=4")
                       .then(function (data) {
                            layer.close(load);
                            if (data.data.code == 1) {
                                layer.alert(data.da󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮ta󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮.msg, { icon: 1,󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮 title: "温馨提示" }, function () {
                                    setTimeout(function () {
                                        window.location.href = "";
                                    });
                                });
       󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮                     } else {
                                layer.msg(data.data.msg, { icon: 2 });
                            }
                        });
                });
            },
            szyqprice: function () {
                layer.prompt({ title: '设置下级默认费率，首次自动生成邀请码', formType: 3 }, function (yqprice, index) {
                    layer.close(index);
                    var load = layer.load(2);
                    $.post("/apisub.php?act=yqprice", { yqpric󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮e },󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮 function (data) {
                        layer.close(load);
                        if (data.code == 1) {
                            vm.userinfo();
                       󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮     layer.alert(data.msg, { icon: 1 });
                        } else {
             󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮               layer.msg(data.msg, { icon: 2 });
                        }
                    });
                });
            },
            conne󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮ct_qq: function () {
                var ii = layer.load(0, {
                    shade: [0.1, '#fff']
                });
                $.ajax({
                    type: "POST",
                    url: "../qq_login.php",
                    data: { "type": 'qq' },
                    dataType: 'json',
                    success: function (data) {
                        layer.close(ii);
                        if (data.code == 1) {
                            window.location.href = data.url;
                        } else {
                            layer.alert(data.msg, {
                                icon: 7
                            });
                        }
                    }
                });
            },
            szgg: function () {
                layer.prompt({󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮 title: '设置代理公告，您的代理可看到', formType: 2 }, function (notice, index) {
                    layer.close(index);
                    var load = layer.load(2);
                    $.post("/apisub.php?act=use󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮r_notice", { notice }, function (data) {
                        layer.close(load);
                        if (data.code == 1) {
                            vm.userinfo();
                            layer.msg(data.msg, { icon: 1 });
                        } else {
                            layer.msg(data.msg, { icon: 2 });
                        }
                    });
                });
            },
            toggleKeyVisibility: function () {
                this.isKeyHidden = !this.isKeyHidden;
      󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄧󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄦󠄢󠄥󠄧󠄦󠄣󠄦󠄦󠄬󠅒󠅢󠄟󠄮󠇖󠆏󠆂󠇕󠅿󠆧󠇘󠆥󠅴󠇖󠆪󠆀󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮      }
        },
        mounted() {
            this.userinfo();
        }
    });
</script>