在uni-app中使用Vue3开发应用时，确实可能会遇到组件或样式在不同环境下表现不一致的问题。对于你提到的视频底部操作栏在浏览器正常显示，但在app手机端和模拟器变成原生样式的问题，这通常是由于平台差异导致的。以下是一些可能的解决方案，主要通过自定义组件和样式来实现跨平台的一致性表现。

1. 自定义视频操作栏组件

首先，你可以创建一个自定义的视频操作栏组件，以确保在所有平台上显示相同的样式和功能。

<template>
  <view class="custom-video-controls">
    <button @click="playPause">播放/暂停</button>
    <button @click="seekBackward">后退10秒</button>
    <button @click="seekForward">前进10秒</button>
  </view>
</template>

<script>
export default {
  methods: {
    playPause() {
      // 控制视频播放/暂停的逻辑
      this.$refs.videoPlayer.play(); // 或 pause()
    },
    seekBackward() {
      // 后退10秒的逻辑
      const currentTime = this.$refs.videoPlayer.currentTime - 10;
      this.$refs.videoPlayer.currentTime = currentTime > 0 ? currentTime : 0;
    },
    seekForward() {
      // 前进10秒的逻辑
      this.$refs.videoPlayer.currentTime += 10;
    }
  }
}
</script>

<style>
.custom-video-controls {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background-color: rgba(0, 0, 0, 0.5);
}
button {
  padding: 10px;
  color: white;
}
</style>

2. 隐藏原生控制栏

在uni-app中，你可以通过设置<video>组件的controls属性为false来隐藏原生控制栏。

<template>
  <view>
    <video
      ref="videoPlayer"
      src="video-url.mp4"
      controls="false"
      @play="onPlay"
      @pause="onPause"
      style="width: 100%; height: auto;"
    ></video>
    <CustomVideoControls />
  </view>
</template>

<script>
import CustomVideoControls from './components/CustomVideoControls.vue';

export default {
  components: {
    CustomVideoControls
  },
  methods: {
    onPlay() {
      console.log('Video is playing');
    },
    onPause() {
      console.log('Video is paused');
    }
  }
}
</script>

总结

通过上述方法，你可以在uni-app中创建一个自定义的视频操作栏组件，并通过设置<video>组件的controls属性为false来隐藏原生控制栏。这样可以确保在不同平台上视频操作栏的样式和功能保持一致。同时，自定义组件也提供了更大的灵活性，可以根据需求进行扩展和修改。