refactor：使用lucide替代navbar的icon，并删去video的标题栏
This commit is contained in:
parent
221d598a6e
commit
2e084bfb58
|
|
@ -2,81 +2,80 @@
|
|||
<div class="navbar bg-base-100 shadow-xl">
|
||||
<div class="navbar-start">
|
||||
<div class="dropdown">
|
||||
<div tabindex="0" role="button"
|
||||
class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
|
||||
<div
|
||||
tabindex="0"
|
||||
role="button"
|
||||
class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h8m-8 6h16"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<ul tabindex="0"
|
||||
class="menu menu-sm dropdown-content bg-base-100 rounded-lg z-50 mt-3 w-52 p-2 shadow-lg transition-all duration-300 ease-in-out">
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="menu menu-sm dropdown-content bg-base-200 rounded-lg z-50 mt-3 w-52 p-2 shadow-lg transition-all duration-300 ease-in-out"
|
||||
>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<router-link to="/" class="text-base font-medium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||
<polyline points="9 22 9 12 15 12 15 22" />
|
||||
</svg>
|
||||
<House class="icon" />
|
||||
首页
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<router-link to="/user" class="text-base font-medium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
<User class="icon" />
|
||||
用户界面
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<router-link to="/project" class="text-base font-medium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
|
||||
</svg>
|
||||
<PencilRuler class="icon" />
|
||||
工程界面
|
||||
</router-link>
|
||||
</li> <li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
</li>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<router-link to="/test" class="text-base font-medium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
|
||||
</svg>
|
||||
<FlaskConical class="icon" />
|
||||
测试功能
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<router-link to="/video-stream" class="text-base font-medium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
HTTP视频流 </router-link>
|
||||
<Video class="icon" />
|
||||
HTTP视频流
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<router-link to="/oscilloscope" class="text-base font-medium">
|
||||
<SquareActivity class="icon" />
|
||||
示波器
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<router-link to="/markdown-test" class="text-base font-medium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||||
<polyline points="14 2 14 8 20 8"></polyline>
|
||||
<line x1="16" y1="13" x2="8" y2="13"></line>
|
||||
<line x1="16" y1="17" x2="8" y2="17"></line>
|
||||
<polyline points="10 9 9 9 8 9"></polyline>
|
||||
</svg>
|
||||
<FileText class="icon" />
|
||||
Markdown测试
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<a href="http://localhost:5000/swagger" target="_self" rel="noopener noreferrer"
|
||||
class="text-base font-medium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 3h18v18H3z"></path>
|
||||
<path d="M8 8h8v8H8z" fill="currentColor"></path>
|
||||
</svg>
|
||||
<a
|
||||
href="http://localhost:5000/swagger"
|
||||
target="_self"
|
||||
rel="noopener noreferrer"
|
||||
class="text-base font-medium"
|
||||
>
|
||||
<BookOpenText class="icon" />
|
||||
OpenAPI文档
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -84,13 +83,18 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="navbar-center lg:flex">
|
||||
<router-link to="/" class="btn btn-ghost text-xl font-bold transition-all duration-300 hover:scale-105">
|
||||
<router-link
|
||||
to="/"
|
||||
class="btn btn-ghost text-xl font-bold transition-all duration-300 hover:scale-105"
|
||||
>
|
||||
<span class="text-primary">FPGA</span> Web Lab
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<router-link to="/login"
|
||||
class="btn btn-primary text-base-100 transition-all duration-300 hover:scale-105 hover:shadow-lg mr-3">
|
||||
<router-link
|
||||
to="/login"
|
||||
class="btn btn-primary text-base-100 transition-all duration-300 hover:scale-105 hover:shadow-lg mr-3"
|
||||
>
|
||||
登录
|
||||
</router-link>
|
||||
<div class="ml-2 transition-all duration-500 hover:rotate-12">
|
||||
|
|
@ -102,8 +106,22 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import ThemeControlButton from "./ThemeControlButton.vue";
|
||||
import {
|
||||
SquareActivity,
|
||||
FileText,
|
||||
BookOpenText,
|
||||
Video,
|
||||
FlaskConical,
|
||||
House,
|
||||
User,
|
||||
PencilRuler,
|
||||
} from "lucide-vue-next";
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "../assets/main.css";
|
||||
|
||||
.icon {
|
||||
@apply h-5 w-5 opacity-70;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-base-100">
|
||||
<!-- 标题栏 -->
|
||||
<div class="bg-base-200 p-4 border-b border-base-300">
|
||||
<h1 class="text-2xl font-bold text-base-content">HTTP 视频流</h1>
|
||||
<p class="text-base-content/70 mt-1">FPGA WebLab 视频流传输功能</p>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto p-6 space-y-6">
|
||||
<!-- 控制面板 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
|
|
|
|||
Loading…
Reference in New Issue