youxi-app/components/lock.uvue

<script setup lang='ts'>
import { ref } from 'vue'
const props = defineProps({
  record: {
    type: Object,
    default: () => ({})
  }
})
const visible = ref(false)
const handlePay = () => {
  visible.value = true
}
</script>
<template>
  <view class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg1" @tap.stop="handlePay">
    <cl-image src="https://oss.xiaoxiongcode.com/static/home/lock.png" mode="widthFix" width="30%" height="auto" />
  </view>
  <cl-popup v-model="visible" showClose :size="400" :show-header="false" direction="center">
    <view class="p-[40px] ">
      <cl-text class="text-center" color="#000" :size="20"> 小朋友，快叫爸爸妈妈帮忙，解锁更多精彩内容吧！ </cl-text>
      <cl-button class="mt-4" size="large" type="warn" block @tap="handlePay"> 前往购课 </cl-button>
    </view>
  </cl-popup>
</template>
<style lang="scss" scoped>
.bg1 {
  background-color: rgba(255, 255, 255, 0.5);
}
</style>