newyqg/pages/hall/hall.vue

<template>
	<view class="center">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<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, index) in list" :key="index" @click="nav(item)">
				<view class="shingle-bg"><image :src="item.image" mode=""></image></view>
				<view class="shinglem-title flex">
					<image class="tbg" src="../../static/img/tbg-left.png" mode=""></image>
					<view class="shinglemt-center">
						<image class="address" src="../../static/img/address.png" mode=""></image>
						<view class="shingle-font">{{ item.name }}</view>
					</view>
					<image class="tbg" src="../../static/img/tbg-right.png" mode=""></image>
				</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 clamp">{{ item.nickname }}</view>
						<view class="smitem-bottom clamp">馆长</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="#f42b4e" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
import { tabbar } from '@/utils/tabbar.js';
import { auction_gu } from '@/api/hall.js';
export default {
	data() {
		return {
			tabbar: tabbar,
			current: 2,
			list: [],
			page: 1,
			limit: 10,
			loadingType: 'more'
		};
	},
	onShow() {
		this.loadData();
	},
	methods: {
		loadData() {
			const obj = this;
			if (obj.loadingType == 'nomore' || obj.loadingType == 'loading') {
				return;
			}
			obj.loadingType = 'loading';
			auction_gu({ pages: obj.page, limit: obj.limit })
				.then(({ data }) => {
					console.log(data);
					this.list = data;
				})
				.catch(e => {
					console.log(e);
				});
		},
		nav(item) {
			uni.navigateTo({
				url: '/pages/hall/halllist?id=' + item.id + '&name=' + item.name + '&peoplename=' + item.nickname
			});
		}
	}
};
</script>

<style lang="less">
.center,
page {
	height: auto;
	min-height: 100%;
	background: #ffffff;
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.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;
		.tbg {
			height: 70rpx;
			width: 40rpx;
		}
		.shinglemt-center {
			display: flex;
			align-items: center;
			background: rgba(220, 38, 43, 0.66);
		}
		.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 {
				text-align: center;
				width: 90%;
				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>