src/components/HotItemBox.vue

@@ -1,180 +1,58 @@
 <script setup>
-// 使用更清晰的类型定义
+function createHotItemBox(data = {}) {
-// const hotItem = {
+  return {
-//   num: 1,
+    num: data.num || 1,
-//   title: '外卖员吐槽殡仪馆深夜有人点外卖，警方已介入，这是真实订单还是恶作剧？平台如何平衡配送要求与骑手心理安全？',
+    title: data.title || '',
-//   content: '6 月 25 日，一位外卖小哥吐槽殡仪馆员工深夜点外卖的视频引发网友热议...',
+    content: data.content || '',
-//   imgUrl: 'https://pic4.zhimg.com/50/v2-2fe83b271083fa4fa2db251931dea8fd_400x224.jpg',
+    imgUrl: data.imgUrl || '',
-//   url: '#', // 添加默认链接
+    hotValue: data.hotValue || 0
-//   hotValue: 200,
+  }
-//   isNew: true
+}
-// }
 
-// 或者使用响应式数据
+var hotItemBox = createHotItemBox({
-import { ref } from 'vue'
-
-const hotItemBox = ref({
   num: 1,
-  title:
+  title: 'test',
-    '外卖员吐槽殡仪馆深夜有人点外卖，警方已介入，这是真实订单还是恶作剧？平台如何平衡配送要求与骑手心理安全？',
+  content: 'test content',
-  content: '6 月 25 日，一位外卖小哥吐槽殡仪馆员工深夜点外卖的视频引发网友热议...',
+  imgUrl: 'test img url',
-  imgUrl: 'https://pic4.zhimg.com/50/v2-2fe83b271083fa4fa2db251931dea8fd_400x224.jpg',
+  hotValue: 200
-  link: '#', // 添加默认链接
-  hotValue: 200,
-  isNew: true
 })
 </script>
 
 <template>
-  <div id="hot-item">
+  <div id="hot-item-box">
     <div id="hot-item-header">
-      <div class="hot-item-rank" :class="{ 'hot-item-hot': hotItemBox.num < 3 }">
+      <span>{{ hotItemBox.num }}</span>
-        {{ 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-body">
-      <a :href="hotItemBox.link" :title="hotItemBox.title" target="_blank"
+      <h1>{{ hotItemBox.title }}</h1>
-        ><h1>{{ hotItemBox.title }}</h1></a
+      <div id="content">{{ hotItemBox.content }}</div>
-      >
+      <div id="ext">
-      <a :href="hotItemBox.link" :title="hotItemBox.title" target="_blank">
+        <span>✨{{ hotItemBox.hotValue }}</span>
-        <div class="content">{{ hotItemBox.content }}</div>
+        <span>✈分享</span>
-      </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"
+    <div id="hot-item-footer">
-      ><img :src="hotItemBox.imgUrl" alt="测试"
+      <img :src="hotItemBox.imgUrl" alt="测试" />
-    /></a>
+    </div>
   </div>
 </template>
 
 <style scoped>
-#hot-item {
+#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 {
-  margin-right: 24px;
+  width: 10%;
   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 {
-  flex: 1;
+  width: 60%;
-  position: relative;
-
-  h1 {
-    width: 100%;
-    display: -webkit-box;
-    line-clamp: 2;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
 }
-
+#hot-item-footer {
-  a {
+  width: 30%;
-    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-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,10 +4,6 @@ import HotItemBox from '@/components/HotItemBox.vue'
 
 <template>
   <HotItemBox />
-  <HotItemBox />
-  <HotItemBox />
-  <HotItemBox />
-  <HotItemBox />
 </template>
 
 <style scoped></style>