首页 > 其他分享 >010.绘制后台首页UI布局

010.绘制后台首页UI布局

时间:2022-12-07 22:46:49浏览次数:43  
标签:el color app height 010 UI 首页 Main

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>

 

标签:el,color,app,height,010,UI,首页,Main
From: https://www.cnblogs.com/LLL0617/p/16964769.html

相关文章

  • vscode配置arduino环境
    vscode配置arduino环境这里再补充下vscodearduino开发环境的设置。前期准备确保本地安装了arduino环境打开vscode,安装arduino扩展:添加配置配置arduino环境......
  • Java难点 | StringBuilder类/StringBuffer类
    StringBuilder类/StringBuffer类stringBuffer/strinaBuilder可以看做可变长度字符串。stringBuffer/stringBuilder初始化容量16.stringBuffer/stringBuilder是完成字符......
  • 企业微信首页返回退出应用
    router.beforeEach(async(to,from,next)=>{//alert(to.meta.keepAlive)letmark=to.fullPath.indexOf("code");if(mark!=-1&&from.fullPath.i......
  • 提供多种数据看板,瓴羊Quick BI全面提升企业可视化分析能力​
    近几年,随着“互联网+”在各行各业的深入发展,企业对于数据分析的需求愈发强烈,促使国内商业智能BI工具市场迎来了全面爆发。除了Tableau、微软PowerBI等外国品牌的BI工具外,擅......
  • atguigu8 集群
    0.集群介绍(1)集群的目标•高可用(HighAvailability),是当一台服务器停止服务后,对于业务及用户毫无影响。停止服务的原因可能由于网卡、路由器、机房、CPU负载过高、内存溢......
  • atguigu7 秒杀_分布式锁/分布式信号量_MQ_Sentinel (seckill)
    0.前言0.1秒杀架构:0.2分布式下定时任务问题:引入分布式锁秒杀商品上架时,不能多个服务同时上架,防止重复上架秒杀时,不能多个服务同时秒杀成功,防止重复秒杀0.3秒杀系统关注......
  • atguigu3 三级菜单/目录_分布式缓存/分布式锁(product/category)
    0.问题:使用分布式锁解决读模式缓存失效(缓存击穿)和写模式缓存一致性问题!!!公共代码:CategoryBrandRelationService.javapackagecom.atguigu.gulimall.product.service;import......
  • 北大OJ_1010题:STAMPS
    #include<iostream>#include<vector>#include<algorithm>usingnamespacestd;typedefvector<int>IntArray;#defineMAX_STAMP_N4//最大邮票数#defineM......
  • 为什么 egui 用立即模式?
    https://github.com/emilk/egui#why-immediate-mode 为什么立即模式egui是立即模式GUI库,与保留模式GUI库相对。保留模式和立即模式之间的区别最好用按钮的例子来说......
  • 网络安全测试神器——Burp Suite使用教程
    环境准备下载BurpsuitePro2022.2.2Jar文件、注册机、jdk私信助安社区公众号发送BP领取相关文件1、安装好jdk并配置好环境变量2、直接运行注册机:BurpLoaderKeygen.jar文......