首页热门推荐面板

src/pages/index/components/hot-panel/components/item.vue

@@ -0,0 +1,26 @@
+<script setup>
+
+</script>
+
+<template>
+  <view class="p-2 bg-white border border-[#F8F8F8]">
+    <view class="flex justify-between">
+      <text class="font-bold">热门推荐</text>
+      <text class="text-sm text-gray-500">xxx攻略</text>
+    </view>
+
+    <view class="flex">
+      <view class="w-1/2 h-full p-2 mx-auto text-center">
+        <image src="/static/logo.png" mode="widthFix" class="w-1/2 h-full"></image>
+      </view>
+
+      <view class="w-1/2 h-full p-2 mx-auto text-center">
+        <image src="/static/logo.png" mode="widthFix" class="w-1/2 h-full"></image>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+
+</style>

src/pages/index/components/hot-panel/index.vue

@@ -0,0 +1,13 @@
+<script setup>
+import Item from "./components/item.vue"
+</script>
+
+<template>
+  <view class="flex flex-wrap">
+    <Item class="w-1/2" v-for="i in 4"/>
+  </view>
+</template>
+
+<style scoped>
+
+</style>

src/pages/index/index.vue

@@ -4,6 +4,9 @@
 
     <view class="flex-1 flex-grow-1 min-h-0 content overflow-auto">
       <Banner/>
+
+      <HotPanel/>
+
       <ZhiHuHotList/>
 
       <view class="text-center">
@@ -20,12 +23,14 @@
 import moment from 'moment'
 import NavBar from "./components/nav-bar/index.vue"
 import Banner from "./components/banner/index.vue"
+import HotPanel from "./components/hot-panel/index.vue"
 import ZhiHuHotList from "./components/zhihu-hot-list/index.vue"
 let timer = null
 export default {
   components: {
     NavBar,
     Banner,
+    HotPanel,
     ZhiHuHotList
   },
   data() {