云文件管理系统上传组件优化
This commit is contained in:
@@ -1,7 +1,48 @@
|
||||
<template>
|
||||
<template>
|
||||
<div class="top-navbar">
|
||||
<div class="navbar-left">
|
||||
<el-icon :size="22" color="#ffffff"><Folder /></el-icon>
|
||||
<div class="logo-icon">
|
||||
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="hex-top" x1="24" y1="2" x2="24" y2="46" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#4db6ac"/>
|
||||
<stop offset="50%" stop-color="#009688"/>
|
||||
<stop offset="100%" stop-color="#004d40"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="hex-front" x1="10" y1="22" x2="38" y2="46" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#26a69a"/>
|
||||
<stop offset="100%" stop-color="#00796b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="hex-side" x1="4" y1="14" x2="24" y2="44" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#00796b"/>
|
||||
<stop offset="100%" stop-color="#004d40"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="hex-highlight" x1="24" y1="4" x2="24" y2="26" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="rgba(255,255,255,0.5)"/>
|
||||
<stop offset="100%" stop-color="rgba(255,255,255,0)"/>
|
||||
</linearGradient>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="0.5" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<!-- 3D Hexagon: side (left) -->
|
||||
<polygon points="4,14 10,10 10,34 4,38" fill="url(#hex-side)" opacity="0.85"/>
|
||||
<!-- 3D Hexagon: front face -->
|
||||
<polygon points="10,10 38,10 44,14 44,38 38,42 10,42 4,38 4,14" fill="url(#hex-front)"/>
|
||||
<!-- 3D Hexagon: top face -->
|
||||
<polygon points="10,10 24,3 38,10 10,10" fill="url(#hex-top)" opacity="0.9"/>
|
||||
<!-- Highlight on top -->
|
||||
<polygon points="12,10 24,5 36,10" fill="url(#hex-highlight)" opacity="0.6"/>
|
||||
<!-- Inner subtle line for depth -->
|
||||
<polygon points="10,10 38,10 44,14 4,14" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
|
||||
<!-- Center icon: stylized folder/cloud -->
|
||||
<path d="M19 22h-1a3 3 0 00-3 3v6a3 3 0 003 3h12a3 3 0 003-3v-4a3 3 0 00-3-3h-2l-1.5-2H19z" fill="rgba(255,255,255,0.9)" filter="url(#glow)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="system-title">云文件管理系统</span>
|
||||
</div>
|
||||
<div class="navbar-right">
|
||||
@@ -131,6 +172,17 @@ const handleUserCommand = (command) => {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.logo-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.system-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
|
||||
Reference in New Issue
Block a user