feat: 添加图片

IdeaLeap · Jan 23, 2023 · e9bd522 · e9bd522
1 parent 3d1085d
commit e9bd522
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/frontend/components/Post/Item.vue b/frontend/components/Post/Item.vue
@@ -21,10 +21,10 @@ const enteredtopicHeat: (string | number)[] = props.topicHeat.map((item) => {
 </script>
 
 <template>
-  <li class="focus:text-slate-500 px-6 py-4 transition-all bg-white hover:bg-gray-50 b-b b-grey all-cursor-pointer">
-    <NuxtLink :to="`/${uname}`">
-      <div class="flex items-center all-px-3" style="font-size: 1.2rem;">
-        <span class="text-5 border-r-1 pl-0">{{ uname }}</span>
+  <li class="focus:text-slate-500 flex justify-between items-center py-4 transition-all bg-white hover:bg-gray-50 b-b b-grey all-cursor-pointer">
+    <NuxtLink class="flex-auto pl-5 truncate" :to="`/${uname}`" style="flex: 1">
+      <div class="flex items-center all-px-4 pr-4" style="font-size: 13px;">
+        <span class="border-r-1 pl-0">{{ uname }}</span>
         <span class="text-gray-500 border-r-1">{{ duration }}前</span>
         <div class="flex">
           <div v-for="(tag, index) in tags" :key="index" class="al-px-0 px-0 text-gray-500 items-center flex">
@@ -34,19 +34,19 @@ const enteredtopicHeat: (string | number)[] = props.topicHeat.map((item) => {
         </div>
       </div>
       <div class="py-4">
-        <div class="title font-semibold tracking-wide" style="font-size: 1.55rem;">
+        <div class="title font-semibold tracking-wide" style="font-size: 16px;">
           {{ title }}
         </div>
-        <div class="pt-4 text-slate-500 truncate" style="font-size: 1.15rem;">
+        <div class="truncate pt-4 text-slate-500" style="font-size: 13px;">
           {{ desc }}
         </div>
       </div>
-      <div class="flex all-flex all-items-center all-text-slate-700" style="font-size: 1.25rem;">
+      <div class="flex all-flex all-items-center all-text-slate-700" style="font-size: 13px;">
         <div>
           <div class="i-carbon-view" />
           <span class="pl-2">{{ enteredtopicHeat[0] ? enteredtopicHeat[0] : '观看' }}</span>
         </div>
-        <div class="mx-10">
+        <div class="mx-7">
           <div class="i-carbon-thumbs-up" />
           <span class="pl-2">{{ enteredtopicHeat[1] ? enteredtopicHeat[1] : '点赞' }}</span>
         </div>
@@ -56,6 +56,17 @@ const enteredtopicHeat: (string | number)[] = props.topicHeat.map((item) => {
         </div>
       </div>
     </NuxtLink>
+    <div class="px-4">
+      <nuxt-img
+        src="/og-image.png"
+        width="120"
+        height="80"
+        loading="lazy"
+        fit="cover"
+        quality="80"
+        format="webp"
+      />
+    </div>
   </li>
 </template>
 

diff --git a/frontend/components/Post/index.vue b/frontend/components/Post/index.vue
@@ -47,10 +47,10 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="all-text-black pb-5 px-5 box-border">
-    <div class="flex all-cursor-pointer all-px-7 all-my-4 border-b-1 all-text-gray-500" style="font-size: 1.35rem;">
-      <a id="recommend" class="text-blue navlist border-r-2" @click="artModeHandler('recommend')">推荐</a>
-      <a id="latest" class="navlist border-r-2" @click="artModeHandler('latest')">最新</a>
+  <div class="all-text-black pb-5 box-border w-full">
+    <div class="flex all-cursor-pointer all-px-7 all-my-4 border-b-1 all-text-gray-500" style="font-size: 13.67px;">
+      <a id="recommend" class="text-blue navlist border-r-1" @click="artModeHandler('recommend')">推荐</a>
+      <a id="latest" class="navlist border-r-1" @click="artModeHandler('latest')">最新</a>
       <a id="hot" class="navlist" @click="artModeHandler('hot')">热榜</a>
       <select
         v-if="artlistNav === 'hot'" v-model="hotRange" class="text-2 px-2 border-1"
@@ -70,7 +70,7 @@ onUnmounted(() => {
         </option>
       </select>
     </div>
-    <ul v-if="!isLoading || initialItem">
+    <ul v-if="!isLoading && initialItem" class="w-full overflow-hidden">
       <PostItem
         v-for="items in artlistData" :key="items.uname" :uname="items.uname" :duration="items.duration"
         :title="items.title" :desc="items.desc" :tags="items.tags" :topic-heat="items.topicHeat"