当前位置: 首页 > news >正文

微信小程序会议OA系统

Flex弹性布局

Flex弹性布局是一种 CSS3 的布局模式,也叫Flexbox。它可以让容器中的元素按一定比例自动分配空间,使得它们在不同宽度、高度等情况下仍能保持整齐和密集不间隙地排列。

在使用Flexbox弹性布局时,首先需要创建一个容器和若干个子元素。容器的属性display需要设置为flex或inline-flex以启用Flexbox布局。而子元素的属性则需要使用弹性属性,如flex-grow、flex-shrink、flex-basis等来控制它们的自适应性和布局方式。

Flexbox弹性布局的优点在于它可以轻松处理不同屏幕尺寸和方向的布局问题,使得网页设计更加灵活和自适应。同时,它也可以很好地结合其他CSS属性和技术,如媒体查询、响应式图片等,来实现更加丰富和复杂的网页设计效果。

Flexbox

布局的语法网站:https://www.runoob.com/w3cnote/flex-grammar.html

Flexbox提供了一系列的CSS属性,用于控制容器和项目的行为。以下是一些常用的属性:

  1. display: 定义一个容器是flex或inline-flex布局。

  2. justify-content: 用来定义项目在主轴上的对齐方式,可以设置的值包括:flex-start, flex-end, center, space-between, space-around。

  3. align-items: 用来定义项目在交叉轴上的对齐方式,可以设置的值包括:flex-start, flex-end, center, baseline, stretch。

  4. flex-direction: 用来定义主轴的方向,可以设置的值包括:row, row-reverse, column, column-reverse。

  5. flex-wrap: 用来定义多行排列时,是否换行,可以设置的值包括:nowrap, wrap, wrap-reverse。

  6. align-content: 用来定义多行排列间的对齐方式,可以设置的值包括:flex-start, flex-end, center, space-between, space-around, stretch。

  7. flex: 项目的综合属性,包括flex-grow, flex-shrink, flex-basis三个属性,用来控制项目在容器中的尺寸和自适应性。

除了以上属性外,Flexbox还提供了一些其他的属性,如order、align-self、flex-flow等,用于更加细致地控制项目的排列和布局。

图片解析:

Flex弹性布局具有以下特点:

  1. 容器内的项目可以沿着主轴和交叉轴自由排列,控制项目的排列和布局非常灵活。

  2. 容器的尺寸可以根据其中的项目自适应变化,适用于响应式设计。

  3. 可以控制项目在主轴和交叉轴上的对齐方式,适用于排版和布局。

  4. 可以通过简单的属性和值的组合实现复杂的布局。

  5. 支持多行排列,可以用来实现栅格布局等网页布局方案。

  6. 可以通过flex-grow、flex-shrink、flex-basis等属性控制项目的尺寸和自适应性。

总之,Flex弹性布局是现代网页设计中非常流行的一种布局方式,具有强大的控制能力和灵活的布局特性,可以帮助开发者实现各种复杂的排版和布局需求。

flex-wrap属性

nowrap(默认):不换行。

wrap:换行,第一行在上方。

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

代码如下
list.wxss
/* pages/vote/list/list.wxss */
.box{height: 750rpx;width: 750rpx;background-color: aquamarine;display: flex;/* flex-direction: column-reverse; */flex-wrap: wrap;/* flex-flow: row wrap; *//* justify-content: flex-end; */align-items: flex-end;
}
view{height: 180rpx;width: 100rpx;border: 1px solid red;
}

 OA会议首页

点击我们的Shift+Alt+R,选择我们的显示资源管理器,将我们的static静态资源复制到存放代码的区间中

