react card效果之数字卡片

本系列文章只是为了记录使用的插件及其他样式，依托于antd+typescript+less，不记录数据加载过程及路由指向。

简单卡片效果-01：

显示效果：

tsx代码：

return (
    <div className="container">
        <div className="dcards">
            <Row>
                <Col span={4} className="card">
                    <Statistic
                        title="解决方案"
                        value={slnCount}
                        prefix={<ClusterOutlined />}
                    ></Statistic>
                </Col>
                <Col span={4} className="card">
                    <Statistic
                        title="流程"
                        value={procCount}
                        prefix={<DeploymentUnitOutlined />}
                    ></Statistic>
                </Col>
                <Col span={4} className="card">
                    <Statistic
                        title="表单"
                        value={formCount}
                        prefix={<ContainerOutlined />}
                    ></Statistic>
                </Col>
                <Col span={4} className="card">
                    <Statistic
                        title="开发组件"
                        value={compsCount}
                        prefix={<SettingOutlined />}
                    ></Statistic>
                </Col>
                <Col span={4} className="card">
                    <Statistic
                        title="自定义代码"
                        value={codeCount}
                        prefix={<CodepenOutlined />}
                    ></Statistic>
                </Col>
                <Col span={4} className="card">
                    <Statistic
                        title="最近修改"
                        value={hisCount}
                        prefix={<HistoryOutlined />}
                    ></Statistic>
                </Col>
            </Row>
        </div>
</div>)

Less样式文件：

@space-4         : 4px; //间隔4px，用于margin padding top left right bottom
@space-8         : 8px; //间隔8px，用于margin padding top left right bottom
@space-16        : 16px; //间隔16px，用于margin padding top left right bottom
@space-24        : 24px; //间隔24px，用于margin padding top left right bottom
@space-32        : 32px; //间隔32px，用于margin padding top left right bottom
@space-40        : 40px; //间隔40px，用于margin padding top left right bottom
@space-48        : 48px; //间隔48px，用于margin padding top left right bottom
@space-56        : 56px; //间隔56px，用于margin padding top left right bottom
@space-64        : 64px; //间隔64px，用于margin padding top left right bottom
@space-72        : 72px; //间隔72px，用于margin padding top left right bottom
@space-80        : 80px; //间隔80px，用于margin padding top left right bottom
@font-size-16    : 16px; //字体大小16px
@font-size-24    : 24px; //字体大小24px
@font-size-32    : 32px; //字体大小32px，用于数字
@font-size-40    : 40px; //字体大小40px，用于大图标

//容器
.container {
//数字卡片效果 01
  .dcards {
    margin-right: -@space-8;

    .card {
      padding-right: @space-8;
      box-shadow   : 0 2px rgba(0, 0, 0, .01);
      border-radius: @space-4;
      border-left  : @space-4 solid @primary-color;
      font-weight  : 400;
      transition   : opacity .15s ease-out, box-shadow .15s ease-out, -webkit-transform .15s ease-out;
      transition   : transform .15s ease-out, opacity .15s ease-out, box-shadow .15s ease-out;
      transition   : transform .15s ease-out, opacity .15s ease-out, box-shadow .15s ease-out, -webkit-transform .15s ease-out;

      &:hover {
        box-shadow       : 0 @space-8 40px #e6e6e6;
        -webkit-transform: translateY(-2px);
        transform        : translateY(-2px);
        opacity          : 1;
      }

      &:active {
        box-shadow       : 0 @space-4 @space-8 #f2f2f2;
        -webkit-transform: translateY(0);
        transform        : translateY(0);
      }

      :global {
        .ant-statistic {
          transition      : opacity .25s ease-out;
          width           : 100%;
          margin          : 0 auto;
          padding         : @space-16 @space-16 @space-16 32px;
          overflow-x      : visible;
          background-color: #fff;
        }
      }
    }
  }
}

 

简单卡片效果-02：

显示效果：

tsx代码：

<div className="container">
<List
    dataSource={thresholdList}
    grid={{ gutter: 16, column: 5 }}
    renderItem={(item: any) => {
        return (
            <List.Item>
                <div className="dcardsec">
                    <div className="main">
                        <div className="head"><a>{item.name}</a></div>
                        <div className="body">
                            <a title="修改值" onClick={() => {
                                let arr = thresholdList.filter((n: any) => { return n.key == item.key });
                                setSelectedItem(arr[0]);
                                setValueVisible(true);
                            }}><span>{item.currValue || 0} </span></a>
                            <span className="suffix" >{"/" + (item.value || 0)}</span>
                        </div>
                    </div>
                    <div className="icon">
                        <a title="修改配置" onClick={() => {
                            let arr = thresholdList.filter((n: any) => { return n.key == item.key });
                            setSelectedItem(arr[0]);
                            setInfoVisible(true);
                        }}><SafetyCertificateTwoTone twoToneColor="#82d39e" /></a>
                    </div>
                </div>
            </List.Item>
        );
    }}
>
</List>
</div>

Less样式文件：

 //数字卡片效果 02
  .dcardsec {
    background: @component-background;
    display   : flex;
    flex-flow : row nowrap;
    padding   : @space-16;

    .main {
      .head {}

      .body {
        font-size: @font-size-32;

        .suffix {
          font-size: @font-size-24;
        }
      }
    }

    .icon {
      align-self: center;
      flex      : 1;
      text-align: right;
      font-size : @font-size-32;
    }

    a {
      color: @heading-color;

      &:hover {
        color: @primary-color;
      }
    }
  }