style(scene): 优化工程卡片样式和布局

master
钟良源 5 months ago
parent ed33300404
commit f1711ea739

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import style from './style/engineering.module.less'; import styles from './style/engineering.module.less';
import { Input, Grid, Card, Result, Pagination } from '@arco-design/web-react'; import { Input, Grid, Card, Result, Pagination } from '@arco-design/web-react';
import { IconPlus, IconApps } from '@arco-design/web-react/icon'; import { IconPlus, IconApps } from '@arco-design/web-react/icon';
import { openWindow, OpenWindowOptions } from '@/utils/common'; import { openWindow, OpenWindowOptions } from '@/utils/common';
@ -72,7 +72,7 @@ const Engineering: React.FC<EngineeringProps> = ({ dataType, showAdd = true }) =
return ( return (
<> <>
<div className={style.engineeringContainer}> <div className={styles["engineering-container"]}>
{/*搜索*/} {/*搜索*/}
<Row> <Row>
<Col span={24}> <Col span={24}>
@ -100,7 +100,7 @@ const Engineering: React.FC<EngineeringProps> = ({ dataType, showAdd = true }) =
{/*新建工程按钮*/} {/*新建工程按钮*/}
{showAdd && ( {showAdd && (
<Card <Card
className={style.cardStyle} className={styles["card-style"]}
> >
<Result <Result
status="info" status="info"
@ -120,12 +120,7 @@ const Engineering: React.FC<EngineeringProps> = ({ dataType, showAdd = true }) =
lg={6} lg={6}
xl={6} xl={6}
xxl={6}> xxl={6}>
<Card className={style.cardStyle} hoverable onClick={() => openEngineHandle(item)}> <Card className={styles["card-style"]} hoverable onClick={() => openEngineHandle(item)}>
{/*<Result*/}
{/* status="info"*/}
{/* subTitle={item.name}*/}
{/* icon={<IconApps />}*/}
{/*></Result>*/}
<CardWrap item={item}></CardWrap> <CardWrap item={item}></CardWrap>
</Card> </Card>
</Col> </Col>

@ -24,12 +24,12 @@
.card-footer { .card-footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 0 10px 12px; padding: 0 0 15px 12px;
.operation { .operation {
svg { svg {
margin-right: 15px; margin-right: 15px;
font-size: 16px; font-size: 18px;
} }
} }
} }

@ -1,11 +1,16 @@
.engineeringContainer { .engineering-container {
.cardStyle { .card-style {
margin: 5px; margin: 5px;
border: 1px solid var(--color-neutral-3); border: 1px solid var(--color-neutral-3);
cursor: pointer; cursor: pointer;
transition-property: all;
:global(.arco-card-body) { :global(.arco-card-body) {
padding: 0; padding: 0;
} }
} }
.card-style:hover {
transform: translateY(-4px);
}
} }
Loading…
Cancel
Save