DataBuddyEngine/DataBuddy-vue
1
1
Fork 0
Code Issues Releases Activity

完善首页显示

Browse Source
This commit is contained in:
苏雨洛
2025-12-14 20:24:45 +08:00
parent 970e734dda
commit c5cfce2ea4
13 changed files with 406 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/index/Components.vue Normal file
View File

@@ -0,0 +1,56 @@
<script setup>
import { defineAsyncComponent } from 'vue'
const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
</script>
<template>
<header class="header">
<div class="header-left">
<button class="header-button create-component"><i class="fa-solid fa-plus"></i> 创建组件</button>
</div>
<div class="header-right">
<input type="text" placeholder="请输入名称" class="header-search"></input>
<button class="header-button search-button"><i class="fa-solid fa-magnifying-glass"></i></button>
</div>
<div class="header-components-list">
<button class="header-components-item header-button">VUE 组件</button>
<button class="header-components-item header-button">ECharts 组件</button>
<button class="header-components-item header-button">HTML 组件</button>
</div>
</header>
<Nodata />
</template>
<style>
.create-component {
color: #fff;
background-color: #00b7ff;
}
.create-component:hover {
background-color: #00a2e2;
}
.create-component:active {
background-color: #0088c3;
}
.header-components-list {
position: absolute;
top: 58px;
left: 15px;
}
.header-components-item {
background-color: rgba(255,255,255,0.05);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255,255,255,0.4);
box-shadow:
0 8px 32px rgba(0,0,0,0.2),
inset 0 4px 20px rgba(255,255,255,0.3);
color: #333;
text-shadow: 1px 1px 4px rgba(255,255,255,0.4);
}
.header-components-item:hover {
background-color: rgba(255,255,255,0.25);
}
.components-item-actived,
.header-components-item:active {
background-color: rgba(255,255,255,0.5);
}
</style>