联系我们

src/layout/personal/slider.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="slider-box" :style="{'height': getToken() ? '180px' : '92px'}">
+  <div class="slider-box" :style="{'height': getToken() ? '225px' : '137px'}">
     <div v-for="(item, index) in list" :key="index" class="slider-box-item" @click="handleClick(item, index)">
       <v-btn size="30" class="icons" icon variant="text">
         <v-icon class="icons" size="30">{{ item.mdi }}</v-icon>
@@ -23,13 +23,15 @@ import { getToken } from '@/utils/auth'
 const router = useRouter()
 const defaultList = [
   { mdi: 'mdi-arrow-up-bold', tips: '返回顶部' },
-  { mdi: 'mdi-qrcode', tips: '微信公众号', showImg: 'https://minio.citupro.com/dev/menduner/official-account-code4.jpg' }
+  { mdi: 'mdi-qrcode', tips: '微信公众号', showImg: 'https://minio.citupro.com/dev/menduner/official-account-code4.jpg' },
+  { mdi: 'mdi-headphones', tips: '联系我们', path: '/contactUs' }
 ]
 const hasTokenList = [
   { mdi: 'mdi-arrow-up-bold', tips: '返回顶部' },
   { mdi: 'mdi-qrcode', tips: '微信公众号', showImg: 'https://minio.citupro.com/dev/menduner/official-account-code4.jpg' },
   { mdi: 'mdi-bell-outline', tips: '通知', path: '/recruit/personal/message' },
-  { mdi: 'mdi-list-box-outline', tips: '在线简历', path: '/recruit/personal/personalCenter/resume/online' }
+  { mdi: 'mdi-list-box-outline', tips: '在线简历', path: '/recruit/personal/personalCenter/resume/online' },
+  { mdi: 'mdi-headphones', tips: '联系我们', path: '/contactUs' }
 ]
 const list = getToken() ? hasTokenList : defaultList
 

src/router/modules/components/recruit/enterprise.js

@@ -387,6 +387,23 @@ const enterprise = [
         component: () => import('@/views/recruit/enterprise/newlyAppointed/index.vue')
       }
     ]
+  },
+  {
+    path: '/recruit/enterprise/contactUs',
+    component: Layout,
+    name: 'Contact Us',
+    meta: {
+      title: '联系我们',
+      enName: 'Contact Us',
+      icon: 'mdi-headphones'
+    },
+    children: [
+      {
+        path: '/recruit/enterprise/contactUs',
+        show: true,
+        component: () => import('@/views/recruit/components/contactUs/index.vue')
+      }
+    ]
   }
 ]
 export default enterprise

src/router/modules/recruit.js

@@ -190,6 +190,17 @@ const recruit = [
       }
     ]
   },
+  {
+    path: '/contactUs',
+    component: Layout,
+    children: [
+      {
+        path: '/contactUs',
+        component: () => import('@/views/recruit/components/contactUs/index.vue'),
+        name: 'ContactUs'
+      }
+    ]
+  },
   {
       path: '/recruit/personal/jobFair',
       component: Layout,

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

@@ -0,0 +1,84 @@
+<template>
+  <v-card class="card-box pa-5 pt-16" :class="{'mt-16': route.path === '/contactUs', 'mx-3': route.path === '/contactUs'}">
+		<div class="social-media common-width">
+			<h5 class="social-media-header">
+				<span class="inner-text">联系我们</span>
+			</h5>
+			<div class="d-flex">
+				<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>
+							<p>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：peter.pan@menduner.com</p>
+						</div>
+						<div class="mr-5">
+							<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>
+							<div class="font-size-15 mt-2">潘青海 Peter Pan</div>
+						</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>
+			</div>
+		</div>
+	</v-card>
+</template>
+
+<script setup>
+defineOptions({ name: 'contactUs'})
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+</script>
+
+<style scoped lang="scss">
+.common-width {
+  width: 100%;
+  max-width: 1100px;
+}
+.social-media {
+  margin: auto;
+  padding-bottom: 100px;
+  &-header {
+    position: relative;
+    text-transform: uppercase;
+    text-align: center;
+    margin: 0 0 52px;
+    .inner-text {
+      display: inline-block;
+      background-color: #fff;
+      padding: 0 18px;
+      color: #4c4c4e;
+      position: relative;
+      z-index: 2;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 0;
+      border-top: 1px dotted #747476;
+      left: 0;
+      bottom: 50%;
+      margin-bottom: 2px;
+    }
+  }
+  .left {
+    width: 50%;
+    color: #4c4c4e;
+    .social-contact {
+      padding: 20px 20px;
+      background-color: #e8f0f7;
+    }
+  }
+  .right {
+    flex: 1;
+  }
+}
+</style>