联系我们样式调整

src/router/modules/recruit.js

@@ -197,7 +197,10 @@ const recruit = [
       {
         path: '/contactUs',
         component: () => import('@/views/recruit/components/contactUs/index.vue'),
-        name: 'ContactUs'
+        name: 'ContactUs',
+        meta: {
+          title: '联系我们'
+        }
       }
     ]
   },

src/views/recruit/components/contactUs/index.vue

@@ -4,17 +4,17 @@
 			<h5 class="social-media-header">
 				<span class="inner-text">联系我们</span>
 			</h5>
-			<div class="d-flex">
+			<div class="d-flex justify-space-between">
 				<div class="left">
 					<h2>欢迎关注，了解门墩儿的新动态。</h2>
 					<p class="mt-3" style="font-size: .9rem;">门墩儿在所有主流社交媒体都有账号。欢迎关注我们，以便了解关于发展趋势和领导力问题的最新见解。</p>
-					<div class="d-flex align-center social-contact mt-5 justify-space-between">
-						<div>
-							<p class="mb-2">联系方式</p>
-							<p>手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机：18621329797</p>
+					<div class="d-flex align-center social-contact pa-8 mt-5 justify-space-between">
+						<div class="ml-3">
+							<p>联系方式</p>
+							<p  class="mt-3 mb-2">手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机：18621329797</p>
 							<p>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：peter.pan@menduner.com</p>
 						</div>
-						<div class="mr-5">
+						<div class="mr-10">
 							<div style="width: 120px; height: 120px;">
 								<v-img cover aspect-ratio="1/1" src="https://minio.menduner.com/dev/menduner/contact.png" width="120" height="120"></v-img>
 							</div>
@@ -22,9 +22,13 @@
 						</div>
 					</div>
 				</div>
-				<div class="right text-end">
-					<img src="https://minio.citupro.com/dev/menduner/headhunting/concact-bg.jpg" height="324" width="460" alt="" />
-				</div>
+        <v-card elevation="3" width="300" height="304" class="d-flex flex-column align-center pt-4">
+          <div style="width: 200px; height: 200px;">
+            <v-img src="https://minio.citupro.com/dev/menduner/official-account-code4.jpg" width="200" height="200"></v-img>
+          </div>
+          <p>关注"门墩儿"微信公众号</p>
+          <p>了解更多行业招聘资讯</p>
+        </v-card>
 			</div>
 		</div>
 	</v-card>
@@ -70,15 +74,11 @@ const route = useRoute()
     }
   }
   .left {
-    width: 50%;
+    width: 63%;
     color: #4c4c4e;
     .social-contact {
-      padding: 20px 20px;
       background-color: #e8f0f7;
     }
   }
-  .right {
-    flex: 1;
-  }
 }
 </style>