CSS3:清除、关闭按钮绘制

关闭按钮 

.close {
			position: relative;
			margin-top: 4px;
			width: 30px;
			height: 30px;
			cursor: pointer;
			&::before{
				position: absolute;
				top: 5px;
				left: 14px;
				content: "";
				display: block;
				height: 20px;
				width: 2px;
				background-color: #fff;
				transform: rotate(45deg)
			}
			&::after{
				position: absolute;
				top: 5px;
				right: 14px;
				content: "";
				display: block;
				height: 20px;
				width: 2px;
				background-color: #fff;
				transform: rotate(-45deg)
			}
			&:hover{
				&::before{
					background-color: red;
				}
				&::after{
					background-color: red;
				}
			}
		}

上下转换箭头：

.content {
			position: relative;
			width: 300px;
			margin-right: 10px
			display: flex;
			flex-wrap: wrap;
			padding: 10px 4px 0;
			border: 1px solid $border-color;
			border-radius: 5px;


			.item {
				display: flex;
				margin-left: 5px;
				padding: 4px 10px;
				margin-bottom: 10px;
				background-color: #d7d7d7;

			}

			.placeholder {
				margin-top: -5px;
				color: gray;
				font-weight: 200;
			}
			&::after{
				position: absolute;
				right: 8px;
				top:calc(50% - 8px) ;
				display: block;
				content: "";
				transform: rotate(45deg);
				height: 10px;
				width: 10px;
				border-right: 1px solid $border-color;
				border-bottom: 1px solid $border-color;
				
			}
			&.up::after{
				position: absolute;
				right: 8px;
				top:calc(50% - 2px) ;
				display: block;
				content: "";
				transform: rotate(-135deg);
				height: 10px;
				width: 10px;
				border-right: 1px solid $border-color;
				border-bottom: 1px solid $border-color;
				
			}
}

模板中使用：

<div class="card" @click="show = true">
	<p class="p">卡券:</p>
	<div  :class="['content',{up:show}]">
		<div class="item" v-for="item in selectedList" :key="item.bonus_coupon_id">
			<span>{{item.bonus_coupon_name}}</span>
			<div class="clear" @click.stop="remove_item(item)"></div>
		</div>
		<p v-if="selectedList.length===0" class="placeholder">请选择红包劵，可择1-5张</p>
	</div>
</div>