微信小程序文本收起展开

这里写自定义目录标题

  • 微信小程序文本收起展开
    • 常见问题的梯形背景框

微信小程序文本收起展开

参考 https://juejin.cn/post/6963904955262435336

<!-- 常见问题解答  --><view class='contentBottom'><view class='BottomFirst'><text id='0' data-id='0' class="tag-title">常见问题解答</text></view><view class="one-question" wx:for="{{questionList}}" wx:key="index"><view class="question-hr"><view class="question-1"></view>{{item.q}}</view><view class="question-hr"><view class="question-2"></view><div class="wrapper"><div class="text {{item.checkboxClass}}" ><label class="btn" bind:tap="changText" data-id="{{index}}"></label>{{item.a}}</div></div></view></view></view>
data: {questionList: [{checkboxClass:'',checkbox:false,q: '什么是临床试验',a: "临床试验是评估新药和新的治疗方案是否有效并能达到预期目的的实验过程。它们也被用于评估外科手术、放疗以及综合治疗方案的有效性。虽然许多临床试验能够取得成功,但并非所有试验都能达到预期的效果。临床试验通常分为四个阶段。1、 第一阶段: 这是将新的治疗方法应用于人体之前的第一步。 在第一阶段临床试验之前, 这项试验已经在实验室中反复确认其安全性和有效性。 第一阶段试验通常是在一小群标准治疗无效的患者中进行的。 目的是确定新药或新方案的治疗效果、 有效剂量以及不良反应。 初始剂量一般比较低, 然后在确保患者安全的情况下逐渐增加剂量。 2、 第二阶段: 如果一项治疗方法通过了第一阶段临床试验, 那么它就可以进入第二阶段临床试验。 这些试验仍然针对那些常规治疗无效的患者。 目的是确定药物的剂量效应曲线, 这通常需要更多患者的参与。3、 第三阶段: 在这一阶段, 新的治疗方法与标准治疗方法进行比较, 新药与目前的标准药物进行比较。 患者被随机分入新治疗组和标准治疗组, 通常情况下无论是患者还是医师都不知道分组的情况, 也不知道治疗是否有效。4、 第四阶段: 在新药经过国家食品药品监督管理局( SFDA) 批准之后, 该药才能应用于患者, 但还必须进行第四期临床试验的监控。 这一阶段可能会发现罕见的不良反应, 有时, 药物的治疗范围也可能需要修改。 "},{checkboxClass:'',checkbox:false,q:'临床试验为什么免费',a:"‌‌药物和检查费用免费‌:绝大多数临床试验都会免费提供试验药物和检查,患者无需承担这些费用。经济负担减轻‌:参加临床试验可以大大减轻患者的经济负担,特别是对于经济状况不佳的患者,这是一种重要的治疗选择。‌‌新药和治疗方法的机会‌:患者有可能获得未上市的新药和治疗机会,这些药物在国外已经应用,疗效和安全性已经得到验证。‌伦理考量‌:确保每位患者都能平等获得最新的治疗机会,是医学伦理的重要体现。免费提供服务降低了参与门槛,让更多人受益。‌科研资助‌:临床试验通常由‌制药公司、‌政府机构或非营利组织资助,它们投入大量资金以推动医学进步。受试者的权益保障自愿参与‌:患者参加临床试验是自愿的,被充分告知风险与获益并签署知情同意书后方可进入临床试验的研究。‌权益保护‌:受试者在临床试验期间的权益与安全将会得到保障,发生与临床试验相关的损害能得到及时的免费救治与相应的赔偿。补偿机制‌:受试者可以获得适当的补偿,包括营养补助、交通补助等。伦理委员会监督‌:研究者开展临床试验都要获得医院伦理委员会的同意,确保受试者的权益和安全。"}],},

.one-question {margin-bottom: 20rpx;border-bottom: 1px solid #efefee;font-size: 30rpx;
}.one-question .question-hr {display: flex;margin-bottom: 10rpx;
}.one-question .question-hr .question-1 {color: white;background-color: #F05B5B;padding: 4rpx 8rpx;border-radius: 10rpx;margin-right: 10rpx;height: 40rpx;
}.one-question .question-hr .question-2 {color: white;background-color: #00C8C8;padding: 4rpx 8rpx;border-radius: 10rpx;margin-right: 10rpx;height: 40rpx;
}.wrapper {display: flex;overflow: hidden;
}.text {overflow: hidden;text-overflow: ellipsis;text-align: justify;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;position: relative;
}.text::before {content: '';height: calc(100% - 36rpx);float: right;
}.text::after {content: '';width: 999vw;height: 999vw;position: absolute;box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;margin-left: -100rpx;
}.btn {float: right;clear: both;margin-left: 10rpx;font-size: 28rpx;padding: 5rpx 12rpx;background: #00C8C8;line-height: 30rpx;border-radius: 4rpx;color: #fff;cursor: pointer;
}.btn::before {content: '展开'
}.show {-webkit-line-clamp: 999;
}.show::after {visibility: hidden;
}.show .btn::before {content: '收起'
}

