195 lines
3.8 KiB
Vue
195 lines
3.8 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 顶部标题栏 -->
|
|
<view class="header">
|
|
<text class="header-left">环江毛南族自治县政务服务中心</text>
|
|
<text class="header-center">自助取号机</text>
|
|
<view class="btn-group">
|
|
<view class="btn" v-if="backBtn" @click="back">
|
|
<img src="../../static/images/home/back_icon.png" alt="" />
|
|
<text class="btn-text">返回</text>
|
|
</view>
|
|
<view class="btn" v-if="logoutBtn" @click="logout">
|
|
<img src="../../static/images/home/logout_icon.png" alt="" />
|
|
<text class="btn-text">退出</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 主体内容区 -->
|
|
<view class="main">
|
|
<slot name="main"></slot>
|
|
</view>
|
|
|
|
<!-- 底部状态栏 -->
|
|
<view class="footer">
|
|
<text class="footer-left">本机编号: YJS0001</text>
|
|
<text class="footer-right">{{ currentTime }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
backBtn: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
logoutBtn: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
currentTime: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
this.updateTime()
|
|
setInterval(() => {
|
|
this.updateTime()
|
|
}, 1000)
|
|
// APP端强制横屏
|
|
// #ifdef APP-PLUS
|
|
plus.screen.lockOrientation('landscape-primary')
|
|
// #endif
|
|
},
|
|
methods: {
|
|
updateTime() {
|
|
const now = new Date()
|
|
const year = now.getFullYear()
|
|
const month = String(now.getMonth() + 1).padStart(2, '0')
|
|
const day = String(now.getDate()).padStart(2, '0')
|
|
const hours = String(now.getHours()).padStart(2, '0')
|
|
const minutes = String(now.getMinutes()).padStart(2, '0')
|
|
const seconds = String(now.getSeconds()).padStart(2, '0')
|
|
this.currentTime = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`
|
|
},
|
|
back() {
|
|
this.$emit('handleBack')
|
|
},
|
|
logout() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要退出吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.reLaunch({
|
|
url: '/pages/home/home'
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 全屏自适应容器 - 百分比布局 */
|
|
.container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
/* 顶部标题栏 - 百分比高度 */
|
|
.header {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 22%;
|
|
background: url('../../static/images/home/top_bg.png');
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
padding: 35px 4% 0;
|
|
border-radius: 0 0 2% 2%;
|
|
}
|
|
|
|
.header-left {
|
|
color: #fff;
|
|
font-size: 36px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.header-center {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 35px;
|
|
transform: translateX(-50%);
|
|
color: #fff;
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.btn-group {
|
|
position: absolute;
|
|
right: 4%;
|
|
top: 35px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
|
|
.btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 20px;
|
|
width: 160px;
|
|
height: 60px;
|
|
border-radius: 30px;
|
|
background: #fff;
|
|
font-size: 30px;
|
|
color: rgba(51, 51, 51, 1);
|
|
|
|
img {
|
|
margin-right: 15px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 主体内容区 - 自动占满剩余空间 */
|
|
.main {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: url('../../static/images/home/bg.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
|
|
|
|
/* 底部状态栏 - 百分比高度 */
|
|
.footer {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 80px;
|
|
background: url('../../static/images/home/footer_bg.png');
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 3%;
|
|
border-radius: 2% 2% 0 0;
|
|
}
|
|
|
|
.footer-left,
|
|
.footer-right {
|
|
color: #fff;
|
|
font-size: 3vh;
|
|
}
|
|
</style> |