app.json
{"pages": ["pages/index/index","pages/meeting/list/list","pages/vote/list/list","pages/ucenter/index/index","pages/logs/logs"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "/static/tabBar/coding.png","selectedIconPath": "/static/tabBar/coding-active.png"},{"pagePath": "pages/meeting/list/list","iconPath": "/static/tabBar/sdk.png","selectedIconPath": "/static/tabBar/sdk-active.png","text": "会议"},{"pagePath": "pages/vote/list/list","iconPath": "/static/tabBar/template.png","selectedIconPath": "/static/tabBar/template-active.png","text": "投票"},{"pagePath": "pages/ucenter/index/index","iconPath": "/static/tabBar/component.png","selectedIconPath": "/static/tabBar/component-active.png","text": "设置"}]},"style": "v2","sitemapLocation": "sitemap.json"
}
index.js 

// 获取应用实例
const api = require("../../config/api")
// pages/meeting/list/list.js
Page({/*** 页面的初始数据*/data: {imgSrcs:[],lists: [{"id": "1","image": "/static/persons/1.jpg","title": "对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】","num":"304","state":"进行中","starttime": "2022-03-13 00:00:00","location": "深圳市·南山区"},{"id": "1","image": "/static/persons/2.jpg","title": "AI WORLD 2016世界人工智能大会","num":"380","state":"已结束","starttime": "2022-03-15 00:00:00","location": "北京市·朝阳区"},{"id": "1","image": "/static/persons/3.jpg","title": "H100太空商业大会","num":"500","state":"进行中","starttime": "2022-03-13 00:00:00","location": "大连市"},{"id": "1","image": "/static/persons/4.jpg","title": "报名年度盛事,大咖云集!2016凤凰国际论坛邀您“与世界对话”","num":"150","state":"已结束","starttime": "2022-03-13 00:00:00","location": "北京市·朝阳区"},{"id": "1","image": "/static/persons/5.jpg","title": "新质生活 · 品质时代 2016消费升级创新大会","num":"217","state":"进行中","starttime": "2022-03-13 00:00:00","location": "北京市·朝阳区"}]},/*** 生命周期函数--监听页面加载*/onLoad(options) {
this.loadSwiperImgs()},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {},loadSwiperImgs(){let that=this;wx.request({url: api.SwiperImgs,dataType: 'json',success(res) {console.log(res)that.setData({imgSrcs:res.data.images})}})}
})
 index.wxml
<!--index.wxml--><view><swiper autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="#00f"><block wx:for="{{imgSrcs}}" wx:key="text"><swiper-item><view><image src="{{item.img}}" class="swiper-item" /></view></swiper-item></block></swiper>
</view>
<view class="mobi-title"><text class="mobi-icon"></text><text>会议信息</text>
</view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id"><view class="list" data-id="{{item.id}}"><view class="list-img"><image class="video-img" mode="scaleToFill" src="{{item.image}}"></image></view><view class="list-detail"><view class="list-title"><text>{{item.title}}</text></view><view class="list-tag"><view class="state">{{item.state}}</view><view class="join"><text class="list-num">{{item.num}}</text>人报名</view></view><view class="list-info"><text>{{item.location}}</text>|<text>{{item.starttime}}</text></view></view></view>
</block>
<view class="section bottom-line"><text>到底啦</text>
</view>

 JSON
{"data": {"images":[{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png","text": "1"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png","text": "2"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png","text": "3"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png","text": "4"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png","text": "5"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png","text": "6"}
]},"statusCode": "200","header": {"content-type":"applicaiton/json;charset=utf-8"}
}
 index.wxss
page{height: 100%;background-color:#efeff4;
}
.swiper-item {height: 350rpx;width: 100%;border-radius: 10rpx;
}
.mobi-title{
font-size: 18px;
margin: 10rpx;
}
.mobi-icon{background-color: red;padding: 3rpx;
}
.mobi-title text{margin-left: 10rpx;
}
.list{
background-color: #fff;
display: flex;
margin:10rpx;
padding:10rpx;
}
.list-img,.video-img{
height: 150rpx;
width: 150rpx;
}
.list-img{margin:30rpx 0 0 0 ;
}
.list-detail{
margin:0 0 0 10rpx;
}
.list-title{
font-weight: 700;
}
.list-tag{
display: flex;
margin: 10px 0 ;
}
.state{
border: 3px  solid lightblue;
padding: 2px;
color: lightblue;
}
.join{border: 3px  solid #fff;padding: 2px;margin: 0 0 0 20rpx;color:gray;
}
.list-num{
color: red;
}
.list-info{color:gray;
}
.bottom-line{text-align: center;
margin-bottom: 10px;
}

