样式调整

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

@@ -1,66 +1,65 @@
 <!-- 分享职位 -->
 <template>
-  <div
-    style="background-color: #f0f0f0; width: 100vw; height: 100vh; overflow-y: auto;"
-  >
+  <div style="background-color: #f0f0f0;">
     <v-card
-      class="cardBox py-3 px-5"
-      :class="isMobile ? 'phone' : 'pc'"
+      style="margin: 0 auto;"
       :style="{'width': isMobile ? '100%' : '750px'}"
     >
-      <div v-if="!Object.keys(info).length">加载失败</div>
-      <div>
-        <div class="d-flex justify-space-between">
-          <h2 class="JobName ellipsis">{{ info.name }}</h2>
-          <span class="salary">{{ info.payFrom }}-{{ info.payTo }}/{{ positionInfo.payName }}</span>
-        </div>
-        <div class="d-flex justify-space-between mt-4">
-          <div>
-            <div class="banner-tags">
-              <div v-for="k in desc" :key="k.mdi" class="mr-3">
-                <v-icon color="var(--color-666)" size="20">{{ k.mdi }}</v-icon>
-                <span class="f-w-600 ml-1">{{ positionInfo[k.value] }}</span>
+      <div style="min-height: 100vh; box-sizing: border-box;" class="py-3 px-5">
+        <div v-if="!Object.keys(info).length">加载失败</div>
+        <div>
+          <div class="d-flex justify-space-between">
+            <h2 class="JobName ellipsis">{{ info.name }}</h2>
+            <span class="salary">{{ info.payFrom }}-{{ info.payTo }}/{{ positionInfo.payName }}</span>
+          </div>
+          <div class="d-flex justify-space-between mt-4">
+            <div>
+              <div class="banner-tags">
+                <div v-for="k in desc" :key="k.mdi" class="mr-3">
+                  <v-icon color="var(--color-666)" size="20">{{ k.mdi }}</v-icon>
+                  <span class="f-w-600 ml-1">{{ positionInfo[k.value] }}</span>
+                </div>
+              </div>
+              <div class="mt-4" v-if="info?.tagList">
+                <v-chip size="small" class="mr-1 mb-1" color="primary" label v-for="(k, i) in info.tagList" :key="i">{{ k }}</v-chip>
               </div>
             </div>
-            <div class="mt-4" v-if="info?.tagList">
-              <v-chip size="small" class="mr-1 mb-1" color="primary" label v-for="(k, i) in info.tagList" :key="i">{{ k }}</v-chip>
+            <v-btn
+              class="button-item radius"
+              color="warning" 
+              variant="outlined" 
+              prepend-icon="mdi-heart-outline"
+              @click="null"
+            >{{ $t('position.collection') }}</v-btn>
+          </div>
+          <v-divider class="mt-3"></v-divider>
+          <div class="mt-3 mb-1 f-w-600">{{ $t('position.jobResponsibilities') }}</div>
+          <div class="requirement" v-html="info.content?.replace(/\n/g, '</br>')"></div>
+          <div class="mt-3 mb-1 f-w-600">{{ $t('position.jobRequirements') }}</div>
+          <div class="requirement" v-html="info.requirement?.replace(/\n/g, '</br>')"></div>
+          <v-divider class="my-3"></v-divider>
+          <div class="contact">
+            <div class="float-left d-flex align-center">
+              <v-img :src="info.contact?.avatar || 'https://minio.citupro.com/dev/menduner/7.png'" :width="45" style="height: 45px;"></v-img>
+              <div class="ml-2">
+                <div class="contact-name">{{ info.contact?.name }}</div>
+                <div class="contact-info">{{ info.enterprise?.name }} · {{ info.contact?.postNameCn }}</div>
+              </div>
             </div>
           </div>
-          <v-btn
-            class="button-item radius"
-            color="warning" 
-            variant="outlined" 
-            prepend-icon="mdi-heart-outline"
-            @click="null"
-          >{{ $t('position.collection') }}</v-btn>
-        </div>
-        <v-divider class="mt-3"></v-divider>
-        <div class="mt-3 mb-1 f-w-600">{{ $t('position.jobResponsibilities') }}</div>
-        <div class="requirement" v-html="info.content?.replace(/\n/g, '</br>')"></div>
-        <div class="mt-3 mb-1 f-w-600">{{ $t('position.jobRequirements') }}</div>
-        <div class="requirement" v-html="info.requirement?.replace(/\n/g, '</br>')"></div>
-        <v-divider class="my-3"></v-divider>
-        <div class="contact">
-          <div class="float-left d-flex align-center">
-            <v-img :src="info.contact?.avatar || 'https://minio.citupro.com/dev/menduner/7.png'" :width="45" style="height: 45px;"></v-img>
-            <div class="ml-2">
-              <div class="contact-name">{{ info.contact?.name }}</div>
-              <div class="contact-info">{{ info.enterprise?.name }} · {{ info.contact?.postNameCn }}</div>
+          <v-divider class="my-3"></v-divider>
+          <div>
+            <h4>{{ $t('position.address') }}</h4>
+            <div class="mt-1">
+              <v-icon size="25" color="primary">mdi-map-marker</v-icon>
+              <span style="color: var(--color-666);font-size: 15px;">{{ info.address }}</span>
             </div>
           </div>
-        </div>
-        <v-divider class="my-3"></v-divider>
-        <div>
-          <h4>{{ $t('position.address') }}</h4>
-          <div class="mt-1">
-            <v-icon size="25" color="primary">mdi-map-marker</v-icon>
-            <span style="color: var(--color-666);font-size: 15px;">{{ info.address }}</span>
+          <div class="mb-5 text-center" style="height: 80px; line-height: 80px;">
+            <v-btn class="mr-2 radius button-item" color="success" variant="outlined">{{ $t('position.communicate') }}</v-btn>
+            <v-btn class="radius button-item" color="primary" @click="null">{{ $t('position.submitResume') }}</v-btn>
           </div>
         </div>
-        <div class="mt-3 text-center">
-          <v-btn class="mr-2 radius button-item" color="success" variant="outlined">{{ $t('position.communicate') }}</v-btn>
-          <v-btn class="radius button-item" color="primary" @click="null">{{ $t('position.submitResume') }}</v-btn>
-        </div>
       </div>
     </v-card>
   </div>
@@ -77,10 +76,6 @@ onMounted(() => {
   const userAgent = navigator.userAgent
   isMobile.value = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i.test(userAgent)
 })
-// // 组件卸载前移除事件监听器  
-// onUnmounted(() => {
-//   window.removeEventListener('resize', updateWindowSize)
-// })
 // 获取路由参数
 const queryParams = new URLSearchParams(window.location.search)
 const jobId = queryParams.get('jobId') || ''
@@ -157,16 +152,4 @@ const desc = [
   min-width: 110px;
   height: 36px
 }
-.cardBox {
-  background-color: #fff;
-  // overflow: auto;
-  min-height: 100vh;
-}
-.pc {
-  margin: 5px auto;
-  min-height: calc(100vh - 10px);
-}
-.phone {
-  margin: 0 auto;
-}
 </style>