Add new components for login and comment functionality

components/kl-card-detail/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="box-border w-100% flex cursor-pointer rounded-4px bg-[#F4F5F6] pa-15px">
+    <div>
+      <el-image :src="props.cardItemInfo.iconUrl" class="h-90px w-90px rounded-4px" fit="cover"></el-image>
+    </div>
+    <div class="ml-9px box-border">
+      <div class="mt-8px flex items-center justify-between">
+        <div>
+          <div class="title text-16px text-[#333333] font-normal">{{ props.cardItemInfo.title }}</div>
+          <div class="description mt-14px text-14px text-[#999999] font-normal">{{ props.cardItemInfo.description }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue'
+  import type { ProjectDrawPageRespVO } from '@/api/home/type'
+
+  const props = defineProps({
+    cardItemInfo: {
+      type: Object as PropType<ProjectDrawPageRespVO>,
+      required: true,
+    },
+    ellipsisNum: {
+      type: Number,
+      default: 1,
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  .title {
+    @include ellipsis(1);
+  }
+  .description {
+    @include ellipsis(v-bind(ellipsisNum));
+  }
+</style>