368 lines
14 KiB
Vue
368 lines
14 KiB
Vue
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'home',
|
|
pageTransition: {
|
|
name: 'slide',
|
|
mode: 'out-in',
|
|
},
|
|
})
|
|
// 菜单数据
|
|
const menuList = ref([]);
|
|
// 菜单折叠
|
|
const menuCollapseStatus = ref(true)
|
|
// blog信息弹窗状态
|
|
const blogInfoPopupStatus = ref(false)
|
|
const blogInfoPopupStatus2 = ref(false)
|
|
|
|
const getMenuListFetch = async () => {
|
|
const { data, pending, error } = await useFetch('/api/blog/blogMenu');
|
|
if (error.value) {
|
|
consola.error('数据获取失败:', error.value);
|
|
}
|
|
menuList.value = data.value?.filter(i => i.pid === '0')
|
|
}
|
|
const sendMessage = async () => {
|
|
// nMessage.success('??')
|
|
}
|
|
const handleCloseBefore = (s) => {
|
|
consola.info('要关闭啦', s)
|
|
}
|
|
|
|
const loading = ref(false)
|
|
|
|
setTimeout(() => {
|
|
loading.value = true
|
|
}, 5000)
|
|
|
|
// SSR运行
|
|
await getMenuListFetch()
|
|
onMounted(() => {
|
|
consola.log(menuList.value)
|
|
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="homeBlog">
|
|
<ResizeContent class="left" :class="!menuCollapseStatus && 'menuCollapse'">
|
|
<div class="blogMenuContainer">
|
|
<header class="contentBox">
|
|
<div class="title">博客目录</div>
|
|
<div class="bar add star-blogIconFont awaitShow a11 allCenter"></div>
|
|
<div class="bar star-blogIconFont awaitShow a11 allCenter" @click="menuCollapseStatus = !menuCollapseStatus"></div>
|
|
</header>
|
|
<div class="line"/>
|
|
<div class="blogMenuContent">
|
|
<div class="contentBox blogMenuItem" v-for="(item, index) in menuList" :key="item.id">
|
|
<div class="addIcon star-blogIconFont a11 allCenter"></div>
|
|
<div class="text oneLineOverMore">{{item.name}}</div>
|
|
<div class="barBox" :class="item.pid === '0' && 'awaistShows'">
|
|
<div class="star-blogIconFont bar a11 allCenter"></div>
|
|
<div class="star-blogIconFont bar a11 allCenter"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer></footer>
|
|
</div>
|
|
</ResizeContent>
|
|
<div class="main">
|
|
<header>
|
|
<div class="menuCollapse a11 allCenter point" :class="menuCollapseStatus && 'hide'">
|
|
<div class="star-blogIconFont" @click="menuCollapseStatus = !menuCollapseStatus"></div>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<div @click="blogInfoPopupStatus = !blogInfoPopupStatus">点击</div>
|
|
<div>默认</div>
|
|
<div>
|
|
<NiButton>默认按钮</NiButton>
|
|
<NiButton type="tertiary">tertiary按钮</NiButton>
|
|
<NiButton loading type="primary">primary按钮</NiButton>
|
|
<NiButton strong type="info">info按钮</NiButton>
|
|
<NiButton loading type="success">success按钮</NiButton>
|
|
<NiButton type="warning">warning按钮</NiButton>
|
|
<NiButton type="error">error按钮</NiButton>
|
|
</div>
|
|
<div>grade 虚线边框</div>
|
|
<div>
|
|
<NiButton>默认按钮</NiButton>
|
|
<NiButton grade="dotted" type="tertiary">tertiary按钮</NiButton>
|
|
<NiButton grade="dotted" loading type="primary">primary按钮</NiButton>
|
|
<NiButton grade="dotted" strong type="info">info按钮</NiButton>
|
|
<NiButton grade="dotted" loading type="success">success按钮</NiButton>
|
|
<NiButton grade="dotted" type="warning">warning按钮</NiButton>
|
|
<NiButton grade="dotted" type="error">error按钮</NiButton>
|
|
</div>
|
|
<div>grade 浅色</div>
|
|
<div>
|
|
<NiButton>默认按钮</NiButton>
|
|
<NiButton grade="light" type="tertiary">tertiary按钮</NiButton>
|
|
<NiButton grade="light" loading type="primary">primary按钮</NiButton>
|
|
<NiButton grade="light" strong type="info">info按钮</NiButton>
|
|
<NiButton grade="light" loading type="success">success按钮</NiButton>
|
|
<NiButton grade="light" type="warning">warning按钮</NiButton>
|
|
<NiButton grade="light" type="error">error按钮</NiButton>
|
|
</div>
|
|
<div>grade halfTransparent</div>
|
|
<div>
|
|
<NiButton>默认按钮</NiButton>
|
|
<NiButton grade="halfTransparent" type="tertiary">tertiary按钮</NiButton>
|
|
<NiButton grade="halfTransparent" loading type="primary">primary按钮</NiButton>
|
|
<NiButton grade="halfTransparent" strong type="info">info按钮</NiButton>
|
|
<NiButton grade="halfTransparent" loading type="success">success按钮</NiButton>
|
|
<NiButton grade="halfTransparent" type="warning">warning按钮</NiButton>
|
|
<NiButton grade="halfTransparent" type="error">error按钮</NiButton>
|
|
</div>
|
|
<div>grade Transparent</div>
|
|
<div>
|
|
<NiButton>默认按钮</NiButton>
|
|
<NiButton grade="transparent" type="tertiary">tertiary按钮</NiButton>
|
|
<NiButton grade="transparent" loading type="primary">primary按钮</NiButton>
|
|
<NiButton grade="transparent" strong type="info">info按钮</NiButton>
|
|
<NiButton grade="transparent" loading type="success">success按钮</NiButton>
|
|
<NiButton grade="transparent" type="warning">warning按钮</NiButton>
|
|
<NiButton grade="transparent" type="error">error按钮</NiButton>
|
|
</div>
|
|
<div>disable</div>
|
|
<div>
|
|
<NiButton>默认按钮</NiButton>
|
|
<NiButton disabled type="tertiary">tertiary按钮</NiButton>
|
|
<NiButton disabled type="primary">primary按钮</NiButton>
|
|
<NiButton loading disabled type="info">info按钮</NiButton>
|
|
<NiButton disabled type="success">success按钮</NiButton>
|
|
<NiButton disabled type="warning">warning按钮</NiButton>
|
|
<NiButton disabled type="error">error按钮</NiButton>
|
|
</div>
|
|
<div>半圆角</div>
|
|
<div>
|
|
<NiButton>默认按钮</NiButton>
|
|
<NiButton angle="round" type="tertiary">tertiary按钮</NiButton>
|
|
<NiButton angle="round" type="primary">primary按钮</NiButton>
|
|
<NiButton :loading="loading" angle="round" type="info">info按钮</NiButton>
|
|
<NiButton angle="round" type="success">success按钮</NiButton>
|
|
<NiButton angle="round" type="warning">warning按钮</NiButton>
|
|
<NiButton angle="round" type="error">error按钮</NiButton>
|
|
</div>
|
|
<div>圆角</div>
|
|
<div>
|
|
<NiButton>A</NiButton>
|
|
<NiButton angle="circle" type="tertiary">B</NiButton>
|
|
<NiButton angle="circle" type="primary">C</NiButton>
|
|
<NiButton :loading="loading" angle="circle" type="info">D</NiButton>
|
|
<NiButton loading angle="circle" type="success">E</NiButton>
|
|
<NiButton loading angle="circle" type="warning">F</NiButton>
|
|
<NiButton angle="circle" type="error">G</NiButton>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
<div class="right"></div>
|
|
<NiPopup v-model:status="blogInfoPopupStatus" width="900" @handleClose="handleCloseBefore">
|
|
<div @click="blogInfoPopupStatus2 = true">关闭</div>
|
|
<template #footer>
|
|
关闭
|
|
</template>
|
|
</NiPopup>
|
|
<NiPopup v-model:status="blogInfoPopupStatus2">
|
|
<div @click="blogInfoPopupStatus2 = false">
|
|
</div>
|
|
</NiPopup>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.homeBlog {
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
& > div{
|
|
position: relative;
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
& > div.left{
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
background: var(--blog-menu-background-color);
|
|
border-right: 1px solid var(--bg-color-be);
|
|
transition: width .3s ease-in-out;
|
|
&.menuCollapse{
|
|
width: 0;
|
|
}
|
|
.bar{
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
height: 100%;
|
|
font-size: 1rem;
|
|
opacity: 0;
|
|
color: var(--font-color-top3-h2);
|
|
transform: rotate(180deg);
|
|
transition: color .3s, opacity .3s, background-color .3s;
|
|
border-radius: .25rem;
|
|
&:hover{
|
|
background-color: #00000015;
|
|
}
|
|
}
|
|
.awaitShow{
|
|
height: 0;
|
|
width: 0;
|
|
opacity: 0;
|
|
transition: opacity .3s;
|
|
overflow: hidden;
|
|
}
|
|
&:hover{
|
|
.awaitShow{
|
|
height: 100%;
|
|
width: auto;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.blogMenuContainer{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font-family: sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
padding: .5rem;
|
|
& > *{
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
& > header{
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
width: 100%;
|
|
|
|
& > div.title{
|
|
position: relative;
|
|
flex: 1;
|
|
color: var(--font-color-top3-h1);
|
|
}
|
|
|
|
& > div.bar{
|
|
&:last-child{
|
|
font-size: 1.3rem;
|
|
}
|
|
&:hover{
|
|
color: var(--font-color-top3-h1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
& > footer{
|
|
flex-shrink: 0;
|
|
}
|
|
& > div.line{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 1px;
|
|
margin: 0.5rem auto;
|
|
background-color: var(--bg-color-be);
|
|
}
|
|
& > div.blogMenuContent{
|
|
position: relative;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
& > div.blogMenuItem{
|
|
position: relative;
|
|
font-size: 1rem;
|
|
display: flex;
|
|
& > div{
|
|
position: relative;
|
|
}
|
|
& > div.addIcon{
|
|
font-size: 1rem;
|
|
margin-right: .5rem;
|
|
}
|
|
& > div.text{
|
|
height: 100%;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
& > div.barBox{
|
|
margin-left: .2rem;
|
|
height: 0;
|
|
width: 0;
|
|
opacity: 0;
|
|
display: flex;
|
|
}
|
|
&:hover div.barBox{
|
|
height: 100% !important;
|
|
width: auto !important;
|
|
opacity: 1 !important;
|
|
& > div.bar{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.contentBox{
|
|
position: relative;
|
|
height: 2rem;
|
|
box-sizing: border-box;
|
|
padding: .2rem .5rem;
|
|
border-radius: .25rem;
|
|
color: var(--font-color-top3-h2);
|
|
user-select: none;
|
|
cursor: pointer;
|
|
transition: background-color .3s;
|
|
&:hover{
|
|
background: var(--font-color-top3-hover);
|
|
}
|
|
&.active{
|
|
color: var(--font-color-top3-h1);
|
|
background: var(--font-color-top3-active);
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
& > div.right{
|
|
flex-shrink: 0;
|
|
}
|
|
& > div.main{
|
|
flex: 1;
|
|
& > header{
|
|
position: relative;
|
|
display: flex;
|
|
height: 3rem;
|
|
border-bottom: 1px solid var(--bg-color-be);
|
|
|
|
& > div.menuCollapse{
|
|
position: relative;
|
|
height: 100%;
|
|
transition: width .3s;
|
|
width: 3rem;
|
|
overflow: hidden;
|
|
&:hover & > div{
|
|
color: var(--font-color-top3-h1);
|
|
}
|
|
&.hide{
|
|
width: 0;
|
|
}
|
|
|
|
& > div{
|
|
font-size: 1.3rem;
|
|
color: var(--font-color-top3-h2);
|
|
transition: color .5s, opacity .5s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 767px){
|
|
|
|
}
|
|
@media (min-width: 768px){
|
|
|
|
}
|
|
</style>
|