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

一、签到系统思考

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

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

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

二、后台首页制作

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

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

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

在这里插入图片描述

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

三、创建发布页面

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

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

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

Logo

低代码爱好者的网上家园

更多推荐