uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -小程序首页实现

news2024/12/23 13:33:27

锋哥原创的uniapp微信小程序投票系统实战:

uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )共计21条视频,包括:uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )、第2讲 投票项目后端架构搭建、第3讲 小程序端 TabBar搭建等,UP主更多精彩视频,请关注UP账号。icon-default.png?t=N7T8https://www.bilibili.com/video/BV1ea4y137xf/首页效果:

create.vue

<template>
	<view class="vote_type">
		<view class="vote_tip_wrap">
			<text class="type_tip">请选择投票类型</text>
			<!-- <text class="share">&#xe739;分享给朋友</text> -->
		</view>
		<view class="type_list">
			<view class="type_item" >
				<view class="type_item_log_word"/>
				<view class="type_item-body">
					<view class="type_item-text-top">文字投票</view>
					<view class="type_item-text-bottom">
						选项为纯文字,使用方便,简单快捷
					</view>
				</view>
			</view>
			<view class="type_item" >
				<view class="type_item_log_pic"/>
				<view class="type_item-body">
					<view class="type_item-text-top">图片投票</view>
					<view class="type_item-text-bottom">
						选项为纯图片,可以上传图片作品进行投票
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">

	.vote_type{
		padding: 20px;
		.vote_tip_wrap{
			.type_tip{
				font-size: 26rpx;
				color: gray;
			}
		}
		
		.type_list{
			margin-top: 10px;
			.type_item{
				border-radius: 5px;
				background-color: white;
				display: flex;
				width: 100%;
				flex-direction: row;
				margin-bottom: 15px;
				.type_item_log_word{
					background: url("../../static/image/word.png") no-repeat center;
					width: 3.0rem;
					height: 3.0rem;
					margin-right: 0.425rem;
					background-size:cover;
					margin: 30rpx;
				}
				.type_item_log_pic{
					background: url("../../static/image/pic.png") no-repeat center;
					width: 3.0rem;
					height: 3.0rem;
					margin-right: 0.425rem;
					background-size:cover;
					margin: 30rpx;
				}
				.type_item-body{
					height: auto;
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-around;
					align-items: flex-start;
					overflow: hidden;
					.type_item-text-top{
					
						font-size: 1.15rem;
						overflow: hidden;
						width: 100%;
						
						font-weight: bolder;
						padding-top: 10px;
					}
					.type_item-text-bottom{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						width: 100%;
						line-height: 0.9375rem;
						font-size: 0.7125rem;
						color: #8f8f94;
						padding-bottom: 15rpx;
					}
				}
			}
		}
	}
</style>

设置公共的背景色App.vue里面

/*每个页面公共css */
body,page{
	background-color: #f4f5f7;
}

创建createWordVote和createPicVote两个页面

	{
		"path": "pages/createWordVote/createWordVote",
		"style": {
			"navigationBarTitleText": "创建文字投票"
		}
	},
	{
		"path": "pages/createPicVote/createPicVote",
		"style": {
			"navigationBarTitleText": "创建图文投票"
		}
	}

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

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

相关文章

ant-design-vue 使用本地iconfont.js

createFromIconfontCN只能使用【在线资源】&#xff0c;但是在线资源存在不稳定的风险 有人提了issue&#xff0c;不过目前也没有解决&#xff0c;但是有人提出了一种新的的解决方案 参考链接&#xff1a; https://github.com/ant-design/ant-design/issues/16480 main.js im…

package-info.java delete

package-info.java delete

Spring见解2

3.基于注解的IOC配置 学习基于注解的IOC配置&#xff0c;大家脑海里首先得有一个认知&#xff0c;即注解配置和xml配置要实现的功能都是一样的&#xff0c;都是要降低程序间的耦合。只是配置的形式不一样。4 3.1.创建工程 3.1.1.pom.xml <?xml version"1.0" e…

uniapp vue2 车牌号输入组件记录

uniapp vue2 车牌号输入案例记录 组件如图 直接上代码 1.html <template><view><view class"plate" :class"{show: show}"><view class"itemFirst flex-d"><view class"item item1" click"handl…

ubuntu 22 virt-manger(kvm)安装winxp

安装 、启动 virt-manager sudo apt install virt-manager sudo systemctl start libvirtdsudo virt-manager安装windowsXP 安装过程截图如下 要点1 启用 “包括寿终正寝的操作系统” win_xp.iso 安装过程 &#xff1a; 从winXp.iso启动, 执行完自己重启从硬盘重启&#xff0c…

八个LOGO素材网站推荐分享

即时设计资源广场 在UI界面设计中&#xff0c;为了找到合适的图标icon&#xff0c;你有没有尝试过翻遍整个网络&#xff0c;找到自己想要的&#xff0c;却无法下载或收费使用&#xff1f;最后&#xff0c;只收集图标icon材料需要半天时间。专业设计师使用的图标icon设计材料“…

Local server not started, start with 报错python -m weditor

一、python -m weditor 如图报错 Local server not started, start with 报错 二、解决方案 右上角选择新的无痕窗口下&#xff0c;然后打开 http://localhost:17310/ 即可

【案例】HOOPS Web Platform助力Eurostep简化全球制造流程!

