yudao-mall-uniapp/pages/moban.vue

<!-- 项目列表 -->
<template>
	<view class="body" :style="'padding-top:'+bottomHeight">
		<!-- 头部 -->
		<view class="head">
			
		</view>
		<!-- 中部 -->
		<view class="list-wrap">
			<scroll-view scroll-y="true" class="list">
				<view class="list-scroll-view">
					<view class="course-card">
					</view>
                </view>
            </scroll-view>
        </view>
	</view>
</template>
<script setup>
import {
		reactive,
		ref
	} from 'vue';
	import {
		computed
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onReady,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	// 隐藏原生tabBar
	uni.hideTabBar();
	
	//获取顶部安全距离
	const app = uni.getSystemInfoSync()
	const bottomHeightOne = (app.statusBarHeight) + 'rpx'
	const bottomHeight = ref(bottomHeightOne)
</script>
<style scoped lang="scss">
// 上中下布局样式
.body {
	display: flex;
	flex-direction: column;
	height: 100vh;
	 background: linear-gradient(to bottom, #08A3E9, #F8FCFF);
}
.head {
	text-align: center;
}
// 中部滚动
.list-wrap {
	flex-grow: 1;
	position: relative;
}
.list {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.list-scroll-view {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-left: 2vw;
	margin-right: 2vw;
}
.course-card {
	width: 47vw;
	margin-top: 10px;
	margin-bottom: 10px;
}
// 底部
.tools {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.tools-item {
	width: 45px;
	text-align: center;
	font-size: 14px;
	padding: 20px;
}
</style>