youxi-app/pages/catalog/detail.uvue

<script setup lang='ts'>
import Back from '@/components/back.uvue'
import Loading from '@/components/loading.uvue'
import { ref, onMounted, getCurrentInstance } from 'vue'

const isLoading = ref(true)
const showProgress = ref(true)

onMounted(async () => {
  isLoading.value = false
})
const videoContext = ref<UniApp.VideoContext>()
const data = ref({
  src: 'https://oss.xiaoxiongcode.com/course-1/animate/第1集_观察.mp4'
})
const menuItems = [
  { id: 'watch', name: '看课', icon: '📺', active: true },
  { id: 'practice', name: '练习', icon: '📝', active: false },
  { id: 'experiment', name: '虚拟实验', icon: '🧪', active: false },
  { id: 'diary', name: '科学日记', icon: '📓', active: false }
]
onReady(() => {
  videoContext.value = uni.createVideoContext("video1", getCurrentInstance()!.proxy!)
})
setTimeout(() => {
  showProgress.value = false
}, 2000)
function handleControlsToggle(e) {
  videoContext.value?.requestFullScreen({
    direction: 0
  })
}
</script>
<template>
  <Loading v-show="isLoading" />
  <cl-page v-show="!isLoading">
    <Back />
    <view class="w-[64vw] h-[36vw] absolute top-1/2  z-[1] left-[7vw]  translate50"
      :class="{ ' rounded-2xl p-[3px] bg-black mt-[25px] ': showProgress, 'video-container': !showProgress }">
      <video id="video1" class="w-full h-full " :class="{ 'rounded-2xl': showProgress }" :src="data.src"
        :show-center-play-btn="false" autoplay>
      </video>
      <template>
        <view class="video-fullscreen_controls" @click="handleControlsToggle">
          <view class="control-btn">
            <text class="control-icon">23123123123</text>
          </view>
          <view class="control-btn">
            <text class="control-icon">123213</text>
          </view>
          <view class="control-btn">
            <text class="control-icon">123123123123</text>
          </view>
        </view>
      </template>
    </view>
    <view class="course-detail-page" :class="{ 'hidden': !showProgress }">
      <!-- 顶部标题栏 -->
      <view class="flex-[1]  h-[100vh] relative">
        <view class="flex flex-row w-full pr-[3vw] pl-[10vw] items-center justify-between absolute top-[30px]">
          <text class="text-[5vh] font-bold">1、物质大揭秘！</text>
          <text
            class="rounded-full p-[1vh] px-[2vh] border-2 border-[#fff] border-solid text-[#fff] text-[3vh] font-bold">课程收获</text>
        </view>

      </view>
      <!-- 右侧功能菜单 -->
      <view class="w-[25vw] h-[100vh] bg-[#5CBDFD] flex flex-col  justify-center p-5">
        <view v-for="(item, i) in menuItems" :key="item.id" class="h-[20vh]  flex flex-row items-center "
          :class="{ active: item.active }">
          <view
            class="h-[15vh] w-[20vh] bg-[#fff] rounded-2xl border-[.5vh] border-[#254AD9] border-b-[1vh] border-solid flex items-center justify-center gap-[1vh]">
            <cl-image src="https://oss.xiaoxiongcode.com/static/home/4.png" mode="heightFix"
              class="!h-[7vh]"></cl-image>
            <text class="text-[2vh] font-bold">{{ item.name }}</text>
          </view>
          <view class="flex items-center h-[20vh] ml-[2vh] ">
            <view class="w-[1vh] bg-[#B4DBF7] flex-1"
              :class="{ 'bg-[#71C73D]': item.active, '!bg-[#5CBDFD]': i === 0 }">
            </view>
            <view class="w-[5vh] bg-[#fff] h-[5vh] rounded-full" :class="{ 'bg-[#71C73D]': item.active }"></view>
            <view class="w-[1vh] bg-[#B4DBF7] flex-1"
              :class="{ 'bg-[#71C73D]': item.active, '!bg-[#5CBDFD]': i === menuItems.length - 1 }"></view>
          </view>
        </view>
      </view>
    </view>

  </cl-page>
</template>
<style lang="scss" scoped>
.translate50 {
  transform: translateY(-50%);
}

.course-detail-page {
  @apply flex flex-row items-center;
  background-color: #3498DB;
  height: 100vh;
  color: black;
  transition: all 1s ease-in-out;

}

.video-container {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  transform: translate(0, 0);
  animation: spin 2s linear 1;
  transition: all 2s ease-in-out;
}

@keyframes spin {
  0% {
    opacity: 50%;
  }

  100% {
    opacity: 1;
  }
}

.hidden {
  opacity: 0;
  transition: all 3s ease-in-out;
}

.video-fullscreen_controls {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
  height: 50px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  z-index: 10;
  width: 80vw;
}
</style>