记录特别代码样式

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);
	}
}
相关推荐
莫物2 分钟前
element el-table表格 添加唯一标识
前端·javascript·vue.js
我看刑3 分钟前
【已解决】el-table 前端分页多选、跨页全选等
前端·vue·element
我会一直在的9 分钟前
Fiddler基础使用介绍
前端·测试工具·fiddler
小明记账簿9 分钟前
前端文件流下载方法封装
前端
IT_陈寒12 分钟前
Vite 5大优化技巧:让你的构建速度飙升50%,开发者都在偷偷用!
前端·人工智能·后端
CodeCraft Studio12 分钟前
Vaadin 25 正式发布:回归标准Java Web,让企业级开发更简单、更高效
java·开发语言·前端·vaadin·java web 框架·纯java前端框架·企业级java ui框架
Shirley~~16 分钟前
PPTist 幻灯片工具栏Toolbar部分
开发语言·前端·javascript
|晴 天|17 分钟前
Promise 与 async/await 错误处理最佳实践指南
开发语言·前端·javascript
苹果电脑的鑫鑫19 分钟前
.eslintrc.js这个文件作用
开发语言·javascript·ecmascript
vx_bisheyuange27 分钟前
基于SpringBoot的便利店信息管理系统
前端·javascript·vue.js·毕业设计