第4讲 小程序首页实现

首页 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.hqwc.cn/news/465762.html

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

相关文章

98.网游逆向分析与插件开发-网络通信封包解析-定位明文发送数据的关键函数

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;项目需求与需求拆解 通过上一个内容有了对网络通信架构有一个简单认识了解&#xff0c;对于我们重要的点是 组织数据 到 加密数据之间的过程&#xff0c;这个过程的数据我们是可以看懂的&#xff0c;…

笔记---dp---最长上升子序列模型

模型原始题目&#xff1a;AcWing.895.最长上升子序列 题目关系如下&#xff1a; 转化一 AcWing.1017.怪盗基德的滑翔翼 怪盗基德是一个充满传奇色彩的怪盗&#xff0c;专门以珠宝为目标的超级盗窃犯。 而他最为突出的地方&#xff0c;就是他每次都能逃脱中村警部的重重围堵…

Vue核心基础1:数据代理

1 回顾Object.defineProperty方法 let str hello const person {name: 张三,age: 18 } Object.defineProperty(person, sex, {// value: 男,// enumerable: true, // 控制属性是否可以枚举&#xff0c;默认值是false// writable: true, // 控制属性是否可以被修改&#xff0…

C++进阶(十四)智能指针

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、为什么需要智能指针&#xff1f;二、内存泄漏1、 什么是内存泄漏&#xff0c;内存泄漏的危…

Vulnhub靶机:hacksudo-ProximaCentauri

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;hacksudo-ProximaCentauri&#xff08;10.0.2.51&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://www.vulnhu…

当AGI遇到人形机器人

为什么人类对人形机器人抱有执念 人形机器人是一种模仿人类外形和行为的机器人&#xff0c;它的研究和开发有着多方面的目的和意义。 人形机器人可以更好地适应人类的环境和工具。人类的生活和工作空间都是根据人的尺寸和动作来设计的&#xff0c;例如门、楼梯、桌椅、开关等…

再利用系统盘时,如何删除恢复分区(Recovery Partition)

系统盘有一个Recovery Partition&#xff0c;记录了重要的系统信息&#xff0c;不能删除。 Windows 10的 Disk Managment 不提供用户删除这个Partition的选项。 近日我插入一块原系统盘&#xff0c;Format后作为DataDisk&#xff0c;此时需要删除这块硬盘上的RecoveryPartition…

交叉熵损失函数(Cross-Entropy Loss)的基本概念与程序代码

交叉熵损失函数&#xff08;Cross-Entropy Loss&#xff09;是机器学习和深度学习中常用的损失函数之一&#xff0c;用于分类问题。其基本概念如下&#xff1a; 1. 基本解释&#xff1a; 交叉熵损失函数衡量了模型预测的概率分布与真实概率分布之间的差异。在分类问题中&…

C语言每日一题(55)另一颗树的子树

力扣 572 另一棵树的子树 题目描述 给你两棵二叉树 root 和 subRoot 。检验 root 中是否包含和 subRoot 具有相同结构和节点值的子树。如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 二叉树 tree 的一棵子树包括 tree 的某个节点和这个节点的所…

Stable Diffusion 模型下载:majicMIX lux 麦橘辉耀 - V3

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十

分享89个时间日期JS特效,总有一款适合您

分享89个时间日期JS特效&#xff0c;总有一款适合您 89个时间日期JS特效下载链接&#xff1a;https://pan.baidu.com/s/127_keimOfy_AKrCNT4TQNA?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;…

「数据结构」哈希表1:基本概念

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;Java数据结构 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 基本概念 &#x1f349;哈希表&#x1f349;哈希冲突&#x1f34c;负载因子调节&#x1f34c;解决哈希冲突&#x1f95d;1. 闭散…