今天学习了：页面的渐变背景、使用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，学海无涯！！！
扫一扫
4012
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
