vue横向导航栏

╰+攻爆jí腚メ 2023-10-10 22:07 28阅读 0赞

<template>
        <div>
            
            <el-menu class="el-menu-demo" :default-active="activeIndex" mode="horizontal" @select="handleSelect"
                text-color="#fff" active-text-color="white">
                <el-row style=" background-color: #d4584b;line-height: 52px;color: white;">
                    <el-col :span="4" :offset="4">
                        <div class="grid-content">
                            <h2><i class="el-icon-platform-eleme"></i>  大庆师范表白墙</h2>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content"> <el-menu-item index="/latest">最新</el-menu-item></div>
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content"> <el-menu-item index="/hot">热门</el-menu-item></div>
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content"> <el-menu-item index="/express-love">表白</el-menu-item></div>
                    </el-col>
                    <el-col :span="2" :offset="6">
                        <el-menu-item @click="login()">登录 </el-menu-item>
                    </el-col>
                </el-row>
            </el-menu>
            <br>
    
            
            <router-view></router-view>
    
            <br>
            
            <el-row>
                <div class="footer">
                    <span>© 2023/5/20 DingDing. All rights reserved.</span>
                </div>
            </el-row>
    
            
            <el-dialog title="微信登录" :visible.sync="dialogFormVisible">
    
            </el-dialog>
        </div>
    </template>
    
    <script>
    export default {
        
        data() {
        
            return {
        
                activeIndex: '1',
                dialogFormVisible: false,
            };
        },
        methods: {
        
            handleSelect(key, keyPath) {
        
                console.log(key, keyPath);
                this.$router.push(key)
            },
            login() {
        
                this.dialogFormVisible = true;
    
                // 登录成功，把信息存localStorage
            },
            logout() {
        
    
                // 注销，清空localStorage
    
    
            }
        }
    }
    </script>
    
    <style>
    .el-menu-item.is-active,
    .el-menu-item:hover {
        
        background-color: #fc6363;
        color: #fff !important;
    }
    
    
    .text {
        
        font-size: 14px;
    }
    
    .item {
        
        margin-bottom: 18px;
    }
    
    .clearfix:before,
    .clearfix:after {
        
        display: table;
        content: "";
    }
    
    .clearfix:after {
        
        clear: both
    }
    
    
    .footer {
        
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        background-color: #f5f5f5;
        color: #999;
        font-size: 12px;
    }
    
    .el-row {
        
        margin-bottom: 20px;
    
        &:last-child {
        
            margin-bottom: 0;
        }
    }
    
    .el-col {
        
        border-radius: 4px;
    }
    
    
    .grid-content {
        
        min-height: 52px;
        background-color: #d4584b
    }
    </style>

![在这里插入图片描述][359deba37ba64a15b14918c2de77873c.png]

[359deba37ba64a15b14918c2de77873c.png]: https://img-blog.csdnimg.cn/359deba37ba64a15b14918c2de77873c.png