menduner/src/plugins/dialogExtend/components/positionAd.vue

<!-- 职位广告 -->
<template>
  <v-app>
    <v-dialog
      v-model="dialog"
      max-width="900"
      :persistent="false"
      @update:modelValue="handleChange"
    >
      <div style="cursor: pointer; margin: 0 auto; position: relative;">
        <v-img src="https://minio.menduner.com/dev/ddaafc5a27a735332daabbddc2c6bfe8913a2de02692f7b94f92b9f2b9e56460.jpg" :width="adImgWidth" style="height: auto;border-radius: 4px;" @click="adClick"></v-img>
        <span style="color: #ddddddcc; font-size: 32px; position: absolute; right: 0px; top: 0px;" class="mdi mdi-close-circle-outline cursor-pointer px-3" @click="dialog = false"></span>
      </div>
    </v-dialog>
  </v-app>
</template>

<script setup>
defineOptions({name: 'dialogExtend-positionAd'})
import { onMounted, ref } from 'vue'

const props = defineProps({
  cancel: Function
})

const adImgWidth = ref(document?.documentElement?.clientWidth ?
  Math.floor(document.documentElement.clientWidth/2.2) > 500 ?
  Math.floor(document.documentElement.clientWidth/2.2) : 500
  : 900
)


const dialog = ref(false)
onMounted(() => {
  dialog.value = true
})

const adClick =  () => {
  dialog.value = false
  window.location.href = '/recruit/enterprise/position/add'
  props.cancel()
}

const handleChange = (val) => {
  props.cancel()
}
</script>
<style lang="scss" scoped>
</style>