personnel_management_mobile/pages/takeTicket/index.vue

<template>
	<!-- 外层容器固定设计稿1920*1080，大屏自动等比缩放 -->
	<view class="wrap" :style="scaleStyle">
		<!-- 顶部蓝色头部 -->
		<view class="header-bar">
			<view class="header-left">
				<text class="win-no">窗口号：001</text>
				<view class="user-dept">
					<text>王专员</text>
					<text>人社局</text>
				</view>
			</view>
			<view class="exit-btn" @click="handleExit">
				<!-- 退出电源图标 预留image -->
				<img class="icon-exit" src="../../static/images/home/logout_icon.png" />
				<text>退出</text>
			</view>
		</view>

		<!-- 中间内容区域 -->
		<view class="content-box">
			<view class="item-col">
				<text class="col-title">当前叫号</text>
				<text class="call-no">A0001</text>
			</view>
			<view class="item-col">
				<text class="col-title">当前等候</text>
				<text class="wait-num">10人</text>
			</view>
		</view>

		<!-- 底部功能按钮区 -->
		<view class="btn-group">
			<view class="btn-item green" @click="handleCall">
				<img class="btn-icon" src="../../static/images/takeTicket/hj_icon.png" mode="aspectFit"></img>
				<text>呼叫</text>
			</view>
			<view class="btn-item blue" @click="handleReCall">
				<img class="btn-icon" src="../../static/images/takeTicket/ch_icon.png" mode="aspectFit"></img>
				<text>重呼</text>
			</view>
			<view class="btn-item sky" @click="handleTransfer">
				<img class="btn-icon" src="../../static/images/takeTicket/zy_icon.png" mode="aspectFit"></img>
				<text>转移</text>
			</view>
			<view class="btn-item orange" @click="handleOver">
				<img class="btn-icon" src="../../static/images/takeTicket/gh_icon.png" mode="aspectFit"></img>
				<text>过号</text>
			</view>
			<view class="btn-item red" @click="handleHang">
				<img class="btn-icon" src="../../static/images/takeTicket/gq_icon.png" mode="aspectFit"></img>
				<text>挂起</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CallWindow',
		data() {
			return {
				// 设计稿尺寸 1920*1080
				designW: 1920,
				designH: 1080,
				scaleStyle: {
					width: '1920px',
					height: '1080px',
					transformOrigin: 'left top',
					transform: 'scale(1)'
				}
			}
		},
		onMounted() {
			// 大屏自动缩放适配屏幕
			this.calcScale()
			window.addEventListener('resize', this.calcScale)
		},
		onUnload() {
			window.removeEventListener('resize', this.calcScale)
		},
		methods: {
			// 计算缩放比例
			calcScale() {
				const screenW = document.documentElement.clientWidth
				const screenH = document.documentElement.clientHeight
				const scaleX = screenW / this.designW
				const scaleY = screenH / this.designH
				const scale = Math.min(scaleX, scaleY)
				this.scaleStyle.transform = `scale(${scale})`
			},
			// 按钮事件
			handleExit() {
				uni.navigateBack()
			},
			handleCall() {
				console.log('呼叫')
			},
			handleReCall() {
				console.log('重呼')
			},
			handleTransfer() {
				console.log('转移')
			},
			handleOver() {
				console.log('过号')
			},
			handleHang() {
				console.log('挂起')
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.wrap {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: url('../../static/images/home/bg.png');
		background-size: 100% 100%;
	}

	/* 顶部头部 */
	.header-bar {
		width: 100%;
		/* height: 180px; */
		background-color: rgba(19, 114, 255, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 21px 40px 14px;
		box-sizing: border-box;
	}

	.header-left {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.win-no {
		font-size: 60px;
		color: #fff;
		font-weight: bold;
	}

	.user-dept {
		display: flex;
		margin-top: 12px;
	}

	.user-dept text {
		font-size: 40px;
		color: #fff;
		margin-right: 50px;
	}

	.exit-btn {
		background: #fff;
		border-radius: 50px;
		display: flex;
		align-items: center;
		padding: 15px 25px;
	}

	.icon-exit {
		width: 50px;
		height: 50px;
		margin-right: 20px;
	}

	.exit-btn text {
		font-size: 40px;
	}

	/* 中间内容 */
	.content-box {
		flex: 1;
		display: flex;
	}

	.item-col {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.col-title {
		font-size: 60px;
		color: rgba(51, 51, 51, 1);
		margin-bottom: 30px;
	}

	.call-no {
		font-size: 220px;
		color: rgba(19, 114, 255, 1);
		font-weight: bold;
	}

	.wait-num {
		font-size: 220px;
		color: #ff5522;
		font-weight: bold;
	}

	/* 底部按钮 */
	.btn-group {
		display: flex;
		padding: 0 40px 60px;
		gap: 32px;
	}

	.btn-item {
		flex: 1;
		height: 240px;
		border-radius: 32px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.btn-icon {
		width: 70px;
		height: 70px;
		margin-bottom: 18px;
	}

	.btn-item text {
		font-size: 58px;
		color: #fff;
	}

	.green {
		background-color: #28c958;
	}

	.blue {
		background-color: #1976f2;
	}

	.sky {
		background-color: #18a0f0;
	}

	.orange {
		background-color: #ff9922;
	}

	.red {
		background-color: #ff6633;
	}
</style>