关闭按钮
.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>