实现知乎热榜box

src/components/HotItemBox.vue

@@ -9,11 +9,13 @@ function createHotItemBox(data = {}) {
   }
 }
 
-var hotItemBox = createHotItemBox({
+const hotItemBox = createHotItemBox({
   num: 1,
-  title: 'test',
-  content: 'test content',
-  imgUrl: 'test img url',
+  title:
+    '外卖员吐槽殡仪馆深夜有人点外卖，警方已介入，这是真实订单还是恶作剧？平台如何平衡配送要求与骑手心理安全？',
+  content:
+    '6 月 25 日，一位外卖小哥吐槽殡仪馆员工深夜点外卖的视频引发网友热议。该外卖小哥晒出一张晚上 11 点 24 分，收货地为泰安市泰山殡仪馆的外卖配送订单，并喊话：殡仪馆领导管管你的员工，大半夜点什么柠檬水。27 日，外卖订单涉及的商家证实确有此订单，但一直无人接单已为顾客退款。泰山区殡仪服务中心（泰山殡仪馆）的工作人员表示领导已注意到网上的视频，是恶作剧还是确有员工点了餐，正在核实当中。目前，当地警方已介入。 视频中晒出的接单截图显示，该订单为一杯冰鲜柠檬水，收货地为泰山殡仪馆东南门，并备注「进去门往里走」，订单显示 45 分钟内（明天 00：10 前）送达。记者看到，这名外卖小哥在评论区称，该订单最终没有人接单。记者向这名小哥发去私信，一直未得到回复。 在视频评论区，一名网友称上述柠檬水订单因无人配送被退单后，同样的收货地又点了一份汉堡套餐。这名网友晒出的订单截图显示，收货地址为泰山殡仪馆，购买货品为一份汉堡套餐，且备注「提前点送达投诉」，配送时间为 31 分钟内（明天 00:19 前）送达。 24 日晚收货地为泰山殡仪馆的两张外卖订单。（来源 / 网络） 记者在地图上查询发现，泰山殡仪馆所在位置比较空旷，位于泰安市西南，东侧与京台高速相邻，从最近马路到达殡仪馆大门，需穿行一段 500 多米的小路，殡仪馆四周均为未利用土地，西侧离最近的居民区直线距离 500 多米，该殡仪馆紧挨当地的卧虎山公墓。 该视频在网上引发大量网友关注、讨论。有网友自称在殡仪馆工作，表示有时候晚上值班确实饿，点外卖经常被退单。也有网友建议殡仪馆工作人员深夜不要点外卖，确实没有几个人敢前往配送。还有网友质疑该订单是不是恶作剧。 记者联系到配送订单中涉及的蜜雪冰城某门店，工作人员证实 24 日晚 11 点多确实有一单送往泰山殡仪馆的订单，一直没有外卖员接单，该订单只能退款，饮品作报废处理。另一位网友晒出的订单中涉及的汉堡店工作人员也证实，24 日晚 11 点多，有一单送往泰山殡仪馆的订单，已被作退款处理。 泰安市泰山区殡仪服务中心的工作人员表示他了解到领导已注意到网上的视频，正在核实此事，殡仪馆晚上确实有人员值班，是确有员工点了外卖还是恶作剧，目前他都不了解。 6 月 27 日，记者拨打了外卖配送平台的客服热线，客服人员表示，顾客下单后订单会发送给附近的骑手，骑手可以选择接单或不接单，平台无法强制骑手，如遇长时间没有骑手接单的情况，可以通过增加配送费的方式吸引骑手接单。 发稿前，泰安警方向记者表示，已介入此事正在核实当中。上游新闻',
+  imgUrl: 'https://pic4.zhimg.com/50/v2-2fe83b271083fa4fa2db251931dea8fd_400x224.jpg',
   hotValue: 200
 })
 </script>
@@ -21,14 +23,14 @@ var hotItemBox = createHotItemBox({
 <template>
   <div id="hot-item-box">
     <div id="hot-item-header">
-      <span>{{ hotItemBox.num }}</span>
+      <span class="index">{{ 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="content">{{ hotItemBox.content }}</div>
+      <div class="ext">
+        <span>✨{{ hotItemBox.hotValue }}热度</span>
+        <span><button>✈分享</button></span>
       </div>
     </div>
     <div id="hot-item-footer">
@@ -41,18 +43,69 @@ var hotItemBox = createHotItemBox({
 #hot-item-box {
   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%;
-  text-align: center;
+  width: 5%;
+  margin-right: 10px;
+  font-size: large;
 }
+
 #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;
+  }
+
+  .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%;
+  width: 35%;
+}
+
+#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>