react card效果之数字卡片

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

简单卡片效果-01：

显示效果：

tsx代码：

return (
    

        

            
                
                    }
                    >
                
                
                    }
                    >
                
                
                    }
                    >
                
                
                    }
                    >
                
                
                    }
                    >
                
                
                    }
                    >
                
            
        
)

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代码：

 {
        return (
            
                

                    

                        
{item.name}
                        

                             {
                                let arr = thresholdList.filter((n: any) => { return n.key == item.key });
                                setSelectedItem(arr[0]);
                                setValueVisible(true);
                            }}>{item.currValue || 0} 
                            {"/" + (item.value || 0)}
                        
                    
                    

                         {
                            let arr = thresholdList.filter((n: any) => { return n.key == item.key });
                            setSelectedItem(arr[0]);
                            setInfoVisible(true);
                        }}>
                    
                
            
        );
    }}
>

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;
      }
    }
  }