后台页制作01《ivx低代码签到系统制作》

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/

一、签到系统思考

签到系统一般是指公布一个签到链接或者二维码,随后用户扫码后即可完成签到。

那如何制作呢?首先我们可以先不考虑签到页面的制作,既然签到暂时没有头绪,那咱们可以从创建一个签到开始。

创建一个签到那么需要一个后台,那咱们就先制作一个后台页。

二、后台首页制作

咱们首先制作一个后台,后台首页示例如下:
在这里插入图片描述
我们的签到主要是有3个功能,一个是用户完成签到、后台可以发布签到以及后台管理员对签到进行核实,核实完毕后那么即可表示当前签到是正确没问题的。

那接下来我们就开始制作这个后台签到页。

进入编辑器后,点击相对应用项目,创建一个相对应用,签到系统咱们使用相对定位来制作。进入页面后点击前台,创建一个页面并且重命名签到系统后台:
在这里插入图片描述
接着在这个签到系统后台创建一个行,命名为头部,咱们制作头部标题区域:

在这里插入图片描述

从示例中我们可以得知,当前示例的头部区域的文本跟整个行之间是有一定距离的:
在这里插入图片描述
要完成这个功能需要设置这个行的上下左右边距,或者可以直接设置当前行的高度,随后给与水平和垂直方向居中即可,在这里咱们使用第二个方法,设置高度后水平和垂直方向居中,在此还需要给与一个对应的背景色:
在这里插入图片描述
接着往里面添加一个文本,设置这个文本的内容为签到系统后台即可:
在这里插入图片描述
接着再到当前页面之下创建一个行命名为菜单:
在这里插入图片描述
该行需要撑开当前高度,并且设置他的背景色为透明:
在这里插入图片描述
随后咱们制作当前菜单航中的主要内容:
在这里插入图片描述
很明显这个是一个列就可以完成,创建一个列,命名为操作内容:
在这里插入图片描述
在这个操作内容列之中创建两个元素,一个是图片,还有一个是文本:
在这里插入图片描述
那么此时还不能完成如果所示的显示效果,此时再设置当前列的内容,这是当前操作内容列的高宽为100px,并且使其水平和垂直居中即可:
在这里插入图片描述
随后复制多个内容梗概图片和文本即可:
在这里插入图片描述
你有可能会出现图片显示过大情况,此时需要设置图片的宽度:
在这里插入图片描述
否则超过父容器宽,肯定会显示在外的。

三、创建发布页面

后台首页有了之后再创建一个发布页面:
在这里插入图片描述
发布页面参考如下:
在这里插入图片描述
发布页面整体布局跟首页类似,我们此时把标题复制过来后修改一下文本即可:
在这里插入图片描述
接着由于我们没有做返回菜单,那么此时添加一个菜单选项,返回首页即可:
在这里插入图片描述
我们还可以在操作内容处添加一个事件,这个事件为跳转页面事件,点击后跳转到系统后台首页即可:
在这里插入图片描述

接着创建一个行命名为签到信息:
在这里插入图片描述
在这里需要设置这个行的高度为撑开,之后的签到内容咱们都添加在这个行之内,当然还需要设置他的内容水平对齐,方便接下来的排版:
在这里插入图片描述
接着创建一个行,命名为发布名,在内部添加对应签到名称输入框:
在这里插入图片描述
接着添加一个行命名为签到时间,在这里添加一个按钮和一个时间选择器:
在这里插入图片描述
同理再创建两个行分别添加对应内容即可:
在这里插入图片描述

此时按钮时靠右显示的,我们需要设置对应的水平对齐为右即可:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286077.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

个人作业-Week2

第一部分 调研, 评测 运行平台 win 8 软件版本:微软必应词典桌面版 3.5.2 BUG标题:必应背单词无法发音 BUG详细描述:如图,左边为必应词典该单词的搜索,可以发音,而右边必应背单词中该单词的发音…

Blazor WebAssembly + Grpc Web=未来?

Blazor WebAssembly是什么首先来说说WebAssembly是什么,WebAssembly是一个可以使C#,Java,Golang等静态强类型编程语言,运行在浏览器中的标准,浏览器厂商基于此标准实现执行引擎。在实现了WebAssembly标准引擎之后,浏览器中可以执行…

Can't create directory 'E:\Repositories\***\db\transactions\138-41.txn':

遇到这种问题应该是迁移SVN库时丢失了文件夹引起的,直接在服务器上找到对应项目的db文件夹,手动创建“transactions”目录和“txn-protorevs”目录即可正常提交。

【MATLAB统计分析与应用100例】案例013:matlab读取Excel数据,调用nlinfit函数作一元非线性回归

1. 一元线性回归分析效果预览 2. matlab完整实现代码 %读取数据,绘制散点图** HeadData = xlsread(examp08_02.xls); %从Excel文

发布功能完成02《ivx低代码签到系统制作》

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一、发布功能思考、数据库、服务创建 上一节我们制作了后台的页面,那么此时我们应该需要制作发布功能了,那么在制作之前,我们应该思考一下如何制作这个签到内容发布的…

WPF 实现简易北京地铁效果图

