index.tsx 2.39 KB
import styled, { css } from 'styled-components';

export const StyledPageContainer = styled.div`
  width: 100%;
  height: 100%;
`;

export const StyledPageHeader = styled.div<{ border: Boolean }>`
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #fff;
  padding: 8px 16px;
  border-radius: 2px;
  border-top: ${props => (props.border ? '1px solid rgba(0, 0, 0, 0.06)' : 'none')};
  .ant-btn {
    margin-left: 10px;
  }
  .ant-upload-list {
    display: none;
  }
`;

export const StyledPageContent = styled.div`
  margin: 16px 16px 0;
  .ant-form {
    .ant-form-item {
      margin-bottom: 16px;
    }
  }
`;

export const StyledEllipsisWrap = styled.div<{ maxLine: number }>`
  overflow: hidden;
  text-overflow: ellipsis;
  ${p =>
    p.maxLine === 1
      ? css`
          white-space: nowrap;
        `
      : css`
          display: -webkit-box;
          white-space: normal;
          -webkit-line-clamp: ${p.maxLine};
          -webkit-box-orient: vertical;
          word-break: break-all;
        `}
`;

export const StyledWapperTab = styled.div`
  .ant-tabs {
    background-color: #fff;
    padding: 0px 16px;
  }
  .ant-tabs-nav {
    margin: 0;
  }
  .ant-tabs-top > .ant-tabs-nav::before,
  .ant-tabs-bottom > .ant-tabs-nav::before,
  .ant-tabs-top > div > .ant-tabs-nav::before,
  .ant-tabs-bottom > div > .ant-tabs-nav::before {
    border-bottom: none;
  }
`;

export const StyledPageFlex = styled.div`
  display: flex;
`;

export const StyledPageLeft = styled.div`
  width: 300px;
  margin-right: 16px;
  border-radius: 2px;
  padding: 22px 16px;
  background-color: #fff;
  min-height: calc(100vh - 144px);
  max-height: calc(100vh - 144px);
  overflow-y: scroll;
  .ant-tree .ant-tree-node-content-wrapper {
    padding: 0 6px;
    .ant-tree-title {
      font-size: 15px;
    }
  }
`;

export const StyledPageRight = styled.div`
  flex: 1;
  border-radius: 2px;
`;

export const StyledWapperIframe = styled.div`
  height: calc(100vh - 62px);
  width: 100%;
  background-color: #fff;
`;

export const StyledTitle = styled.div`
  h1 {
    font-size: 16px;
  }
`;

export const StyledText = styled.div`
  display: flex;
  flex-wrap: wrap;
  .item-text {
    width: calc(50% - 10px);
    margin-bottom: 10px;
    margin-right: 10px;
    .title {
      color: #797e8f;
      font-size: 14px;
      margin-bottom: 4px;
    }
    .desc {
      color: #000;
      font-size: 14px;
    }
  }
`;