gypsy-crm-frontend-vu/pages/common/chat.vue

<template>
  <view class="webview-page" type="chat">
    <view class="page-container">
      <!-- WebView 内容区（自动占满剩余空间，不遮挡导航栏） -->
      <view class="web-view-container">
        <web-view :src="fileUrl" class="web-view" :webview-styles="webviewStyles" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import useGlobalStore from '@/stores/use-global-store'
const globalStore = useGlobalStore()
import Config from '@/config/index'
import getWebBase from '@/utils/webBase'
const webBase = getWebBase()
const fileUrl = computed(() => `${Config.Host80}/iframe/livechat.html`)
const statusBarHeight = computed(() => globalStore.statusBarHeight)

const webviewStyles = computed(() => ({
  progress: {
    color: '#ea002a'
  },
  bounce: 'none',
  scrollIndicator: 'none',
  top: statusBarHeight.value + 'px',
  bottom: '0px'
}))
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.webview-page {
  :deep(.content-wrapper) {
    padding: 0 !important;
  }

  :deep(.page-content) {
    height: calc(100vh - 56px);
  }

  :deep(.fixed) {
    height: 56px;
  }
}

/* 页面根容器：弹性布局，完美分配导航栏和web-view高度 */
.page-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}

/* 顶部导航栏：正确适配安全区，高度计算正确 */
.web-view-container {
  flex: 1;
  width: 100%;
  overflow: hidden;
}

.web-view {
  width: 100%;
  height: 100%;
}
</style>