pc端展示顶部和底部留10px空余

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

@@ -1,65 +1,64 @@
 <!-- 分享职位 -->
 <template>
-  <div style="background-color: #f0f0f0;">
+  <div style="background-color: #f0f0f0;" :style="{'padding': isMobile ? '0' : '10px'}">
     <v-card
-      style="margin: 0 auto;"
+      class="py-3 px-5"
+      style="min-height: calc(100vh - 20px); box-sizing: border-box; margin: 0 auto;"
       :style="{'width': isMobile ? '100%' : '750px'}"
     >
-      <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 v-if="!Object.keys(info).length">加载失败</div>
+      <div v-else>
+        <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>
-            <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 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>
-          <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>
+          <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 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>
+        <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 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>
     </v-card>
   </div>