文件路径: E:/homework/uniappv3tswallpaper/pages/preview/preview.vue
<template>
<view class="preview" @click="changeMask">
<swiper circular="true">
<swiper-item v-for="item in 5">
<view class="swiper-item">
<image src="../../common/images/preview1.jpg" mode="aspectFill"></image>
</view>
</swiper-item>
</swiper>
</view>
<view class="mask" v-show="maskState">
<view class="goback">
</view>
<view class="num">
3 / 5
</view>
<view class="time">
<uni-dateformat :date="new Date()" format="hh:mm" />
</view>
<view class="date">
<uni-dateformat :date="new Date()" format="MM月dd日" />
</view>
<view class="footer">
<view class="box" @click="open">
<uni-icons type="info" size="28"></uni-icons>
<view class="text">
信息
</view>
</view>
<view class="box">
<uni-icons type="star" size="28"></uni-icons>
<view class="text">
评分
</view>
</view>
<view class="box">
<uni-icons type="download" size="28"></uni-icons>
<view class="text">
下载
</view>
</view>
</view>
<uni-popup ref="infoPopup" type="bottom">
<view class="infoPopup">
<view class="popHead">
<view class=""></view>
<view class="title">
壁纸信息
</view>
<view class="close" @click="clickInfoClose">
<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
</view>
</view>
<view class="popContent">
<scroll-view scroll-y show-scrollbar="false">
<view class="content">
<view class="row">
<view class="label">
壁纸ID:
</view>
<view class="labelContent">
<text selectable="" class="value">165498642</text>
</view>
</view>
<view class="row">
<view class="label">
分类:
</view>
<view class="labelContent">
<text class="value">明星美女</text>
</view>
</view>
<view class="row">
<view class="label">
发布者:
</view>
<view class="labelContent">
<text class="value">呱呱呱</text>
</view>
</view>
<view class="row">
<view class="label">
评分:
</view>
<view class="labelContent rateBox">
<uni-rate readonly="true" touchable="true" value="3.6" size="16" />
<text class="value">5分</text>
</view>
</view>
<view class="row">
<view class="label">
摘要:
</view>
<view class="labelContent">
<text
class="value">摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</text>
</view>
</view>
<view class="row">
<view class="label">
标签:
</view>
<view class="labelContent tabs" v-for="item in 3">
<text class="value tab">标签名</text>
</view>
</view>
<view class="copyright">
建军事基地附件四哦那个佛哦放假哦计算机的佛i就哦i放到i杰佛i明尼苏达解耦i九年级哦i就欧锦好的话念佛哦你发的时间了哦ijoin的方式哦i
</view>
</view>
</scroll-view>
</view>
</view>
</uni-popup>
</view>
</template>
<script setup>
import {
ref
} from 'vue';
const maskState = ref(true);
const infoPopup = ref(null);
const changeMask = () => {
maskState.value = !maskState.value
};
const open = () => {
infoPopup.value.open()
}
const clickInfoClose =()=>{
infoPopup.value.close()
}
</script>
<style lang="scss" scoped>
.preview {
width: 100%;
height: 100vh;
swiper {
width: 100%;
height: 100%;
.swiper-item {
height: 100%;
width: 100%;
image {
height: 100%;
width: 100%;
}
}
}
}
.mask {
&>view {
position: absolute;
left: 0%;
right: 0%;
margin: auto;
width: fit-content;
color: #fff;
}
// position: relative; // 需要的是相对于整个屏幕的绝对位置,所以在这里不设置这个属性
.num {
top: 10vh;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10rpx);
padding: 8rpx 18rpx;
border-radius: 40rpx;
font-size: 28rpx;
}
.time {
top: calc(10vh + 160rpx);
font-size: 140rpx;
font-weight: 100;
line-height: 1rem;
text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
}
.date {
top: calc(10vh + 280rpx);
font-size: 34rpx;
text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
}
.footer {
bottom: 10vh;
background: rgba(255, 255, 255, 0.8);
width: 65vw;
height: 120rpx;
border-radius: 120rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-evenly;
align-items: center;
.box {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
padding: 2rpx 12rpx;
.text {
color: $text-font-color-2;
font-size: 26rpx;
}
}
}
.infoPopup {
background: #fff;
padding: 30rpx;
border-radius: 30rpx 30rpx 0 0;
overflow: hidden;
color: black;
.popHead {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
.title {
color: $text-font-color-2;
font-size: 26rpx;
}
.close {
padding: 6rpx;
}
}
.popContent {
height: 60vh;
scroll-view {
height: 100%;
.content {
.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: center;
padding: 16rpx 0;
font-size: 32rpx;
line-height: 1.7rem;
.label {
width: 25%;
text-align: right;
color: $text-font-color-3;
font-size: 30rpx;
}
.labelContent {
flex: 1;
width: 0;
}
.rateBox {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
.value {
font-size: 26rpx;
color: $text-font-color-3 ;
padding-left: 25rpx;
}
}
.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: 1rem;
margin: 0 10rpx 10rpx 0;
width: fit-content;
}
}
}
.copyright {
font-size: 22rpx;
padding: 20rpx;
background: #f6f6f6;
color: #666;
border-radius: 10rpx;
margin: 20rpx 0;
line-height: 1.6rem;
width: 100%;
}
}
}
}
}
}
</style>
注意:
<view class="popHead">
<view class=""></view>
<view class="title">
壁纸信息
</view>
<view class="close" @click="clickInfoClose">
<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
</view>
</view>
这里添加一个空 view 的目的是在flex布局中,能够让另外两个元素分别居中和居右。这里有更好的办法。
元素需要可以被选中的时候用 text 标签和 selectable 属性。