第4讲 小程序首页实现

news/发布时间2024/5/16 6:30:05

首页 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" @click="goWordVote()"><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" @click="goPicVote()"><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:{goWordVote:function(){uni.navigateTo({url:"/pages/createWordVote/createWordVote"})},goPicVote:function(){uni.navigateTo({url:"/pages/createPicVote/createPicVote"})}}}
</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.bcls.cn/yMLW/143.shtml

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

相关文章

相机图像质量研究(21)常见问题总结:CMOS期间对成像的影响--隔行扫描/逐行扫描

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结&#xff1a;光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结&#xff1a;光学结构对成…

树和堆的精讲

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary_walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…

《Go 简易速速上手小册》第1章:Go 语言基础(2024 最新版)

文章目录 1.1 Go 语言的安装与环境配置1.1.1 基础知识讲解案例 Demo&#xff1a;简单的 Go 程序 1.1.2 重点案例&#xff1a;搭建一个 Go Web 服务准备工作步骤 1&#xff1a;创建项目目录步骤 2&#xff1a;编写 Web 服务代码步骤 3&#xff1a;运行你的 Web 服务步骤 4&#…

【开源】JAVA+Vue.js实现天然气工程运维系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统角色分类2.2 核心功能2.2.1 流程 12.2.2 流程 22.3 各角色功能2.3.1 系统管理员功能2.3.2 用户服务部功能2.3.3 分公司&#xff08;施工单位&#xff09;功能2.3.3.1 技术员角色功能2.3.3.2 材料员角色功能 2.3.4 安…

沁恒CH32V30X学习笔记01--创建工程

资料下载 https://www.wch.cn/products/CH32V307.html? 下载完成后安装MounRiver Studio(MRS) 创建工程 修改时钟144M printf重定向 修改外部晶振频率位置 添加自定义文件 添加目录

动态头部:统一目标检测头部与注意力

论文地址:https://arxiv.org/pdf/2106.08322.pdf ai阅读论文_论文速读_论文阅读软件-网易有道速读 创新点是什么? 这篇文档的创新点是提出了一种统一的方法&#xff0c;将对象检测头和注意力机制结合起来。作者在文中提出了一种称为Dynamic Head的方法&#xff0c;通过引入…

掌握Go并发:Go语言并发编程深度解析

&#x1f3f7;️个人主页&#xff1a;鼠鼠我捏&#xff0c;要死了捏的主页 &#x1f3f7;️系列专栏&#xff1a;Golang全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&…

LabVIEW智能温度监控系统

LabVIEW智能环境监测系统 介绍了一个基于LabVIEW的智能环境监测系统的开发过程。该系统在实时监测和分析环境参数&#xff0c;如温度、湿度、气体浓度等&#xff0c;以提供精确的数据支持&#xff0c;确保环境安全与健康。通过高效的数据处理和友好的用户界面&#xff0c;系统…

pytest 框架自动化测试

随笔记录 目录 1. 安装 2. 安装pytest 相关插件 2.1 准备阶段 2.2 安装 2.3 验证安装成功 3. pytest测试用例的运行方式 3.1 主函数模式 3.1.1 主函数执行指定文件 3.1.2 主函数执行指定模块 3.1.3 主函数执行某个文件中的某个类、方法、函数 3.1.4 主函数执行生…

Mysql Day06

sql优化 插入数据 大批量插入数据 主键顺序插入性能高于乱序插入 load data local infile /root/load_user_100w_sort.sql into table tb_user fields terminated by , lines terminated by \n ; 主键优化 这个黄色的都是一个一个Page 主键乱序插入之后会变成1-3-2&#x…

2.18 C++ day6

思维导图 以下是一个简单的比喻&#xff0c;将多态概念与生活中的实际情况相联系&#xff1a; 比喻&#xff1a;动物园的讲解员和动物表演 想象一下你去了一家动物园&#xff0c;看到了许多不同种类的动物&#xff0c;如狮子、大象、猴子等。现在&#xff0c;动物园里有一位讲…

【内网穿透】如何在小米4A中刷OpenWRT并实现公网访问本地路由器

文章目录 前言1. 安装Python和需要的库2. 使用 OpenWRTInvasion 破解路由器3. 备份当前分区并刷入新的Breed4. 安装cpolar内网穿透4.1 注册账号4.2 下载cpolar客户端4.3 登录cpolar web ui管理界面4.4 创建公网地址 5. 固定公网地址访问 前言 OpenWRT是一个高度模块化、高度自…

Ubuntu本地安装code-server结合内网穿透实现安卓平板远程写代码

文章目录 1.ubuntu本地安装code-server2. 安装cpolar内网穿透3. 创建隧道映射本地端口4. 安卓平板测试访问5.固定域名公网地址6.结语 1.ubuntu本地安装code-server 准备一台虚拟机,Ubuntu或者centos都可以&#xff0c;这里以VMwhere ubuntu系统为例 下载code server服务,浏览器…

算法-3-基本的数据结构

单双链表 1.单链表双链表如何反转 import java.util.ArrayList; import java.util.List;public class Code01_ReverseList {public static class Node {public int value;public Node next;public Node(int data) {value data;}}public static class DoubleNode {public int…

读写分离的利器——MySQL Proxy

0 引言 MySQL Proxy是一个位于客户端和MySQL服务器端之间的程序&#xff0c;通过它可以实现监听和管理客户端与MySQL服务器端之间的通信&#xff0c;最大的作用是实现数据库的读写分离&#xff0c;从而达到负载均衡的目的。 MySQL Proxy的常用用途包括负载平衡、故障分析、查…

Python进阶--爬取美女图片壁纸(基于回车桌面网的爬虫程序)

目录 一、前言 二、爬取下载美女图片 1、抓包分析 a、分析页面 b、明确需求 c、抓包搜寻 d、总结特点 2、编写爬虫代码 a、获取图片页网页源代码 b、提取所有图片的链接和标题 c、下载并保存这组图片 d、 爬取目录页的各种类型美女图片的链接 e、实现翻页 三、各…

《Go 简易速速上手小册》第8章:网络编程(2024 最新版)

文章目录 8.1 HTTP 客户端与服务端编程 - Go 语言的网络灯塔与探航船8.1.1 基础知识讲解服务端编程客户端编程 8.1.2 重点案例&#xff1a;简易博客服务服务端实现客户端实现运行示例 8.1.3 拓展案例 1&#xff1a;增加文章评论功能功能描述服务端实现客户端实现 8.1.4 拓展案例…

PLC远程监控在制药行业的应用

PLC远程监控在制药行业的应用 制药行业是一个需要高度控制和精确性的行业&#xff0c;而PLC远程监控技术正是这种需求的完美解决方案。PLC远程监控技术是指将传感器、执行器和其他设备连接到PLC系统中&#xff0c;并使用网络和远程访问技术实现对设备的远程监控和控制。下面我…

Mysql 触发器

0 引用 MySQL的触发器和存储过程一样&#xff0c;都是嵌入到MySQL的一段程序。触发器是由事件来触发某个操作&#xff0c;这些事件包括INSERT、UPDATAE和DELETE语句。 1 创建触发器 触发器&#xff08;trigger&#xff09;是一个特殊的存储过程&#xff0c;不同的是&#xf…

深度学习之梯度下降算法

梯度下降算法 梯度下降算法数学公式结果 梯度下降算法存在的问题随机梯度下降算法 梯度下降算法 数学公式 这里案例是用梯度下降算法&#xff0c;来计算 y w * x 先计算出梯度&#xff0c;再进行梯度的更新 import numpy as np import matplotlib.pyplot as pltx_data [1.0,…
推荐文章