.dashboard-wrap {
  display: flex;
  // padding: 24px;
  padding: 0 24px 0 0;
  height: calc(100vh - 64px);

  & .left {
    width: 50%;
    display: flex;
    flex-direction: column;
    // padding-left: 24px;

    & .card {
      position: relative;
      display: flex;
      flex-direction: column;
      margin-top: 12px;
      padding: 20px;
      width: 246px;
      min-height: 131px;
      display: grid;
      // grid-template-rows: 20px 50px 1fr 50px;
      border-radius: 8px;
      box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
      transition: all 0.2s;
    }
    & .card-wrap {
      // border-radius: 8px;
      // border-bottom-left-radius: 0;
      // border-top-left-radius: 0;
      height: 47%;
      display: flex;
      position: relative;
      justify-content: space-between;
      // background: url('@/assets/img/557d0afeb6372746656c8f48b90c4dcd.webp') no-repeat;

      & .title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 24px;
      }

      & .welcome-wrap {
        width: 240px;
        margin: 42px 0 0 48px;
        position: relative;

        & .welcome-title,
        & .welcome-user-title {
          font-size: 36px;
          font-weight: 600;
        }

        & .welcome-title {
          margin-bottom: 24px;
        }

        & .welcome-desc {
          margin: 24px 0;
          font-size: 12px;
          font-weight: 600;
          line-height: 20px;
        }

        & .card-btn {
          position: absolute;
          bottom: 24px;
        }
      }

      & .welcome-animition {
        display: flex;
        align-items: center;
        position: absolute;
        right: 110px;
        top: 160px;
      }

      & .welcome-img {
        height: 125px;
        margin-right: 24px;
        margin-top: 100px;

        & > svg {
          width: 100%;
          height: 100%;
        }
      }

      @media screen and (min-width: 1600px) {
        & .welcome-img {
          height: 125px;
          margin-right: 48px;
          margin-top: 100px;

          & > svg {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    & .family-info {
      flex: 1;
      margin-left: 48px;
      & .family-wrap {
        display: flex;
        height: calc(100% - 38px);

        & .info-left {
          width: 93%;
        }

        & .info-right {
          flex: 1;
        }
      }

      & .family-primary-person {
        display: flex;
        // justify-content: space-between;
      }

      & .family-title {
        font-size: 18px;
        font-weight: 600;
        margin-top: 14px;
      }

      & .card {
        // margin: 20px;
        & .card-avatar-wrap {
          display: flex;

          :global {
            .ant-avatar {
              width: 70px;
              height: 70px;
            }
          }

          & .userInfo {
            margin-left: 28px;
            margin-top: 8px;

            & :nth-of-type(1) {
              margin-bottom: 8px;
            }
          }
        }

        & .userInCome {
          position: absolute;
          bottom: 14px;
          left: 20px;
        }
      }

      .process-card {
        flex: 1;
        & .card {
          padding: 16px;
          padding-bottom: 4px;
        }
        & .team-process-title {
          font-weight: 600;
          font-size: 18px;
          margin-bottom: 34px;
        }

        :global {
          .ant-progress-bg {
            height: 14px !important;
          }

          .ant-progress-text {
            color: #ffffff;
          }
        }

        & .team-process-wrap {
          display: flex;
          justify-content: space-between;
          margin-bottom: 14px;
        }
      }

      .card:hover {
        box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4);
        transform: scale(1.01);
      }

      .card__link,
      .card__exit,
      .card__icon {
        position: relative;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.9);
      }

      .card__link::after {
        position: absolute;
        top: 25px;
        left: 0;
        content: "";
        width: 0%;
        height: 3px;
        background-color: rgba(255, 255, 255, 0.6);
        transition: all 0.5s;
      }

      .card__link:hover::after {
        width: 100%;
      }

      .text {
        color: white;
      }

      .card__exit {
        grid-row: 1/2;
        justify-self: end;
      }

      .card__icon {
        grid-row: 2/3;
        font-size: 30px;
      }

      .card__title {
        grid-row: 3/4;
        font-weight: 500;
        color: #ffffff;
      }

      .card__apply {
        grid-row: 4/5;
        align-self: center;
      }

      @media (max-width: 1600px) {
        .cards {
          justify-content: center;
        }
      }
    }

    & .team-user {
      margin-top: 42px;
      margin-bottom: 16px;
      scrollbar-width: none;
      -ms-overflow-style: none;
      height: 163px;
      overflow-y: scroll;
      border-radius: 8px;
      padding: 8px;
    }
  }

  & .right {
    flex: 1;

    & .news-wrap-title {
      padding: 24px 0 0 24px;
      font-weight: 600;
      font-size: 18px;
    }

    & .news-list {
      height: calc(100% - 255px);
      overflow-y: auto;
      margin-left: 24px;
      margin-top: 2px;
      position: relative;
      display: flex;
      margin-top: 12px;
      padding: 20px;
      border-radius: 8px;
      // box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
      transition: all 0.2s;

      :global {
        .ant-list-item-extra {
          img {
            width: 218px;
          }
        }
      }

      :global {
        .ant-list-item-meta-description {
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden; //溢出内容隐藏
          text-overflow: ellipsis; //文本溢出部分用省略号表示
          display: -webkit-box; //特别显示模式
          -webkit-line-clamp: 1; //行数
          line-clamp: 1;
          -webkit-box-orient: vertical; //盒子中内容竖直排列
        }
      }

      & .news-content {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 2; //行数
        line-clamp: 2;
        -webkit-box-orient: vertical; //盒子中内容竖直排列
      }
    }

    & .target-list {
      // height: calc(100% - 348px);
      height: 100px;
      overflow-x: auto;
      margin-left: 24px;
      margin-top: 24px;
      justify-content: space-around;
      position: relative;
      display: flex;
      margin-top: 12px;
      padding: 20px;
      border-radius: 8px;
      cursor: pointer;
      // box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
      transition: all 0.2s;

      & .target-info {
        display: flex;
        gap: 58px;
        // height: 100px;

        & .target-item {
          display: flex;
          flex-direction: column;
          // justify-content: center;
          // align-items: center;

          & .target-item-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
          }

          & .target-item-value {
            font-size: 34px;
            font-weight: 600;
            font-family: cursive;
          }
        }
      }
    }

    & .target-list:hover {
      border-color: var(--ant-color-primary) !important;
    }

    & .entry-card {
      margin-left: 24px;
      margin-top: 24px;
    }
  }
}
