2022-05-29

king

2022-05-29 f38b3321250222b81a797a538d9c3efa9f8a0ecb

 src/templates/sharecomponent/cardcomponent/index.scss

@@ -4,63 +4,92 @@

  .ant-card.chart-card {
    min-height: 100px;
    display: inline-block;
    vertical-align: top;
    margin-right: 15px;

    .ant-card-head {
      min-height: 40px;
      line-height: 2;
      font-size: 14px;
      .ant-card-head-title {
        color: #000000;
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        min-width: 30px;
      }
      .ant-card-extra {
        cursor: pointer;
        color: #1890ff;
        .anticon {
          margin-right: 5px;
        }
      }
    }
    .ant-card-actions {
      height: 48px;
    }
  }
  .chart-card-insert {
    text-align: center;
    .anticon {
      color: #1890ff;
    }
  }

  .ant-card.ant-card-bordered .ant-card-body {
  .ant-card.chart-card.without-border {
    .ant-card-head {
      border-bottom: 0;
    }
    .ant-card-actions {
      border-top: 0;
    }
  }

  .ant-card.chart-card .ant-card-body {
    padding: 20px;
    zoom: 1;
    overflow: hidden;

    .ant-card-meta {
      width: 100%;
      position: relative;

      >.anticon-plus {
        color: #26C281;
        position: absolute;
        right: -15px;
        top: -5px;
        right: -20px;
        top: -15px;
        padding: 5px;
      }

      .ant-card-meta-avatar {
        position: absolute;
        top: 0px;
        left: 0px;
      }
      // .ant-card-meta-avatar + .ant-card-meta-detail {
      //   float: left;
      // }
      .ant-avatar-image {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-variant: tabular-nums;
        line-height: 1.5;
        list-style: none;
        font-feature-settings: 'tnum';
        position: relative;
        display: inline-block;
        overflow: hidden;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        vertical-align: middle;
        border-radius: 50%;

        img {
          width: 100%;
          height: 100%;
        box-sizing: content-box;
        margin-right: 10px;
        margin-bottom: 15px;
        
        .ant-avatar-image {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          line-height: 1.5;
          display: inline-block;
          overflow: hidden;
          color: #fff;
          white-space: nowrap;
          text-align: center;
          vertical-align: middle;
  
          img {
            width: 100%;
          }
          .font {
            background: transparent;
          }
        }
      }
    }
@@ -71,4 +100,120 @@
    margin-left: 0px;
    margin-right: 0px;
  }

  .ant-card.chart-card {
    .ant-card-head {
      padding: 0 12px;
      .edit {
        position: absolute;
        left: 0;
        top: 0px;
        font-size: 13px;
        color: #1890ff;
        cursor: pointer;
        display: none;
        padding: 0 5px;
      }
      .edit.close {
        left: 20px;
        color: #ff4d4f;
      }
    }
    .ant-card-head:hover {
      .edit {
        display: inline-block;
      }
    }

    .ant-card-actions {
      position: relative;
      .edit {
        position: absolute;
        left: 0;
        top: 0px;
        font-size: 13px;
        color: #1890ff;
        cursor: pointer;
        display: none;
        padding: 0 5px;
      }
      .edit.close {
        left: 20px;
        color: #ff4d4f;
      }
    }
    .ant-card-actions:hover {
      .edit {
        display: inline-block;
      }
    }

    .ant-card-meta-avatar {
      position: relative;
      .edit {
        position: absolute;
        left: -15px;
        top: -13px;
        font-size: 13px;
        color: #1890ff;
        cursor: pointer;
        display: none;
        padding: 0 5px;
        z-index: 1;
      }
      .edit.close {
        left: 5px;
        color: #ff4d4f;
      }
    }
    .ant-card-body:hover .ant-card-meta-avatar {
      .edit {
        display: inline-block;
      }
    }
    .ant-card-actions {
      li {
        color: rgba(0, 0, 0, 0.45);
        span {
          overflow: hidden;
          word-break: break-word;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .anticon {
          width: unset;
          margin-right: 3px;
          color: rgba(0, 0, 0, 0.45);
          vertical-align: middle;
        }
      }
      li:hover {
        color: #1890ff;
        .anticon {
          color: #1890ff;
        }
      }
    }
  }
  .ant-card.chart-card.background {
    .ant-card-meta-title {
      color: unset;
    }
    .ant-card-head {
      color: unset;
      .ant-card-head-title {
        color: unset;
      }
    }
    .ant-card-actions {
      background: transparent;
      li {
        white-space: nowrap;
        color: unset;
        .anticon {
          color: unset;
        }
      }
    }
  }
}