<template>
    <div style="--van-popup-background:transparent;--van-cell-background:transparent;">
      <van-popup :show="showPop" :position="'center'" :style="{ padding: '0' }">
        <div class="pt60 relative">
          <div class="bg-fff ulib-r20 inner30" style="width:90vw;">
            <h3 class="text-center font-34" v-if="title">{{title}}</h3>
            <div class="mt30 scroll-y" style="min-height: 40vh; max-height: 80vh;" v-if="content">
              <div class="font-26" style="line-height: 1.5;" v-html="content"></div>
            </div>
            <div class="mt30" v-if="img">
              <van-image style="display: block;" :src="img"></van-image>
            </div>
          </div>
          <div class="absolute right-0 top-0 mr20" :style="{'margin-top': 0/7.5+'vw'}">
            <van-icon @click="handleClose" name="close" color="#fff" size="24"/>
          </div>
        </div>
      </van-popup>
    </div>
  </template>
  
  <script setup>
  import { defineProps, defineEmits } from 'vue'
  
  // 声明组件名称（可选，用于devtools）
  defineOptions({ name: 'PopCode' })
  
  // 声明props（Vue 3推荐使用defineProps宏）
  const props = defineProps({
    title: { type: String, default: '' },
    showPop: { type: Boolean, default: false },
    content: { type: String, default: '' },
    img: { type: String, default: '' }
  })
  
  // 声明emits事件（与子组件通信）
  const emit = defineEmits(['update:showPop'])
  
  // 定义方法（直接在script setup中声明）
  function handleClose() {
    emit('update:showPop', false)
  }
  
  function onCountFinish() {
    emit('update:showPop', false)
  }
  
  function showCount() {
    // 方法逻辑（根据实际需求补充）
  }
  </script>
  
  <style></style>