首页广告调整：大小自适应但宽度最小显示500，关闭按钮改为右上角

src/views/recruit/personal/home/index.vue

@@ -30,11 +30,9 @@
     max-width="900"
     :persistent="false"
   >
-    <div style="cursor: pointer;" @click="adClick">
-      <v-img src="./img/adImg.jpg" :width="900" style="height: 530px;border-radius: 4px;"></v-img>
-    </div>
-    <div class="text-center mt-5">
-      <span style="color: white; font-size: 28px;" class="mdi mdi-close-circle-outline cursor-pointer" @click="adDialog = false"></span>
+    <div style="cursor: pointer; margin: 0 auto; position: relative;" @click="adClick">
+      <v-img src="./img/adImg.jpg" :width="adImgWidth" style="height: auto;border-radius: 4px;"></v-img>
+      <span style="color: white; font-size: 28px; position: absolute; right: 0px; top: 0px;" class="mdi mdi-close-circle-outline cursor-pointer px-3" @click="adDialog = false"></span>
     </div>
   </v-dialog>
 </template>
@@ -49,7 +47,7 @@ import hotPromotedPositions from './components/hotPromotedPositions.vue'
 import PopularEnterprises from './components/popularEnterprises.vue'
 import advertisementPage from './components/advertisement/index.vue'
 import { useRouter } from 'vue-router'
-import { nextTick, onMounted, ref } from 'vue'
+import { nextTick, onMounted, ref, watch } from 'vue'
 import { useUserStore } from '@/store/user'
 import { getToken } from '@/utils/auth'
 import { getRewardEventList } from '@/utils/eventList'
@@ -88,6 +86,18 @@ const handleOpenAdvertise = () => {
   window.open('https://mp.weixin.qq.com/s/Us_cWsRpGQBnLFBrZGynLA')
 }
 
+const adImgWidth = ref(900)
+watch(
+  () => document?.documentElement?.clientWidth, 
+  (newVal) => {
+    if (newVal) {
+      const num = newVal/2.2
+      adImgWidth.value = Math.floor(num) > 500 ? Math.floor(num) : 500
+    }
+  },
+  { immediate: true },
+  { deep: true }
+)
 
 const adDialog = ref(false)
 onMounted(() => {