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

锋哥原创的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": "创建图文投票"
		}
	}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【2023 CCF 大数据与计算智能大赛】基于TPU平台实现超分辨率重建模型部署 基于QuickRNet的TPU超分模型部署

2023 CCF 大数据与计算智能大赛 《赛题名称》 基于QuickRNet的TPU超分模型部署 巴黎欧莱雅 林松 智能应用业务部算法工程师 中信科移动 中国-北京 gpu163.com 团队简介 巴黎欧莱雅团队包含一个队长和零个队员。 队长林松&#xff0c;研究生学历&#xff0c;2019-202…

【C++】内存对齐

本篇文章介绍C中的内存对齐&#xff0c;后续介绍C的union和C的variant的时候&#xff0c;需要用到这部分的知识。 占用内存 先回忆下C各个数据类型占用的内存大小&#xff1a; int&#xff1a;所占内存大小&#xff1a;4byte 32bit&#xff1b;char&#xff1a;所占内存大小…

视频智能分析支持摄像头异常位移检测,监测摄像机异常位移变化,保障监控状态

我们经常在生产场景中会遇到摄像头经过风吹日晒&#xff0c;或者异常的触碰&#xff0c;导致了角度或者位置的变化&#xff0c;这种情况下&#xff0c;如果不及时做出调整&#xff0c;会导致原本的监控条件被破坏&#xff0c;发生事件需要追溯的时候&#xff0c;查不到对应位置…

Kubernetes复习总结(一):Kubernetes内置资源、Device Plugin机制

1、Kubernetes内置资源 1&#xff09;、Pod Pod是Kubernetes进行管理的最小单元&#xff0c;程序要运行必须部署在容器中&#xff0c;而容器必须存在于Pod中 Pod可以认为是容器的封装&#xff0c;一个Pod中可以存在一个或者多个容器 1&#xff09;Pod进程组 在Kubernetes里面…

cookie和session、请求转发和重定向

会话 分为有状态会话和无状态会话 在HTML中&#xff0c;"会话"一般指的是Web服务器与客户端&#xff08;通常是浏览器&#xff09;之间进行的一系列请求和响应。它是一种在网络上模拟人与人之间通信的方式&#xff0c;常见于Web应用程序中。 会话、Cookie和Sessio…

Vue电商后端管理API接口测试

引言 最近有人在学习接口自动化测试时没有接口练手&#xff0c;其实接口的话&#xff0c;要么找第三方提供的&#xff0c;要么自己开发。第三方在线API需要认证&#xff0c;并且普通的话每天调用次数有一定的限制。自己开发的话&#xff0c;只要不停电&#xff0c;想怎么用就怎…

Jmeter接口自动化测试 :Jmeter变量的使用

在使用jmeter进行接口测试时&#xff0c;我们难免会遇到需要从上下文中获取测试数据的情况&#xff0c;这个时候就需要引入变量了。 定义变量 添加->配置元件->用户自定义的变量 添加->配置元件->CSV 数据文件设置 变量的调用方式&#xff1a;${变量名} 变量的作…

低代码平台的崛起:探索火爆背后的因素

文章目录 前言低代码开发平台优缺点有哪些&#xff1f;速度稳定性赋能一致性安全简单低代码为什么能火&#xff1f;由哪些因素导致&#xff1f; 低代码的优势后记 前言 在当前科技发展快速的时代&#xff0c;低代码开发平台越来越受到关注和推崇。与传统的软件开发方式相比&am…

C++学习笔记——类作用域和抽象数据类型

目录 一、C类作用域 类内作用域 类外作用域 二、类作用域案列详细的解释说明 三、抽象数据类型 四、总结 类作用域 抽象数据类型&#xff08;ADT&#xff09; 五、图书馆管理系统 一、C类作用域 在C中&#xff0c;类作用域是指类定义中声明的标识符&#xff08;成员变…

我建立了一个资源分享群

我建立了一个资源分享群 在为寻找资源犯愁&#xff1f; 在为分享资源犯愁&#xff1f; 一起加入分享资源群&#xff08;是wx群哦&#xff09;吧&#xff01;你可以分享自己的资源帮助他人。你可以在群组里需求资源获取别人的帮助。发广告请绕行&#xff0c;会被拉黑哦 微信…