相关文章:

微信小程序会议OA系统

Flex弹性布局 Flex弹性布局是一种 CSS3 的布局模式&#xff0c;也叫Flexbox。它可以让容器中的元素按一定比例自动分配空间&#xff0c;使得它们在不同宽度、高度等情况下仍能保持整齐和密集不间隙地排列。 在使用Flexbox弹性布局时&#xff0c;首先需要创建一个容器和若干个…...

CICD:Circle CI 实现CICD

持续集成解决什么问题 提高软件质量效率迭代便捷部署快速交付、便于管理 持续集成&#xff08;CI&#xff09; 集成&#xff0c;就是一些孤立的事物或元素通过某种方式集中在一起&#xff0c;产生联系&#xff0c;从而构建一个有机整体的过程。 持续&#xff0c;就是指长期…...

竞赛 深度学习YOLO安检管制物品识别与检测 - python opencv

文章目录 0 前言1 课题背景2 实现效果3 卷积神经网络4 Yolov55 模型训练6 实现效果7 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习YOLO安检管制误判识别与检测 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&…...

【华为OD机试python】斗地主之顺子【2023 B卷|100分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 在斗地主扑克牌游戏中, 扑克牌由小到大的顺序为:3,4,5,6,7,8,9,10,J,Q,K,A,2, 玩家可以出的扑克牌阵型有:单张、对子、顺子、飞机、炸弹等。 其中顺子的出牌规则为:由至少5张由小到大…...

ant design DatePicker禁用之前的时间

1、代码 <DatePicker fieldProps{disabledDate: (current: any) > {return current < moment().startOf(day);}}/>2、效果...

C语言---预处理详解

1.预定义符号 在C语言中有一些内置的预定义符号 __FILE__ __LINE__ __DATE__ __TIME__ __STDC__//进行编译的源文件 //文件当前的行号 //文件被编译的日期 //文件被编译的时间 //如果编译器遵循ANSI C&#xff0c;其值为1&#xff0c;否则未定义 编译器在__STDC__报错,说明,v…...

数组和对象有什么区别?

数组&#xff08;Array&#xff09;和对象&#xff08;Object&#xff09;是两种不同的数据结构&#xff0c;它们在使用和表示数据上有一些区别。 1&#xff1a;数组&#xff08;Array&#xff09;&#xff1a; 有序集合&#xff1a;数组是一个有序的数据集合&#xff0c;每个…...

顺序表(第二节)实现和解析

目录 1.顺序表中的头文件 &#xff08;每一种函数方法&#xff09; 2.关于typedef 的用法 3.初始化和销毁表 3.1初始化表 3.2销毁表 4.打印表 5.自动扩容表&#xff01;&#xff01;&#xff01;&#xff08;重点&#xff09; 6.头部插入表和尾部插入表 6.1尾部插入表 …...

Hadoop3教程(二十一):MapReduce中的压缩

文章目录 &#xff08;123&#xff09;压缩概述在Map阶段启用在Reduce阶段启用 &#xff08;124&#xff09;压缩案例实操如何在Map输出端启用压缩如何在Reduce端启用压缩 参考文献 &#xff08;123&#xff09;压缩概述 压缩也是MR中比较重要的一环&#xff0c;其可以应用于M…...

04、RocketMQ -- 核心基础使用

目录 核心基础使用1、入门案例生产者消费者 2、消息发送方式方式1&#xff1a;同步消息方式2&#xff1a;异步消息方式3&#xff1a;一次性消息管控台使用过程中可能出现的问题 3、消息消费方式集群模式&#xff08;默认&#xff09;广播模式 4、顺序消息分析图&#xff1a;代码…...

