<div className={styles.toolNew}>
<div className={styles.toolNew_left}>
<div className={styles.toolNew_left_header}>
{intl.formatMessage({ id: 'Tool Classification' })}
</div>
<div className={styles.toolNew_left_groups}>
{Array.isArray(toolGroups) &&
toolGroups.length > 0 &&
toolGroups.map((item: any, index: number) => {
return (
<div
className={styles.toolNew_left_groupOne}
onClick={() => _selectGroup(item)}
data-index={currentGroup.id === item.id}
key={item.id}
>
<div>{item.toolGroupName}</div>
</div>
);
})}
</div>
</div>
<div className={styles.toolNew_right}>
<Loading loading={toolLoading || false}>
<div className={styles.toolNew_right_top}>
<div className={styles.toolNew_right_total}>
{intl.formatMessage({ id: 'Total xx tools' }, { total })}
</div>
<Space size={10}>
<Input
placeholder={intl.formatMessage({
id: 'Please enter keywords100'
})}
onSearch={_keySearch}
onEnterPress={_keySearch}
className={styles.toolNew_right_searchInput}
allowClear
/>
<Select
className={styles.toolNew_right_selecter}
onChange={_changeSort}
defaultValue={currentSort}
>
<Select.Option value="time" key="time">
{intl.formatMessage({ id: 'Sort by Time' })}
</Select.Option>
<Select.Option value="visit" key="visit">
{intl.formatMessage({ id: 'By frequency of visits' })}
</Select.Option>
</Select>
</Space>
</div>
<div className={styles.toolNew_right_cards}>
{Array.isArray(toolList) &&
toolList.length > 0 &&
toolList.map((item: any) => {
return (
<div
className={styles.toolNew_right_cardOne}
key={item.id}
onClick={() => _goDetail(item.id)}
>
<div className={styles.toolNew_right_cardHeader}>
<GetImg
src={item.toolImgUrl}
alt="pic"
className={styles.toolNew_right_img}
/>
<div className={styles.toolNew_right_names}>
<div className={styles.toolNew_right_name}>
{item.toolName}
</div>
{item.descriptionText && (
<Popover
placement="top"
arrowPointAtCenter
zIndex={1}
overlayClassName={styles.mergePopOver}
content={
<div
className={styles.mergePopOver_content}
onClick={(e) => e.stopPropagation()}
dangerouslySetInnerHTML={{
__html:
typeof item.descriptionText === 'string' ?
decodeURIComponent(
item.descriptionText
).replace(/<\/?(img|table)[^>]*>/g, '') :
item.descriptionText.toHTML()
}}
/>
}
>
<div
className={styles.toolNew_right_intro}
dangerouslySetInnerHTML={{
__html:
typeof item.descriptionText === 'string' ?
decodeURIComponent(
item.descriptionText
).replace(/<\/?(img|table)[^>]*>/g, '') :
item.descriptionText.toHTML()
}}
/>
</Popover>
)}
<div className={styles.toolNew_cardBottom}>
<div
className={styles.toolNew_cardBottom_detail}
onClick={() => _goDetail(item.id)}
>
{`${intl.formatMessage({ id: 'View details' })}>>`}
</div>
{item.toolType === 1 ? (
<Button
className={styles.toolNew_cardBottom_detailIcon}
onClick={(e) => _goJump(item, e)}
>
<div
style={{
marginRight: '4px',
marginBottom: '-4px'
}}
>
{fly}
</div>
{intl.formatMessage({ id: 'Interview' })}
</Button>
) : (
<Button
className={styles.toolNew_cardBottom_detailIcon}
onClick={() => _downloadTool(item)}
>
<Icon icon="downloadIcon" />
{intl.formatMessage({ id: 'Download' })}
</Button>
)}
</div>
</div>
</div>
<div
className={styles.card_eye}
title={intl.formatMessage({ id: 'Page View' })}
>
{eye}
{item.viewCount || 0}
</div>
{!item.webUrl && (
<div className={styles.card_downloads}>
{/* {intl.formatMessage({ id: 'Downloads' })}： */}
<Icon icon="downloadIcon" />
{item.downloadCount || 0}
</div>
)}
</div>
);
})}
</div>
<Pagination
className={styles.toolNew_pages}
current={pageNum}
pageSize={pageSize}
total={total}
showSizeChanger
showQuickJumper
onShowSizeChange={_changePage}
onChange={_changePage}
/>
</Loading>
</div>
</div>
.toolNew {
width: 1200px;
background-color: white;
margin-top: 10px;
display: flex;
.toolNew_left {
width: 240px;
border-right: 2px solid rgb(242, 245, 250);
padding: 0 10px 0 10px;
position: sticky;
background-color: #fff;
top: 0;
margin-right: 2px;
overflow-y: auto;
height: calc(100vh - 90px);
top: 0;
.toolNew_left_header {
padding-left: 20px;
height: 47px;
line-height: 45px;
font-weight: 700;
font-style: normal;
font-size: 16px;
color: #0183CC;
border-bottom: 1px solid rgb(242, 245, 250);
}
.toolNew_left_groups {
.toolNew_left_groupOne {
height: 40px;
line-height: 40px;
font-size: 14px;
color: rgba(0, 0, 0, 0.847);
cursor: pointer;
padding-left: 50px;
&:hover {
background-color: rgb(237, 248, 255);
}
&[data-index=true] {
background-color: rgb(237, 248, 255);
color: #0183CC;
}
}
}
}
.toolNew_right {
width: calc(100% - 240px);
position: relative;
height: calc(100% - 80px);
.toolNew_right_top {
padding: 26px 20px 0 20px;
display: flex;
justify-content: space-between;
:global {
.unv-InputWrap .unv-InputInner {
margin-left: 10px;
}
.ant-select {
.ant-select-selector {
min-width: 120px;
border-radius: 15px;
height: 30px;
}
}
}
.toolNew_right_total {
font-weight: 700;
font-style: normal;
color: rgba(0, 0, 0, 0.5);
}
.toolNew_right_searchInput {
width: 160px;
border-radius: 15px;
height: 30px;
}
.toolNew_right_selecter {
:global {
.ant-select-selector {
color: rgba(0, 0, 0, 0.5);
}
}
}
}
.toolNew_right_cards {
display: flex;
flex-wrap: wrap;
padding: 10px 10px 0 20px;
background-color: white;
margin-bottom: 48px;
.toolNew_right_cardOne {
height: 140px;
width: 454px;
border: 1px solid rgb(245, 245, 245);
border-radius: 8px;
padding: 16px 0 0 16px;
margin-bottom: 10px;
margin-right: 10px;
position: relative;
&:hover {
cursor: pointer;
}
.card_eye {
position: absolute;
right: 10px;
top: 4px;
color: rgba(0, 0, 0, 0.5);
font-size: 12px;
>i>svg {
margin-right: 5px;
}
}
.card_downloads {
position: absolute;
right: 10px;
top: 20px;
color: rgba(0, 0, 0, 0.5);
font-size: 12px;
>i {
margin-right: -3px;
cursor: unset;
>svg {
color: rgba(0, 0, 0, 0.5);
margin-top: -2px;
}
}
}
&:hover {
border: 1px solid #0183CC;
}
.toolNew_right_cardHeader {
display: flex;
.toolNew_right_img {
height: 80px;
width: 80px;
object-fit: contain;
}
.toolNew_right_names {
margin-left: 20px;
position: relative;
height: 124px;
.toolNew_right_name {
width: 305px;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
font-weight: 700;
font-size: 16px;
color: rgba(0, 0, 0, 0.847);
}
.toolNew_right_intro {
margin-top: 2px;
font-size: 12px;
color: rgba(0, 0, 0, 0.5);
overflow: hidden;
width: 326px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
}
.toolNew_cardBottom {
position: absolute;
margin-top: 10px;
display: flex;
justify-content: space-between;
width: 326px;
bottom: 10px;
.toolNew_cardBottom_detail {
font-size: 12px;
color: rgba(0, 0, 0, 0.5);
cursor: pointer;
&:hover {
color: #0183CC;
}
}
.toolNew_cardBottom_detailIcon {
border: 1px solid white;
display: flex;
>div>svg {
margin-bottom: -4px;
}
&:hover {
border: 1px solid #0183CC;
>i>svg {
color: #0183CC;
}
}
}
}
}
}
}
}
.toolNew_pages {
margin-top: 7px;
height: 50px;
background-color: #fff;
padding: 10px 10px 10px 0;
position: fixed;
bottom: 0;
width: 958px;
border-radius: 0;
border-top: 1px solid #f2f5fa;
text-align: right;
}
}
}
.mergePopOver {
padding-top: 0;
z-index: 99999 !important;
.mergePopOver_content {
padding: 20px 40px 10px 20px;
max-height: 100vh;
overflow-y: auto;
height: 200px;
width: 680px;
}
:global {
.ant-popover-inner-content {
padding: 0;
}
.ant-popover-inner {
border-radius: 8px;
}
.ant-popover-arrow {
display: none;
}
}
}