基于SpringBoot+Vue人力资源管理系统(前后端分离)

该项目完全免费 系统介绍 基于 SpringBootVue 实现的人力资源管理系统是为了提高企业人力资源管理水平而开发的。主要目标是通过对员工 及人力资源活动信息&#xff08;考勤、工资 ) 等的编制来提高企业效率。 系统一共分为五大菜单项&#xff0c;分别是首页、薪资管理、权…

Linux安装nginx(带http ssl)

nginx安装 nginx文件 以及gcc pcre zlib openssl 网盘下载 1.安装gcc yum -y install gcc gcc-c 2.安装pcre rpm -ivh pcre-8.32-17.el7.x86_64.rpm --force --nodeps rpm -ivh pcre-devel-8.32-17.el7.x86_64.rpm --force --nodeps 3.安装zlib tar -zxvf zlib-1.2.11.ta…

Bayes贝叶斯识别Spam Email垃圾邮件

目录 介绍&#xff1a; 一、Gaussian Naive Bayes(连续型变量) 1.1数据处理 1.2建模 1.3cross_val_score函数评估 1.4classification_report函数评估 1.5classification_report函数和cross_val_score函数的区别 二、 Multinomial Naive Bayes&#xff08;离散型变量&…

【算法设计与分析】分治-时间复杂度计算

目录 主定理 Master Theorem分治算法运行时间的递归表示主定理的简化形式 主定理的一般形式 递归树 Recursion Tree递归树的简单结论 主定理 Master Theorem 分治算法运行时间的递归表示 将原问题分解成 a 个子问题递归求解&#xff0c;每个子问题的规模是原问题的 1/b。同时子…

紫光展锐5G扬帆出海 | 欧洲积极拥抱更多5G选择

和我国一样&#xff0c;欧洲不少国家也在2019年进入5G商用元年&#xff1a;英国在2019年5月推出了5G商用服务&#xff0c;该国最大的移动运营商EE(Everything Everywhere)最先商用5G&#xff1b;德国在2019年年中推出5G商用服务&#xff0c;德国电信、沃达丰和 Telefonica是首批…

从0开始python学习-42.requsts统一请求封装

统一请求封装的目的&#xff1a; 1.去除重复的冗余的代码 2. 跨py文件实现通过一个sess来自动关联有cookie关联的接口。 3. 设置统一的公共参数&#xff0c;统一的文件处理&#xff0c;统一的异常处理&#xff0c;统一的日志监控&#xff0c;统一的用例校验等 封装前原本代…

手写视频裁剪框

<!-- 截取框 --><divv-show"isShow"class"crop-box":style"{width: cropWidth px,height: cropHeight px,left: cropX px,top: cropY px,}"ref"cropBox"mousedown"startInteraction"><!-- 内容在这里 --…

Kubernetes二进制部署 单节点

一、环境准备 k8s集群master1&#xff1a;192.168.229.90 kube-apiserver kube-controller-manager kube-scheduler etcd k8s集群node1: 192.168.229.80 kubelet kube-proxy docker flannel k8s集群node2: 192.168.229.70 kubelet kube-proxy docker flannel 至少2C2G 常见的k…

软件工程:数据流图相关知识和多实例分析

目录 一、数据流图相关知识 1. 基本介绍 2. 常用符号 3. 附加符号 二、数据流图实例分析 1. 活期存取款业务处理系统 2. 工资计算系统 3. 商业自动化系统 4. 学校人事管理系统 5. 教材征订系统 6. 高考录取统分子系统 7. 订货系统 8. 培训中心管理系统 9. 考务处…

【动态规划】【字符串】C++算法:140单词拆分

作者推荐 【动态规划】【字符串】扰乱字符串 本文涉及的基础知识点 动态规划 字符串 LeetCode140:单词拆分 II 给定一个字符串 s 和一个字符串字典 wordDict &#xff0c;在字符串 s 中增加空格来构建一个句子&#xff0c;使得句子中所有的单词都在词典中。以任意顺序 返回…