|
@@ -0,0 +1,129 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="left-top">
|
|
|
+ <v-badge bordered offset-x="10" offset-y="50" color="error" icon="mdi-gender-female">
|
|
|
+ <v-avatar size="x-large" image="https://img.bosszhipin.com/beijin/upload/avatar/20240511/607f1f3d68754fd0a4bb289192623958d852808aec65360d0b597e499d40ff1a18e9c7db720a8820_s.jpg.webp"></v-avatar>
|
|
|
+ </v-badge>
|
|
|
+ <div class="ml-5 content">
|
|
|
+ <div class="username">
|
|
|
+ <span class="mr-2">花城</span>
|
|
|
+ <v-icon class="cursor-pointer" style="width: 80px; height: 22px;">
|
|
|
+ <v-img width="80" height="22" src="https://minio.citupro.com/dev/menduner/upgrade.png"></v-img>
|
|
|
+ </v-icon>
|
|
|
+ </div>
|
|
|
+ <div class="userInfo">
|
|
|
+ 44岁<span class="vline"></span>10年以上经验<span class="vline"></span>本科
|
|
|
+ </div>
|
|
|
+ <div class="mt-3">
|
|
|
+ <v-select v-model="selectVal" :items="items" density="compact" variant="outlined" item-title="label" item-value="value" hide-details color="primary"></v-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="otherInfo">
|
|
|
+ <div class="expect">
|
|
|
+ <span>期望:前端开发工程师</span>
|
|
|
+ <span class="salary">12-13k</span>
|
|
|
+ </div>
|
|
|
+ <div class="edu">
|
|
|
+ <span>北京理工大学·计算机应用与管理</span>
|
|
|
+ <span class="edu-time">2024-2028</span>
|
|
|
+ </div>
|
|
|
+ <div class="work-exp">
|
|
|
+ <span>广州辞图科技有限公司·前端开发工程师</span>
|
|
|
+ <span class="edu-time">1990.01-2024.02</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="slider-btn">
|
|
|
+ <v-btn class="slider-btn-item" rounded variant="outlined" color="primary" append-icon="mdi-menu-right">在线简历</v-btn>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="left-tabs my-3">
|
|
|
+ <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#fff" @click="getPositionList">
|
|
|
+ <v-tab :value="1">{{ $t('position.throughCommunication') }}</v-tab>
|
|
|
+ <v-tab :value="2">{{ $t('position.delivered') }}</v-tab>
|
|
|
+ <v-tab :value="3">{{ $t('position.interview') }}</v-tab>
|
|
|
+ <v-tab :value="4">{{ $t('position.interested') }}</v-tab>
|
|
|
+ <v-tab :value="5">{{ $t('position.interestedInMe') }}</v-tab>
|
|
|
+ <v-tab :value="6">{{ $t('position.haveSeenMe') }}</v-tab>
|
|
|
+ </v-tabs>
|
|
|
+ </div>
|
|
|
+ <div class="left-bottom">岗位</div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+defineOptions({ name: 'personal-center-left'})
|
|
|
+import { ref } from 'vue'
|
|
|
+
|
|
|
+const tab = ref(1)
|
|
|
+const selectVal = ref(0)
|
|
|
+const items = [
|
|
|
+ { label: '离职-随时到岗', value: 0 },
|
|
|
+ { label: '在职-暂不考虑', value: 1 },
|
|
|
+ { label: '在职-考虑机会', value: 2 },
|
|
|
+ { label: '在职-月内到岗', value: 3 }
|
|
|
+]
|
|
|
+
|
|
|
+const getPositionList = () => {}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.left-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12px 0 12px 12px;
|
|
|
+ height: 135px;
|
|
|
+ border-radius: 12px;
|
|
|
+ background-color: #fff;
|
|
|
+ .content {
|
|
|
+ height: 100%;
|
|
|
+ .username {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #222;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .userInfo {
|
|
|
+ height: 21px;
|
|
|
+ margin-top: 8px;
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .otherInfo {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ margin-left: 50px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ text-align: left;
|
|
|
+ .salary {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'kanzhun-Regular';
|
|
|
+ font-weight: 500;
|
|
|
+ color: var(--v-error-base);
|
|
|
+ margin: -1px 0 0 16px;
|
|
|
+ }
|
|
|
+ .edu-time {
|
|
|
+ color: #999;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ .edu {
|
|
|
+ margin: 12px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .slider-btn {
|
|
|
+ position: relative;
|
|
|
+ width: 146px;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ .slider-btn-item {
|
|
|
+ position: absolute;
|
|
|
+ top: 4px;
|
|
|
+ right: -15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|