mirror of https://github.com/halo-dev/halo
Ryan Wang
parent
7db6894723
commit
3853d55fd1
|
|
@ -24,6 +24,8 @@ import IconPlug from "~icons/ri/plug-2-line";
|
|||
import IconEye from "~icons/ri/eye-line";
|
||||
// @ts-ignore
|
||||
import IconFolder from "~icons/ri/folder-2-line";
|
||||
// @ts-ignore
|
||||
import IconMore from "~icons/ri/more-line";
|
||||
export {
|
||||
IconDashboard,
|
||||
IconArrowRight,
|
||||
|
|
@ -38,4 +40,5 @@ export {
|
|||
IconPlug,
|
||||
IconEye,
|
||||
IconFolder,
|
||||
IconMore,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,6 +5,27 @@
|
|||
<img :src="logo" alt="Halo Logo" style="width: 78px" />
|
||||
</div>
|
||||
<VRoutesMenu :menus="menus" />
|
||||
<div class="current-profile">
|
||||
<div class="profile-avatar">
|
||||
<img class="h-11 w-11 rounded-full" src="https://halo.run/logo" />
|
||||
</div>
|
||||
<div class="profile-name">
|
||||
<div class="flex font-medium text-sm">Ryan Wang</div>
|
||||
<div class="flex">
|
||||
<VTag>
|
||||
<template #leftIcon>
|
||||
<IconUserSettings />
|
||||
</template>
|
||||
管理员
|
||||
</VTag>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="profile-control transition-all hover:bg-gray-100 rounded cursor-pointer p-1"
|
||||
>
|
||||
<IconMore />
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="content w-full overflow-y-auto">
|
||||
<slot />
|
||||
|
|
@ -14,18 +35,48 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import { VRoutesMenu } from "@/components/base/menu";
|
||||
import { VTag } from "@/components/base/tag";
|
||||
import { menus } from "@/router/menus.config";
|
||||
import logo from "@/assets/logo.svg";
|
||||
import { IconMore, IconUserSettings } from "@/core/icons";
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.navbar {
|
||||
width: 260px;
|
||||
width: 270px;
|
||||
z-index: 999;
|
||||
box-shadow: 0 4px 4px #f6c6ce;
|
||||
padding-bottom: 70px;
|
||||
|
||||
.current-profile {
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 270px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
@apply p-3;
|
||||
|
||||
.profile-avatar {
|
||||
@apply self-center;
|
||||
@apply flex;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
@apply self-center;
|
||||
@apply flex-1;
|
||||
@apply ml-3;
|
||||
}
|
||||
|
||||
.profile-control {
|
||||
@apply self-center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 260px;
|
||||
margin-left: 270px;
|
||||
display: flex;
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts" setup>
|
||||
import FilledLayout from "@/layouts/FilledLayout.vue";
|
||||
import { VButton } from "@/components/base/button";
|
||||
import { VTag } from "@/components/base/tag";
|
||||
import { IconBookRead } from "@/core/icons";
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -21,54 +22,22 @@ import { IconBookRead } from "@/core/icons";
|
|||
<div class="p-4">
|
||||
<div class="table-container">
|
||||
<div class="table-item">
|
||||
<div class="table-cell font-bold">key</div>
|
||||
<div class="table-cell font-bold">value</div>
|
||||
<div class="table-cell font-bold">value</div>
|
||||
<div class="table-cell font-bold">value</div>
|
||||
<div class="table-cell font-bold">value</div>
|
||||
<div class="table-cell font-bold"></div>
|
||||
<div class="table-cell font-bold">作者</div>
|
||||
<div class="table-cell font-bold">评论</div>
|
||||
<div class="table-cell font-bold">访问量</div>
|
||||
<div class="table-cell font-bold">发布时间</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div class="table-cell">message</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
</div>
|
||||
<div class="table-item hover:bg-black hover:text-white">
|
||||
<div class="table-cell">message</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div class="table-cell">message</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
<div class="table-cell w-72">
|
||||
消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字
|
||||
<div v-for="i in 10" :key="i" class="table-item">
|
||||
<div class="table-cell">
|
||||
<div>Halo 1.5.2 发布</div>
|
||||
<VTag>#Halo</VTag>
|
||||
</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div class="table-cell">message</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
<div class="table-cell">消息文字消息文字消息文字消息文字消息文字</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div class="table-cell">message</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div class="table-cell">message</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
<div class="table-cell">
|
||||
<img src="https://halo.run/avatar" class="rounded-full w-5" />
|
||||
</div>
|
||||
<div class="table-cell">0</div>
|
||||
<div class="table-cell">123</div>
|
||||
<div class="table-cell">消息文字</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -87,6 +56,12 @@ import { IconBookRead } from "@/core/icons";
|
|||
|
||||
.table-item {
|
||||
@apply table-row;
|
||||
@apply cursor-pointer;
|
||||
@apply transition-all;
|
||||
|
||||
&:hover {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
|
|
|
|||
Loading…
Reference in New Issue