TianHeJianKang/pages/index/index.vue

<template>
	<view class="content">
		<!-- 顶部公告图 -->
		<view class="top">
			<image class="topImg"
				src="http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
				mode=""></image>
			<view class="danMu" v-if="DanMuBoon">
				<DanMu></DanMu>
			</view>
		</view>
		<!-- 我的贵人 -->
		<view class="">
			<GuiRenVue></GuiRenVue>
		</view>
		<!-- 店铺列表 -->
		<view class="listBox">
			<ListVue></ListVue>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		HTTP
	} from '@/api/http.js'
	import {
		onShow,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		jieqiFn
	} from '@/config' //返回节气样式（a,b),a是节气名称，b是类型，1是返回背景颜色，2是返回边框颜色，3是返回字体颜色
	import DanMu from "@/components/DanMu/DanMu.vue"//弹幕
	import GuiRenVue from './components/GuiRen.vue'//贵人轮播图
	import ListVue from './components/List.vue'
	onReachBottom(()=>{//触底加载
		
	})
	const DanMuBoon=ref(false)
	onShow(()=>{
		DanMuBoon.value=false
		let tm=setTimeout(()=>{
			DanMuBoon.value=true
			clearTimeout(tm)
		},200)
	})
</script>

<style lang="scss" scoped>
	page {
		background: #f6f6f6;
	}
// 顶部大图
	.top {
		position: relative;
		font-size: 0;
		.topImg {
			width: 750rpx;
			height: 400rpx;
		}
		.danMu{
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	// 店铺列表
	.listBox{
		margin-top: 30rpx;
	}
</style>