newyqg/pages/hall/halllist.vue

<template>
	<view class="center">
		<view class="content-money">
			<view class="status_bar"><!-- 这里是状态栏 --></view>
			<view class="money-box">
				<view class="goback-box" @click="toBack"><image class="goback" src="../../static/img/fanhui.png" mode=""></image></view>
				<view class="header">浙江馆</view>
				<image class="money_bg" src="../../static/img/hinfo-bg.png"></image>
				<view class="message flex" @click="nav('/pages/index/message')">
					<image class="message-left" src="../../static/img/hinco.png" mode=""></image>
					<view class="message-font clamp">全民动员，公告内容信息公告消息显123456789</view>
					<image class="message-right" src="../../static/img/backb.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="shingle-mmain flex">
			<view class="smmain-item">
				<view class="smitem-top red">开放中</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"><image src="../../static/img/busy.png" mode=""></image></view>
				</view>
				<view class="smitem-bottom">流畅</view>
			</view>
		</view>
		<view class="main">
			<view class="mtitle-english">AFTERNOON SHOWS</view>
			<view class="mmain flex" @click="nav('/pages/hall/hallinfo')">
				<view class="mmain-info">
					<view class="mmain-title">
						<image class="mmaint-left" src="../../static/img/afternooninco.png" mode=""></image>
						<view class="mmaint-font">下午场</view>
						<view class="mmaint-time">13:59开售</view>
					</view>
					<view class="mmain-time" style="margin-top: 28rpx;">预约时间:9:30-13:53</view>
					<view class="mmain-time">入场时间:9:30-13:53</view>
					<view class="mmain-time flex">
						<view class="mmain-font">距预约结束:</view>
						<view class="lyy-b-jz flex">
							<uni-countdowns
								color="#FFFFFF"
								splitor-color="#4166FC"
								background-color="#4166FC"
								border-color="#4166FC"
								:show-day="false"
								:hour="stopTime.stopTimeH"
								:minute="stopTime.stopTimeM"
								:second="stopTime.stopTimeS"
							></uni-countdowns>
						</view>
					</view>
				</view>
				<view class="mmain-image"><image src="../../static/img/afternoon.png" mode=""></image></view>
			</view>
			<view class="bottom" @click="open()">
				<view class="bottom-font">立即预约</view>
				<image class="bottom-image" src="../../static/img/jt.png" mode=""></image>
			</view>
		</view>
		<view class="main">
			<view class="mtitle-english">EVENING SHOWS</view>
			<view class="mmain flex" @click="nav('/pages/hall/hallinfo')">
				<view class="mmain-info">
					<view class="mmain-title">
						<image class="mmaint-left" src="../../static/img/eveninginco.png" mode=""></image>
						<view class="mmaint-font">下午场</view>
						<view class="mmaint-time">13:59开售</view>
					</view>
					<view class="mmain-time" style="margin-top: 28rpx;">预约时间:9:30-13:53</view>
					<view class="mmain-time">入场时间:9:30-13:53</view>
					<view class="mmain-time flex">
						<view class="mmain-font">距预约结束:</view>
						<view class="lyy-b-jz flex">
							<uni-countdowns
								color="#FFFFFF"
								splitor-color="#4166FC"
								background-color="#4166FC"
								border-color="#4166FC"
								:show-day="false"
								:hour="stopTime.stopTimeH"
								:minute="stopTime.stopTimeM"
								:second="stopTime.stopTimeS"
							></uni-countdowns>
						</view>
					</view>
				</view>
				<view class="mmain-image"><image src="../../static/img/evening.png" mode=""></image></view>
			</view>
			<view class="bottom" @click="open()">
				<view class="bottom-font">立即预约</view>
				<image class="bottom-image" src="../../static/img/jt.png" mode=""></image>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="popup-title">是否立即预约？</view>
				<view class="btn-box">
					<view class="btn-left" @click="close()">取消</view>
					<view class="btn-right" @click="close()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniCountdowns from '@/components/uni-countdown/uni-countdowns.vue';
