js+css实现电脑管家ui界面交互效果代码-html代码-BFW代码库

js+css实现电脑管家ui界面交互效果代码

代码语言：html

代码描述：js+css实现电脑管家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>微软电脑管家 - 精密硬件扫描</title>
    <style>
        :root {
            --primary-blue: #0067c0;
            --accent-cyan: #4cc2ff;
            --pcb-base: #eef2f5;
            --pcb-trace: #dce3eb;
            --component-silver: #d1d5db;
            --component-dark: #2d3748;
            --shadow-color: rgba(0, 0, 10, 0.15);
        }

        * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Segoe UI", sans-serif; }

        body {
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }

        .app-window {
            width: 1000px;
            height: 640px;
            background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.1);
            display: flex;
            overflow: hidden;
            position: relative;
        }

        /* 侧边栏 */
        .sidebar {
            width: 68px;
            background: rgba(255,255,255,0.8);
            backdrop-filter: blur(10px);
            border-right: 1px solid #edf2f7;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 40px;
            gap: 32px;
            z-index: 2;
        }
        .icon-box {
            width: 40px; height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #64748b;
            cursor: pointer;
            transition: 0.2s;
        }
        .icon-box:hover { background: #e2e8f0; color: var(--primary-blue); }
        .icon-box.active { background: #e0f2fe; color: var(--primary-blue); }
        .icon-box svg { width: 20px;.........完整代码请登录后点击上方下载按钮下载查看