localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

버튼 간격 및 버튼 크기 수정

Browse Source
This commit is contained in:
Dang 2024-12-19 10:13:51 +09:00
parent cea58be11a
commit 3c5cbf5b60
2 changed files with 35 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/board/BoardProfile.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center flex-wrap">
<div class="d-flex align-items-center">
<div class="avatar me-2" v-if="unknown">
<img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
@ -22,7 +22,7 @@
</div>
</div>
</div>
<div class="ms-auto">
<div class="ms-auto btn-area">
<template v-if="showDetail">
<button class="btn btn-label-primary btn-icon">
<i class='bx bx-edit-alt'></i>
@ -67,4 +67,11 @@ defineProps({
.ms-auto button + button {
margin-left: 5px;
}
@media screen and (max-width:450px) {
.btn-area {
margin-top: 10px;
width: 100%;
}
}
</style>

27
src/components/board/BoardRecommendBtn.vue
View File

@ -1,8 +1,8 @@
<template>
<button class="btn btn-label-primary btn-icon" :class="likeClicked ? 'clicked' : '' ">
<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' : '' ">
<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>
@ -16,6 +16,10 @@ defineProps({
dislikeClicked : {
type : Boolean,
default : false,
},
bigBtn : {
type :Boolean,
default : false,
}
});
</script>
@ -46,4 +50,23 @@ defineProps({
.btn-label-primary.clicked span {
color : #fff;
}
.btn {
width: 55px;
height: 55px;
}
.btn.big {
width: 70px;
height: 70px;
font-size: 18px;
}
@media screen and (max-width:450px) {
.btn {
width: 50px;
height: 20px;
font-size: 12px;
}
}
</style>