export default {
	components: {
		uniCountdowns
	},
	data() {
		return {
			// 倒计时
			stopTime: {
				stopTimeH: 1,
				stopTimeM: 1,
				stopTimeS: 1
			}
		};
	},
	methods: {
		open() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		nav(url) {
			uni.navigateTo({
				url
			})
		},
		toBack() {
			uni.navigateBack({
				
			})
		}
	}
};
</script>

<style lang="less">
page,
.center {
	height: auto;
	min-height: 100%;
	background: #f2f5f4;
}
.money-box {
	color: #ffffff;
	text-align: center;
	position: relative;
	.header {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 80rpx;
		font-size: 32rpx;
		font-weight: 700;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.goback-box {
		position: absolute;
		left: 18rpx;
		top: 0;
		height: 80rpx;
		display: flex;
		align-items: center;
	}
	.goback {
		z-index: 100;
		width: 34rpx;
		height: 34rpx;
	}
	.money_bg {
		width: 100%;
		height: 480rpx;
		display: block;
	}
	.message {
		justify-content: space-around;
		position: absolute;
		top: 270rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		padding: 16rpx 40rpx 16rpx 50rpx;
		width: 690rpx;
		background: #ffffff;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
		.message-left {
			width: 52rpx;
			height: 52rpx;
			flex-shrink: 0;
		}
		.message-font {
			margin: 0 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #0c1732;
		}
		.message-right {
			width: 18rpx;
			height: 30rpx;
		}
	}
}
.shingle-mmain {
	position: relative;
	z-index: 2;
	margin: -90rpx auto 0;
	width: 690rpx;
	height: 176rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	background-color: #ffffff;
	.smmain-item {
		width: 33%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.red {
			color: #fd3b39 !important;
		}
		.smitem-top {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bolder;
			color: #0c1732;
		}
		.smitem-bottom {
			margin-top: 10rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #0c1732;
		}
		.people {
			justify-content: center;
			.peopleitem {
				width: 24rpx;
				height: 34rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.shu {
		width: 2rpx;
		height: 70rpx;
		background: #dcdcdc;
	}
}
.main {
	margin: 30rpx auto 0;
	padding: 50rpx 50rpx 36rpx 50rpx;
	width: 690rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	.mtitle-english {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #9ea6ba;
	}
	.mmain {
		margin-top: 24rpx;
		.mmain-info {
			.mmain-title {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.mmaint-left {
					width: 52rpx;
					height: 40rpx;
				}
				.mmaint-font {
					margin-left: 10rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #0c1732;
				}
				.mmaint-time {
					margin-left: 20rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #0c1732;
				}
			}
			.mmain-time {
				margin-top: 10rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #0c1732;
				.lyy-b-jz {
					margin-left: 10rpx;
				}
			}
		}
		.mmain-image {
			padding-top: 14rpx;
			width: 182rpx;
			height: 182rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.bottom {
		margin-top: 32rpx;
		width: 380rpx;
		height: 64rpx;
		background: #375afe;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.bottom-font {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
		}
		.bottom-image {
			margin-left: 12rpx;
			width: 24rpx;
			height: 22rpx;
		}
	}
}
.popup {
	width: 582rpx;
	height: 378rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding-top: 118rpx;
	.popup-title {
		text-align: center;
		font-size: 42rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #0c1732;
	}
	.btn-box {
		padding: 90rpx 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.btn-left {
			width: 248rpx;
			height: 78rpx;
			border: 2rpx solid #4166fc;
			border-radius: 10rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #4166fc;
			text-align: center;
			line-height: 78rpx;
		}
		.btn-right {
			width: 248rpx;
			height: 78rpx;
			background: linear-gradient(0deg, rgba(60, 237, 237, 0.99), #04b8ff, #375afe);
			border-radius: 10rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			text-align: center;
			line-height: 78rpx;
		}
	}
}
</style>