在这里插入图片描述
在这里插入图片描述

常见问题的梯形背景框


.contentBottom {margin: 20rpx;padding: 0 20rpx 0;display: flex;flex-direction: column;justify-content: center;background: #ffffff;border-radius: 10rpx;
}.BottomFirst {width: 350rpx;height: 60rpx;display: flex;justify-content: space-around;background-color: #FECC9F;box-sizing: border-box;margin: 0 auto;position: relative;
}.BottomFirst::before {content: '';height: 0px;width: 0px;position: absolute;left: -60rpx;top: 0rpx;border-bottom: 60rpx solid rgba(0, 0, 0, 0);border-left: 60rpx solid rgba(0, 0, 0, 0);border-right: 60rpx solid rgba(0, 0, 0, 0);border-top: 60rpx solid #FECC9F;
}.BottomFirst::after {content: '';height: 0px;width: 0px;position: absolute;right: -60rpx;top: 0rpx;border-bottom: 60rpx solid rgba(0, 0, 0, 0);border-left: 60rpx solid rgba(0, 0, 0, 0);border-right: 60rpx solid rgba(0, 0, 0, 0);border-top: 60rpx solid #FECC9F;
}.BottomFirst text {width: 100%;text-align: center;font-size: 30rpx;line-height: 60rpx;border-right: 1px solid #00C8C8;box-sizing: border-box;color: #6d3f06;
}.BottomFirst text:nth-child(1) {border: none;
}

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

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

相关文章

python从0快速上手(十六)小游戏开发

Python小游戏开发&#xff1a;创造你的第一款游戏 你是否曾梦想过成为一名游戏开发者&#xff0c;创造出属于自己的游戏世界&#xff1f;随着技术的发展&#xff0c;这个梦想不再遥不可及。Python&#xff0c;作为一种易于学习和使用的编程语言&#xff0c;搭配其强大的库支持…

六万字77道Spring面试题总结(2024版)

文章目录 问题1&#xff1a;什么是Spring?问题2&#xff1a;Spring的两大核心概念是什么&#xff1f;问题3&#xff1a;Spring框架的设计目标、设计理念和核心是什么&#xff1f;问题4&#xff1a;Spring的优缺点是什么&#xff1f;问题5&#xff1a;Spring有哪些应用场景&…

MySQL事务及实现原理

一、MySQL事务简单介绍 MySQL事务是指一组操作&#xff0c;它们被看作一个单独的工作单元&#xff0c;要么全部成功&#xff0c;要么全部失败回滚。在MySQL中&#xff0c;事务可以确保数据的一致性和完整性。 事务通常由四个关键词来描述&#xff1a; 1、BEGIN 或 START TRAN…

Java-关于Java是值传递还是引用传递的解读(附代码实例解读)

大家都知道Java是面向对象编程&#xff0c;那么有没有考虑过在传递的过程中&#xff0c;究竟传递的是值&#xff0c;还是值的引用呢&#xff1f;下面我们先来看一下什么事值传递和引用传递。 值传递&#xff1a;指在调用函数时将实际参数复制一份传递到函数中&#xff0c;这样如…

安装buildkit,并使用buildkit构建containerd镜像

背景 因为K8s抛弃Docker了,所以就只装了个containerd,这样就需要一个单独的镜像构建工具了,就用了buildkit,这也是Docker公司扶持的,他们公司的人出来搞的开源工具,官网在 https://github.com/moby/buildkit 简介 服务端为buildkitd,负责和runc或containerd后端连接干活,目前…

windows复制文件到U盘,ubuntu打开U盘中文显示?

背景 有一些文件想copy到ubuntu机器上&#xff0c;然后从windows系统copy到了u盘&#xff0c;ubuntu插上u盘之后&#xff0c;文件夹和文件内容里中文部分都是&#xff1f; 尝试解决 首先系统默认语言是英语&#xff0c;所以首先查了资料&#xff0c;将系统语言改成中文&…

Android 13 SPRD 如何临时修改 Android 系统版本

在 Android 开发或调试过程中,有时需要临时修改系统版本号,例如为了适应特定的应用需求或进行特定版本的兼容性测试。通过修改 Android 系统的构建文件,可以轻松实现这个目的。本文将介绍如何在 Android 源码中快速更改系统版本号。 步骤一:修改 sysprop.mk 首先,我们需…

魔音音乐 5.0.1 | 界面优美,可无损下载,可播放

