wx-dangyuanjiaoyujidi/pages/index/index.vue

<template>
	<view class="content">
		<view class="box-top">
			<image src="../../static/img/index_bg.jpg" class="index_bg"></image>
		</view>
		<view class="box-notice">
			<u-notice-bar mode="vertical" @click="openInfo" :list="list" more-icon color="#9E8F8B"></u-notice-bar>
		</view>
		<view class="box-body">
			<view class="box-body-title">
				<image src="../../static/img/index_name.png" class="box-body-title-img"></image>
				<view class="box-body-sub-title">开馆时间：周二～周日 9:00-17:00 周一闭馆</view>
			</view>
			<view style="margin-top: 56rpx;">
				<view class="box-row">
					<view class="box-col">
						<image src="../../static/img/index_icon_1.png" class="box-body-icon"></image>
					</view>
					<view class="box-col">
						<image src="../../static/img/index_icon_2.png" class="box-body-icon"></image>
					</view>
					<view class="box-col">
						<image src="../../static/img/index_icon_3.png" class="box-body-icon"></image>
					</view>
					</u-row>
				</view>
			</view>
		</view>
		<view class="box-footer" style="position: fixed;bottom: -60rpx;left: 0;text-align: center;width: 100%;">
			<image src="../../static/img/footer_logo.png" class="footer-img"></image>
		</view>

		<u-popup :show="showInfo" mode="center">
			<view>
				<text>人生若只如初见，何事秋风悲画扇</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showInfo: false,
				list: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				]
			}
		},
		onLoad() {

		},
		methods: {
			openInfo() {
				console.log(23223)
				this.showInfo = true;
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.box-row {
		display: flex;
		justify-content: space-around;
	}

	.box-top {
		width: 100%;
	}

	.index_bg {
		width: 100%;
		height: 613rpx;
	}

	.box-notice {
		width: 100%;
		background-color: #F9F7F3;
		height: 63rpx;
		margin-top: -20rpx;
		border-top-left-radius: 15rpx !important;
		border-top-right-radius: 15rpx !important;
	}

	.u-notice-bar-wrap {
		border-top-left-radius: 15rpx !important;
		border-top-right-radius: 15rpx !important;
	}

	.box-body {
		width: 100%;
		padding: 82rpx 37rpx;
	}

	.box-body-title-img {
		height: 36rpx;
		width: 329rpx;
	}

	.box-body-sub-title {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #8A8A8A;
		margin-top: 20rpx;
	}

	.box-body-icon {
		width: 217rpx;
		height: 230rpx;
	}

	.footer-img {
		width: 421rpx;
		height: 364rpx;
	}
</style>