010.绘制后台首页UI布局
1.index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>慕课网办公OA系统</title> <!-- 引入样式 --> <link rel="stylesheet" type="text/css" href="assets/element-plus/index.css"> <!-- 引入组件库 --> <script src="/assets/vue/vue.global.js"></script> <script src="/assets/element-plus/index.full.js"></script> <script src="/assets/axios/axios.js"></script> <style> .el-header { background-color: rgb(238, 241, 246); color: #333; line-height: 60px; } html,body,#app,.el-container { padding: 0px; margin: 0px; height: 100%; max-height: 100%; } </style> </head> <body> <div id="app"> <el-container style="height:100%;border:1px solid #eee"> <el-header> 我是Header </el-header> <el-container> <el-aside width="200px" style="max-height:100%;background-color: rgb(238, 241, 246)"> 我是功能区 </el-aside> <el-main> <iframe id="main" name="main" src="http://www.baidu.com" style="width:100%;height:95%;border: 0px"></iframe> </el-main> </el-container> </el-container> </div> <script> const Main = { data(){ return {} } }; const app = Vue.createApp(Main); app.use(ElementPlus); app.mount("#app"); </script> </body> </html>