vue学习
最近学习了vue和element，根据之前的项目写了写前端
<head>
<meta charset="UTF-8">
<title>差旅费管理系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" class="main-container">
<!-- 顶部导航栏 -->
<el-menu
:default-active="activeIndex"
class="top-menu"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
style="display: flex; justify-content: space-between; align-items: center; padding: 0;">
<!-- 左边标题 -->
<div style="font-size: 25px; font-weight: bold; padding-left: 20px; flex: 0px">欢迎你</div>
<!-- 右边菜单 -->
<div style="display: flex; align-items: center; padding-right: 20px;">
<el-menu-item index="1">
<a href="#" target="_blank">修改密码</a>
</el-menu-item>
<el-menu-item index="2">
<a href="#" target="_blank">退出登录<i class="el-icon-switch-button"></i></a>
</el-menu-item>
</div>
</el-menu>
<!-- 主体内容 -->
<div class="main-content">
<!-- 左侧菜单栏 -->
<el-menu
default-active="activeMenu"
class="left-menu"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
style="height: 100%; overflow-y: auto;"
@select="handleMenuSelect">
<el-menu-item index="home">
<i class="el-icon-house"></i>
<span>首页</span>
</el-menu-item>
<el-submenu index="trip">
<template slot="title">
<i class="el-icon-location"></i>
<span>审批管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="tripManagement">审批出差申请</el-menu-item>
<el-menu-item index="remBurManagement">审批报销记录</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>差旅费花费情况</span>
</template>
<el-menu-item-group>
<el-menu-item index="selectRemBur">查看员工报销费用</el-menu-item>
<el-menu-item index="selectTotalRemBur">统计部门年度报销费用</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
浙公网安备 33010602011771号