66 lines
1.8 KiB
Vue
66 lines
1.8 KiB
Vue
<template>
|
|
<div class="" role="button">
|
|
<div class="card">
|
|
<div class="d-sm-flex">
|
|
<div v-if="img">
|
|
<img class="card-img card-img-left" :src="img" alt="" style="width: 200px; height: 200px; object-fit: cover" />
|
|
</div>
|
|
<div class="col">
|
|
<div class="card-body">
|
|
<h5 class="card-title align-items-center">
|
|
<slot name="badgeType"></slot>
|
|
{{ title }}
|
|
</h5>
|
|
<p class="card-text str_wrap pt-5">
|
|
{{ content }}
|
|
</p>
|
|
<p class="card-text">
|
|
<small class="text-muted">{{ date }}</small>
|
|
<slot name="optInfo"></slot>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// const data = defineProps(['item']);
|
|
const prop = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '제목',
|
|
required: true,
|
|
},
|
|
content: {
|
|
type: String,
|
|
default: '내용',
|
|
required: true,
|
|
},
|
|
date: {
|
|
type: String,
|
|
default: 'date',
|
|
required: true,
|
|
},
|
|
img: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
});
|
|
|
|
const colSetting = () => {
|
|
img ? 'col-9' : '';
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.str_wrap {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
</style>
|