add

src/components/ContentCard.vue

@@ -1,74 +0,0 @@
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  props: {
-    post: { type: null, required: true }
-  },
-  data() {
-    return {
-      childPost: {}
-    }
-  },
-  created() {
-    this.childPost = this.post
-  }
-})
-</script>
-<template>
-  <div class="card">
-    <div class="title">
-      <h2>{{ childPost.title }}</h2>
-    </div>
-
-    <div class="content">
-      <p>{{ childPost.content }}</p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.card {
-  box-sizing: border-box;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.24);
-  border-radius: 4px;
-  padding: 8px;
-  cursor: pointer;
-  margin: 10px 0;
-  /* height: 100px; */
-}
-
-.card .title {
-  /* height: 24px; */
-  line-height: 24px;
-  /* margin-bottom: 4px; */
-  padding-bottom: 4px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.24);
-}
-
-.card .title:hover {
-  color: burlywood;
-}
-
-.card .content {
-  padding: 4px;
-  /* height: 100%; */
-  /* max-height: calc(100% - 36px); */
-}
-
-.card .content p {
-  /* 单行显示 */
-  text-overflow: ellipsis;
-  overflow: hidden;
-  word-break: break-all;
-  white-space: nowrap;
-  /* 多行显示 */
-  /* word-break: break-all;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical; */
-  /*  */
-  /* height: 100%; */
-}
-</style>

src/components/CustomCard.js

@@ -0,0 +1,7 @@
+export class CustomCard {
+  constructor(avatar = 'src/components/images/avatar.jpg', name = '雨霖铃', content = '人生孤旅,天真以渡') {
+    this.avatar = avatar
+    this.name = name
+    this.content = content
+  }
+}

src/components/CustomCard.vue

@@ -0,0 +1,48 @@
+<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>

src/views/HomeView.vue

@@ -1,4 +1,6 @@
-<script setup></script>
+<script setup>
+import CustomCard from '@/components/CustomCard.vue'
+</script>
 
 <template>
   <main>
@@ -41,6 +43,7 @@
 
     <aside>
       <h2>Photography</h2>
+      <CustomCard />
       <ul class="photos"></ul>
     </aside>
   </main>