javascript
复制代码
//index.vue
<view class="topic">
<!-- 磨砂背景 -->
<view class="content">
<matte v-for="(item,index) in 8" :key="index"></matte>
<matte isMore="false"></matte>
</view>
</view>
<style scoped lang="scss">
.topic{
margin-top: 20rpx;
.content{
margin-top: 30rpx;
display: grid;
gap:10rpx;
grid-template-columns: repeat(3,1fr);
}
}
</style>
javascript
复制代码
//全局组件matte
<template>
<view class="matte">
<navigator class="box" url="" v-if="!isMore">
<image class="pic" src="../../common/images/classify1.jpg" mode="aspectFill"></image>
<view class="top">· 12小时前更新</view>
<view class="bottom">明星美女</view>
</navigator>
<!-- 更多 -->
<navigator class="box more" url="" v-else>
<image class="pic" url="../../common/images/more.jpg"></image>
<view class="bottom">
<uni-icons type="more-filled" size="30" color="#fff"></uni-icons>
<view class="text">更多</view>
</view>
</navigator>
</view>
</template>
<script setup>
defineProps({
isMore:{
type:Boolean,
default:false
}
})
</script>
<style lang="scss">
.matte{
.box{
height: 340rpx;
border-radius: 10rpx;
overflow: hidden;
position: relative;
.pic{
width: 100%;
height: 100%;
}
.top{
position: absolute;
top:0;
left:0;
background: rgba(250,129,90,0.7);
padding:4rpx 16rpx;
font-size: 22rpx;//最小字体
color: #fff;
transform: scale(0.8);//缩小字体
transform-origin: left top;//缩小字体不会移动位置
border-radius: 0 0 20rpx 0;
}
.bottom{
width: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
left: 0;
bottom:0;
height: 70rpx;
background-color: rgba(0,0,0,0.2);
backdrop-filter: blur(20rpx);//磨砂效果
color: #fff;
font-size: 30rpx;
}
}
.box.more{
.bottom{
width: 100%;
height: 100%;
flex-direction: column;
}
.text{
font-size: 28rpx;
}
}
}
</style>