学习Uni-app开发小程序Day20

news2024/11/15 15:46:31

今天学习了：页面的渐变背景、使用deep修改子组件样式、全屏页面absolute定位布局和fit-content内容宽度、遮罩层状态转换及日期格式化、uni-popup弹窗层制作弹出信息

页面的渐变背景

需要设置页面背景，使用的是多个页面，这样就可以把背景做成组件，只用在需要的地方调用，例如：，这里是某一页面的最外层的盒子，这里是给盒子定义了一个名称，然后在添加了自定义的样式pageBg，在文件夹common下的scss文件，

.pageBg{
	   background: 
		linear-gradient(to bottom,transparent,#fff 400rpx),
		linear-gradient(to right,#beecd8 20%,#F4E2D8); 
	   min-height: 80vh;
   }

这就实现了页面的渐变。说真的，小白不清楚为什么，只是知道怎么用，这里老师有文档详细解释，只是自己看的云里雾里的，
css渐变背景，linear-gradient()线性渐变和radial-gradient()径向渐变

deep的使用

:deep(){
	.uni-icons{
		color: $brand-theme-color !important;
		}
   }

这是使用deep修改子组件的样式，里面有关键字 !important，这里并不是很清楚，只能是在网上查看，看是什么意思，
deep的使用

absolute定位布局和fit-content内容宽度

这是在当全局都有使用的时候，可以把相同的这部分样式放在外部，这样子组件就不用在写这个了，

	&>view {
				position: absolute;
				left: 0;
				margin: auto;
				right: 0;
				color: #fff;
				width: fit-content; //fit-content代表内容多大自定义宽度
			}

这就是放在外部，其他子组件就不用写了，这里是用的&>view

遮罩层状态转换及日期格式化

这里是在页面上添加浮框，
在这里插入图片描述
就是做成这种效果，这里不做过多说明，直接上代码

.mask {
			&>view {
				position: absolute;
				left: 0;
				margin: auto;
				right: 0;
				color: #fff;
				width: fit-content; //fit-content代表内容多大自定义宽度
			}

			.goBack {}

			.count {
				top: 10vh;
				background: rgba(0, 0, 0, 0.3);
				font-size: 28rpx;
				border-radius: 40rpx;
				padding: 8rpx 28rpx;
				backdrop-filter: blur(10rpx);
			}

			.time {
				font-size: 140rpx;
				top: calc(10vh + 80rpx);
				font-weight: 100;
				line-height: lem;
				text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
			}

			.data {
				font-size: 34rpx;
				top: calc(10vh + 230rpx);
				text-shadow: 0 2rpx rgba(0, 0, 0, 0.3);
			}

			.footer {
				background: rgba(255, 255, 255, 0.8);
				bottom: 10vh;
				width: 65vw;
				height: 120rpx;
				border-radius: 120rpx;
				color: #000;
				display: flex;
				justify-content: space-around;
				align-items: center;
				box-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.1);
				backdrop-filter: blur(20rpx);

				.box {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 2rpx 12rpx;

					.text {
						font-size: 26rpx;
						color: $text-font-color-2;
					}
				}
			}
		}

这里主要是样式的使用，下面是页面的布局

<view class="mask" v-if="maskState">
			<view class="goBack">

			</view>
			<view class="count">
				3/9
			</view>
			<view class="time">
				<uni-dateformat :date="Date.now()" format="hh:mm"></uni-dateformat>
			</view>
			<view class="data">
				<uni-dateformat :date="Date.now()" format="MM月dd日"></uni-dateformat>
			</view>
			<view class="footer">
				<view class="box" @click="clickInfo">
					<uni-icons type="info" size="28"></uni-icons>
					<text class="text">信息</text>

				</view>

				<view class="box" @click="clickScore">
					<uni-icons type="star" size="28"></uni-icons>
					<text class="text">5分</text>

				</view>

				<view class="box">
					<uni-icons type="download" size="23"></uni-icons>
					<text class="text">下载</text>

				</view>
			</view>
		</view>

uni-popup弹窗层制作弹出信息

这是最复杂的，目前只是跟着视频做出来的，但是没有达到自己弄来
在这里插入图片描述
这是效果图，也是当期这个也买最复杂的布局和样式，这里就把全部代码放着，自己目前也是不怎么清楚

<template>
	<view class="preview">
		<swiper current autoplay indicator-dots :interval="3000" :duration="1000">
			<swiper-item v-for="item in 4">
				<image @click="maskChange" src="../../common/images/preview1.jpg" mode="aspectFilla"></image>
			</swiper-item>

		</swiper>

		<view class="mask" v-if="maskState">
			<view class="goBack">

			</view>
			<view class="count">
				3/9
			</view>
			<view class="time">
				<uni-dateformat :date="Date.now()" format="hh:mm"></uni-dateformat>
			</view>
			<view class="data">
				<uni-dateformat :date="Date.now()" format="MM月dd日"></uni-dateformat>
			</view>
			<view class="footer">
				<view class="box" @click="clickInfo">
					<uni-icons type="info" size="28"></uni-icons>
					<text class="text">信息</text>

				</view>

				<view class="box" @click="clickScore">
					<uni-icons type="star" size="28"></uni-icons>
					<text class="text">5分</text>

				</view>

				<view class="box">
					<uni-icons type="download" size="23"></uni-icons>
					<text class="text">下载</text>

				</view>
			</view>
		</view>

		<uni-popup ref="infoPopup" type="bottom">
			<view class="infoPopup">
				<view class="popHeader">
					<view></view>
					<view class="title">壁纸信息</view>
					<view class="close" @click="infoClose">
						<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
					</view>
				</view>

				<scroll-view scroll-y>
					<view class="content">
						<view class="row">
							<view class="label">
								壁纸Id：
							</view>
							<text selectable class="value">1111111111111</text>
						</view>

						<view class="row">
							<view class="label">分类：</view>
							<text class="value class">明星美女</text>
						</view>

						<view class="row">
							<view class="label">发布者：</view>
							<text class="value">name</text>
						</view>

						<view class="row">
							<text class="label">评分：</text>
							<view class='value roteBox'>
								<uni-rate readonly touchable size="16" value="3.5" />
								<text class="score">5分</text>
							</view>
						</view>

						<view class="row">
							<text class="label">摘要：</text>
							<view class='value'>
								zaiyao
							</view>
						</view>

						<view class="row">
							<text class="label">标签：</text>
							<view class='value tabs'>
								<view class="tab" v-for="item in 3">
									aaa
								</view>
							</view>
						</view>

						<view class="copyright">
							声明：本图片来用户投稿，非商业使用，用于免费学习交流，如侵犯了您的权益，您可以拷贝壁纸ID举报至平台，邮箱513894357@qq.com，管理将删除侵权壁纸，维护您的权益。

						</view>

						<view class="safe-area-inset-bottom"></view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>

		<uni-popup ref="scorePopup" type="center">
			<view class="scorePopup">
				<view class="popHeader">
					<view></view>
					<view class="title">壁纸评分</view>
					<view class="close" @click="clickScoreClose">
						<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
					</view>
				</view>

				<view class="content">
					<uni-rate v-model="userScore" allowHalf disabled disabled-color="#FFCA3E" />
					<text class="text">5分</text>
				</view>

				<view class="footer">
					<button @click="submitScore" :disabled="!userScore || isScore" type="default" size="mini"
						plain>确认评分</button>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	// 点击图片隐层显示图片上的浮框
	const maskState = ref(true)
	const maskChange = () => {
		maskState.value = !maskState.value
	}
	// 点击信息,从底部弹出框
	const infoPopup = ref(null);
	const clickInfo = () => {
		infoPopup.value.open();
	}
	// 点击关闭底部弹框
	const infoClose = () => {
		infoPopup.value.close();
	}

	const scorePopup = ref(null)
	// 评分弹窗
	const clickScore = () => {
		scorePopup.value.open();
	}
	// 关闭评分弹窗
	const scoreClose = () => {
		scorePopup.value.closer();
	}
</script>

<style lang="scss" scoped>
	.preview {
		width: 100%;
		height: 100vh;

		swiper {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.mask {
			&>view {
				position: absolute;
				left: 0;
				margin: auto;
				right: 0;
				color: #fff;
				width: fit-content; //fit-content代表内容多大自定义宽度
			}

			.goBack {}

			.count {
				top: 10vh;
				background: rgba(0, 0, 0, 0.3);
				font-size: 28rpx;
				border-radius: 40rpx;
				padding: 8rpx 28rpx;
				backdrop-filter: blur(10rpx);
			}

			.time {
				font-size: 140rpx;
				top: calc(10vh + 80rpx);
				font-weight: 100;
				line-height: lem;
				text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
			}

			.data {
				font-size: 34rpx;
				top: calc(10vh + 230rpx);
				text-shadow: 0 2rpx rgba(0, 0, 0, 0.3);
			}

			.footer {
				background: rgba(255, 255, 255, 0.8);
				bottom: 10vh;
				width: 65vw;
				height: 120rpx;
				border-radius: 120rpx;
				color: #000;
				display: flex;
				justify-content: space-around;
				align-items: center;
				box-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.1);
				backdrop-filter: blur(20rpx);

				.box {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 2rpx 12rpx;

					.text {
						font-size: 26rpx;
						color: $text-font-color-2;
					}
				}
			}
		}

		.popHeader {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				color: $text-font-color-2;
				font-size: 26rpx;
			}

			.close {
				padding: 6rpx;
			}
		}


		.infoPopup {
			background: #fff;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			overflow: hidden;


			scroll-view {
				max-height: 60vh;

				.content {
					.row {
						display: flex;
						padding: 16rpx 0;
						font-size: 32rpx;
						line-height: 1.7em;

						.label {
							color: $text-font-color-3;
							width: 140rpx;
							text-align: right;
							font-size: 30rpx;
						}

						.value {
							flex: 1;
							width: 0;

						}

						.roteBox {
							display: flex;
							align-items: center;

							.score {
								font-size: 26rpx;
								padding-left: 10rpx;
								color: $text-font-color-2;
							}
						}

						.tabs {
							display: flex;
							flex-wrap: wrap;

							.tab {
								border: 1px solid $brand-theme-color;
								color: $brand-theme-color;
								font-size: 22rpx;
								padding: 10rpx 30rpx;
								border-radius: 40rpx;
								line-height: 1em;
								margin: 0 10rpx 10rpx 0;
							}
						}

						.class {
							color: $brand-theme-color;
						}
					}

					.copyright {
						font-size: 28rpx;
						padding: 20rpx;
						background: #F6F6F6;
						color: #666;
						border-radius: 10rpx;
						margin: 20rpx 0;
						line-height: 1.6em;
					}
				}
			}
		}

		.scorePopup {
			background: #fff;
			background: #fff;
			padding: 30rpx;
			width: 70vw;
			border-radius: 30rpx;

			.content {
				padding: 30rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;

				.text {
					color: #FFCA3E;
					padding-left: 10rpx;
					width: 80rpx;
					line-height: 1em;
					text-align: right;
					font-size: 28rpx;
				}
			}

			.footer {
				padding: 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>

以上就是今天学习的，发现开始有点吃力了，大量的css样式，一点都清楚，也记不住，看来还要多学习css，学海无涯！！！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

深度学习之CNN卷积神经网络

深度学习之CNN卷积神经网络

一.卷积神经网络 1. 导入资源包 import numpy as np import pandas as pd import matplotlib.pyplot as plt import sklearn import tensorflow as tf from tensorflow import keras注&#xff1a;from tensorflow import keras&#xff1a;从TensorFlow库中导入Keras模块&am…
阅读更多...
关于Linux软链你必须知道的实用知识点（非常详细）零基础入门到精通，收藏这一篇就够了

关于Linux软链你必须知道的实用知识点（非常详细）零基础入门到精通，收藏这一篇就够了

背景 Linux中的软链&#xff0c;是非常强大的工具&#xff0c;如果只是一知半解&#xff0c;在解决问题时一定会让你栽跟头或者浪费大量的时间。非常有必要提前掌握Linux软链的几个实用的知识点。 分析 软链是什么&#xff1f; 在Linux中&#xff0c;软链接&#xff08;sym…
阅读更多...
Echarts 实现线条绘制

Echarts 实现线条绘制

文章目录 需求分析 需求 用 Echarts 实现如下效果 分析
阅读更多...
PS Adobe Photoshop 2024 for Mac[破]图像处理软件[解]PS 2024安装教程[版]

PS Adobe Photoshop 2024 for Mac[破]图像处理软件[解]PS 2024安装教程[版]

Adobe Photoshop 2024 for Mac[破]图像处理软件[解]PS 2024安装教程[版] 原文地址&#xff1a;https://blog.csdn.net/weixin_48311847/article/details/139248839
阅读更多...
mysql去除重复数据

mysql去除重复数据

需求描述 doc表有很多重复的title,想去除掉重复的记录 表结构 CREATE TABLE doc (id INT PRIMARY KEY,title VARCHAR(255),content TEXT );去重SQL -- 创建临时表 CREATE TEMPORARY TABLE temp_doc AS SELECT * FROM doc WHERE 10;-- 插入唯一的记录&#xff08;每个title最…
阅读更多...
【ARM+Codesys案例】基于全志T3+Codesys软PLC的3C点胶边缘控制解决方案：整合了运动控制、视觉、激光测高等技术

【ARM+Codesys案例】基于全志T3+Codesys软PLC的3C点胶边缘控制解决方案：整合了运动控制、视觉、激光测高等技术

视觉精密点胶控制方案 针对直交型机构的平面点涂胶应用&#xff0c;基于CODESYS软件平台开发的一站式PC型控制器解决方案&#xff0c;包含运动控制器硬件和点胶应用软件。方案整合了运动控制、视觉、激光测高等技术&#xff0c;高效精密的控制胶水点涂于产品表面或内部&#x…
阅读更多...
使用ETL读取文件数据并快速写入mysql中

使用ETL读取文件数据并快速写入mysql中

本文介绍使用国产的ETL工具ETLCloud平台来读取文件文件中的数据到mysql数据库中&#xff0c;首先需要安装ETLCloud的社区版本&#xff0c;然后在示例应用中创建一个文件读取流程如下&#xff1a; 点击“流程设计”后打开流程图如下 打开文本文件读取节点配置要读取的文件目录和…
阅读更多...
【数据结构（邓俊辉）学习笔记】二叉树04——Huffman树

【数据结构（邓俊辉）学习笔记】二叉树04——Huffman树

文章目录 0. 概述1. 无前缀冲突编码2. 编码成本3. 带权编码成本4. 编码算法5. 算法实现流程6. 时间复杂度与改进方案 0. 概述 学习Huffman树。 1. 无前缀冲突编码 在加载到信道上之前&#xff0c;信息被转换为二进制形式的过程称作编码&#xff08;encoding&#xff09;&…
阅读更多...
免费插件集-illustrator插件-Ai插件-文本对象分行

免费插件集-illustrator插件-Ai插件-文本对象分行

文章目录 1.介绍2.安装3.通过窗口>扩展>知了插件4.功能解释5.总结 1.介绍 本文介绍一款免费插件&#xff0c;加强illustrator使用人员工作效率&#xff0c;进行文本对象分行。首先从下载网址下载这款插件 https://download.csdn.net/download/m0_67316550/87890501&…
阅读更多...
python数据处理中的类型检查与转换技巧

python数据处理中的类型检查与转换技巧

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、类型检查的重要性 二、类型检查与转换技巧 1. 识别数据类型不一致 2. 使用astype()方…
阅读更多...
CSS学习笔记：rem实现移动端适配的原理——媒体查询

CSS学习笔记：rem实现移动端适配的原理——媒体查询

移动端适配 移动端即手机端&#xff0c;也称M端 移动端适配&#xff1a;同一套移动端页面在不同屏幕尺寸的手机上可以实现宽度和高度的自适应&#xff0c;也就是页面中元素的宽度和高度可以根据屏幕尺寸的变化等比缩放 rem配合媒体查询可实现移动端适配 rem单位 媒体查询 …
阅读更多...
校企携手｜泰迪智能科技与高新启动「大数据应用技术」深度合作项目

校企携手｜泰迪智能科技与高新启动「大数据应用技术」深度合作项目

5月22日&#xff0c;广东泰迪智能科技股份有限公司携手广东省高新技术高级技工学校举行“泰迪高新技术学校大数据双创工作室”暨广东省“产教评”技能生态链学生学徒公共实训基地签约揭牌仪式&#xff0c;标志着双方合作共建大数据应用技术专业、产教生态链实训基地及泰迪高新大…
阅读更多...
【机器学习】Chameleon多模态模型探究

【机器学习】Chameleon多模态模型探究

Chameleon&#xff1a;引领多模态模型的新时代 一、多模态模型的时代背景二、Chameleon模型的介绍三、Chameleon模型的技术特点四、Chameleon模型的性能评估五、Chameleon模型的代码实例 随着人工智能技术的深入发展&#xff0c;我们逐渐认识到单一模态的模型在处理复杂问题时存…
阅读更多...
MySQL--二进制日志

MySQL--二进制日志

目录 一、作用 二、binlog配置 1.查看当前配置 2.修改配置文件​ 3.binlog配置参数解释 三、binlog记录内容说明 1.记录内容 2.DDL、DCL记录格式 3.DML记录格式 4.记录内容查看 四、bin_log_format 记录模式 1.行模式 Row 2.语句模式 Statement 3.混合模式 五、…
阅读更多...
亚信安慧AntDB数据库与华为数据存储完成兼容性互认证

亚信安慧AntDB数据库与华为数据存储完成兼容性互认证

迎接数智时代&#xff0c;供给核心科技。日前&#xff0c;湖南亚信安慧科技有限公司&#xff08;简称&#xff1a;亚信安慧&#xff09;与华为技术有限公司&#xff08;简称&#xff1a;华为&#xff09;&#xff0c;完成了AntDB数据库产品与OceanProtect备份一体机及Oceanstor…
阅读更多...
Autoware 技术代码解读（三）

Autoware 技术代码解读（三）

Tip: 如果你在进行深度学习、自动驾驶、模型推理、微调或AI绘画出图等任务&#xff0c;并且需要GPU资源&#xff0c;可以考虑使用Compshare的GPU算力云平台。他们提供高性价比的4090 GPU&#xff0c;按时收费每卡2.6元&#xff0c;月卡只需要1.7元每小时&#xff0c;并附带200G…
阅读更多...
物联网应用系统与网关

物联网应用系统与网关

一. 传感器底板相关设计 1. 传感器设计 立创EDA传感器设计举例。 2. 传感器实物图 3. 传感器测试举例 测试激光测距传感器 二. 网关相关设计 1. LORA&#xff0c;NBIOT等设计 2. LORA&#xff0c;NBIOT等实物图 3. ZigBee测试 ZigBee测试 4. NBIoT测试 NBIoT自制模块的测试…
阅读更多...
LAMP集群分布式实验报告

LAMP集群分布式实验报告

前景&#xff1a; 1.技术成熟度和稳定性&#xff1a; LAMP架构&#xff08;Linux、Apache、MySQL、PHP&#xff09;自1998年提出以来&#xff0c;经过长时间的发展和完善&#xff0c;已经成为非常成熟和稳定的Web开发平台。其中&#xff0c;Linux操作系统因其高度的灵活性和稳…
阅读更多...
​LabVIEW超声波检测

​LabVIEW超声波检测

LabVIEW超声波检测 在现代工业生产和科学研究中&#xff0c;超声检测技术因其无损性、高效率和可靠性而被广泛应用于材料和结构的缺陷检测。然而&#xff0c;传统的超声检测仪器往往依赖于操作者的经验和技能&#xff0c;其检测过程不够智能化&#xff0c;且检测结果的解读具有…
阅读更多...
【产品运营】对接上游电商平台需要了解什么？

【产品运营】对接上游电商平台需要了解什么？

围绕卖家和平台的运营模式等维度&#xff0c;ISV对接平台可以划分为业务域、开放能力域和产品能力域。 ISV对接平台的最终目地是打通多方数据传输&#xff0c;解决卖家日常运营中的场景起到类似于业务中台的作用。因此我们可以围绕卖家和平台的运营模式等维度划分为&#xff1a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023