记录特别代码样式

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);
	}
}
相关推荐
whatever who cares8 分钟前
CSS3 伪元素(Pseudo-elements)大全
前端·css·css3
若愚679210 分钟前
前端取经路——性能优化:唐僧的九道心经
前端·性能优化
积极向上的龙32 分钟前
首屏优化,webpack插件用于给html中js自动添加异步加载属性
javascript·webpack·html
Bl_a_ck1 小时前
开发环境(Development Environment)
开发语言·前端·javascript·typescript·ecmascript
田本初1 小时前
使用vite重构vue-cli的vue3项目
前端·vue.js·重构
ai产品老杨1 小时前
AI赋能安全生产,推进数智化转型的智慧油站开源了。
前端·javascript·vue.js·人工智能·ecmascript
帮帮志1 小时前
vue实现与后台springboot传递数据【传值/取值 Axios 】
前端·vue.js·spring boot
xixingzhe22 小时前
Nginx 配置多个监听端口
服务器·前端·nginx
程序员Bears2 小时前
从零打造个人博客静态页面与TodoList应用:前端开发实战指南
java·javascript·css·html5
清风细雨_林木木3 小时前
Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践
前端·css·vue.js