generator-hcy-system/generators/app/templates/src/global.less

hcy system layout and pages

// /* 字体大小 /*/
@small-font-size: 12px;
// /* 提示文字 */
@common-font-size: 14px;
// /* 正文 & 按钮文字 */
@large-font-size: 16px;
// /* 三级标题 */
@larger-font-size: 20px;
// /* 二级标题 */
@largest-font-size: 24px;
// /* 一级标题 */

/* 行高 */
@small-line-height: 20px;
// /* 提示文字 */
@common-line-height: 22px;
// /* 正文 & 按钮文字 */
@large-line-height: 24px;
// /* 三级标题 */
@larger-line-height: 28px;
// /* 二级标题 */
@largest-line-height: 32px;
// /* 标题 */

/* 间距 */
@small-space-size: 8px;
@common-space-size: 16px;
@large-space-size: 24px;
@larger-space-size: 32px;
@largest-space-size: 48px;

/* 颜色 */
@primary-color: #3177C3;
@primary-color-hover: #3d7df5;
@primary-color-active: #1559e7;
@primary-color-disabled: #b1b8c5;

// @primary-color: #fff;
// @primary-color-hover: #fff;
// @primary-color-active: #fff;
// @primary-color-disabled: #fff;

/* 背景颜色 */

@background-color-dark: #f2f4fa;
@background-color-light: #ffffff;

// /*菜单背景色*/
@menu-bg-color: #191b24;
@menu-bg-open-color: #35394a;
@menu-bg-checked: #3177c3;

/* 标题大小 */
.h1 {
  font-size: @large-font-size;
  line-height: @large-line-height;
}

.h2 {
  font-size: @larger-font-size;
  line-height: @larger-line-height;
}

.h3 {
  font-size: @largest-font-size;
  line-height: @largest-line-height;
}

// /* 文字对齐*/

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* 间距 */

.margin-t-s {
  margin-top: @small-space-size;
}

.margin-b-s {
  margin-bottom: @small-space-size;
}

.margin-l-s {
  margin-left: @small-space-size;
}

.margin-r-s {
  margin-right: @small-space-size;
}

.margin-t-m {
  margin-top: @common-space-size;
}

.margin-b-m {
  margin-bottom: @common-space-size;
}

.margin-l-m {
  margin-left: @common-space-size;
}

.margin-r-m {
  margin-right: @common-space-size;
}

.margin-t-l {
  margin-top: @large-space-size;
}

.margin-b-l {
  margin-bottom: @large-space-size;
}

.margin-l-l {
  margin-left: @large-space-size;
}

.margin-r-l {
  margin-right: @large-space-size;
}

.padding-t-s {
  padding-top: @small-space-size;
}

.padding-b-s {
  padding-bottom: @small-space-size;
}

.padding-l-s {
  padding-left: @small-space-size;
}

.padding-r-s {
  padding-right: @small-space-size;
}

.padding-t-m {
  padding-top: @common-space-size;
}

.padding-b-m {
  padding-bottom: @common-space-size;
}

.padding-l-m {
  padding-left: @common-space-size;
}

.padding-r-m {
  padding-right: @common-space-size;
}

.padding-t-l {
  padding-top: @large-space-size;
}

.padding-b-l {
  padding-bottom: @large-space-size;
}

.padding-l-l {
  padding-left: @large-space-size;
}

.padding-r-l {
  padding-right: @large-space-size;
}

.padding-r-0 {
  padding-right: 0;
}

.padding-l-0 {
  padding-left: 0;
}

.padding-t-0 {
  padding-top: 0;
}

.padding-b-0 {
  padding-bottom: 0;
}

.margin-b-0 {
  margin-bottom: 0;
}

.margin-t-0 {
  margin-top: 0;
}

.margin-l-0 {
  margin-left: 0;
}

.margin-r-0 {
  margin-right: 0;
}

/* 布局样式 */
.html,
body,
#root {
  margin: 0;
}


.ant-pro-layout-content {
  padding-block: 0 !important;
  padding-inline: 0 !important;
}

.ant-pro-card-body {
  margin-top: @small-space-size;
}

.ant-pro-page-container {
  margin-left: -6px;
}

.ant-layout-content {
  min-height: calc( 100vh - 56px);
}
// 修改滚动条样式
.ant-layout-sider-children div{
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}


.ant-space-item {
  color: #35394A;
}



// 欢迎页面
.home-bg {
  width: 100%;
  height: calc(100vh - 56px);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  padding: 48px 140px;
  
  h1{
    color: @background-color-light !important;
    font-size: 44px;
    line-height: 90px;
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 128px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 66px;
  margin-top: @common-space-size;
  margin-bottom: 0;
  padding-top: 0;
  padding-right: 30px;
  padding-left: 30px;
  background-color: white;
  border: 1px solid rgb(242, 244, 250);
  box-shadow: rgb(204 204 204) 2px 0 8px;
}

// 全屏展示 测试
.full-screen {
  width: 100vw;
  height: 100vh;
  background-color: #242526;
  position: fixed;
  top: 0;
  left: 0;
}

.ant-table-cell {
  // 不换行
  white-space: nowrap;
}