49 lines
839 B
Vue
49 lines
839 B
Vue
<script setup lang="js">
|
|
import { ref } from 'vue'
|
|
import { CustomCard } from '@/components/CustomCard.js'
|
|
|
|
const customCard = ref(new CustomCard())
|
|
</script>
|
|
<template>
|
|
<div class="card">
|
|
<div class="avatar">
|
|
<!-- <img :src="require(customCard.avatar)" alt="avatar" />-->
|
|
<!-- <img src="./images/avatar.jpg" alt="avatar" />-->
|
|
<img :src="customCard.avatar" alt="avatar">
|
|
</div>
|
|
|
|
<div class="name">
|
|
<h2>{{ customCard.name }}</h2>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<p>{{ customCard.content }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
box-sizing: border-box;
|
|
width: 200px;
|
|
|
|
.avatar {
|
|
width: 50%;
|
|
img {
|
|
width: 80%;
|
|
height: 80%;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
width: 50%;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|