123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425 |
- @import './variable.scss';
- /** 背景颜色 */
- .zh-bg-success {
- background-color: $zh-green;
- }
- .zh-bg-gray {
- background-color: $zh-light-gray;
- }
- .zh-bg-blue {
- background-color: $zh-blue;
- }
- .zh-bg-red {
- background-color: $zh-red;
- }
- .zh-bg-yellow {
- background-color: $zh-yellow;
- }
- .zh-bg-green {
- background-color: $zh-green;
- }
- .zh-bg-white {
- background-color: $zh-white;
- }
- /** 字体颜色 */
- .zh-gray {
- color: $zh-gray;
- }
- .zh-red {
- color: $zh-red;
- }
- .zh-blue {
- color: $zh-blue;
- }
- .zh-green {
- color: $zh-green;
- }
- .zh-yellow {
- color: $zh-yellow;
- }
- .zh-muted {
- color: $zh-muted;
- }
- /** 文本水平对齐方向 */
- .zh-text-center {
- text-align: center;
- }
- .zh-text-left {
- text-align: left;
- }
- .zh-text-right {
- text-align: right;
- }
- .zh-width-100P {
- width: 100%;
- }
- .zh-height-100P {
- height: 100%;
- }
- /** 字体粗细 */
- @for $i from 1 through 9 {
- .zh-fw-#{$i * 100} {
- font-weight: $i * 100;
- }
- }
- /* 预设常用样式 */
- @for $i from 1 through 50 {
- /* font-size */
- .zh-fz-#{$i} {
- font-size: 1px * $i;
- }
- /* padding */
- .zh-pd-#{$i} {
- padding: 1px * $i;
- }
- .zh-pd-top-#{$i} {
- padding-top: 1px * $i;
- }
- .zh-pd-right-#{$i} {
- padding-right: 1px * $i;
- }
- .zh-pd-bottom-#{$i} {
- padding-bottom: 1px * $i;
- }
- .zh-pd-left-#{$i} {
- padding-left: 1px * $i;
- }
- .zh-pd-tb-#{$i} {
- padding-top: 1px * $i;
- padding-bottom: 1px * $i;
- }
- .zh-pd-lr-#{$i} {
- padding-right: 1px * $i;
- padding-left: 1px * $i;
- }
- /* margin */
- .zh-mg-#{$i} {
- margin: 1px * $i;
- }
- .zh-mg-top-#{$i} {
- margin-top: 1px * $i;
- }
- .zh-mg-right-#{$i} {
- margin-right: 1px * $i;
- }
- .zh-mg-bottom-#{$i} {
- margin-bottom: 1px * $i;
- }
- .zh-mg-left-#{$i} {
- margin-left: 1px * $i;
- }
- .zh-mg-tb-#{$i} {
- margin-top: 1px * $i;
- margin-bottom: 1px * $i;
- }
- .zh-mg-lr-#{$i} {
- margin-right: 1px * $i;
- margin-left: 1px * $i;
- }
- // width & height
- .zh-width-#{$i} {
- width: 1px * $i;
- }
- .zh-height-#{$i} {
- height: 1px * $i;
- }
- // radius
- .zh-radius-#{$i} {
- border-radius: 1px * $i;
- }
- // line-height
- .zh-lh-#{$i} {
- line-height: 1px * $i;
- }
- }
- /** flex布局 */
- .zh-flex {
- display: flex;
- }
- .zh-flex-wrap {
- @extend .zh-flex;
- flex-wrap: wrap;
- }
- .zh-flex-row {
- @extend .zh-flex;
- flex-direction: row;
- }
- .zh-flex-column {
- @extend .zh-flex;
- flex-direction: column;
- }
- .zh-flex-sub {
- flex: 1;
- }
- .zh-flex-twice {
- flex: 2;
- }
- .zh-flex-treble {
- flex: 3;
- }
- .zh-flex-quadruple {
- flex: 4;
- }
- .zh-flex-quintuple {
- flex: 5;
- }
- .zh-align-start {
- @extend .zh-flex;
- align-items: flex-start;
- }
- .zh-align-end {
- @extend .zh-flex;
- align-items: flex-end;
- }
- .zh-align-center {
- @extend .zh-flex;
- align-items: center;
- }
- .zh-align-stretch {
- @extend .zh-flex;
- align-items: stretch;
- }
- .zh-align-baseline {
- @extend .zh-flex;
- align-items: baseline;
- }
- .zh-self-start {
- @extend .zh-flex;
- align-self: flex-start;
- }
- .zh-self-center {
- @extend .zh-flex;
- align-self: flex-center;
- }
- .zh-self-end {
- @extend .zh-flex;
- align-self: flex-end;
- }
- .zh-self-stretch {
- @extend .zh-flex;
- align-self: stretch;
- }
- .zh-justify-start {
- @extend .zh-flex;
- justify-content: flex-start;
- }
- .zh-justify-end {
- @extend .zh-flex;
- justify-content: flex-end;
- }
- .zh-justify-center {
- @extend .zh-flex;
- justify-content: center;
- }
- .zh-justify-between {
- @extend .zh-flex;
- justify-content: space-between;
- }
- .zh-justify-around {
- @extend .zh-flex;
- justify-content: space-around;
- }
- .zh-flex-row-center {
- @extend .zh-flex-row;
- @extend .zh-justify-center;
- @extend .zh-align-center;
- }
- .zh-flex-column-center {
- @extend .zh-flex-column;
- @extend .zh-justify-center;
- @extend .zh-align-center;
- }
- // grid布局
- .zh-grid {
- display: flex;
- flex-wrap: wrap;
- }
- @mixin multi-border($n) {
- &.zh-grid-border {
- & > div {
- @include zh-border;
- &:not(:nth-last-child(-n + #{$n})) {
- &::after {
- border-bottom: 1px solid $zh-line-color;
- }
- }
- &:not(:nth-child(#{$n}n)) {
- &::after {
- border-right: 1px solid $zh-line-color;
- }
- }
- }
- }
- }
- .zh-grid.zh-col-2 {
- & > div {
- width: 50%;
- }
- @include multi-border(2);
- }
- .zh-grid.zh-col-3 {
- & > div {
- width: calc(100% / 3);
- }
- @include multi-border(3);
- }
- @mixin space-calc($i, $n) {
- & > div {
- width: calc((100% - #{($n - 1) * $i}px) / #{$n});
- &:not(:nth-last-child(-n + #{$n})) {
- margin-bottom: #{$i}px;
- }
- &:not(:nth-child(#{$n}n)) {
- margin-right: #{$i}px;
- }
- }
- }
- // 处理列之间需要有空隙情况
- @for $i from 1 through 50 {
- .zh-grid.zh-col-1.zh-col-space-#{$i} {
- & > div {
- margin-bottom: #{$i}px;
- }
- }
- .zh-grid.zh-col-2.zh-col-space-#{$i} {
- @include space-calc($i, 2);
- }
- .zh-grid.zh-col-3.zh-col-space-#{$i} {
- @include space-calc($i, 3);
- }
- .zh-grid.zh-col-4.zh-col-space-#{$i} {
- @include space-calc($i, 4);
- }
- .zh-grid.zh-col-5.zh-col-space-#{$i} {
- @include space-calc($i, 5);
- }
- .zh-grid.zh-col-6.zh-col-space-#{$i} {
- @include space-calc($i, 6);
- }
- }
- /** 省略号 */
- @for $i from 1 through 2 {
- .zh-ellipsis-#{$i} {
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: #{$i};
- overflow: hidden;
- }
- }
- /** 鼠标手 */
- .zh-pointer {
- cursor: pointer;
- }
- /** 线条 */
- @for $i from 1 through 5 {
- .zh-border-top-#{$i} {
- border-top: 1px * $i solid #f3f3f3;
- }
- }
- /** 布局 */
- .wrap-container {
- @extend .zh-width-100P;
- @extend .zh-height-100P;
- position: absolute;
- top: 0;
- left: 0;
- overflow: hidden;
- background: white;
- }
- /** 滚动条自定义 */
- ::-webkit-scrollbar{
- width: 8px;
- height: 8px;
- }
- ::-webkit-scrollbar-track{
- background: rgb(239, 239, 239);
- border-radius: 2px;
- }
- ::-webkit-scrollbar-thumb{
- background: #bfbfbf;
- border-radius: 10px;
- }
- ::-webkit-scrollbar-thumb:hover{
- background: #636363;
- }
|