<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 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 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, keyPath: string[]) => {
    router.push({
        path: key
    })
}
// 滚动事件
const scrollY = ref(false);
const handleScroll = () => {
    const scrollYmo = window.scrollY;
    scrollY.value = scrollYmo > 1100;
};
window.addEventListener('scroll', handleScroll);

</script>
<style>
#alld div {
    margin-bottom: 15px;
}

#top {
    height: 100px;
    border-radius: 10px;
    background-color: rgb(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: rgb(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: rgb(255, 255, 255 , 0.7);
}
.el-menu-vertical-demo {
    background-color: rgb(0, 0, 0, 0);
    border-right: 0px;
}

#cont div,
#bot div {
    margin-bottom: 0%;
}
/*  */
#bot {
    padding: 15px;
    border-radius: 10px;
    background-color: rgb(0, 233, 70, 0.7);
    transition: all 0.4s ease;
}

#bot.botrelative {
    transition: all 0.4s ease;
    position: sticky;
    top: 20px;
}

.demo-tabs {
    text-align: center;
    color: #6b778c;
}



.el-tabs__nav-scroll {
    height: 45px;
    margin-bottom: 5px;
}

.el-tabs__nav {
    width: 100%;
}

.el-tabs__item {
    width: 50%;
}

.el-tabs__nav-wrap:after {
    height: 0px;
}

.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>