wupengfei
2025-02-14 548b9c78ca14b5c3812e9958835dedb78d589454
packages/components/src/Card/FlexJobCard.vue
@@ -1,19 +1,6 @@
<template>
  <div class="flexJob-card-wrapper">
    <div class="flexJob-card-top-wrapper">
      <UserAvatar :size="60" class="flexJob-card-top-avatar" />
      <div class="flexJob-card-top-info">
        <div class="flexJob-card-top-info-item">
          <div class="flexJob-card-top-info-name">{{ '洋洋' }}</div>
          <div class="flexJob-card-top-info-gender">
            <img v-if="1" :src="IconMale" class="flexJob-card-top-info-gender-icon" />
            <img v-else :src="IconFemale" class="flexJob-card-top-info-gender-icon" />
          </div>
          <div class="flexJob-card-top-info-auth">{{ '已实名' }}</div>
        </div>
        <div class="flexJob-card-top-info-detail">{{ '26岁 | 非学生 | 本科 | 上岗121次' }}</div>
      </div>
    </div>
    <FlexJobTopView />
    <div class="flexJob-card-done-list">
      {{
        '做过:客房服务员、客房服务员、客房客房服务员、客房做过:客房服务员、客房服务员、客房客房服务员、客房'
@@ -26,11 +13,14 @@
      <div class="flexJob-card-done-detail-item">{{ '在「宁波雷迪森酒店」,做过客房服务员' }}</div>
    </div>
    <div class="flexJob-card-footer">
      <div class="flexJob-card-footer-left" v-if="showFooterLeft">
        <slot name="footerLeft">
          <div class="flexJob-card-footer-text">取消收藏</div>
        </slot>
      <div class="flexJob-card-footer-left-wrapper">
        <div class="flexJob-card-footer-left" v-if="showFooterLeft">
          <slot name="footerLeft">
            <div class="flexJob-card-footer-text">取消收藏</div>
          </slot>
        </div>
      </div>
      <div class="flexJob-card-footer-right" v-if="showFooterRight">
        <slot name="footerRight">
          <nut-button type="primary">立即联系</nut-button>
@@ -44,6 +34,7 @@
import IconMale from '@/assets/mine/icon-male.png';
import IconFemale from '@/assets/mine/icon-female.png';
import { CommonTaskCardProps } from './card';
import FlexJobTopView from './FlexJobTopView.vue';
defineOptions({
  name: 'FlexJobCard',
@@ -74,55 +65,7 @@
  }
  .flexJob-card-top-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 38px;
    .flexJob-card-top-avatar {
      margin-right: 30px;
    }
    .flexJob-card-top-info {
      display: flex;
      flex-direction: column;
      .flexJob-card-top-info-item {
        display: flex;
        align-items: center;
        .flexJob-card-top-info-name {
          font-size: 34px;
          line-height: 34px;
          font-weight: bold;
          color: boleGetCssVar('text-color', 'primary');
        }
        .flexJob-card-top-info-gender {
          display: inline-flex;
          align-items: center;
          height: 34px;
          margin: 0 10px;
          .flexJob-card-top-info-gender-icon {
            width: 24px;
            height: 24px;
          }
        }
        .flexJob-card-top-info-auth {
          font-size: 28px;
          line-height: 34px;
        }
      }
      .flexJob-card-top-info-detail {
        font-size: 24px;
        font-weight: 400;
        line-height: 28px;
        margin-top: 12px;
        color: boleGetCssVar('text-color', 'secondary');
      }
    }
  }
  .flexJob-card-done-list {
@@ -153,10 +96,14 @@
  .flexJob-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: #d9d9d9 1px solid;
    padding-top: 24px;
    margin-top: 18px;
    .flexJob-card-footer-left-wrapper {
      flex: 1;
      min-width: 0;
    }
    .flexJob-card-footer-left {
      .flexJob-card-footer-text {
@@ -169,6 +116,7 @@
    .flexJob-card-footer-right {
      --nut-button-default-font-size: 24px;
      --nut-button-default-height: 52px;
      --nut-button-default-line-height: 49px;
    }
  }
}