学习Uni-app开发小程序Day20

今天学习了：页面的渐变背景、使用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>