行业&#xff1a;制造业 公司&#xff1a;Eurostep 软件&#xff1a;ShareAspace软件开发包&#xff1a;Hoops Web Platform 挑战&#xff1a; 为制造商打造协同设计产品的云服务平台。结合本地3D功能以增加现有的2D数据功能。在供应链日益全球化的情况下&#xff0c;保证数…

Android studio报错误提示 Some Kotlin libraries attached to this project 问题解决方案

前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂&#xff0c;风趣幽默"&#xff0c;感觉非常有意思,忍不住分享一下给大家。 &#x1f449;点击跳转到教程 Android新建项目后&#xff0c;报以下错误 错误提示内容为&#xff1a; 这个项目附带的一…

C# OpenCvSharp DNN FreeYOLO 目标检测

目录 效果 模型信息 项目 代码 下载 C# OpenCvSharp DNN FreeYOLO 目标检测 效果 模型信息 Inputs ------------------------- name&#xff1a;input tensor&#xff1a;Float[1, 3, 192, 320] --------------------------------------------------------------- Outp…

Prompt提示工程上手指南:基础原理及实践(一)

想象一下&#xff0c;你在装饰房间。你可以选择一套标准的家具&#xff0c;这是快捷且方便的方式&#xff0c;但可能无法完全符合你的个人风格或需求。另一方面&#xff0c;你也可以选择定制家具&#xff0c;选择特定的颜色、材料和设计&#xff0c;以确保每件家具都符合你的喜…

跨国制造业组网方案解析,如何实现总部-分支稳定互联?

既要控制成本&#xff0c;又要稳定高效&#xff0c;可能吗&#xff1f; 在制造企业积极向“智造”发展、数字化转型的当下&#xff0c;物联网、人工智能、机器人等新型设备加入到生产、管理环节&#xff0c;为企业内部数据传输提出了更高的要求。而当企业规模扩大&#xff0c;数…

DevOps搭建(十四)-基于Jenkins流水线方式部署详细步骤

1、新建一个流水线项目 进入配置最下方的流水线&#xff0c;可以选择Hello World最简单的demo体验。 2、编写流水线脚本 2.1、编写整体的流水线脚本 整体他脚本格式如下&#xff0c;我们只要在对应的 //所有的脚本命令都放在pipeline中 pipeline {//指定任务在哪个集群节点中…

test mutation-00-变异测试概览

拓展阅读 test 系统学习-04-test converate 测试覆盖率 jacoco 原理介绍 test 系统学习-05-test jacoco 测试覆盖率与 idea 插件 test 系统学习-06-test jacoco SonarQube Docker learn-29-docker 安装 sonarQube with mysql Ubuntu Sonar 突变测试是什么&#xff1f; …

C语言编译器(C语言编程软件)完全攻略(第十八部分:VC6.0(VC++6.0)下载地址和安装教程(图解))

介绍常用C语言编译器的安装、配置和使用。 十八、VC6.0&#xff08;VC6.0&#xff09;下载地址和安装教程&#xff08;图解&#xff09; 截止到2016年07月06日&#xff0c;C语言中文网提供的VC6.0安装包&#xff0c;下载量已超过150万次&#xff0c;收到反馈超过300条。 微软…

HTML5大作业-精致版个人博客空间模板源码

文章目录 1.设计来源1.1 博客主页界面1.2 博主信息界面1.3 我的文章界面1.4 我的相册界面1.5 我的工具界面1.6 我的源码界面1.7 我的日记界面1.8 我的留言板界面1.9 联系博主界面 2.演示效果和结构及源码2.1 效果演示2.2 目录结构2.3 源代码 源码下载 作者&#xff1a;xcLeigh …

【网络安全】【密码学】常见数据加(解)密算法及Python实现(二)、椭圆曲线密码ECC

本文介绍椭圆曲线密码及其Python实现。 一、实验目的 1、 掌握椭圆曲线上的点间四则运算和常见的椭圆曲线密码算法&#xff1b; 2、 了解基于ECC的伪随机数生成算法和基于椭圆曲线的商用密码算法。 二、算法原理 1、算法简介 椭圆曲线密码学&#xff08;Elliptic Curve Cr…

web学习笔记(九)

目录 1.初识JS(JavaScript) 1.1什么是JavaScript&#xff1f; 1.2HTML5 CSS3 javaScript三者的关系 1.3 JAVAScript的作用 1.4JAVAScript的组成部分 1.5JS注释 1.6补充知识 2.JS的引入方法 2.1行内式 2.2嵌入式&#xff08;内嵌式&#xff09; 2.3外链式 3.输入和…

使用docker build构建image

文章目录 环境步骤准备例1&#xff1a;基本用法例2&#xff1a;缓存layer例3&#xff1a;Multi-stage例4&#xff1a;Mountcache mountbind mount 例5&#xff1a;参数例6&#xff1a;Export文件例7&#xff1a;测试 参考 环境 RHEL 9.3Docker Community 24.0.7 步骤 在Dock…

Protobuf 安装与使用

Protobuf 安装与使用 1 环境2 安装 [apt安装]2 安装 [源码安装]1 依赖2 下载 protobuf3 解压4 编译安装5 配置环境 2 命令查看版本卸载 3 使用书写 .proto 文件编译 .proto 文件生成 cpp 文件编写 cpp 文件编译运行 参考 1 环境 ubuntn 20.04 protobuf v3.6.1 2 安装 [apt安装…