newyqg/pages/hall/hall.vue

<template>
	<view class="center">
		<view class="top">
			<image class="top-bg" src="../../static/img/hall-bg.png" mode=""></image>
			<view class="title">趣豆会馆</view>
		</view>
		<view class="hall-main"><image src="../../static/img/hell-main.png" mode=""></image></view>
		<view class="hall-center">
			<view class="shingle-main" v-for="item in 10" @click="nav('/pages/hall/halllist')">
				<view class="shingle-bg"><image src="../../static/img/sim-bg.png" mode=""></image></view>
				<view class="shinglem-title flex">
					<image class="address" src="../../static/img/address.png" mode=""></image>
					<view class="shingle-font">浙江馆</view>
				</view>
				<view class="shingle-mmain flex">
					<view class="smmain-item">
						<view class="smitem-top">开放中</view>
						<view class="smitem-bottom">状态</view>
					</view>
					<view class="shu"></view>
					<view class="smmain-item">
						<view class="smitem-top">纯平</view>
						<view class="smitem-bottom">馆长</view>
					</view>
					<view class="shu"></view>
					<view class="smmain-item">
						<view class="people flex">
							<view class="peopleitem" v-for="item in 1"><image src="../../static/img/busy.png" mode=""></image></view>
							<view class="peopleitem" v-for="item in 4"><image src="../../static/img/leisure.png" mode=""></image></view>
						</view>
						<view class="smitem-bottom">流畅</view>
					</view>
				</view>
				<image class="right-bottom" src="../../static/img/right-bottom.png" mode=""></image>
			</view>
		</view>
		<u-tabbar activeColor="#375AFE" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
import { tabbar } from '@/utils/tabbar.js';
export default {
	data() {
		return {
			tabbar: tabbar,
			current: 2
		};
	},
	methods: {
		nav(url){
			uni.navigateTo({
				url
			})
		}
	}
};
</script>

<style lang="less">
.center,
page {
	height: auto;
	min-height: 100%;
	background: #ffffff;
}
.top {
	position: relative;
	width: 750rpx;
	height: 346rpx;
	.top-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		height: 346rpx;
	}
	.title {
		padding-top: 20rpx;
		text-align: center;
		position: relative;
		z-index: 2;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}
}
.hall-main {
	margin: -252rpx auto 0;
	width: 700rpx;
	height: 300rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.hall-center {
	margin-top: 34rpx;
}
.shingle-main {
	margin: 20rpx auto;
	width: 690rpx;
	height: 218rpx;
	position: relative;
	.shingle-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 690rpx;
		height: 218rpx;
		image {
			width: 690rpx;
			height: 218rpx;
		}
	}
	.shinglem-title {
		position: relative;
		z-index: 2;
		justify-content: center;
		height: 70rpx;
		.address {
			width: 28rpx;
			height: 30rpx;
		}
		.shingle-font {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			line-height: 70rpx;
			margin-left: 14rpx;
		}
	}
	.shingle-mmain {
		position: relative;
		z-index: 2;
		margin-top: 30rpx;
		.smmain-item {
			width: 33%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.smitem-top {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
			}
			.smitem-bottom {
				margin-top: 10rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
			.people {
				justify-content: center;
				.peopleitem {
					width: 24rpx;
					height: 34rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.shu {
			width: 2rpx;
			height: 70rpx;
			background: #ffffff;
		}
	}
	.right-bottom {
		position: absolute;
		z-index: 2;
		right: 0;
		bottom: 0;
		width: 94rpx;
		height: 92rpx;
	}
}
</style>