@opentiny/tiny-toolkit-pro/template/tinyvue/src/assets/style/details.less

TinyPro Vue：开箱即用、前后端分离的 Vue 后台管理模板

.container-detail {
  width: 100%;
  height: 100%;
  padding: 0;

  .mart_16 {
    margin-top: 16px;
  }

  .container-header {
    font-size: 16px;
    padding: 0px 24px;
    font-weight: bold;
    color: var(--tv-color-text);
  }

  .base-body {
    height: calc(100% - 60px);
    padding: 0 24px;
    overflow: auto;
    overflow-x: hidden;
  }

  :deep(.detail-card) {
    flex: 1 1 auto;
    padding: 24px;
    padding-bottom: 16px;
    background: var(--tv-color-bg-secondary);
    border-radius: 8px;

    .pad-title {
      padding-right: 24px;
      padding-bottom: 8px;
    }

    .detail-header {
      color: var(--tv-color-text);
      padding-bottom: 16px;
      font-weight: bold;
      font-size: 16px;
    }

    .detail-row {
      font-size: 14px;
      line-height: 22px;
      color: var(--tv-color-text);
      
      .title {
        color: var(--tv-color-text-weaken, #808080);
      }
    }

    .mart_8 {
      margin-top: 8px;
    }
  }

  .base-footer {
    flex: 1 1 auto;
    padding: 24px;
    background: var(--tv-color-bg-secondary);
    border-radius: 8px;
  }

  .footer-card {
    padding: 24px;
    :deep(.detail-row) {
      margin-top: 4px;
    }
  }
}