mysql中date/datetime类型自动转go的时间类型time.Time

在DSN中需要加入parseTimetrue&&locLocal&#xff0c;或 charsetutf8mb4&locAsia%2FShanghai&parseTimetrue。 package main_testimport ("database/sql""fmt""testing""time"_ "github.com/go-sql-driver/mysq…...

MATLAB算法实战应用案例精讲-【图像处理】机器视觉(基础篇)

目录 前言 几个高频面试题目 如何选择合适的面扫相机 如何选择光学滤波器 知识储备...

LDAP协议工作原理

LDAP&#xff0c;全称Lightweight Directory Access Protocol&#xff0c;译为轻量目录访问协议&#xff0c;是一个在互联网中广泛使用的协议&#xff0c;主要用于实现网络中的信息查找和检索。在身份认证方面&#xff0c;LDAP起着重要的作用。 LDAP的工作原理主要包括以下几个…...

【Jetpack Compose】BOM是什么?

前言 本篇旨在帮助小伙伴们了解和使用Compose中BOM相关的知识&#xff0c;在Compose的开发过程中更加便捷、统一的管理相关依赖信息。 BOM基础知识 Compose推出的BOM为物料清单的意思&#xff0c;BOM全称为Bill Of Materials&#xff0c;Compose推出BOM的意义旨在通过指定的…...

多域名SSL数字证书是什么呢

多域名SSL数字证书是众多SSL数字证书中最灵活的一款SSL证书产品。一般一张SSL证书只能保护一个域名&#xff0c;即使能保护多个域名站点&#xff0c;证书保护的域名类型也有限制(通配符SSL数字证书)。多域名SSL数字证书既能用一张SSL证书保护多个域名网站&#xff0c;又不限制域…...

杭电oj--求奇数的乘积

Problem Description 给你n个整数&#xff0c;求他们中所有奇数的乘积。 Input 输入数据包含多个测试实例&#xff0c;每个测试实例占一行&#xff0c;每行的第一个数为n&#xff0c;表示本组数据一共有n个&#xff0c;接着是n个整数&#xff0c;你可以假设每组数据必定至少存…...

E053-web安全应用-Brute force暴力破解初级

课程分类&#xff1a; web安全应用 实验等级: 中级 任务场景: 【任务场景】 小王接到磐石公司的邀请&#xff0c;对该公司旗下的网站进行安全检测&#xff0c;经过一番检查发现该论坛的后台登录页面上可能存在万能密码漏洞&#xff0c;导致不知道账号密码也能登录后台&am…...

外汇天眼;VT Markets 赞助玛莎拉蒂MSG Racing电动方程式世界锦标赛

随着国际汽联电动方程式世界锦标赛第十赛季的到来&#xff0c;外汇经纪商 VT Markets 和玛莎拉蒂 MSG Racing 宣布了一项为期多年的全球合作。 外汇天眼温馨提醒&#xff1a;在做外汇交易之前&#xff0c;一定要审核清楚外汇平台的资质以及官网信息&#xff0c;以防上当受骗&am…...

使用vscode + vite + vue3+ element3 搭建vue3脚手架

技术栈 开发工具&#xff1a;VSCode 代码管理&#xff1a;Git 前端框架&#xff1a;Vue3 构建工具&#xff1a;Vite 路由&#xff1a;vue-router 状态管理&#xff1a;vuex AJAX&#xff1a;axios UI库&#xff1a;element-ui 3 数据模拟&#xff1a;mockjs css预处理&#xf…...

竞赛 深度学习+opencv+python实现车道线检测 - 自动驾驶

文章目录 0 前言1 课题背景2 实现效果3 卷积神经网络3.1卷积层3.2 池化层3.3 激活函数&#xff1a;3.4 全连接层3.5 使用tensorflow中keras模块实现卷积神经网络 4 YOLOV56 数据集处理7 模型训练8 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &am…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...