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

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

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import Config from '@/config/index'
const { Host80 } = Config
import getWebBase from '@/utils/webBase'
const webBase = getWebBase()
const fileUrl = ref('')
onLoad((options) => {
  fileUrl.value = `${Host80}${webBase}iframe/livechat.html`
})
</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>