记录特别代码样式

csharp 复制代码
<view class="item-bottom">
<template v-for="(it, index) in item.train" >
			<image class="item-img-box" @click="preImg(item.train, index)" :key="index" v-show="index < 4" :src="it.fileDomain + it.filePath"></image>
		</template>
		<view v-if="item.train.length > 4" class="item-img-num" >
			<view>
				+{{ item.train.length - 4 }}
			</view>
		</view>
	</view>
scss 复制代码
.item-bottom {
	border-radius: 8rpx;
	display: flex;
	position: relative;
	&> .item-img-box:last-child {
		margin-right: unset;
	}
	.item-img-box {
		margin-right: 20rpx;
		width: 154rpx;
		height: 154rpx;
		border-radius: 6rpx;
		overflow: hidden;
		image {
			
			width: 100%;
			height: 100%;
		}
	}
	.item-img-num {
		position: absolute;
		border-radius: 6rpx;
		overflow: hidden;
		right: 6rpx;
		width: 154rpx;
		height: 154rpx;
		text-align: center;
		line-height: 154rpx;
		background-color: rgba(0,0,0,0.44);
		color: rgba(255,255,255,1);
	}
}
相关推荐
剪刀石头布啊1 分钟前
js数组之快速组、慢数组、密集数组、稀松数组
前端
mango_mangojuice23 分钟前
Linux学习笔记(make/Makefile)1.23
java·linux·前端·笔记·学习
Days20501 小时前
简单处理接口返回400条数据本地数据分页加载
前端
Novlan11 小时前
@tdesign/uniapp 图标瘦身
前端
ManThink Technology1 小时前
如何使用EBHelper 简化EdgeBus的代码编写?
java·前端·网络
铅笔侠_小龙虾1 小时前
Flutter 实战: 计算器
开发语言·javascript·flutter
大模型玩家七七1 小时前
梯度累积真的省显存吗?它换走的是什么成本
java·javascript·数据库·人工智能·深度学习
. . . . .2 小时前
shadcn组件库
前端
2501_944711432 小时前
JS 对象遍历全解析
开发语言·前端·javascript
发现一只大呆瓜2 小时前
虚拟列表:支持“向上加载”的历史消息(Vue 3 & React 双版本)
前端·javascript·面试