vue3布局简洁清爽路由器网关终端设备pc端官网系统ui原型图代码-html代码-BFW代码库

代码语言：html

代码描述：vue3布局简洁清爽路由器网关终端设备pc端官网系统ui原型图代码

代码标签： vue 简洁清爽路由器网关终端设备 pc端官网系统 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>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chart.umd.4.4.1.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            accent: '#FF7D00',
            dark: '#1D2129',
            light: '#F2F3F5',
            'neutral-100': '#FFFFFF',
            'neutral-200': '#F7F8FA',
            'neutral-300': '#E5E6EB',
            'neutral-400': '#C9CDD4',
            'neutral-500': '#86909C',
            'neutral-600': '#4E5969',
            'neutral-700': '#272E3B',
            'neutral-800': '#1D2129',
            success: '#00B42A',
            warning: '#FF7D00',
            danger: '#F53F3F',
            info: '#165DFF',
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 2px 14px 0 rgba(0, 0, 0, 0.06)',
            'dropdown': '0 4px 16px 0 rgba(0, 0, 0, 0.12)',
            'button': '0 2px 8px 0 rgba(22, 93, 255, 0.2)',
          }
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .transition-height {
        transition: max-height 0.3s ease;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .text-shadow {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }
      .bg-grid {
        background-image: linear-gradient(#e5e7eb 1px, transparent 1px),
                          linear-gradient(to right, #e5e7eb 1px, transparent 1px);
        background-size: 20px 20px;
      }
    }
  </style>
</head>
<body class="font-inter bg-neutral-200 text-neutral-800 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-sm z-50">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-16">
        <!-- 左侧Logo和菜单按钮 -->
        <div class="flex items-center space-x-4">
          <button class="lg:hidden p-2 rounded-md text-neutral-600 hover:bg-neutral-200 transition-colors">
            <i class="fa fa-bars text-lg"></i>
          </button>
          <a href="#dashboard" class="flex items-center space-x-2">
            <svg class="w-8 h-8 text-primary" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 7C4 5.89543 4.89543 5 6 5H18C19.1046 5 20 5.89543 20 7V17C20 18.1046 19.1046 19 18 19H6C4.89543 19 4 18.1046 4 17V7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M8 13H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              <path d="M8 9H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
            <span class="text-lg font-semibold text-neutral-800">RouterManager</span>
          </a>
        </div>
        
        <!-- 右侧用户信息和通知 -->
        <div class="flex items-center space-x-4">
          <button class="p-2 rounded-full text-neutral-600 hover:bg-neutral-200 transition-colors relative">
            <i class="fa fa-bell text-lg"></i>
            <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
          </button>
          <div class="flex items-center space-x-2 cursor-pointer group">
            <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-colors">
            <span class="hidden md:inline text-sm font-medium">管理员</span>
            <i class="fa fa-angle-down text-neutral-500 text-xs"></i>
          </div>
        </div>
      </div>
    </div>
  </header>
  
  <div class="flex flex-1 overflow-hidden">
    <!-- 侧边栏导航 -->
    <aside class="bg-white w-64 flex-shrink-0 border-r border-neutral-300/50 shadow-sm z-40">
      <div class="h-full flex flex-col">
        <nav class="flex-1 overflow-y-auto scrollbar-hide p-4">
          <ul class="space-y-1">
            <li class="mb-2">
              <p class="text-xs font-semibold text-neutral-500 uppercase tracking-wider px-3 mb-1">主菜单</p>
            </li>
            <li>
              <a href="#dashboard" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 bg-primary/10 text-primary">
                <i class="fa fa-tachometer w-5 text-center"></i>
                <span>控制面板</span>
              </a>
            </li>
            <li>
              <a href="#network" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 text-neutral-700 hover:bg-neutral-200">
                <i class="fa fa-wifi w-5 text-center"></i>
                <span>网络设置</span>
              </a>
            </li>
            <li>
              <a href="#devices" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 text-neutral-700 hover:bg-neutral-200">
                <i class="fa fa-plug w-5 text-center"></i>
                <span>已连接设备</span>
              </a>
            </li>
            <li class="mb-2 mt-6">
              <p class="text-xs font-semibold text-neutral-500 uppercase tracking-wider px-3 mb-1">系统</p>
            </li>
            <li>
              <a href="#system" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 text-neutral-700 hover:bg-neutral-200">
                <i class="fa fa-cog w-5 text-center"></i>
                <span>系统设置</span>
              </a>
            </li>
          </ul>
        </nav>
        
        <div class="p-4 border-t border-neutral-300/50">
          <div class="flex items-center space-x-3 p-3 bg-neutral-200/50 rounded-lg">
            <div class="flex-shrink-0">
              <svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M17 14C18.1046 14 19 13.1046 19 12C19 10.8954 18.1046 10 17 10C15.8954 10 15 10.8954 15 12C15 13.1046 15.8954 14 17 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M7 14C8.1046 14 9 13.1046 9 12C9 10.8954 8.1046 10 7 10C5.8954 10 5 10.8954 5 12C5 13.1046 5.8954 14 7 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-line.........完整代码请登录后点击上方下载按钮下载查看