IsvCard组件

index.vue

index.less

@import '../../index.less';
.venus-special-card-wrapper {
  .ant-empty {
    .ant-empty-image {
      margin-top: 40px;
    }
    height: 300px;
    margin: 0px;
    padding-top: 40px;
  }
  .venus-special-card-row {
    // margin: 0 !important;
    margin-bottom: 24px !important;
  }
  .venus-special-card {
    border-top: none;
    border-left: none;
    .card-box {
      width: 388px;
      height: 276px;
      opacity: 1;
      background: #002055;
      border: 1px solid #2565f7;
      position: relative;
      padding: 24px;
      transition: 0.5s;
      &:hover{
        background: #012f7b;
      }
      .header-img {
        background: url(~@/assets/portalClient/isv/index/topImg.png) no-repeat center/contain;
        position: absolute;
        height: 28px;
        width: 389px;
        top: -29px;
        left: -2px;
      }
      .label-tag {
        transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        position: absolute;
        top: 9px;
        right: -22px;
        width: 83px;
        height: 23px;
        line-height: 23px;
        color: #ffffff;
        font-size: 12px;
        text-align: center;
      }
      .label-tag-yes{
        background: url(~@/assets/portalClient/isv/index/blueTag.png) no-repeat center/contain;
      }
      .label-tag-no{
        background: url(~@/assets/portalClient/isv/index/orgTag.png) no-repeat center/contain;
      }
      .label-btn-tag1{
        position: absolute;
        top: 68px;
        left: 23px;
        width: 49px;
        height: 25px;
        opacity: 1;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        line-height: 25px;
        color: #ffffff;
      }
      .label-btn-tag1-type1{
        background: linear-gradient(#1b7abc 0%, #1d95aa 100%);
      }
      .label-btn-tag1-type2{
        background: linear-gradient(#639e42 0%, #1aa845 100%);
      }
      .label-btn-tag2{
        position: absolute;
        top: 68px;
        left: 80px;
        width: 64px;
        height: 25px;
        opacity: 1;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        line-height: 23px;
        color: #ffffff;
      }
      .label-btn-tag2-type1{
        background: linear-gradient(#1b7abc 0%, #1d95aa 100%);
      }
      .label-btn-tag2-type2{
        background: linear-gradient(rgba(242,142,38,1.00) 0%, #fd644f 100%);
      }
      .card-word {
        font-family: Helvetica;
        padding-bottom: 50px;
        .card-title {
          width: 315px;
          height: 25px;
          opacity: 1;
          font-size: 20px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #ffffff;
          line-height: 25px;
          .content-title-a{
            overflow: hidden;    
            text-overflow: ellipsis;      //超出部分以省略号显示
            white-space: nowrap;
            width: 315px;  //用px单位亦可行
          }
        }
        .card-desc {
          font-size: 14px;
          color: #76aeff;
          cursor: default;
          .value {
            margin-top: 8px;
            display: block;
            width: 100%;
            height: 40px;
            letter-spacing: 1px;
            color: #eae4e4;
            display: -webkit-box;
            line-height: 22px;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 0px;
          }
        }
      }
      .center-word{
        height: 74px;
        width: 100%;
        .center-row{
          height: 33%;
          width: 100%;
          .center-row-lable{
            float: left;
            width: 30%;
            font-weight: 400;
            text-align: left;
            color: #3e62d4;
            line-height: 24px;
            font-size: 14px;
          }
          .center-row-value{
            float: right;
            width: 70%;
            font-weight: 400;
            text-align: right;
            color: #b2aeff;
            line-height: 24px;
            font-size: 14px;
          }
        }
      }
      .card-action {
        margin-top: 20px;
        padding-top: 17px;
        border-top: 1px solid #103767;
        button {
          width: 100%;
          height: 30px;
          font-size: 12px;
          background: transparent;
          color: #b7b7ff;
          border: solid 1px rgba(35, 111, 255, 0.5);
          &:focus {
            color: #b7b7ff;
            border: solid 1px rgba(35, 111, 255, 0.5);
          }
          &:hover {
            color: #fff;
            border: solid 1px rgba(35, 111, 255, 0.5);
            background-image: linear-gradient(90deg, #23afb1 0%, #0066ff 100%);
          }
        }
      }
    }
  }
}
.footer-pagination {
  text-align: center;
  button {
    max-width: 200px;
    width: 100%;
    background: url(~@/assets/portalClient/script/index/list_bg.png) no-repeat center/cover;
    border: solid 1px #117bff;
    color: #fff;
    height: 36px;
    &:focus {
      color: #fff;
      background: url(~@/assets/portalClient/script/index/list_bg.png) no-repeat center/cover;
    }
    &:hover {
      color: #fff;
      background-image: linear-gradient(90deg, #23afb1 0%, #0066ff 100%);
    }
    &::before {
      content: '';
      display: block;
      position: absolute;
      top: -2px;
      left: 0px;
      width: 100%;
      height: 4px;
      background: url(~@/assets/portalClient/script/index/light_03.png) no-repeat center/cover;
    }
    &::after {
      content: '';
      display: block;
      position: absolute;
      bottom: -2px;
      left: 0px;
      width: 100%;
      height: 4px;
      background: url(~@/assets/portalClient/script/index/light_03.png) no-repeat center/cover;
    }
  }
}