menduner/src/views/PersonalCenter/dynamic/left.vue

<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>
          <span>手机号：13229740091</span>
          <!-- <span class="salary">12-13k</span> -->
        </div>
        <div class="my-3">
          <span>用户邮箱：xxxxxxxxqq.com</span>
          <!-- <span class="edu-time">2024-2028</span> -->
        </div>
        <div>
          <span>出生日期：xxxx-xx-xx</span>
          <!-- <span class="edu-time">1990.01-2024.02</span> -->
        </div>
        <div class="mt-3">现居地址：xxxxxxxxxxxxxxxxxx</div>
      </div>
      <div class="slider-btn">
        <v-btn class="slider-btn-item" rounded variant="outlined" color="primary" append-icon="mdi-menu-right" to="/resume">在线简历</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">
      <PositionItem :tab="tab"></PositionItem>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'personal-center-left'})
import { ref } from 'vue'
import PositionItem from '../components/posiitonItem.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: 144px;
  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>