//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>
//全局组件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>
