项目模块—实现抑郁测评(小程序)

script

<script setup>
import { ref } from "vue";//控制轮播图页码
let current = ref(0);//答题逻辑
const add = (value) => {if (current.value < 9) {current.value = current.value + 1;} else {uni.switchTab({url: "/pages/my/my",});}
};
</script>

<template>

<template><view class="box"><view class="nar"><!-- 利用uview-plus插件中的线性进度条来实现功能 --><u-icon name="arrow-left" color="#000000" size="24"></u-icon><!-- 文字 --><text>抑郁测评专业版</text></view><view><!--利用轮播图实现--><swiper duration="0" :current="current" style="height: 500px"><template v-for="(item1, index) in 10"><swiper-item @touchmove.stop="" class="swiper"><!-- 进度条 --><view class="jindu"><text>测评进度</text><view class="progress"><u-line-progress:showText="false":percentage="(index + 1) * 10"activeColor="#2d8dfe"></u-line-progress></view><text>{{ index + 1 }}/10</text></view><!-- 题目 --><view class="topic"><view class="text">你是否经常感到心情低落,或是感到心情郁闷?生活,前景?</view></view><!-- 选项 --><view class="options"><!-- title --><view class="title"><u-tag text="单选题" type="primary" shape="circle"></u-tag></view><!-- 选项 --><template v-for="item in 4"><view @click="add()" class="option"><view class="text">完全不会</view></view></template></view></swiper-item></template></swiper></view></view>
</template>

style

