xietang-school-wx/pages/index/index.vue

<template>
	<view class="wrap">
		<view class="navBarBox" :class="{'hasbg':isScroll}" :style="{height:navBarBoxHeight+'rpx'}">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{paddingTop: statusBarHeight+'px'}"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view>冬训云课堂</view>
			</view>
		</view>

		<view class="content">
			<view class="topbg"></view>
			<view class="banner" :style="{'margin-top':bannerTop+'rpx'}"></view>

			<view class="content-content">
				<view class="icons">
					<image v-for="item in iconList" :src="item.src" @click="toMenu(item.id)"></image>
				</view>
				<view class="icons icons-out">
					<image v-for="item in iconOutList" :src="item.src" @click="toMenuOut(item.url)"></image>
				</view>
			</view>
			<image class="menus-title" :src="require('@/static/index-title.png')"></image>
			<view class="menus-list">
				<view class="menus-list-item" v-for="item in menuList" @click="toDetail(item.id)">
					<image class="menus-list-img" :src="item.src"></image>
					<view class="menus-list-title">{{item.title}}</view>
				</view>
			</view>


		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				navBarBoxHeight: 0,
				statusBarHeight: 40,
				bannerTop: 0,
				isScroll: false,
				iconList: [{
					id: 1,
					src: require("../../static/index-icon1.png")
				}, {
					id: 1,
					src: require("../../static/index-icon2.png")
				}, {
					id: 1,
					src: require("../../static/index-icon3.png")
				}],
				iconOutList: [{
					url: 1,
					src: require("../../static/index-icon4.png")
				}, {
					url: 1,
					src: require("../../static/index-icon5.png")
				}],
				menuList: [{
						id: 1,
						src: require("../../static/index-img.png"),
						title: "习近平经济思想"
					}, {
						id: 1,
						src: require("../../static/index-img.png"),
						title: "习近平总书记关于党的建设的重要思想"
					},
					{
						id: 1,
						src: require("../../static/index-img.png"),
						title: "习近平生态文明思想"
					}
				]

			}
		},
		onLoad() {
			// this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			this.navBarBoxHeight = 80 + this.statusBarHeight * 2
			this.bannerTop = this.navBarBoxHeight - 360
			console.log(this.statusBarHeight)
		},
		onPageScroll(e) {
			var that = this;
			if (e.scrollTop > -(this.bannerTop + this.navBarBoxHeight) / 2) {
				that.isScroll = true;
			} else {
				that.isScroll = false;
			}
		},
		methods: {
			toMenu(id) {

			},
			toMenuOut(url) {

			},
			toDetail(id) {

			}
		}
	}
</script>
<style lang="scss">
	.wrap {
		.navBarBox {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 999;
			padding: 0 20rpx;

			.navBar {
				color: #fff;
				font-size: 32rpx;
				text-align: left;
			}
		}

		.hasbg {
			background: linear-gradient(to right, #da212d, #f96666);
		}

		.content {
			// height:1400px;
			padding-bottom: 100rpx;

			.topbg {
				background: url(../../static/index-top.png) no-repeat top left;
				background-size: 100% 100%;
				width: 100%;
				height: 360rpx;
			}

			.banner {
				background: url(../../static/index-banner.png) no-repeat top left;
				background-size: 100% 100%;
				width: 98%;
				height: 383rpx;
				margin: 0 auto;
			}

			&-content {
				padding: 0 20rpx;

				.icons {
					margin: 24rpx 0;
					margin-top: 12rpx;
					display: flex;
					justify-content: space-between;

					image {
						width: 238rpx;
						height: 283rpx;
					}
				}

				.icons-out {
					margin: 0;

					image {
						width: 360rpx;
						height: 195rpx;
					}
				}
			}

			.menus-title {
				width: 100%;
				height: 85rpx;
				margin-top: 48rpx;
				margin-bottom: 24rpx;
			}

			.menus-list {
				padding: 0 20rpx;

				&-item {
					display: flex;
					align-items: center;
					background-color: #fff;
					padding: 25rpx;
					box-shadow: 0px 0px 20rpx rgba(0, 0, 0, 0.2);
					border-radius: 25rpx;
					margin-bottom: 24rpx;
					// box-shadow: ;

				}

				&-img {
					width: 196rpx;
					height: 169rpx;
					margin-right: 24rpx;
				}

				&-title {
					color: #333;
					font-size: 32rpx;
					width: 450rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}


		}

		// background: url(../../static/index-top.png) no-repeat top left;
		// background-size: 100% 100%;
		// width:100%;
		// height:360rpx;
	}
</style>