personnel_management_mobile/components/container/container.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.removeStorageSync('idcard')
            uni.reLaunch({
              url: '/pages/home/home'
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
/* 全屏自适应容器 - viewport弹性布局 */
.container {
  width: 100vw;
  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: 22vh;
  background: url('../../static/images/home/top_bg.png');
  background-size: 100% 100%;
  display: flex;
  padding: 3vh 4% 0;
  border-radius: 0 0 2% 2%;
}

.header-left {
  color: #fff;
  font-size: 2.5vw;
  font-weight: 500;
  white-space: nowrap;
}

.header-center {
  position: absolute;
  left: 50%;
  top: 3.2vh;
  transform: translateX(-50%);
  color: #fff;
  font-size: 2.5vw;
  font-weight: bold;
  white-space: nowrap;
}

.btn-group {
  position: absolute;
  right: 4%;
  top: 3.2vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1vw;
    width: 8.5vw;
    height: 5.5vh;
    border-radius: 3vh;
    background: #fff;
    font-size: 1.6vw;
    color: rgba(51, 51, 51, 1);

    img {
      margin-right: 0.8vw;
      width: 2vw;
      height: 2vw;
    }
  }
}

/* 主体内容区 - 自动占满剩余空间 */
.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: 7vh;
  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: 2vw;
}
</style>