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

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

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

相关文章

Docker 镜像以及镜像分层

Docker 镜像以及镜像分层 1 什么是镜像2 Docker镜像加载原理2.1 UnionFs&#xff1a;联合文件系统2.2 Docker镜像加载原理2.3 Docker镜像的特点 3 镜像的分层结构4 可写的容器层 1 什么是镜像 镜像是一种轻量级、可执行的独立软件包&#xff0c;用来打包软件运行环境和基于运行…

数据处理四 基于图像hash进行数据整理(删除重复图片、基于模版查找图片)

一、背景知识 1.1 什么是hash Hash&#xff0c;一般翻译做“散列”&#xff0c;也有直接音译为“哈希”的&#xff0c;基本原理就是把任意长度的输入&#xff0c;通过Hash算法变成固定长度的输出。这个映射的规则就是对应的Hash算法&#xff0c;而原始数据映射后的二进制串就…

程序员必知!命令模式的实战应用与案例分析

命令模式是一种行为设计模式&#xff0c;它将请求封装为对象以实现客户端参数化、请求排队、日志记录及撤销操作&#xff0c;旨在解耦调用者与操作实现者&#xff0c;以智能家居为例&#xff0c;用户通过界面发送命令对象&#xff0c;设备作为接收者执行相应操作&#xff0c;无…

Ubuntu 安装Nginx服务

文章目录 前言一、Nginx安装1. Nginx默认安装2. Nginx指定版本安装3. Nginx验证4. Nginx服务控制4.1 查看服务状态4.2 停止服务4.3 启动服务4.4 重启服务 5. Nginx文件存放目录 二、自己编译Nginx1. 下载源码2. 依赖配置3. 编译 三、Nginx卸载总结 前言 Nginx&#xff08;发音为…

SDN和NFV最明显的区别,SDN和传统网络有什么区别

目录 SDN和NFV最明显的区别是 SDN和传统网络有什么区别 一、SDN概述 1.1 S

Fixed win size sliding window

这篇记录灵神题单中的定长滑窗环节&#xff0c;不跟之前的Sliding Window一起了。 1. LC 1423 可获得的最大点数 这题其实有点思维的。实现上简单。 每次从首或者尾部拿&#xff0c;总共拿k次。相当于有n-k张牌不拿。因为不可能从中间截断着拿&#xff0c;因此必然这n-k张牌…

分布式(2)

目录 6.Ribbon和Feign的区别有哪些&#xff1f; 7.SpringCloud和dubbo有什么区别&#xff1f; 8.服务注册和发现是什么意思&#xff1f;SpringCloud如何实现&#xff1f; 9.介绍下网关的作用&#xff1f; 10.谈谈服务降级&#xff0c;熔断&#xff0c;服务隔离&#xff1f;…

机器学习(四) -- 模型评估(3)

系列文章目录 机器学习&#xff08;一&#xff09; -- 概述 机器学习&#xff08;二&#xff09; -- 数据预处理&#xff08;1-3&#xff09; 机器学习&#xff08;三&#xff09; -- 特征工程&#xff08;1-2&#xff09; 机器学习&#xff08;四&#xff09; -- 模型评估…

通货紧缩,通货膨胀

目录 通货紧缩 通货膨胀 通货紧缩 是一个与通货膨胀相对应的经济学概念&#xff0c;是由货币供给量相对于经济增长和劳动生产率提高等要素减少而引致的有效需求严重不足 一般物价水平持续下跌&#xff0c;货币供给量持续下降和经济衰退的现象。当市场上流通的货币减少&…

探索 OceanBase 中图数据的实现

在数据管理和处理的现代环境中&#xff0c;对能够处理复杂数据结构的复杂数据模型和方法的需求从未如此迫切。图数据的出现以其自然直观地表示复杂关系的独特能力&#xff0c;开辟了数据分析的新领域。 虽然 Neo4j 等成熟的图形数据库为处理图形数据提供了强大的解决方案&…

