Add new components for login and comment functionality

components/kl-card-picture/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="mb-20px w-100% cursor-pointer overflow-hidden border border-[#EEEEEE] rounded-10px border-solid bg-[#FFFFFF]" @click="handleClick">
+    <div>
+      <el-image :src="props.itemInfo.iconUrl" class="h-216px w-100%" fit="cover"></el-image>
+    </div>
+    <div class="box-border p-16px">
+      <div class="flex items-center justify-between">
+        <div>
+          <div class="title mr-38px text-16px text-[#333333] font-bold">{{ props.itemInfo.title }}</div>
+          <div class="mt-8px text-15px text-[#999999] font-normal">by {{ props.itemInfo?.ownedUserIdInfo?.nickName }}</div>
+        </div>
+        <div><img :src="props.itemInfo?.ownedUserIdInfo?.avatar" alt="" srcset="" class="h-40px w-40px rd-50%" /></div>
+      </div>
+      <div class="mt-24px flex items-center justify-between">
+        <div class="flex items-center justify-between text-14px text-[#666666] font-normal">
+          <div class="mr-9px flex items-center">
+            <img src="@/assets/images/look.png" alt="" srcset="" class="mr-2px h-17px" />
+            <span class="color-#666">{{ props.itemInfo.previewPoint }}</span>
+          </div>
+          <div class="mr-9px flex items-center">
+            <img src="@/assets/images/add.png" alt="" srcset="" class="mr-2px h-22px" />
+            <span class="color-#666">{{ props.itemInfo.hotPoint }}</span>
+          </div>
+          <div class="flex items-center">
+            <img src="@/assets/images/chat.png" alt="" srcset="" class="mr-4px h-17px" />
+            <span class="color-#666">{{ props.itemInfo.commentsPoint }}</span>
+          </div>
+        </div>
+        <div class="h-30px w-90px cursor-pointer border border-[#1A65FF] rounded-15px border-solid text-center line-height-30px"
+          ><span class="text-14px text-[#1A65FF] font-normal">查看详情</span></div
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue'
+  import type { pageRes } from '@/api/upnew/types'
+  const props = defineProps({
+    itemInfo: {
+      type: Object as PropType<pageRes['list'][0]>,
+      default: () => {
+        return {}
+      },
+    },
+  })
+
+  const handleClick = () => {
+    console.log(props.itemInfo)
+
+    // 跳转到下载详情页 并且是单独开标签
+    window.open(`/down-drawe-detail?id=${props.itemInfo.id}`, '_blank') // 修改为在新窗口打开
+  }
+</script>
+
+<style lang="scss" scoped>
+  .title {
+    @include ellipsis(1);
+  }
+</style>