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 bg-base-100 shadow-xl">
|
||||||
<div class="navbar-start">
|
<div class="navbar-start">
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<div tabindex="0" role="button"
|
<div
|
||||||
class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300">
|
tabindex="0"
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
role="button"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
|
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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<ul tabindex="0"
|
<ul
|
||||||
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">
|
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">
|
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||||
<router-link to="/" class="text-base font-medium">
|
<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"
|
<House class="icon" />
|
||||||
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>
|
|
||||||
首页
|
首页
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||||
<router-link to="/user" class="text-base font-medium">
|
<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"
|
<User class="icon" />
|
||||||
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>
|
|
||||||
用户界面
|
用户界面
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||||
<router-link to="/project" class="text-base font-medium">
|
<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"
|
<PencilRuler class="icon" />
|
||||||
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>
|
|
||||||
工程界面
|
工程界面
|
||||||
</router-link>
|
</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">
|
<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"
|
<FlaskConical class="icon" />
|
||||||
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>
|
|
||||||
测试功能
|
测试功能
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||||
<router-link to="/video-stream" class="text-base font-medium">
|
<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"
|
<Video class="icon" />
|
||||||
stroke="currentColor" stroke-width="2">
|
HTTP视频流
|
||||||
<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>
|
</router-link>
|
||||||
</svg>
|
</li>
|
||||||
HTTP视频流 </router-link>
|
<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>
|
||||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||||
<router-link to="/markdown-test" class="text-base font-medium">
|
<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"
|
<FileText class="icon" />
|
||||||
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>
|
|
||||||
Markdown测试
|
Markdown测试
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||||
<a href="http://localhost:5000/swagger" target="_self" rel="noopener noreferrer"
|
<a
|
||||||
class="text-base font-medium">
|
href="http://localhost:5000/swagger"
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
|
target="_self"
|
||||||
stroke="currentColor" stroke-width="2">
|
rel="noopener noreferrer"
|
||||||
<path d="M3 3h18v18H3z"></path>
|
class="text-base font-medium"
|
||||||
<path d="M8 8h8v8H8z" fill="currentColor"></path>
|
>
|
||||||
</svg>
|
<BookOpenText class="icon" />
|
||||||
OpenAPI文档
|
OpenAPI文档
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -84,13 +83,18 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="navbar-center lg:flex">
|
<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
|
<span class="text-primary">FPGA</span> Web Lab
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
<div class="navbar-end">
|
<div class="navbar-end">
|
||||||
<router-link to="/login"
|
<router-link
|
||||||
class="btn btn-primary text-base-100 transition-all duration-300 hover:scale-105 hover:shadow-lg mr-3">
|
to="/login"
|
||||||
|
class="btn btn-primary text-base-100 transition-all duration-300 hover:scale-105 hover:shadow-lg mr-3"
|
||||||
|
>
|
||||||
登录
|
登录
|
||||||
</router-link>
|
</router-link>
|
||||||
<div class="ml-2 transition-all duration-500 hover:rotate-12">
|
<div class="ml-2 transition-all duration-500 hover:rotate-12">
|
||||||
|
|
@ -102,8 +106,22 @@
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import ThemeControlButton from "./ThemeControlButton.vue";
|
import ThemeControlButton from "./ThemeControlButton.vue";
|
||||||
|
import {
|
||||||
|
SquareActivity,
|
||||||
|
FileText,
|
||||||
|
BookOpenText,
|
||||||
|
Video,
|
||||||
|
FlaskConical,
|
||||||
|
House,
|
||||||
|
User,
|
||||||
|
PencilRuler,
|
||||||
|
} from "lucide-vue-next";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@import "../assets/main.css";
|
@import "../assets/main.css";
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
@apply h-5 w-5 opacity-70;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="min-h-screen bg-base-100">
|
<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="container mx-auto p-6 space-y-6">
|
||||||
<!-- 控制面板 -->
|
<!-- 控制面板 -->
|
||||||
<div class="card bg-base-200 shadow-xl">
|
<div class="card bg-base-200 shadow-xl">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue