审批流css样式

最新推荐文章于 2024-01-30 19:36:35 发布

FuturePeriod

最新推荐文章于 2024-01-30 19:36:35 发布

阅读量806

点赞数

文章标签： css html

本文链接：https://blog.youkuaiyun.com/weixin_45244453/article/details/119948505

版权

本文介绍了一个使用 Vue 的组件，展示了如何通过列表渲染带有动态图标和自定义布局的流程细胞。通过 flexbox 实现了过程单元格的布局，并详细解释了 iconDot 图标和 per-box 类的样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<view class="lineBox">
		<view class="process-cell"  v-for="(dot,index) in list" :key="dot.index">
			<view class="per-box">
				<view class="iconDot"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type:Array
			},
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	/* 流程 */
	.process-cell{
		position: relative;
		padding: 24rpx 0;
		display: flex;
	}
	.process-cell::after{
		content: '';
		position: absolute;
		left: 120rpx;
		right: 0;
		bottom: 0;
		height: 1px;
		background-color: #eeeeee;
	}
	.process-cell .per-box{
		position: relative;
		width: 30rpx;
		height: 30rpx;
		margin-right: 36rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 28rpx;
	}
	.iconDot{
		width: 30rpx;
		height: 30rpx;
		background: #1677FF;
		border-radius: 50%;
	}
	/* 分割 */
	.per-box >image{
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
		display: block;
	}
	.per-box .icon{
		position: absolute;
		right: -10rpx;
		bottom: -10rpx;
		font-size: 0;
	}
	.per-box .icon image{
		width: 38rpx;
		height: 38rpx;
	}
	.process-cell::before{
		width: 6rpx;
		border-left: 6rpx solid #EEEEEE;
		content: '';
		position: absolute;
		left: 13rpx;
		top: 0;
		bottom: -30rpx;
	}
	.process-ing-cell::before{
		border-left: 6rpx dashed #EEEEEE;
	}
	.process-cell:first-child::before{
		top: 30rpx;
	}
	.process-cell:nth-last-child(2)::before{
		bottom: -45rpx;
	}
	.process-cell:last-child::before{
		display: none;
	}
</style>

![在这里插入图片描述](https://img-blog.csdnimg.cn/f7dcf808bb4f47cc9aab24801b32e178.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBARnV0dXJlUGVyaW9k,size_13,color_FFFFFF,t_70,g_se,x_16#pic_center)