intelligent-etmf-system-applet/pages-content/scan/index.vue

<template>
  <view class="scan-page">
    <!-- 自定义头部 -->
    <view class="custom-header" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="header-content">
        <text class="header-title">{{ t('common.page.scan') }}</text>
      </view>
    </view>
    
    <!-- 页面内容 -->
    <view class="page-body">
      <text class="placeholder">扫描主体内容区域</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

// 状态栏高度
const statusBarHeight = ref(0)

onMounted(() => {
  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0
  
  console.log('扫描内容组件已加载')
})
</script>

<style lang="scss" scoped>
.scan-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #e0f7fa 0%, #f8f9fa 100%);
  
  // 自定义头部
  .custom-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border-bottom: 1rpx solid #e5e5e5;
    z-index: 100;
    
    .header-content {
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .header-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #000000;
      }
    }
  }
  
  // 页面内容
  .page-body {
    flex: 1;
    padding: 40rpx;
    margin-top: 88rpx;
    
    .placeholder {
      font-size: 28rpx;
      color: #999999;
      text-align: center;
      margin-top: 200rpx;
    }
  }
}
</style>