<template>
    <div id="alld">
        <div id="top">
            <div class="top1">
                <h3>小颠公告栏</h3>
            </div>
            <div class="top2">
                <p>站主发癫中请勿靠近</p>
            </div>
        </div>
        <div id="cont">
            <div class="cont1">
                <h2>小颠片刻</h2>
                <p>左眼右右眼左，四十五度成就美</p>
            </div>
            <div class="cont2">
                <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
                    <el-menu-item index="/:type">
                        <el-icon>
                        </el-icon>
                        <span>首页</span>
                    </el-menu-item>
                    <el-menu-item index="/aericle">
                        <el-icon>
                        </el-icon>
                        <span>文章</span>
                    </el-menu-item>
                    <el-menu-item index="/nonsense">
                        <el-icon>
                        </el-icon>
                        <span>疯言疯语</span>
                    </el-menu-item>
                </el-menu>
            </div>
        </div>
        <div id="bot" :class="{ 'botrelative': scrollY }">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="个人简介" name="first">
                    <div class="mylogo">
                        <el-avatar :src="state" />
                    </div>
                    <p>清疯不颠</p>
                    <p>···重度精神失常患者···</p>
                </el-tab-pane>
                <el-tab-pane label="功能" name="second">
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

// 当前激活菜单
const activeIndex = ref('/:type')
const router = useRouter()
const activeName = ref('first')
const state = reactive({
    circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
    sizeList: ['small', '', 'large'] as const,
})

// 处理菜单选择跳转
const handleSelect = (key: string) => {
    router.push({ path: key })
}

// 路由切换时同步菜单高亮
router.beforeEach((to) => {
    activeIndex.value = to.path
})

// 控制底部模块吸顶效果
const scrollY = ref(false)
const handleScroll = () => {
    scrollY.value = window.scrollY > 1100
}

// 生命周期管理事件监听，防止内存泄漏
onMounted(() => {
    window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll)
})
</script>
<style>
/* 整体布局外层，每个子div底部间距 */
#alld div {
    margin-bottom: 15px;
}

/* 顶部公告栏样式 */
#top {
    height: 100px;
    border-radius: 10px;
    background-color: rgba(102, 161, 216, 0.9); /* 蓝色半透明背景 */
    text-align: left;
    padding: 15px;
}

/* 公告栏副标题字体大小 */
#top .top2 p {
    font-size: 15px;
}

/* 中部内容区整体样式 */
#cont {
    padding: 15px;
    height: 350px;
    border-radius: 10px;
    padding: 0;
}

/* 内容区上半部分（标题） */
#cont .cont1 {
    border-radius: 10px 10px 0 0;
    padding: 15px;
    text-align: center;
    margin-bottom: 0;
    background-color: rgba(102, 161, 216, 0.9); /* 蓝色半透明背景 */
}

/* 内容区下半部分（菜单） */
#cont .cont2 {
    padding: 10px 0;
    border-radius: 0 0 10px 10px;
    background-color: rgba(215, 224, 218, 0.9); /* 浅绿色半透明背景 */
}

/* 菜单整体样式 */
#cont .cont2 .el-menu-vertical-demo {
    display: inline;
}

/* 菜单项悬停效果 */
#cont .cont2 .el-menu-vertical-demo .el-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.7); /* 白色半透明 */
}

/* 菜单背景透明，去除右边框 */
.el-menu-vertical-demo {
    background-color: transparent;
    border-right: 0;
}

/* 去除内容区和底部区子div的底部间距 */
#cont div,
#bot div {
    margin-bottom: 0;
}

/* 底部模块样式 */
#bot {
    padding: 15px;
    border-radius: 10px;
    background-color: rgba(0, 233, 70, 0.7); /* 绿色半透明背景 */
    transition: all 0.4s ease;
}

/* 底部模块吸顶效果 */
#bot.botrelative {
    transition: all 0.4s ease;
    position: sticky;
    top: 20px;
}

/* tabs整体居中，字体颜色 */
.demo-tabs {
    text-align: center;
    color: #6b778c;
}

/* tabs导航栏高度和下边距 */
.el-tabs__nav-scroll {
    height: 45px;
    margin-bottom: 5px;
}

/* tabs导航栏宽度 */
.el-tabs__nav {
    width: 100%;
}

/* tabs每个item宽度一半 */
.el-tabs__item {
    width: 50%;
}

/* 去除tabs导航栏底部线 */
.el-tabs__nav-wrap:after {
    height: 0;
}

/* 头像容器，垂直水平居中 */
.mylogo {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 头像悬停放大效果 */
.el-avatar:hover {
    transform: scale(2);
    z-index: 2;
    transition: all 0.4s ease;
}
</style>