【微信小程序】无纸化会议OA系统之首页搭建(上)

简介: 【微信小程序】无纸化会议OA系统之首页搭建(上)

前言


中国政府意识到信息技术的重要性,并开始积极推动信息产业的发展。一系列政策和措施被制定和执行,以促进信息技术的采用和普及,从而推动数字化时代的到来。为了响应国家推行的数字化时代,本篇文章以会议OA系统为背景进行编写。


一、Flex弹性布局


布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。


1.Flex布局是什么?

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局

.box{
  display: flex;
}


行内元素也可以使用Flex布局。

.box{
  display: inline-flex;
}


Webkit内核的浏览器,必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}


注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。


2.基本概念

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

e4b2736c37f3476482aa27a317ee9e21.png

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。


项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。


3.容器的属性

以下6个属性设置在容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content


3.1 flex-direction属性

flex-direction属性决定主轴的方向(即项目的排列方向)。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}


fe13a2574d934fbf862d0a73d557fb45.png


它可能有4个值。

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。


3.2 flex-wrap属性

默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

d3e65847e825407fbeadf9b30552829c.png

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

(1)nowrap(默认):不换行。

3e24660d9ce64fd88aa08ecb239f6a26.png

(2)wrap:换行,第一行在上方。

556a12e0824f433a95a2b96199f2f2f6.png

(3)wrap-reverse:换行,第一行在下方。

8fdd4fc35e2d4fb3aee43a31ed759ff0.png


3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}


3.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

bd90b2bb574f4593ac7be5f7f1dde569.png

它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。


3.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

0d1b9d3b8b694a4490277d19ac8cf377.png

它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。


3.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

aa3f51effeb6499fbad651a9ff0b29fd.png

该属性可能取6个值。

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。
目录
相关文章
|
24天前
|
数据安全/隐私保护
点晴OA办公系统让企业变得高效协同
随着企业信息化进程的加快,很多企业开始寻求使用企业管理免费OA办公系统来提高工作效率。然而,有些些企业可能缺乏信息化经验,对技术一无所知,甚至从未接触过OA办公系统。在这种情况下,企业需要寻求功能比较全面的OA办公系统,以满足企业的实际需求。
34 1
|
14天前
|
敏捷开发 数据可视化 数据挖掘
哪些OA任务管理系统值得推荐?4款高效办公工具介绍
在现代企业中,OA(办公自动化)任务管理系统是提升工作效率和团队协作的关键工具。本文介绍了4款备受推崇的OA任务管理系统:板栗看板、Trello、Asana和Monday.com,分别从提高工作效率、增强团队协作、优化资源分配和提升工作质量等方面进行了详细说明,为用户提供全面的参考和选择指南。
|
19天前
|
存储 安全 数据安全/隐私保护
如何明智选择免费OA系统的关键因素
在数字化办公日益普及的今天,选择一款合适的免费OA系统对于企业提升工作效率和管理水平至关重要。不管是办公的便捷方便,还是与其他平台的融合,免费OA系统的选择,需要看这几点,易用性、开放性、稳定性、服务性、实用性、安全性。
13 0
|
2月前
|
搜索推荐 BI 数据处理
点晴OA系统让考勤管理不再头疼
在当今数字化管理趋势下,点晴OA办公系统中的考勤管理作为企业内部管理的重要组成部分,其自动化和智能化水平的提高在提高企业运营效率和员工满意度方面发挥着重要作用。
52 4
|
3月前
|
Java uml
某OA系统需要提供一个假条审批的模块,如果员工请假天数小于3天,主任可以审批该请假条;如果员工请假天数大于等于3天,小于10天,经理可以审批;如果员工请假天数大于等于10天,小于30天,总经理可以审批
该博客文章通过一个OA系统中的请假审批模块示例,使用Java语言实现了职责链模式,展示了如何根据不同的请假天数由不同级别的领导进行审批,并讨论了职责链模式的优缺点。
某OA系统需要提供一个假条审批的模块,如果员工请假天数小于3天,主任可以审批该请假条;如果员工请假天数大于等于3天,小于10天,经理可以审批;如果员工请假天数大于等于10天,小于30天,总经理可以审批
|
2月前
|
数据安全/隐私保护 UED
免费OA办公系统的实力派:点晴OA
点晴OA办公系统是一款面向中小企业的办公自动化解决方案,旨在提高工作效率和优化管理流程。它通过提供多维度的功能模块结构、高度的定制化能力、友好的用户界面以及安全可靠的数据保护机制,满足企业日常办公的多样化需求。以下是关于点晴OA办公系统的详细介绍:
77 0
|
3月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量,可以实现跟随系统主题的界面风格切换。
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
|
3月前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会,分享了学习基础知识、实战项目开发的过程,以及小程序开发的易上手性和开发周期的简短。
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
|
3月前
|
JavaScript 前端开发 搜索推荐
【Vue 2】一个功能强大OA办公系统,开源且免费!!
【Vue 2】一个功能强大OA办公系统,开源且免费!!
|
3月前
|
监控 数据安全/隐私保护
点晴OA系统,有效提升企业办公效率落实执行力
点晴OA系统通过其独特的功能和优势,有效提升了企业的办公效率并落实了执行力。以下是关于点晴OA系统提升企业办公效率及执行力的相关信息:
60 0