vue3+element-plus实现大气简洁商业级后台管理系统ui代码-html代码-BFW代码库

代码语言：html

代码描述：vue3+element-plus实现大气简洁商业级后台管理系统ui代码，采用mockjs来模拟api，可更换后端api来调取数据，table表格支持增删改查。图表使用echarts。

代码标签： vue3 element-plus 大气简洁商业后台管理系统 ui 代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ADMIN 后台管理系统</title>
   <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-plus.index.2.10.3.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.prod.3.5.21.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/element-plus.index.full.2.10.3.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/icons-vue.index.iife.2.3.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.1.0.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.5.5.0.js"></script>
    <style>
        :root {
            --primary: #0d9488;
            --primary-light: #14b8a6;
            --primary-dark: #0f766e;
            --sidebar-bg: #0f172a;
            --sidebar-hover: rgba(13,148,136,0.12);
            --sidebar-active: rgba(13,148,136,0.2);
            --sidebar-text: #94a3b8;
            --sidebar-text-active: #5eead4;
            --bg: #f1f5f9;
            --card: #ffffff;
            --text: #334155;
            --text-light: #64748b;
            --border: #e2e8f0;
            --header-h: 56px;
            --tab-h: 40px;
            --sidebar-w: 220px;
            --el-color-primary: #0d9488;
            --el-color-primary-light-3: #2dd4bf;
            --el-color-primary-light-5: #5eead4;
            --el-color-primary-light-7: #99f6e4;
            --el-color-primary-light-9: #ccfbf1;
            --el-color-primary-dark-2: #0f766e;
        }
        *{margin:0;padding:0;box-sizing:border-box;}
        body,html{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;}

        /* ===== 登录页 ===== */
        .login-container{display:flex;height:100vh;background:var(--sidebar-bg);overflow:hidden;position:relative;}
        .login-left{flex:1;display:flex;flex-direction:column;justify-content:center;padding:80px;position:relative;z-index:1;}
        .login-left::before{content:'';position:absolute;top:-180px;left:-180px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(13,148,136,0.18),transparent 70%);pointer-events:none;}
        .login-left::after{content:'';position:absolute;bottom:-120px;right:60px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(13,148,136,0.1),transparent 70%);pointer-events:none;}
        .login-brand{font-size:38px;font-weight:700;color:#fff;margin-bottom:14px;position:relative;letter-spacing:-0.5px;}
        .login-brand span{color:var(--primary-light);}
        .login-desc{font-size:15px;color:var(--sidebar-text);line-height:1.8;position:relative;max-width:420px;}
        .login-features{margin-top:40px;position:relative;display:flex;flex-direction:column;gap:14px;}
        .login-features .feat{display:flex;align-items:center;gap:10px;color:#cbd5e1;font-size:14px;}
        .feat-dot{width:6px;height:6px;border-radius:50%;background:var(--primary);flex-shrink:0;}
        .login-right{width:460px;display:flex;align-items:center;justify-content:center;background:#fff;position:relative;}
        .login-right::before{content:'';position:absolute;left:0;top:10%;bottom:10%;width:1px;background:linear-gradient(transparent,var(--border),transparent);}
        .login-box{width:320px;}
        .login-box h2{font-size:22px;font-weight:700;color:var(--text);margin-bottom:6px;}
        .login-box .sub{color:var(--text-light);margin-bottom:32px;font-size:13px;}
        .login-tip{margin-top:20px;text-align:center;font-size:12px;color:var(--text-light);}

        /* ===== 主界面 ===== */
        .main-container{display:flex;height:100vh;}

        /* 侧边栏 */
        .sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);color:var(--sidebar-text);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;}
        .sidebar-logo{height:var(--header-h);display:flex;align-items:center;padding:0 20px;border-bottom:1px solid rgba(255,255,255,0.06);}
        .logo-icon{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--primary),var(--primary-light));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;margin-right:12px;flex-shrink:0;}
        .sidebar-logo span{color:#fff;font-size:15px;font-weight:600;white-space:nowrap;letter-spacing:0.3px;}
        .sidebar-menu{flex:1;overflow-y:auto;padding:10px 0;}
        .sidebar-menu::-webkit-scrollbar{width:0;}
        .sidebar .el-menu{border-right:none!important;background:transparent!important;}
        .sidebar .el-menu-item,.sidebar .el-sub-menu__title{color:var(--sidebar-text)!important;height:44px!important;line-height:44px!important;margin:2px 8px!important;border-radius:8px!important;padding-left:20px!important;transition:all .2s;}
        .sidebar .el-menu-item:hover,.sidebar .el-sub-menu__title:hover{background:var(--sidebar-hover)!important;color:#fff!important;}
        .sidebar .el-menu-item.is-active{background:var(--sidebar-active)!important;color:var(--sidebar-text-active)!important;}
        .sidebar .el-sub-menu .el-menu-item{padding-left:44px!important;height:40px!important;line-height:40px!important;margin:1px 8px!important;font-size:13px!important;}
        .sidebar .el-sub-menu__icon-arrow{color:var(--sidebar-text);}
        .sidebar .el-menu-item .el-icon,.sidebar .el-sub-menu__title .el-icon{margin-right:8px;font-size:16px;}

        /* 主内容 */
        .main-content{flex:1;display:flex;flex-direction:column;background:var(--bg);overflow:hidden;}

        /* 顶部栏 */
        .header{height:var(--header-h);background:var(--card);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:0 24px;flex-shrink:0;}
        .header-left{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--text-light);}
        .breadcrumb-sep{margin:0 4px;color:#cbd5e1;}
        .header-right{display:flex;align-items:center;gap:16px;}
        .user-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-light));display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:600;}
        .user-name{font-size:14px;color:var(--text);}

        /* Tab 栏 */
        .tabs-bar{background:var(--card);border-bottom:1px solid var(--border);padding:6px 16px 0;display:flex;align-items:flex-end;flex-shrink:0;gap:4px;overflow-x:auto;}
        .tabs-bar::-webkit-scrollbar{height:0;}
        .tab-item{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;font-size:13px;color:var(--text-light);background:#f8fafc;border:1px solid var(--border);border-bottom:none;border-radius:6px 6px 0 0;cursor:pointer;white-space:nowrap;transition:all .15s;user-select:none;flex-shrink:0;}
        .tab-item:hover{color:var(--primary);background:#f0fdfa;}
        .tab-item.active{color:var(--primary);background:var(--card);font-weight:500;position:relative;}
        .tab-item.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--primary);}
        .tab-close{font-size:14px;width:16px;height:16px;display:inline-f.........完整代码请登录后点击上方下载按钮下载查看