youxi-app/pages/index/components/physics.uvue

<script setup lang='ts'>
import { ref } from 'vue'
import { router } from '@/.cool'
import { user } from '@/.cool'
const visible = ref(false)

function handleView(url) {
  router.push({ path: url })
}
function openPopup() {
  visible.value = true
}
</script>
<template>
  <view class="content">
    <view @tap="handleView('/pages/catalog/index')" class="w-[57vw] box">
      <image class="absolute top-0 left-0 z-[1] w-full h-full "  mode="aspectFill"  src="https://oss.xiaoxiongcode.com/static/home/641.png"   />
             <image class="absolute top-2 right-2 z-[2] h-[14vh]" mode="heightFix" src="https://oss.xiaoxiongcode.com/static/home/645.png"  />
       <image class="absolute bottom-5 left-5 z-[2] h-[40vh]" mode="heightFix" src="https://oss.xiaoxiongcode.com/static/home/3.gif"  />
       <image class="absolute bottom-[14vh] right-[12vw] z-[2] h-[20vh]" mode="heightFix" src="https://oss.xiaoxiongcode.com/static/home/play.png"  />
    </view>
    <view @tap="handleView('/pages/test/index')" class="w-[30vw] box">
           <image class="absolute top-0 left-0 z-[1] w-full h-full " mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/home/644.png"   />
       <image class="relative mx-auto mt-2 z-[2] h-[14vh] w-[28vw]" mode="aspectFit" src="https://oss.xiaoxiongcode.com/static/home/642.png"  />
    </view>
  </view>
</template>
<style lang="scss" scoped>
.content {
  @apply w-[90vw]   mx-auto flex flex-row items-center justify-between gap-4 ;
  height: calc(97vh - 85px);
.box{
  @apply h-[70vh]  relative max-h-[40vw];
  overflow: hidden;
  border-radius: 30px;
  border: 1vh solid #fff;

}

}
</style>