记录特别代码样式

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);
	}
}
相关推荐
慢慢雨夜22 分钟前
uniapp 苹果安全域适配
java·前端·uni-app
凄凄迷人25 分钟前
前端基于Rust实现的Wasm进行图片压缩的技术文档
前端·rust·wasm·图片压缩
敲代码不忘补水27 分钟前
二十种编程语言庆祝中秋节
java·javascript·python·golang·html
我码玄黄34 分钟前
JS 的行为设计模式:策略、观察者与命令模式
javascript·设计模式·命令模式
史努比的大头39 分钟前
前端开发深入了解性能优化
前端
码农研究僧41 分钟前
Java或者前端 实现中文排序(调API的Demo)
java·前端·localecompare·中文排序·collator
营赢盈英1 小时前
OpenAI API key not working in my React App
javascript·ai·openai·reactjs·chatbot
吕永强1 小时前
HTML表单标签
前端·html·表单标签
范特西是只猫2 小时前
echarts map地图动态下钻,自定义标注,自定义tooltip弹窗【完整demo版本】
前端·javascript·echarts