后台页制作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标准引擎之后,浏览器中可以执行…

C语言试题五十二之学生的记录由学号和成绩组称个,n名大学生得数据已在主函数中放入结构体数组a中,请编写函数fun,它的功能时:按分数的高低排列学生的记录,高分在前。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

Xtrabackup备份MySQL

一、安装Xtrabackup 1234# wget --no-check-certificate http://www.percona.com/downloads/percona-release/redhat/0.1-4/percona-release-0.1-4.noarch.rpm# rpm -ivh percona-release-0.1-4.noarch.rpm# yum list | grep percona# yum -y install percona-xtrabackup-24二、…

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

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

[它山之石] 一件事情,假设你不能说清楚,十有八九你就做不好

记得有一次开会。我的头儿说了标题所写的这句话,自己深以为然。 有过较多解决这个问题的经历的人可能会有这种感觉,非常多时候,面对一个问题。我们即使没有全然将之想清 楚。也可以基于已有的经验给出一个可以work的解决方式,当然这样的情况下…

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

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

C语言试题五十三之将所有大于1小于整数m的非素数存入xx所指的数组中,非素数的个数通过k传回。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

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

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

力扣(leetcode)第26题删除有序数组中的重复项(Python)

26.删除有序数组的重复项 题目链接:26.删除有序数组的重复项 给你一个非严格递增排列 的数组 nums ,请你 原地 删除重复出现的元素,使每个元素 只出现一次 ,返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 …

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

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

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

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

[转] java.nio.ByteBuffer中flip、rewind、clear方法的区别

转载 对缓冲区的读写操作首先要知道缓冲区的下限、上限和当前位置。下面这些变量的值对Buffer类中的某些操作有着至关重要的作用: limit:所有对Buffer读写操作都会以limit变量的值作为上限。position:代表对缓冲区进行读写时,当前…

【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…

C语言试题五十四之求n以内(不包括n)同时能被3与7整除的所有自然数之和的平方根s,并作为函数值返回。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

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("这是一个命令行…

php 迭代器

迭代器&#xff08;Iterator&#xff09;模式&#xff0c;又叫做游标&#xff08;Cursor&#xff09;模式。GOF给出的定义为&#xff1a;提供一种方法访问一个容器&#xff08;container&#xff09;对象中各个元素&#xff0c;而又不需暴露该对象的内部细节。 百度百科: http:…