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-16 16:44:41 +09:00
parent 0f89f506eb
commit 8034f1fc37
2 changed files with 61 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Comment.vue
View File

@ -1,9 +1,21 @@
<template>
<div>
<Profile/>
<ul class="list-unstyled">
<li>
<Profile profileName=곤데리 :showDetail="false" />
<div>저도 궁금합니다.</div>
<ul class="list-unstyled twoDepth">
<li>
<Profile profileName=곤데리2 :showDetail="false" />
<div>저도 궁금합니다.</div>
</li>
</ul>
</li>
<li>
<Profile profileName=곤데리 :showDetail="false" />
<div>저도 궁금합니다.</div>
</li>
</ul>
<div>페이지네이션2</div>
</div>
</template>
<script setup>
@ -12,6 +24,9 @@ import Profile from './Profile.vue';
</script>
<style lang="scss" scoped>
<style scoped>
.twoDepth {
margin-top: 20px;
padding-left: 20px;
}
</style>

46
src/components/Profile.vue
View File

@ -1,29 +1,61 @@
<template>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle">
<div class="avatar me-2" v-if="unknown">
<img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">만드레</h6>
<small>2024.12.10 10:46</small>
<h6 class="mb-0">{{ profileName }}</h6>
<div class="profile-detail">
<span>2024.12.10 10:46</span>
<template v-if="showDetail">
<span>
<i class="fa-regular fa-eye"></i> 1
</span>
<span>
<i class="fa-regular fa-thumbs-up"></i> 1
</span>
<span>
<i class="fa-regular fa-thumbs-down"></i> 1
</span>
</template>
</div>
</div>
</div>
<div class="ms-auto">
<button class="btn btn-label-primary btn-icon">
<i class="bx bx-user-check bx-md"></i>
<i class="fa-regular fa-thumbs-up"></i>
</button>
<button class="btn btn-label-primary btn-icon">
<i class="bx bx-user-check bx-md"></i>
<i class="fa-regular fa-thumbs-down"></i>
</button>
</div>
</div>
</template>
<script setup>
defineProps({
profileName : {
type: String,
required: true,
},
unknown : {
type: Boolean,
default: true,
},
showDetail : {
type: Boolean,
default: true,
},
});
</script>
<style scoped>
.profile-detail span ~ span {
margin-left: 5px;
}
.ms-auto button + button {
margin-left: 5px;
}
</style>