微人事-title制作

这里写目录标题

home页使用的布局
个人中心的下拉菜单

home页使用的布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  // 将index默认的内边距外边距设置为0
  <body style="margin: 0px;padding: 0px">
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

在这里插入图片描述

个人中心的下拉菜单

在这里插入图片描述

<template>
    <div>
        <el-container>
            <el-header class="homeHeader">
                <div class="title">微人事</div>
                <el-dropdown class="userInfo" @command="commandHandler">
                    <span class="el-dropdown-link">{{user.name}}<i>
                        <img :src="user.userface" alt="">
                    </i></span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
                        <el-dropdown-item command="setting">设置</el-dropdown-item>
                        <el-dropdown-item command="logout" divided>注销登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-container>
                <el-aside width="200px">Aside</el-aside>
                <el-main>Main</el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
            return{
                // window.sessionStorage.getItem("user")返回的是一个字符串使用不方便，所以使用json.parse转成json对象
                //  因为data的配置 所以span就可以直接写user.name
                user:JSON.parse(window.sessionStorage.getItem("user"))
            }
        },
        methods:{
            /*    使用command做标记，当点击到哪一个的时候哪一个就会响应到cmd上触发回调*/
            commandHandler(cmd) {  //该方法有一个参数，cmd
                if (cmd == 'logout') {
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.getRequest("/logout");
                        window.sessionStorage.removeItem("user")
                        this.$router.replace("/");
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
            }
        }
    }
</script>

<style>
    .homeHeader{
        background-color: #006eff;
        display: flex;
         /*竖直方向居中*/
        align-items: center;
        justify-content: space-between;
        padding: 0px 15px;
        box-sizing: border-box;
    }
    .homeHeader .title{
        font-size: 30px;
        font-family: 华文行楷;
        color: #ffffff;
    }
/*将下拉框的鼠标变成手指*/
/*    下拉框的disabled是禁用的，divided是有分割线*/
    .homeHeader .userInfo{
        cursor: pointer;
    }
    .el-dropdown-link img{
        height: 48px;
        width: 48px;
        border-radius: 24px;
        margin-left: 8px;
    }
    .el-dropdown-link {
        display: flex;
        align-items: center;
    }

</style>

在这里插入图片描述

这里写目录标题

home页使用的布局

个人中心的下拉菜单

猜你喜欢