Python从入门到网络爬虫(模块详解)

模块 我们知道&#xff0c;函数和类都是可以重复调用的代码块。在程序中使用位于不同文件的代码块的方法是&#xff1a;导入 (import) 该对象所在的模块 (mudule)。当程序变得越来越大时&#xff0c;将程序的不同部分根据不同分类方法保存在不同文件中通常会更加方便。 导入模…

python抓取异步数据(加载更多类型的),并下载图片,保存到文件夹,实例

源码: {"subjects":[{"episodes_info":"","rate":"8.8","cover_x":3000,"title":"奥本海默","url":"https:\/\/movie.douban.com\/subject\/35593344\/","playabl…

hydra爆破

导语 Hydra 是一个用于暴力破解登录凭据的网络安全工具。它可以通过尝试多个用户名和密码组合来攻击目标系统,以获得未经授权的访问权限。 Hydra 支持多种协议和服务,包括常见的 SSH、FTP、Telnet、HTTP、SMTP 等。它可以通过使用字典文件或生成密码的模式进行强制破解。可以…

如何理解Transformer论文中的positional encoding,和三角函数有什么关系?

大家好&#xff0c;我分享交流下这个问题。 Positional Encoding 掏出一张被无数人讲述的架构图。 Transformer 模型中的位置编码&#xff08;Positional Encoding&#xff09;是为了让模型能够考虑单词在句子中的位置。 由于 Transformer 的自注意力&#xff08;Self-Atte…

bat批处理文件_bat注释汇总

文章目录 1、示例&#xff08;直接结合脚本和结果进行理解&#xff09; 1、示例&#xff08;直接结合脚本和结果进行理解&#xff09; %这是一个注释% %这是另一个注释%rem 这是一个注释 rem 这是另一个注释:这是一个注释 ::这是一个注释 :?这是另一个注释if 1 1 ( %这里会执…

Golang 切片

前言 在Go语言中&#xff0c;切片是一个引用类型&#xff0c;它提供了对数组的动态窗口。切片并不存储任何数据&#xff0c;它只是描述了底层数组中的一个片段。切片的定义包括三个部分&#xff1a;指向数组的指针、切片的长度和切片的容量 基本使用 声明切片&#xff1a;声…

Django在urls.py利用函数path()配置路由时传递参数给调用的视图函数的方法

01-单个参数的传递 问&#xff1a;在urls.py利用函数path()配置路由时能不能传递一些参数给调用的视图函数&#xff1f;因为我有很多路由调用的其实是同一个视图函数&#xff0c;所以希望能传递一些额外的参数。比如路由的PATH信息如果能传递就好了。 答&#xff1a;在Django中…

伐木工 - 华为OD统一考试

OD统一考试 题解&#xff1a; Java / Python / C 题目描述 一根X米长的树木&#xff0c;伐木工切割成不同长度的木材后进行交易&#xff0c;交易价格为每根木头长度的乘积。规定切割后的每根木头长度都为正整数,也可以不切割&#xff0c;直接拿整根树木进行交易。请问伐木工如…

MySQL 日期比较

MySQL日期格式比较常用的两个函数是DATEDIFF()和TIMESTAMPDIFF()。 DATEDIFF SELECT DATEDIFF(2023-12-31 23:59:59, 2023-12-30); # 1SELECT DATEDIFF(2023-11-30 23:59:59, 2023-12-31); # -31第一个参数减去第二个参数得到的天数。 TIMESTAMPDIFF SELECT TIMESTAMPDIFF(…

libexif库介绍

libexif是一个用于解析、编辑和保存EXIF数据的库。它支持EXIF 2.1标准(以及2.2中的大多数)中描述的所有EXIF标签。它是用纯C语言编写的&#xff0c;不需要任何额外的库。源码地址&#xff1a;https://github.com/libexif/libexif &#xff0c;最新发布版本为0.6.24&#xff0c;…