1.主页

首先确定主页布局，要有上边栏侧边栏跟主体

1.1 上边栏

放一个logo在左侧，右侧放一个头像和注销的按钮（利用:offset、position和边框调整）

<上边栏><el-container><el-header class="el-header"><el-row><!--logo--><el-col :span="4" ><img src="../image/logo2.png" alt="" style="height: 50px"></el-col><!--头像--><el-col :offset="17" span="3"><img src="../image/1.jpg" alt="" style="height: 50px; border-radius: 100%; margin-top: 5px" class="headimg"><!--注销--><el-button class="button" type="primary"  round>注销</el-button></el-col></el-row></el-header>

1.2 侧边栏

实现几个功能页面的导航

<侧边栏><el-container><el-aside width="200px" class="el-aside"><el-menudefault-active="1"class="el-menu-vertical-demo"><el-menu-item index="1" @click="change('info.html')"><template slot="title"><el-menu-item index="1"><i class="el-icon-s-home"></i><span slot="title">主页</span></el-menu-item></template></el-menu-item><el-menu-item index="3" @click="page='user.html'"><i class="el-icon-user"></i><span slot="title" >住户管理</span></el-menu-item></el-menu></el-aside>

1.3 主体

用iframe实现动态显示不同页面

<主体><el-main class="el-main"><!--用来显示另一个页面,src前的冒号表示给src动态赋值--><iframe :src="page" style="border: 0px;margin: 0px;padding: 0px;width: 100%;height: 100%"></iframe></el-main></el-container></el-container>

1.4 实现动态改变页面的函数

change:function (val){console.log(val)this.page=val;
}

2.Info页面

主体默认显示的页面，分三个部分，上面三个色块，下面两个表格，一个为近期收费情况，一个为近期车位情况

2.1 住户总数

定义一个数据作为住户总数

new Vue({el:"#app",data:{householdCount:0,},
})

运用{{ }}将这个数据绑定到页面中某个元素上

<el-row :gutter="50" style="height: 100px ;margin-top: 20px;margin-bottom: 30px"><!--住户--><el-col :span=4 :offset="2" class="col" round><p>住户总数：{{householdCount}}</p></el-col>
</el-row>

定义函数获取该数据，

mounted:function (){
//只要页面加载就执行这个方法console.log("mounted")//发请求获取住户数量axios.get("/household/count").then(res=>{this.householdCount = res.data.dataconsole.log(res.data)}),
}

2.物业管理项目-主页相关推荐

入门干货之用DVG打造你的项目主页-Docfx、Vs、Github
由于这三项技术涉及到的要点以及内容较多,希望大家有空能自己挖掘一下更多更深的用法. 0x01.介绍 VS,即VS2017以及以上版本,宇宙最好的IDE,集成了宇宙最有前景的平台,前阶段也支持了宇宙最好 ...
Github的README中插入图片，Github仓库项目主页显示图片
Github仓库主页的 README.md 支持 MarkDown 文本,也支持图片显示.显示图片需要提供<img>标签,这个链接可以位于其他服务器上,也可以是GitHub自身的仓库文件. ...
murmurhash2 Python实现（复现开源项目主页上的 Murmurhash2）
文章目录 1. 简介 1. 原始版本的murmurhash2算法(Google Code 的 Murmurhash 开源项目主页上的 Murmurhash2) 2. Python版 1. 简介 Mur ...
Vue开发实例（05）之搭建项目主页面头部、导航、主体等页面布局
作者简介作者名:编程界明世隐简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
vue怎么引入外部地址_vue系列教程之微商城项目|主页
本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 轮播图 1.引入轮播图组件 main.js 2.新建轮播图组件 components/zhuye/s ...
war项目主页跳转找不到_找不到优秀的开源项目？快来看看 11 月入选的码云 GVP...
GVP ( Gitee Most Valuable Project ) – 码云最有价值开源项目计划是码云综合评定出的优秀开源项目的展示平台.GVP 项目的评选既要满足客观的硬指标,还需要通过评委会 ...
java代码没错却运行不了_Java代码没错误,tomcat能正常运行，但是我的项目主页却一直显示不了，显示404错误...
重新在别人的电抄脑上配置一次环境变量bai 配置环境变量点击du计算机->高级系zhi统设置->环境变量dao-> 在第一个中新建一个变量:classpath 值:.;(记住是分 ...
vue系列教程之微商城项目|主页
本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 轮播图 1.引入轮播图组件 main.js 2.新建轮播图组件 components/zhuye/s ...
Vue前端项目-主页布局-左侧导航菜单（静态）
目录 1.修改侧边栏组件 2.滚动条样式 3.导入并使用组件实现效果: NavMenu 的详细用法: https://element.eleme.cn/#/zh-CN/component/menu ...

2.物业管理项目-主页

1.主页

1.1 上边栏

1.2 侧边栏

1.3 主体

1.4 实现动态改变页面的函数

2.Info页面

2.1 住户总数

2.物业管理项目-主页相关推荐

最新文章

热门文章