好看的菜单栏

效果图

HTML 代码

<template>
    <div class="silian_menu">
        <div class="silian_menu_left">
            <img src="../../public/logo.png" alt="" @click="onclick(1)">
        </div>
        <div class="silian_menu_right">
            <ul>
                <li><a @click="onclick(2)">首页</a></li>
                <li><a @click="onclick(3)">党建</a></li>
                <li><a @click="onclick(4)">公司</a></li>
                <li><a href="#" target="_blank">产品</a></li>
                <li><a href="#">营销</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">信息公开</a></li>
            </ul>
        </div>
    </div>
</template>

ts 代码

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

interface pathName {
    [value: number]: string
}

const routepath = ref<pathName>({
    1: '/',
    2: '/one',
    3: 'dangjian',
    4: 'gongshi'
})

const route = useRouter()
const onclick = (value: number) => {
    var routename = routepath.value[value]
    route.push(routename)
}
</script>

css 代码

<style lang="scss" scoped>
.silian_menu {
    // margin-left: 6vw;
    background: rgba($color: #fff, $alpha: .8);
    // margin-right: 10vw;
    display: flex;
    justify-content: space-between;
    padding: 16px 64px;
    z-index: 3;
    position: fixed;
    width: 93vw;

    &_left {
        img {
            height: 24px;
        }

        img:hover {
            cursor: pointer;
        }
    }

    &_right {
        font-family: sans-serif;
        margin: 0;
        padding: 0;

        ul {
            display: flex;
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        ul li a {
            position: relative;
            display: block;
            text-align: center;
            margin: 0 10px;
            color: #262626;
            font-size: 16px;
            text-decoration: none;
            text-transform: uppercase;
            transition: .5s;
            padding: 5px 10px;
            // font-family: sans-serif;

        }

        ul li a:hover {
            color: #fff;
            background: #e91e63;
            cursor: pointer;
        }

        ul li a::before {
            content: '';
            position: absolute;
            bottom: 8px;
            left: 8px;
            width: 8px;
            height: 8px;
            border: 2px solid #e91e63;
            border-width: 0 0 2px 2px;
            transition: .5s;
            opacity: 0;
        }

        ul li a:hover::before {
            bottom: -8px;
            left: -8px;
            opacity: 1;
        }

        ul li a::after {
            content: '';
            position: absolute;
            top: 8px;
            right: 8px;
            width: 8px;
            height: 8px;
            border: 2px solid #e91e63;
            border-width: 2px 2px 0 0;
            transition: .5s;
            opacity: 0;

        }

        ul li a:hover::after {
            top: -8px;
            right: -8px;
            opacity: 1;
        }

    }
}
</style>

小结

上面是菜单的全部代码，其中用到了路由route@4和scss，这个必须自己引入