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

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

代码语言：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>
  .........完整代码请登录后点击上方下载按钮下载查看