样式如下:
方式一:使用图片
<template>
<div class="main">
<div class="win">
<div class="title">
<i class="icon close-icon"/>
</div>
</div>
</div>
</template>
<style scoped>
.main {
padding: 20px;
}
.win {
width: 300px;
height: 200px;
background: #ccc;
border-radius: 3px;
}
.title {
height: 30px;
background: mediumaquamarine;
}
.icon {
cursor: pointer;
float: right;
margin: 5px;
}
.close-icon {
content: url('~@images/close.png')
}
.close-icon:hover {
content: url('~@images/close-hover.png')
}
</style>
方式二:使用 el-icon
<template>
<div class="main">
<div class="win">
<div class="title">
<i class="icon el-icon-close"/>
</div>
</div>
</div>
</template>
<style scoped>
.main {
padding: 20px;
}
.win {
width: 300px;
height: 200px;
background: #ccc;
border-radius: 3px;
}
.title {
height: 30px;
background: mediumaquamarine;
}
.icon {
cursor: pointer;
float: right;
margin: 5px;
}
.icon:hover {
color: red;
}
</style>