魔音Morin 是一款免费下载付费音乐和免费播放音乐的软件。现在听歌都需要付费&#xff0c;不想付费听音乐就来魔音Morin&#xff0c;完全免费的音乐资源非常丰富&#xff0c;可同步四大音乐平台歌单&#xff0c;还有各类音乐榜单&#xff0c;自带音乐社、同步歌单以及搜索音乐功…

iTOP-RK3568开发板独立NPU通过算法加特应用到以下的场景

iTOP-3568开发板采用瑞芯微RK3568处理器&#xff0c;内部集成了四核64位Cortex-A55处理器。主频高达2.0Ghz&#xff0c;RK809动态调频。集成了双核心架构GPU&#xff0c;ARM G52 2EE、支持OpenGLES1.1/2.0/3.2、OpenCL2.0、Vulkan1.1、内嵌高性能2D加速硬件。 内置独立NPU,算力…

国内大语言模型哪家更好用?

大家好&#xff0c;我是袁庭新。 过去一年&#xff0c;AI大语言模型在爆发式增长&#xff0c;呈现百家争鸣之态。国内外相关厂商积极布局&#xff0c;并相继推出自家研发的智能化产品。 我在工作中已习惯借助AI来辅助完成些编码、创作、文生图等任务&#xff0c;甚至对它们产…

基于Springboot在线视频网站的设计与实现

基于Springboot视频网站的设计与实现 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;idea 源码获取&#xff1a;https://do…

Android 开发 TabLayout 自定义指示器长度

前言 原生 TabLayout 的指示器长度是充满整个屏幕的&#xff0c;但在实际开发中 UI 会设计成 指示器的长度等于或者小于标题字体长度&#xff0c;如图 如果设置成跟字体长度一样即使用 API: mTabLayout.setTabIndicatorFullWidth(false);或者在 xml 布局文件中的TabLayout标签…

普通java web项目转为maven项目

以前写的老项目&#xff0c;转为maven项目管理&#xff0c;关键是涉及的jar比较多&#xff0c;手动改工作量太大。 项目环境&#xff1a;eclipse、jdk8、jetty嵌入式启动。 1.创建一个新的maven项目。 2.拷贝源码。 将老项目src目录下的源码拷贝到新项目的src/main/java目录…

压缩SQL Server 2014 数据库日志文件

一开始没有设置好&#xff0c;数据库的日志文件膨胀到了3个G 以下使用Sql语句压缩日志文件的方法 注意用自己的数据库名称替换测试数据库名称&#xff1a;Dealer GOALTER DATABASE Dealer SET RECOVERY SIMPLE WITH NO_WAITGOALTER DATABASE Dealer SET RECOVERY SIMPLE -…

vscode配色主题推荐:Andromeda !

vscode配色主题推荐:Andromeda ! 图标库 vscode-icons ! Andromeda:Dark theme with a taste of the universe&#xff1b; 仙女座&#xff1a;一套宇宙深空体验的哑暗色主题; 高对比度,色彩饱和; Easy Installation Open the extensions sidebar on Visual Studio CodeSearc…

【设计模式-简单工厂】

定义 简单工厂模式&#xff08;Simple Factory Pattern&#xff09;是一种创建型设计模式&#xff0c;用于通过一个工厂类来创建某个产品类的实例&#xff0c;而不直接在客户端&#xff08;调用方&#xff09;中实例化对象。 这种模式的主要思想是将对象的创建逻辑集中在一个…

判断自己的mac是macOS x64 还是macOS ARM64

在终端输入 uname -a 这样的是x64 这样的是ARM64

基于深度学习的声纹识别

基于深度学习的声纹识别&#xff08;Speaker Recognition&#xff09;是一种通过分析和识别人的声音特征来确认身份的技术。声纹识别技术广泛应用于安全验证、智能助手、银行身份识别等场景。近年来&#xff0c;随着深度学习技术的发展&#xff0c;声纹识别的准确性和鲁棒性得到…

Skydel 24.9版本震撼发布,升级五大关键功能

在信号传播与仿真领域&#xff0c;Skydel软件一直是行业内的佼佼者。我们与您分享升级快讯&#xff0c;Skydel软件24.9.0版本已正式发布&#xff0c;此次更新不仅带来了五大全新功能&#xff0c;还在性能优化、用户体验以及远程API方面进行了全面升级&#xff0c;为用户带来更高…

Spring Cloud微服务技术选型指南

Spring Cloud微服务技术选型指南 随着软件架构从单体应用向微服务转变&#xff0c;Spring Cloud作为一种强大的微服务架构开发工具被广泛采用。它提供了一系列组件和工具来简化微服务架构的开发、部署和管理。本博客将探讨Spring Cloud微服务技术选型的各个方面&#xff0c;帮…