<style lang="scss" scoped>
.box {height: 100vh;background: linear-gradient(to bottom, #b6cff3, #f5ecf4);.nar {padding-top: 40rpx;padding-bottom: 40rpx;height: 80rpx;width: 460rpx;display: flex;align-items: center;justify-content: space-between;padding-left: 20rpx;padding-right: 20rpx;}
}
//进度样式
.jindu {padding-left: 20rpx;padding-right: 20rpx;padding-top: 20rpx;display: flex;height: 32rpx;align-items: center;justify-content: space-between;//进度条.progress {width: 460rpx;}
}
//题目样式
.topic {background-color: white;height: 130rpx;margin-left: 20rpx;margin-right: 20rpx;margin-top: 60rpx;border-radius: 10rpx;.text {padding: 18rpx;}
}//选项样式
.options {margin-top: 40rpx;margin-left: 20rpx;margin-right: 20rpx;background-color: #f0eaf4;border-radius: 10rpx;height: 700rpx;//标签title.title {width: 130rpx;padding: 16rpx;}//具体选项.option {margin: 16rpx;margin-top: 24rpx;background-color: #ffffff;height: 100rpx;border-radius: 10rpx;display: flex;align-items: center;.text {padding-left: 16rpx;}}:active.option {background-color: #ebf4ff;color: #52a2ff;}
}
</style>

效果:

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

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

相关文章

双端队列deque和vector以及list的优缺点比较

参考:https://blog.csdn.net/TWRenHao/article/details/123483085 一、vector vector具体用法详情点这里 优点&#xff1a; 支持随机访问 CPU高速环缓存命中率很高 缺点&#xff1a; 空间不够&#xff0c;便需要增容。而增容代价很大&#xff0c;还存在一定的空间浪费。 头部…

redis在docker安装并启动流程

1、启动server docker run -d -p 6379:6379 --name redis01 redis:7.2.4以上命令&#xff0c;每次启动新的Redis容器&#xff0c;数据会丢失。 我们需要挂载数据文件&#xff0c;在宿主机上面&#xff0c;这样就可以持久化数据. 2、挂载数据文件&#xff08;可根据需求选择…

解决MySQL日期格式差异引发的查询bug:精确匹配与按日期截断比较

前言 在开发过程中&#xff0c;我们常常会遇到由于日期格式不匹配而导致的数据查询异常问题。今天&#xff0c;我就碰到了这样一个场景&#xff1a;在使用MyBatis Plus的Lambda表达式进行时间范围查询时&#xff0c;由于数据库中createTime字段的格式与前端传来的查询参数格式…

leetcode 1997.访问完所有房间的第一天

思路&#xff1a;动态规划前缀和 这道题还是很难的&#xff0c;因为你如果需要推出状态方程是很难想的。 在题中我们其实可以发现&#xff0c;这里在访问nextVisit数组的过程中&#xff0c;其实就是对于当前访问的房子之前的房子进行了回访。 怎么说呢&#xff1f;比如你现在…

Git相关命令(一)

一、简介 Git 是一个开源的分布式版本控制系统。 当然&#xff0c; git 不会傻傻的把你的每一个版本完整的存储下来&#xff0c;他仅仅会存储每次修改的位置和内容&#xff08;可持久化&#xff09;&#xff0c;每一次 commit 可以理解为产生一个版本&#xff0c;接下来的版本…

vivado 生成比特流或器件镜像

在生成比特流或器件镜像之前 &#xff0c; 请复查其设置 &#xff0c; 确保这些设置对于您的设计都正确无误 &#xff0c; 这一点至关重要。 Vivado IDE 中的比特流和器件镜像设置分为 2 种类型 &#xff1a; 1. 比特流或器件镜像文件格式设置。 2. 器件配置设置。 在 V…

Gradio——语音对话demo

import gradio as gr import os import random import json import requests import timefrom openai import AzureOpenAI# audio to text here def audio_to_text(audio_path):"""audio to text here&#xff0c;目前是openai whisperParameters:audio_path: …

数据结构刷题篇 之 【力扣二叉树基础OJ】详细讲解(含每道题链接及递归图解)

有没有一起拼用银行卡的&#xff0c;取钱的时候我用&#xff0c;存钱的时候你用 1、相同的树 难度等级&#xff1a;⭐ 直达链接&#xff1a;相同的树 2、单值二叉树 难度等级&#xff1a;⭐ 直达链接&#xff1a;单值二叉树 3、对称二叉树 难度等级&#xff1a;⭐⭐ 直达…

【Godot4自学手册】第三十一节使用WorldEnvironment为地宫入口粒子系统添加辉光

本节&#xff0c;首先我将使用WorldEnvironment节点为地宫入口的例子系统添加辉光&#xff0c;让游戏看上去效果更加灿烂。其次加入相应提示信息&#xff0c;白天到达地宫附近、未杀死怪物进入地宫&#xff0c;都有提示信息&#xff0c;达到条件后地宫方可进入。先看一下效果&a…

CSS之动画

一&#xff0c;动画的制作 实现盒子绕圈走 二&#xff0c; 动画的常用属性 三&#xff0c;动画简写属性 前面两个属性一定要写&#xff0c;第三个linear是指匀速的意思&#xff08;默认是ease&#xff09;

Machine Learning机器学习之数据可视化

目录 前言 一、 数据预处理与清洗 二、常见可视化技术 三、可视化工具和平台 博主介绍&#xff1a;✌专注于前后端、机器学习、人工智能应用领域开发的优质创作者、秉着互联网精神开源贡献精神&#xff0c;答疑解惑、坚持优质作品共享。本人是掘金/腾讯云/阿里云等平台优质作者…

IT服务监督管理案例分析题

习题一 根据国家电网提出建设智能电网&#xff0c;信息化作为推进电力企业实现发展战略目标的和目标的核心保障体系&#xff0c;作用日益突出。这其中更需要进步推动信息运维综合监管系统的深化应用工作。 某软件股份有限公司是国内IT运维管理服务提供商&#xff0c;为多家电…

tls和ssl的区别,ssh和ssl区别

在网络通信和安全领域&#xff0c;TLS&#xff08;Transport Layer Security&#xff09;、SSL&#xff08;Secure Sockets Layer&#xff09;和SSH&#xff08;Secure Shell&#xff09;是常见的加密协议&#xff0c;它们都起着保护数据安全的重要作用。在本文中&#xff0c;我…

PPP、RRE、MGRE综合实验

一、实验拓扑图 二、实验要求 1.R5为ISP&#xff0c;只能进行IP地址配置&#xff0c;其所有地址均配为公有IP地址&#xff1b; 2.R1和R5间使用PPP的PAP认证&#xff0c;R5为主认证方: R2与R5之间使用ppp的CHAP认证&#xff0c; R5为主认证方;R3与R5之间使用HDLC封装; 3.R1、R2、…

MSTP环路避免实验(思科)

华为设备参考&#xff1a;MSTP环路避免实验&#xff08;华为&#xff09; 一&#xff0c;技术简介 MSTP&#xff08;多生成树协议&#xff09;&#xff0c;MSTP解决了STP和RSTP没有考虑vlan的问题&#xff0c;STP和RSTP将所有的vlan共享为一个生成树实例&#xff0c;无法实现…

MySQL 锁合集与事务隔离级别

概览 在数据库管理中&#xff0c;锁是用来控制多个事务对同一数据的并发访问的机制。InnoDB作为MySQL的默认事务型存储引擎&#xff0c;提供了多种类型的锁来保障事务的隔离性并减少冲突&#xff0c;从而维护数据库的完整性和一致性。以下是InnoDB提供的主要锁类型&#xff1a…

速成软件书:真的是神器吗?

那些声称几天就能让你精通软件的书籍&#xff0c;到底是真是假&#xff1f;它们真的是神器吗&#xff1f; 个人看法 快速了解&#xff1a;速成软件书可能适合那些想要快速了解一种软件或技能的初学者。它们可能提供了基础知识和快速入门指导&#xff0c;对于初学者来说可能有所…

linux提权笔记

1 linux提权简介 Linux提权&#xff0c;简单来说&#xff0c;就是用户尝试获取高于其当前权限级别的系统访问权限的过程。在Linux系统中&#xff0c;root用户拥有最高的权限&#xff0c;能够执行任何操作&#xff0c;包括修改系统文件、安装软件、管理用户账户等。而普通用户通…

Java 中文官方教程 2022 版翻译完成

Java 中文官方教程 2022 版教程&#xff1a;入门指南课程&#xff1a;Java 技术现象关于 Java 技术Java 技术能做什么&#xff1f;Java 技术将如何改变我的生活&#xff1f;课程&#xff1a; “Hello World!” 应用程序“Hello World!” 适用于 NetBeans IDE“Hello World!” f…

岭师大数据技术原理与应用-序章-软工版

HeZaoCha-CSDN博客 序章—软工版 一、环境介绍1. VMware Workstation Pro2. CentOS3. Java4. Hadoop5. HBase6. MySQL7. Hive 二、系统安装1. 虚拟网络编辑器2. 操作系统安装 三、结尾 先说说哥们写这系列博客的原因&#xff0c;本来学完咱也没想着再管部署这部分问题的说&…