优化知乎热榜box

src/components/HotItemBox.vue

@@ -1,58 +1,180 @@
 <script setup>
-function createHotItemBox(data = {}) {
-  return {
-    num: data.num || 1,
-    title: data.title || '',
-    content: data.content || '',
-    imgUrl: data.imgUrl || '',
-    hotValue: data.hotValue || 0
-  }
-}
+// 使用更清晰的类型定义
+// const hotItem = {
+//   num: 1,
+//   title: '外卖员吐槽殡仪馆深夜有人点外卖，警方已介入，这是真实订单还是恶作剧？平台如何平衡配送要求与骑手心理安全？',
+//   content: '6 月 25 日，一位外卖小哥吐槽殡仪馆员工深夜点外卖的视频引发网友热议...',
+//   imgUrl: 'https://pic4.zhimg.com/50/v2-2fe83b271083fa4fa2db251931dea8fd_400x224.jpg',
+//   url: '#', // 添加默认链接
+//   hotValue: 200,
+//   isNew: true
+// }
 
-var hotItemBox = createHotItemBox({
+// 或者使用响应式数据
+import { ref } from 'vue'
+
+const hotItemBox = ref({
   num: 1,
-  title: 'test',
-  content: 'test content',
-  imgUrl: 'test img url',
-  hotValue: 200
+  title:
+    '外卖员吐槽殡仪馆深夜有人点外卖，警方已介入，这是真实订单还是恶作剧？平台如何平衡配送要求与骑手心理安全？',
+  content: '6 月 25 日，一位外卖小哥吐槽殡仪馆员工深夜点外卖的视频引发网友热议...',
+  imgUrl: 'https://pic4.zhimg.com/50/v2-2fe83b271083fa4fa2db251931dea8fd_400x224.jpg',
+  link: '#', // 添加默认链接
+  hotValue: 200,
+  isNew: true
 })
 </script>
 
 <template>
-  <div id="hot-item-box">
+  <div id="hot-item">
     <div id="hot-item-header">
-      <span>{{ hotItemBox.num }}</span>
-    </div>
-    <div id="hot-item-body">
-      <h1>{{ hotItemBox.title }}</h1>
-      <div id="content">{{ hotItemBox.content }}</div>
-      <div id="ext">
-        <span>✨{{ hotItemBox.hotValue }}</span>
-        <span>✈分享</span>
+      <div class="hot-item-rank" :class="{ 'hot-item-hot': hotItemBox.num < 3 }">
+        {{ hotItemBox.num }}
+      </div>
+      <div
+        class="hot-item-label"
+        v-if="hotItemBox.isNew"
+        style="background-color: rgb(255, 150, 7)"
+      >
+        新
       </div>
     </div>
-    <div id="hot-item-footer">
-      <img :src="hotItemBox.imgUrl" alt="测试" />
+
+    <div id="hot-item-body">
+      <a :href="hotItemBox.link" :title="hotItemBox.title" target="_blank"
+        ><h1>{{ hotItemBox.title }}</h1></a
+      >
+      <a :href="hotItemBox.link" :title="hotItemBox.title" target="_blank">
+        <div class="content">{{ hotItemBox.content }}</div>
+      </a>
+      <div class="ext">
+        <span>✨{{ hotItemBox.hotValue }}热度</span>
+        <span><button>✈分享</button></span>
+      </div>
     </div>
+    <a class="hot-item-img" :href="hotItemBox.link" :title="hotItemBox.title" target="_blank"
+      ><img :src="hotItemBox.imgUrl" alt="测试"
+    /></a>
   </div>
 </template>
 
 <style scoped>
-#hot-item-box {
+#hot-item {
   width: 600px;
   height: 150px;
-  border: solid 1px red;
   display: flex;
   padding: 16px 0;
+  box-shadow:
+    0 -1px 0 0 rgba(0, 0, 0, 0.1),
+    /* 上方阴影 */ 0 1px 0 0 rgba(0, 0, 0, 0.1); /* 下方阴影 */
+  border: none; /* 去除默认边框 */
 }
+
 #hot-item-header {
-  width: 10%;
+  margin-right: 24px;
   text-align: center;
+
+  .hot-item-rank {
+    color: #9196a1;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 1.6;
+    width: 20px;
+  }
+
+  .hot-item-hot {
+    color: #f77a31;
+  }
+
+  .hot-item-label {
+    font-size: 14px;
+    line-height: 16px;
+    width: 18px;
+    height: 18px;
+    color: #ffffff;
+    border-radius: 2px;
+  }
 }
+
 #hot-item-body {
-  width: 60%;
+  flex: 1;
+  position: relative;
+
+  h1 {
+    width: 100%;
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  a {
+    display: block;
+  }
+
+  a:hover {
+    color: black;
+    background: transparent;
+  }
+
+  .content {
+    width: 100%;
+    display: -webkit-box;
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .ext {
+    line-height: 24px;
+    height: 24px;
+    margin-top: 6px;
+    position: absolute;
+    display: flex;
+
+    span {
+      display: block;
+      width: 100px;
+
+      button {
+        display: block;
+        all: unset;
+        cursor: pointer;
+      }
+    }
+  }
 }
-#hot-item-footer {
-  width: 30%;
+
+.hot-item-img {
+  margin-left: 16px;
+  height: 105px;
+  position: relative;
+  z-index: 1;
+
+  a {
+    display: block;
+  }
+
+  img {
+    height: 105px;
+    width: 190px;
+  }
+}
+
+.hot-item-img:after {
+  content: ''; /* 必须设置 content */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(25, 27, 31, 0.05);
+}
+
+#hot-item-footer img {
+  width: 100%;
+  height: 100%;
 }
 </style>

src/views/HomeView.vue

@@ -4,6 +4,10 @@ import HotItemBox from '@/components/HotItemBox.vue'
 
 <template>
   <HotItemBox />
+  <HotItemBox />
+  <HotItemBox />
+  <HotItemBox />
+  <HotItemBox />
 </template>
 
 <style scoped></style>