本文经原作者授权以原创方式二次分享,欢迎转载、分享。原文作者:眾尋原文地址: https://www.cnblogs.com/ZXdeveloper/p/8600785.html前言这个是百度地图上北京地铁的地址,我们先看下百度上面的效果图;我要实现的内容比…

C#学习笔记-Windows窗体自定义初始位置

根据屏幕大小定义初始位置: (这个不是难,但是最近常常忘记,记着方便查看。) 1 //获取当前屏幕的长和宽2 int ScreenX Screen.PrimaryScreen.Bounds.Width;3 int ScreenY Screen…

【MATLAB统计分析与应用100例】案例014:matlab读取Excel数据,调用stepwise函数作交互式逐步回归分析

文章目录 1. 交互式逐步回归分析结果预览2. 完整matlab代码1. 交互式逐步回归分析结果预览 2. 完整matlab代码 % 从Excel文件examp08_03.xls中读取数值型数据 xydata = xlsread(examp08_03.xls); y = xydata<

MsSql 自定义分数段,按分数段统计考试人次

--分数段分布 DECLARE levels VARCHAR(100) 10,20,30,40,50,60,70,80,90,100; --自定义分数段 DECLARE paperId VARCHAR(100)0000000000001019--试卷编号 WITH tbTemp AS (--处理分数段SELECT L.levelFROM (SELECT [value] CONVERT(XML, <v> REPLACE(levels, ,, &l…

opencv---颜色空间转化并实现物体跟踪

一、图像处理的基本操作 因为这是第一篇写opencv的笔记&#xff0c;故先讲讲在python下写opencv的基本操作。总共总结了三点如下&#xff1a; 开头一定要加编码声明:-*- coding: utf-8 -*-python下记得引入opencv模块:import cv2要知道如何读取并展示图片,代码如下:# -*- codin…

签到功能完成03《ivx低代码签到系统制作》

制作iVX 低代码项目需要进入在线IDE&#xff1a;https://editor.ivx.cn/ 一、签到页制作 上一节完成了签到内容的发布&#xff0c;那我们接下来如何制作一个签到页面并且签到呢&#xff1f; 此时我们先创建一个页面叫做签到二维码页面&#xff1a; 随后直接预览这个页面&am…

System.CommandLine参数Argument

前两篇说到Command和Option&#xff0c;这篇说说Argument。Argument的用法和Option很像&#xff0c;只是他的构造和属性有些差别&#xff0c;再就是在运行输入时有区别&#xff0c;接下来看看实现。一个参数//创建根命令 var rootCommand new RootCommand("这是一个命令行…

Kotlin和Java混合开发总结(基于Kotlin1.3.0版本)

我本来是不想学习kotlin的&#xff0c;但是现在的形势&#xff0c;很多公司都在使用kotlin开发&#xff0c;可以说学会kotlin也是无奈之举&#xff0c;既然是潮流&#xff0c;谷歌也在大力推广&#xff0c;所以还是只能硬着头皮逼迫自己学一下&#xff0c;也能更快适应公司的需…

【MATLAB统计分析与应用100例】案例015:matlab读取Excel数据,进行值聚类分析

1. 聚类分析轮廓图 2. matlab完整代码 %*****计算例9.1的距离矩阵 x = [1, 2, 6, 8, 11];

01超精美渐变色动态背景完整示例【CSS动效实战(纯CSS与JS动效)】

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 本节案例如下&#xff08;其他动效篇幅原因逐步讲解&#xff0c;欢迎三…

Liferay 用本地私服(nexus) 打包部署Portlet应用

当我们使用搭建一个nexus本地仓库&#xff0c;并且配置settings.xml来让应用启用这个仓库。我们使用Liferay 6.1.10的archetype来创建liferay portlet, 如下图&#xff1a; 当我们运行命令mvn package liferay:deploy时&#xff0c;会出现以下错误&#xff1a; [DEBUG] Using c…

【MATLAB统计分析与应用100例】案例016:matlab读取Excel数据,进行样品系统聚类分析

1. 聚类分析结果 2. matlab完整代码 (1)读取数据,并进行标准化 [X,textdata] = xlsread(examp09_02.xls); % 从Excel文件中读取数据 X = zscore(X

解决React Native报错:Error:Found unexpected optical bounds (red pixel)

问题背景 同样是在升级 gradle plugin V2.2.3 --> gradle plugin V3.0.1后&#xff0c;运行至打包APK期间报错&#xff1a; Error:found unexpected optical bounds (red pixel) on top border at x14.&#xff08;错误&#xff1a;在X14的上边框上发现意外的光学边界&am…

webpack 入门

什么是WebPack&#xff0c;为什么要使用它&#xff1f; 为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用&#xff0c;它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度&#xff0c;前端社区涌现出了很多好的实践方法 模块化&#xff0c;让我…

使用vsftp虚拟用户实现安全访问控制

一、ftp连接方式 1、命令连接 ftp在与用户交互时&#xff0c;首先打开的是TCP的21号端口&#xff0c;建立命令连接&#xff0c;这个连接会始终存在&#xff0c;直到用户输入bye的那一刻&#xff0c;才断开命令连接。 2、数据连接 1&#xff09;主动连接 主动连接是基于TCP21号端…