76 lines
1.4 KiB
Vue
76 lines
1.4 KiB
Vue
<template v-if="isRecommend">
|
|
<button class="btn btn-label-primary btn-icon" :class="likeClicked ? 'clicked' : '', bigBtn ? 'big' : '' ">
|
|
<i class="fa-regular fa-thumbs-up"></i> <span class="num">1</span>
|
|
</button>
|
|
<button class="btn btn-label-danger btn-icon" :class="dislikeClicked ? 'clicked' : '', bigBtn ? 'big' : '' ">
|
|
<i class="fa-regular fa-thumbs-down"></i> <span class="num">1</span>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
likeClicked : {
|
|
type : Boolean,
|
|
default : false,
|
|
},
|
|
dislikeClicked : {
|
|
type : Boolean,
|
|
default : false,
|
|
},
|
|
bigBtn : {
|
|
type :Boolean,
|
|
default : false,
|
|
},
|
|
isRecommend: {
|
|
type:Boolean,
|
|
default:true,
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.btn + .btn {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.num {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.btn-label-danger.clicked {
|
|
background-color: #e6381a;
|
|
}
|
|
|
|
.btn-label-danger.clicked i,
|
|
.btn-label-danger.clicked span {
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-label-primary.clicked {
|
|
background-color: #5f61e6;
|
|
}
|
|
|
|
.btn-label-primary.clicked i,
|
|
.btn-label-primary.clicked span {
|
|
color : #fff;
|
|
}
|
|
|
|
.btn {
|
|
width: 55px;
|
|
height: 30px;
|
|
}
|
|
|
|
.btn.big {
|
|
width: 70px;
|
|
height: 70px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
@media screen and (max-width:450px) {
|
|
.btn {
|
|
width: 50px;
|
|
height: 20px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
</style> |