feat: first commit
This commit is contained in:
eleanor.mao
123
src/components/anchor-card/index.less
Normal file
123
src/components/anchor-card/index.less
Normal file
@ -0,0 +1,123 @@
|
||||
@import '@/styles/common.less';
|
||||
@import '@/styles/variables.less';
|
||||
|
||||
.anchor-card {
|
||||
width: 100%;
|
||||
.flex-row();
|
||||
align-items: flex-start;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
|
||||
.color(@defaultColor) {
|
||||
color: var(--read-color, @defaultColor);
|
||||
}
|
||||
|
||||
&__cover {
|
||||
position: relative;
|
||||
width: 188px;
|
||||
min-width: 188px;
|
||||
max-width: 188px;
|
||||
height: 242px;
|
||||
min-height: 242px;
|
||||
max-height: 242px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
&__cover-skeleton {
|
||||
position: absolute;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
&__info-container {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
.flex-row();
|
||||
align-items: flex-start;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
&__info {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
.flex-column();
|
||||
align-items: flex-start;
|
||||
margin-right: 10px;
|
||||
|
||||
&__title {
|
||||
font-size: 32px;
|
||||
line-height: 32px;
|
||||
font-weight: 500;
|
||||
.color(@blColor);
|
||||
}
|
||||
|
||||
@maxTextWidth: 49vw;
|
||||
|
||||
&__basic {
|
||||
max-width: @maxTextWidth;
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
font-weight: 400;
|
||||
.color(@blColorG2);
|
||||
margin-top: 16px;
|
||||
.noWrap();
|
||||
}
|
||||
|
||||
&__categories {
|
||||
max-width: @maxTextWidth;
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
font-weight: 400;
|
||||
.color(@blColorG2);
|
||||
margin-top: 12px;
|
||||
.noWrap();
|
||||
}
|
||||
|
||||
&__year {
|
||||
max-width: @maxTextWidth;
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
font-weight: 400;
|
||||
.color(@blColorG2);
|
||||
margin-top: 12px;
|
||||
.noWrap();
|
||||
}
|
||||
|
||||
&__salary {
|
||||
max-width: @maxTextWidth;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
font-weight: 500;
|
||||
.color(@blHighlightColor);
|
||||
margin-top: 20px;
|
||||
.noWrap();
|
||||
}
|
||||
}
|
||||
|
||||
&__right {
|
||||
height: 242px;
|
||||
.flex-column();
|
||||
justify-content: space-between;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
font-weight: 400;
|
||||
.color(@blColorG1);
|
||||
}
|
||||
|
||||
&__distance-wrapper {
|
||||
.flex-row();
|
||||
}
|
||||
|
||||
&__distance-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&__distance {
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
font-weight: 400;
|
||||
.color(@blColorG1);
|
||||
}
|
||||
}
|
||||
82
src/components/anchor-card/index.tsx
Normal file
82
src/components/anchor-card/index.tsx
Normal file
@ -0,0 +1,82 @@
|
||||
import { Image as TaroImage } from '@tarojs/components';
|
||||
|
||||
import { Image } from '@taroify/core';
|
||||
import { PhotoFail } from '@taroify/icons';
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import SkeletonLoading from '@/components/skeleton-loading';
|
||||
import { PageUrl } from '@/constants/app';
|
||||
import { MaterialViewSource, WORK_YEAR_LABELS } from '@/constants/material';
|
||||
import { AnchorInfo } from '@/types/material';
|
||||
import { calcDistance } from '@/utils/location';
|
||||
import { getBasicInfo } from '@/utils/material';
|
||||
import { navigateTo } from '@/utils/route';
|
||||
import { activeDate } from '@/utils/time';
|
||||
|
||||
import './index.less';
|
||||
|
||||
interface IProps {
|
||||
data: AnchorInfo;
|
||||
jobId?: string;
|
||||
}
|
||||
|
||||
const PREFIX = 'anchor-card';
|
||||
const getSalary = (data: AnchorInfo) => {
|
||||
const { fullTimeMinPrice, fullTimeMaxPrice, partyTimeMinPrice, partyTimeMaxPrice } = data;
|
||||
const prices: string[] = [];
|
||||
if (fullTimeMinPrice && fullTimeMaxPrice) {
|
||||
prices.push(`${fullTimeMinPrice / 1000}-${fullTimeMaxPrice / 1000}K/月`);
|
||||
}
|
||||
if (partyTimeMinPrice && partyTimeMaxPrice) {
|
||||
prices.push(`${partyTimeMinPrice}-${partyTimeMaxPrice}/小时`);
|
||||
}
|
||||
return prices.filter(Boolean).join(' ');
|
||||
};
|
||||
|
||||
function AnchorCard(props: IProps) {
|
||||
const { data, jobId } = props;
|
||||
const style = data.isRead ? ({ '--read-color': '#999999' } as React.CSSProperties) : {};
|
||||
const cover = (data.materialVideoInfoList.find(video => video.isDefault) || data.materialVideoInfoList[0])?.coverUrl;
|
||||
|
||||
const handleClick = useCallback(
|
||||
() => navigateTo(PageUrl.MaterialView, { jobId, resumeId: data.id, source: MaterialViewSource.AnchorList }),
|
||||
[data, jobId]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={PREFIX} style={style} onClick={handleClick}>
|
||||
<Image
|
||||
lazyLoad
|
||||
src={cover}
|
||||
width={188}
|
||||
height={242}
|
||||
mode="aspectFill"
|
||||
fallback={<PhotoFail />}
|
||||
className={`${PREFIX}__cover`}
|
||||
placeholder={<SkeletonLoading customName={`${PREFIX}__cover-skeleton`} />}
|
||||
/>
|
||||
<div className={`${PREFIX}__info-container`}>
|
||||
<div className={`${PREFIX}__info`}>
|
||||
<div className={`${PREFIX}__info__title`}>{data.name}</div>
|
||||
<div className={`${PREFIX}__info__basic`}>{getBasicInfo(data)}</div>
|
||||
<div className={`${PREFIX}__info__year`}>{WORK_YEAR_LABELS[data.workedYear] || ''}</div>
|
||||
{data.workedSecCategoryStr && (
|
||||
<div className={`${PREFIX}__info__categories`}>{`播过 ${data.workedSecCategoryStr}`}</div>
|
||||
)}
|
||||
<div className={`${PREFIX}__info__salary`}>{getSalary(data)}</div>
|
||||
</div>
|
||||
<div className={`${PREFIX}__right`}>
|
||||
<div className={`${PREFIX}__active-time`}>{activeDate(data.sortTime)}</div>
|
||||
{typeof data.distance !== 'undefined' && (
|
||||
<div className={`${PREFIX}__distance-wrapper`}>
|
||||
<TaroImage className={`${PREFIX}__distance-icon`} src={require('@/statics/svg/location.svg')} />
|
||||
<div className={`${PREFIX}__distance`}>{calcDistance(data.distance, 1)}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnchorCard;
|
||||
Reference in New Issue
Block a user