|
|
@import "//at.alicdn.com/t/c/font_3135652_w51b50q5ata.css";
|
|
|
@font-face {
|
|
|
font-family: "DingTalk"; /* 这里的字体名称是自定义的 */
|
|
|
src: url("../assets/fonts/DingTalk\ Sans.ttf"); /* 服务器上ttf文件的路径，记得配置域名权限 */
|
|
|
font-weight: normal;
|
|
|
font-style: normal;
|
|
|
font-display: swap;
|
|
|
}
|
|
|
.lNum {
|
|
|
opacity: 1;
|
|
|
font-size: 32px;
|
|
|
font-weight: 400;
|
|
|
text-align: right;
|
|
|
color: #fff;
|
|
|
line-height: 39px;
|
|
|
// margin-right: 12px;
|
|
|
font-family: "DingTalk";
|
|
|
}
|
|
|
// 初始化页面样式
|
|
|
body,
|
|
|
h1,
|
|
|
h2,
|
|
|
h3,
|
|
|
h4,
|
|
|
h5,
|
|
|
h6,
|
|
|
hr,
|
|
|
// p,
|
|
|
blockquote,
|
|
|
dl,
|
|
|
dt,
|
|
|
dd,
|
|
|
ul,
|
|
|
ol,
|
|
|
li,
|
|
|
pre,
|
|
|
form,
|
|
|
fieldset,
|
|
|
legend,
|
|
|
button,
|
|
|
input,
|
|
|
textarea,
|
|
|
th,
|
|
|
td,
|
|
|
div {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
color: #333;
|
|
|
// color: #666;
|
|
|
font-family: PingFangSC, PingFangSC-Regular;
|
|
|
}
|
|
|
body,
|
|
|
button,
|
|
|
input,
|
|
|
select,
|
|
|
textarea {
|
|
|
// font: 12px/1.5 tahoma, arial, \5b8b, \4f53;
|
|
|
font-family: PingFangSC, PingFangSC-Regular;
|
|
|
}
|
|
|
h1,
|
|
|
h2,
|
|
|
h3,
|
|
|
h4,
|
|
|
h5,
|
|
|
h6 {
|
|
|
font-size: 100%;
|
|
|
}
|
|
|
address,
|
|
|
cite,
|
|
|
dfn,
|
|
|
em,
|
|
|
var {
|
|
|
font-style: normal;
|
|
|
}
|
|
|
code,
|
|
|
kbd,
|
|
|
pre,
|
|
|
samp {
|
|
|
font-family: couriernew, courier, monospace;
|
|
|
}
|
|
|
small {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
ul,
|
|
|
ol {
|
|
|
list-style: none;
|
|
|
}
|
|
|
a {
|
|
|
color: inherit;
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
a:hover {
|
|
|
color: inherit;
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
sup {
|
|
|
vertical-align: text-top;
|
|
|
}
|
|
|
sub {
|
|
|
vertical-align: text-bottom;
|
|
|
}
|
|
|
legend {
|
|
|
color: #000;
|
|
|
}
|
|
|
fieldset,
|
|
|
img {
|
|
|
border: 0;
|
|
|
}
|
|
|
button,
|
|
|
input,
|
|
|
select,
|
|
|
textarea {
|
|
|
font-size: 100%;
|
|
|
}
|
|
|
button {
|
|
|
cursor: pointer;
|
|
|
&:focus-visible {
|
|
|
outline: none;
|
|
|
}
|
|
|
}
|
|
|
table {
|
|
|
border-collapse: collapse;
|
|
|
border-spacing: 0;
|
|
|
}
|
|
|
html {
|
|
|
// width: 100%;
|
|
|
}
|
|
|
:root {
|
|
|
overflow-y: auto;
|
|
|
overflow-x: hidden;
|
|
|
}
|
|
|
body {
|
|
|
padding: 0;
|
|
|
// height: 3080px;
|
|
|
// background-color: #eef1f5;
|
|
|
background-color: #fff;
|
|
|
font-size: 18px;
|
|
|
// width: 100vw;
|
|
|
// text-align: center;
|
|
|
}
|
|
|
// p {
|
|
|
// font-size: 18px;
|
|
|
// }
|
|
|
i {
|
|
|
font-style: normal;
|
|
|
}
|
|
|
|
|
|
//通用类名样式开始
|
|
|
.br8 {
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
.br6 {
|
|
|
border-radius: 6px;
|
|
|
}
|
|
|
.br4 {
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
.dil {
|
|
|
display: inline;
|
|
|
}
|
|
|
.cf4 {
|
|
|
color: #1890ff;
|
|
|
}
|
|
|
.dib {
|
|
|
display: inline-block;
|
|
|
}
|
|
|
.fw600 {
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
.fl {
|
|
|
float: left;
|
|
|
}
|
|
|
|
|
|
.fr {
|
|
|
float: right;
|
|
|
}
|
|
|
|
|
|
.clb {
|
|
|
clear: both;
|
|
|
}
|
|
|
.tl {
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.tr {
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
.tc,
|
|
|
.center {
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.f14 {
|
|
|
font-size: 14px !important;
|
|
|
}
|
|
|
|
|
|
.f14s {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.ml8 {
|
|
|
margin-left: 8px;
|
|
|
}
|
|
|
.ml24 {
|
|
|
margin-left: 24px;
|
|
|
}
|
|
|
.m16 {
|
|
|
margin: 16px;
|
|
|
}
|
|
|
.mr16 {
|
|
|
margin-right: 16px !important;
|
|
|
}
|
|
|
.ml16 {
|
|
|
margin-left: 16px !important;
|
|
|
}
|
|
|
.m0 {
|
|
|
margin: 0 !important;
|
|
|
}
|
|
|
.m016 {
|
|
|
margin: 0 16px;
|
|
|
}
|
|
|
.m010 {
|
|
|
margin: 0 10px;
|
|
|
}
|
|
|
.m160 {
|
|
|
margin: 16px 0;
|
|
|
}
|
|
|
.mr0 {
|
|
|
margin-right: 0px !important;
|
|
|
}
|
|
|
.mr4 {
|
|
|
margin-right: 4px;
|
|
|
}
|
|
|
.mr8 {
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
.mr12 {
|
|
|
margin-right: 12px;
|
|
|
}
|
|
|
.mt8 {
|
|
|
margin-top: 8px;
|
|
|
}
|
|
|
|
|
|
.mb8 {
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
|
|
|
.mb4 {
|
|
|
margin-bottom: 4px;
|
|
|
}
|
|
|
.mb2 {
|
|
|
margin-bottom: 2px;
|
|
|
}
|
|
|
.p0 {
|
|
|
padding: 0 !important;
|
|
|
}
|
|
|
.pr16 {
|
|
|
padding-right: 16px;
|
|
|
}
|
|
|
.tac {
|
|
|
text-align: center;
|
|
|
}
|
|
|
.pl16 {
|
|
|
padding-left: 16px;
|
|
|
}
|
|
|
.pb12 {
|
|
|
padding-bottom: 12px;
|
|
|
}
|
|
|
.pb15 {
|
|
|
padding-bottom: 15px;
|
|
|
}
|
|
|
.pb4 {
|
|
|
padding-bottom: 4px;
|
|
|
}
|
|
|
.p08 {
|
|
|
padding: 0 8px;
|
|
|
}
|
|
|
.p012 {
|
|
|
padding: 0 12px !important;
|
|
|
}
|
|
|
.p016 {
|
|
|
padding: 0 16px;
|
|
|
}
|
|
|
.mt6 {
|
|
|
margin-top: 6px;
|
|
|
}
|
|
|
|
|
|
.p160 {
|
|
|
padding: 16px 0;
|
|
|
}
|
|
|
.p1612 {
|
|
|
padding: 16px 12px;
|
|
|
}
|
|
|
|
|
|
.ml10 {
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
.ml12 {
|
|
|
margin-left: 12px;
|
|
|
}
|
|
|
.mr10 {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
.ml6 {
|
|
|
margin-left: 6px;
|
|
|
}
|
|
|
.ml4 {
|
|
|
margin-left: 4px !important;
|
|
|
}
|
|
|
.mr6 {
|
|
|
margin-right: 6px;
|
|
|
}
|
|
|
.mr14 {
|
|
|
margin-right: 14px;
|
|
|
}
|
|
|
.ml14 {
|
|
|
margin-left: 14px;
|
|
|
}
|
|
|
.mt10 {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
.ml22 {
|
|
|
margin-left: 22px;
|
|
|
}
|
|
|
.ml24 {
|
|
|
margin-left: 24px;
|
|
|
}
|
|
|
.mb10 {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
.mb12 {
|
|
|
margin-bottom: 12px;
|
|
|
}
|
|
|
.mb6 {
|
|
|
margin-bottom: 6px;
|
|
|
}
|
|
|
.mb16 {
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
.mb32 {
|
|
|
margin-bottom: 32px;
|
|
|
}
|
|
|
.pl8 {
|
|
|
padding-left: 8px;
|
|
|
}
|
|
|
.pl32 {
|
|
|
padding-left: 32px !important;
|
|
|
}
|
|
|
.pr8 {
|
|
|
padding-right: 8px;
|
|
|
}
|
|
|
|
|
|
.pt8 {
|
|
|
padding-top: 8px;
|
|
|
}
|
|
|
.pt12 {
|
|
|
padding-top: 12px;
|
|
|
}
|
|
|
.letter0 {
|
|
|
letter-spacing: 0;
|
|
|
}
|
|
|
.mb40 {
|
|
|
margin-bottom: 40px;
|
|
|
}
|
|
|
.pb8 {
|
|
|
padding-bottom: 8px;
|
|
|
}
|
|
|
.mb0 {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
.p16 {
|
|
|
padding: 16px;
|
|
|
}
|
|
|
.border1 {
|
|
|
border: 1px solid #eee;
|
|
|
}
|
|
|
.bb1 {
|
|
|
border-bottom: 1px solid #eee;
|
|
|
}
|
|
|
|
|
|
.br1 {
|
|
|
border-right: 1px solid #eee;
|
|
|
}
|
|
|
.bt1 {
|
|
|
border-top: 1px solid #eee;
|
|
|
}
|
|
|
.bl1 {
|
|
|
border-left: 1px solid #eee;
|
|
|
}
|
|
|
.bbd1 {
|
|
|
border-bottom: 1px dotted #eee;
|
|
|
}
|
|
|
.brd1 {
|
|
|
border-right: 1px dotted #eee;
|
|
|
}
|
|
|
.btd1 {
|
|
|
border-top: 1px dotted #eee;
|
|
|
}
|
|
|
.bld1 {
|
|
|
border-left: 1px dotted #eee;
|
|
|
}
|
|
|
.f6 {
|
|
|
font-size: 6px;
|
|
|
}
|
|
|
.f10 {
|
|
|
font-size: 10px !important;
|
|
|
}
|
|
|
.f22 {
|
|
|
font-size: 22px;
|
|
|
}
|
|
|
.f12 {
|
|
|
font-size: 12px !important;
|
|
|
}
|
|
|
.f14 {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.f16 {
|
|
|
font-size: 16px !important;
|
|
|
}
|
|
|
.f18 {
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
.f20 {
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
.f22 {
|
|
|
font-size: 22px;
|
|
|
}
|
|
|
.f24 {
|
|
|
font-size: 24px;
|
|
|
}
|
|
|
.f26 {
|
|
|
font-size: 26px;
|
|
|
}
|
|
|
.f32 {
|
|
|
font-size: 32px !important;
|
|
|
}
|
|
|
.f36 {
|
|
|
font-size: 36px !important;
|
|
|
}
|
|
|
// .f40 {
|
|
|
// font-size: 40px !important;
|
|
|
// }
|
|
|
.f56 {
|
|
|
font-size: 56px !important;
|
|
|
}
|
|
|
.f64 {
|
|
|
font-size: 64px !important;
|
|
|
}
|
|
|
.f320 {
|
|
|
font-size: 320px !important;
|
|
|
}
|
|
|
.c3 {
|
|
|
color: #333;
|
|
|
}
|
|
|
.cf40 {
|
|
|
color: #f40;
|
|
|
}
|
|
|
.c6 {
|
|
|
color: #666;
|
|
|
}
|
|
|
.c9 {
|
|
|
color: #999;
|
|
|
}
|
|
|
.cccc {
|
|
|
color: #cccccc;
|
|
|
}
|
|
|
.cblue {
|
|
|
color: #1890ff;
|
|
|
}
|
|
|
.fsa {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
.fss {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: start;
|
|
|
}
|
|
|
.fse {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: end;
|
|
|
}
|
|
|
.fsc {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
.fcsc {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
.middle {
|
|
|
position: relative;
|
|
|
left: 50%;
|
|
|
transform: translateX(-40%);
|
|
|
}
|
|
|
.setMiddle {
|
|
|
margin-left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
}
|
|
|
.setH {
|
|
|
transform: translate(-50%, 50%);
|
|
|
}
|
|
|
.flex1 {
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.dn {
|
|
|
display: none;
|
|
|
}
|
|
|
.esl {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
display: -webkit-box;
|
|
|
-webkit-line-clamp: 1;
|
|
|
-webkit-box-orient: vertical;
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
.bodyContainer {
|
|
|
padding: 16px;
|
|
|
min-height: calc(100vh - 194px);
|
|
|
// height: 97%;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
.dpib {
|
|
|
white-space: nowrap;
|
|
|
display: inline-block;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.w100 {
|
|
|
width: 100%;
|
|
|
}
|
|
|
.curp {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.por {
|
|
|
position: relative;
|
|
|
}
|
|
|
.poa {
|
|
|
position: absolute;
|
|
|
}
|
|
|
//通用类名样式结束
|
|
|
|
|
|
//svg图标
|
|
|
.svg_icon {
|
|
|
width: 1em;
|
|
|
height: 1em;
|
|
|
// fill: currentColor;
|
|
|
overflow: hidden;
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
min-width: 30px;
|
|
|
text-align: center;
|
|
|
font-size: 20px;
|
|
|
font-weight: normal;
|
|
|
margin-right: 2px;
|
|
|
}
|
|
|
.svg {
|
|
|
width: 1em;
|
|
|
height: 1em;
|
|
|
// fill: currentColor;
|
|
|
overflow: hidden;
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
// min-width: 30px;
|
|
|
text-align: center;
|
|
|
// font-size: 20px;
|
|
|
font-weight: normal;
|
|
|
margin-right: 2px;
|
|
|
}
|
|
|
// 公用样式类名
|
|
|
.w {
|
|
|
width: 960px;
|
|
|
min-width: 960px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
.mb12 {
|
|
|
margin-bottom: 12px;
|
|
|
}
|
|
|
.mt20 {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
.mt48 {
|
|
|
margin-top: 48px;
|
|
|
}
|
|
|
.mt60 {
|
|
|
margin-top: 60px;
|
|
|
}
|
|
|
.titlestyle {
|
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
}
|
|
|
.nobd {
|
|
|
border-left-color: transparent !important;
|
|
|
border-right-color: transparent !important;
|
|
|
border-top: none !important;
|
|
|
border-bottom: none !important;
|
|
|
margin-top: 0 !important;
|
|
|
margin-bottom: 0 !important;
|
|
|
}
|
|
|
// 日期选择框
|
|
|
.ant-calendar-picker-container-content {
|
|
|
margin-top: 3px;
|
|
|
// width: 341px !important;
|
|
|
}
|
|
|
.ant-calendar-picker {
|
|
|
border-color: #d9d9d9 !important;
|
|
|
&:hover .ant-calendar-picker-input {
|
|
|
border-color: #d9d9d9 !important;
|
|
|
}
|
|
|
&:focus .ant-calendar-picker-input {
|
|
|
border-color: #d9d9d9 !important;
|
|
|
}
|
|
|
}
|
|
|
// 面包屑样式
|
|
|
.ant-breadcrumb {
|
|
|
.ant-breadcrumb-link {
|
|
|
a:hover {
|
|
|
color: #1890ff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// 分页器样式
|
|
|
.pagecontainer.f40 {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
text-align: center;
|
|
|
margin-bottom: 30px;
|
|
|
margin-top: 15px;
|
|
|
.ant-pagination-item-container {
|
|
|
.ant-pagination-item-link-icon {
|
|
|
color: #1890ff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.ant-pagination-options-quick-jumper {
|
|
|
margin-left: 10px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.ant-pagination-disabled {
|
|
|
a:hover {
|
|
|
color: #c5c5c5 !important;
|
|
|
}
|
|
|
}
|
|
|
.ant-pagination-next,
|
|
|
.ant-pagination-prev {
|
|
|
&:focus .ant-pagination-item-link {
|
|
|
color: #000000a6;
|
|
|
}
|
|
|
&:hover .ant-pagination-item-link {
|
|
|
color: #1890ff;
|
|
|
}
|
|
|
}
|
|
|
input[type="text"] {
|
|
|
box-shadow: none;
|
|
|
background-color: #fff;
|
|
|
border-color: #ddd;
|
|
|
border-radius: 6px;
|
|
|
&:focus {
|
|
|
border: 1px solid #1890ff;
|
|
|
}
|
|
|
&:hover {
|
|
|
border: 1px solid #1890ff;
|
|
|
}
|
|
|
}
|
|
|
.ant-pagination-item {
|
|
|
border: none;
|
|
|
border-radius: 6px;
|
|
|
line-height: 32px;
|
|
|
a:hover {
|
|
|
color: #1890ff;
|
|
|
}
|
|
|
}
|
|
|
.ant-pagination-item-active {
|
|
|
background: #1890ff;
|
|
|
a {
|
|
|
color: white;
|
|
|
}
|
|
|
a:hover {
|
|
|
color: white;
|
|
|
}
|
|
|
}
|
|
|
.ant-pagination-item-link {
|
|
|
border: none;
|
|
|
// &:hover .anticon-right {
|
|
|
// color: #1890ff;
|
|
|
|
|
|
// }
|
|
|
// .anticon-right{
|
|
|
// color: #000000a6;
|
|
|
|
|
|
// }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.ant-cascader-menus.monthlypay,
|
|
|
.ant-cascader-menus.agestr,
|
|
|
.ant-cascader-menus.gender {
|
|
|
// position: fixed !important;
|
|
|
// border-top: 1px solid #000;
|
|
|
width: 100vw;
|
|
|
margin: 0 auto;
|
|
|
top: 45px !important;
|
|
|
-webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
|
|
|
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
|
|
|
transition: none !important;
|
|
|
.ant-cascader-menu {
|
|
|
height: auto;
|
|
|
width: 100%;
|
|
|
.ant-cascader-menu-item {
|
|
|
width: 100%;
|
|
|
text-align: left;
|
|
|
padding-left: calc((100vw - 1200px) / 2) !important ;
|
|
|
&:hover {
|
|
|
background-color: rgba(255, 106, 0, 0.1);
|
|
|
color: rgb(255, 106, 0);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.ant-cascader-menus.slide-up-leave-active {
|
|
|
animation: none !important;
|
|
|
transition: none !important;
|
|
|
}
|
|
|
.ant-cascader-menus.slide-up-enter-active {
|
|
|
animation: none !important;
|
|
|
transition: none !important;
|
|
|
}
|
|
|
.ant-cascader-menus.slide-up-leave {
|
|
|
transition: none !important;
|
|
|
animation: none !important;
|
|
|
}
|
|
|
.ant-cascader-menus.slide-up-enter {
|
|
|
animation: none !important;
|
|
|
transition: none !important;
|
|
|
}
|
|
|
.ant-cascader-menus.flitercity {
|
|
|
left: calc((100vw - 1216px) / 2) !important;
|
|
|
top: 45px !important;
|
|
|
border-radius: 0 0 4px 4px !important;
|
|
|
-webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
|
|
|
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
|
|
|
|
|
|
.ant-cascader-menu {
|
|
|
height: 500px;
|
|
|
.ant-cascader-menu-item {
|
|
|
width: 100%;
|
|
|
text-align: left;
|
|
|
// padding-left: calc((100vw - 1200px) / 2) !important ;
|
|
|
&:hover {
|
|
|
background-color: rgba(255, 106, 0, 0.1);
|
|
|
color: rgb(255, 106, 0);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.logindropdown {
|
|
|
// left: 0;
|
|
|
// left: calc((100vw - 1200px) / 2 + 1013px) !important;
|
|
|
.loginbox:not(.backTable) {
|
|
|
// width: 180px;
|
|
|
// height: 114px;
|
|
|
overflow: hidden;
|
|
|
background-color: #fff;
|
|
|
border-radius: 4px;
|
|
|
text-align: center;
|
|
|
box-shadow: 0px 0px 10px rgba(128, 128, 128, 0.4);
|
|
|
padding: 4px;
|
|
|
> div {
|
|
|
// padding: 16px;
|
|
|
text-align: center;
|
|
|
font-size: 16px;
|
|
|
// font-weight: bold;
|
|
|
border-bottom: 1px solid #eee;
|
|
|
}
|
|
|
> a {
|
|
|
> div {
|
|
|
display: flex;
|
|
|
padding: 12px 0;
|
|
|
font-size: 14px;
|
|
|
line-height: 24px;
|
|
|
// font-weight: bold;
|
|
|
justify-content: space-between;
|
|
|
// border-bottom: 1px solid #eee;
|
|
|
// &:hover {
|
|
|
// color: #1890ff;
|
|
|
// }
|
|
|
span {
|
|
|
line-height: 24px;
|
|
|
|
|
|
i {
|
|
|
font-size: 18px;
|
|
|
margin-right: 5px;
|
|
|
vertical-align: baseline;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
button {
|
|
|
width: 126px;
|
|
|
height: 32px;
|
|
|
margin-top: 12px;
|
|
|
border: 1px solid rgba(77, 87, 94, 0.1);
|
|
|
border-radius: 17px;
|
|
|
color: #1890ff;
|
|
|
font-size: 14px;
|
|
|
line-height: 32px;
|
|
|
background-color: #fff;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.loginbox.backTable {
|
|
|
width: 180px;
|
|
|
// height: 114px;
|
|
|
overflow: hidden;
|
|
|
background-color: #fff;
|
|
|
border-radius: 4px;
|
|
|
text-align: center;
|
|
|
box-shadow: 0px 0px 10px rgba(128, 128, 128, 0.4);
|
|
|
padding: 0 12px 10px 16px;
|
|
|
> div {
|
|
|
padding: 16px;
|
|
|
text-align: center;
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
border-bottom: 1px solid #eee;
|
|
|
}
|
|
|
> a {
|
|
|
> div {
|
|
|
display: flex;
|
|
|
padding: 12px 0;
|
|
|
font-size: 14px;
|
|
|
align-items: center;
|
|
|
// font-weight: bold;
|
|
|
justify-content: space-between;
|
|
|
border-bottom: 1px solid #eee;
|
|
|
&:hover {
|
|
|
color: #1890ff;
|
|
|
}
|
|
|
span {
|
|
|
line-height: 24px;
|
|
|
|
|
|
i {
|
|
|
font-size: 18px;
|
|
|
margin-right: 5px;
|
|
|
vertical-align: baseline;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
button {
|
|
|
width: 130px;
|
|
|
height: 32px;
|
|
|
margin-top: 12px;
|
|
|
border: 1px solid rgba(77, 87, 94, 0.1);
|
|
|
border-radius: 17px;
|
|
|
color: #1890ff;
|
|
|
font-size: 14px;
|
|
|
line-height: 30px;
|
|
|
background-color: #fff;
|
|
|
cursor: pointer;
|
|
|
&:hover {
|
|
|
border: 1px solid #1890ff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.beforeblock {
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
margin-top: -4px;
|
|
|
width: 4px;
|
|
|
height: 20px;
|
|
|
margin-right: 8px;
|
|
|
background: #1890ff;
|
|
|
}
|
|
|
h1.bottombox,
|
|
|
p.bottombox {
|
|
|
position: relative;
|
|
|
text-align: center;
|
|
|
// border-bottom: 1px solid #eeefef;
|
|
|
font-weight: 600;
|
|
|
font-size: 16px;
|
|
|
padding: 12px 0;
|
|
|
color: #1890ff;
|
|
|
background-color: #9fd1ff;
|
|
|
|
|
|
&::after {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
position: absolute;
|
|
|
width: 240px;
|
|
|
height: 1px;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
background-color: #eeefef;
|
|
|
}
|
|
|
// i {
|
|
|
// display: inline-block;
|
|
|
// line-height: 20px;
|
|
|
// border-bottom: 3px solid #1890ff;
|
|
|
// padding: 6px 0;
|
|
|
// }
|
|
|
}
|
|
|
.ant-cascader-menu,
|
|
|
.ant-modal-body {
|
|
|
// max-height: 300px !important;
|
|
|
&::-webkit-scrollbar {
|
|
|
/*滚动条整体样式*/
|
|
|
width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
height: 4px;
|
|
|
}
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
/*滚动条里面小方块*/
|
|
|
border-radius: 5px;
|
|
|
-webkit-box-shadow: inset 0 0 5px rgba(126, 126, 126, 0.06);
|
|
|
background: rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
&::-webkit-scrollbar-track {
|
|
|
/*滚动条里面轨道*/
|
|
|
-webkit-box-shadow: inset 0 0 5px rgba(112, 112, 112, 0.06);
|
|
|
border-radius: 0;
|
|
|
background: rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
}
|
|
|
// .f40 {
|
|
|
.f40 {
|
|
|
.ant-select-dropdown-menu-item-active,
|
|
|
.ant-select-dropdown-menu-item-selected {
|
|
|
color: #1890ff !important;
|
|
|
font-weight: normal;
|
|
|
background-color: rgba(255, 106, 0, 0.1) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// }
|
|
|
// 面包屑样式
|
|
|
.ant-breadcrumb {
|
|
|
margin-top: 12px;
|
|
|
.ant-breadcrumb-link {
|
|
|
cursor: default;
|
|
|
}
|
|
|
}
|
|
|
// 媒体查询
|
|
|
@media screen and (max-width: 1910px) {
|
|
|
.loginlogo {
|
|
|
margin: 40px auto !important;
|
|
|
}
|
|
|
}
|
|
|
// 加载中的样式
|
|
|
.ant-spin-dot-item {
|
|
|
background-color: #1890ff;
|
|
|
}
|
|
|
.ant-spin-text {
|
|
|
color: #1890ff;
|
|
|
}
|
|
|
.ant-popover {
|
|
|
.ant-popover-content {
|
|
|
.ant-popover-inner-content {
|
|
|
position: relative;
|
|
|
width: 600px;
|
|
|
white-space: pre-wrap !important;
|
|
|
> div {
|
|
|
position: absolute;
|
|
|
width: 44px;
|
|
|
height: 22px;
|
|
|
right: 10px;
|
|
|
top: 10px;
|
|
|
border: 1px solid #1890ff;
|
|
|
color: #1890ff;
|
|
|
border-radius: 999px;
|
|
|
line-height: 22px;
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
&:hover {
|
|
|
background-color: #1890ff;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.xiangdan {
|
|
|
.ant-modal-content {
|
|
|
width: 600px;
|
|
|
max-height: calc(100vh - 40px);
|
|
|
.ant-modal-body {
|
|
|
padding-top: 36px;
|
|
|
position: relative;
|
|
|
min-height: 480px;
|
|
|
white-space: pre-wrap !important;
|
|
|
|
|
|
// max-height: ;
|
|
|
// background-color: #000;
|
|
|
.copy {
|
|
|
position: absolute;
|
|
|
padding: 0px 12px;
|
|
|
right: 20px;
|
|
|
top: 7px;
|
|
|
font-size: 14px;
|
|
|
border: 1px solid #1890ff;
|
|
|
color: #1890ff;
|
|
|
border-radius: 5px;
|
|
|
line-height: 22px;
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
&:hover {
|
|
|
color: #fff;
|
|
|
background-color: #1890ff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// 日期选择器样式
|
|
|
.f40 {
|
|
|
.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month {
|
|
|
background: #1890ff;
|
|
|
}
|
|
|
.ant-calendar-date:hover {
|
|
|
border-color: #1890ff;
|
|
|
background-color: #fff;
|
|
|
color: #1890ff;
|
|
|
}
|
|
|
.ant-calendar-today .ant-calendar-date {
|
|
|
background-color: #1890ff;
|
|
|
border-color: #1890ff;
|
|
|
color: #fff;
|
|
|
}
|
|
|
.ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date,
|
|
|
.ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date {
|
|
|
background-color: #1890ff;
|
|
|
border-color: #1890ff;
|
|
|
color: #fff;
|
|
|
}
|
|
|
.ant-calendar-range .ant-calendar-in-range-cell::before {
|
|
|
background: #fff3ef;
|
|
|
}
|
|
|
.ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date:hover,
|
|
|
.ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date:hover {
|
|
|
background: #1890ff;
|
|
|
}
|
|
|
.ant-calendar-header a:hover {
|
|
|
color: #1890ff;
|
|
|
}
|
|
|
.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month:hover,
|
|
|
.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year,
|
|
|
.ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade,
|
|
|
.ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade:hover,
|
|
|
.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year:hover {
|
|
|
background: #1890ff;
|
|
|
}
|
|
|
.ant-calendar-month-panel-month:hover,
|
|
|
.ant-calendar-year-panel-year:hover,
|
|
|
.ant-calendar-decade-panel-decade:hover {
|
|
|
background: #fff3ef;
|
|
|
}
|
|
|
}
|
|
|
// 全体样式
|
|
|
|
|
|
.ant-select-selection:active {
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
.bb1 {
|
|
|
border-bottom: 1px solid #ddd;
|
|
|
}
|
|
|
.bbdot1 {
|
|
|
border-bottom: 1px dashed #ddd;
|
|
|
}
|
|
|
.bd1 {
|
|
|
border: 1px solid #ddd;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.g_ {
|
|
|
&mask {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-color: transparent;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
&float {
|
|
|
&_left {
|
|
|
float: left;
|
|
|
}
|
|
|
&_right {
|
|
|
float: right;
|
|
|
}
|
|
|
&_none {
|
|
|
clear: both;
|
|
|
}
|
|
|
}
|
|
|
&flex {
|
|
|
// 弹性布局
|
|
|
&_1 {
|
|
|
// 示例：g_flex_1
|
|
|
flex: 1;
|
|
|
}
|
|
|
&_2 {
|
|
|
// 示例：g_flex_1
|
|
|
flex: 2;
|
|
|
}
|
|
|
&_3 {
|
|
|
// 示例：g_flex_1
|
|
|
flex: 3;
|
|
|
}
|
|
|
&_4 {
|
|
|
// 示例：g_flex_1
|
|
|
flex: 4;
|
|
|
}
|
|
|
&_none {
|
|
|
flex: none;
|
|
|
}
|
|
|
&_c {
|
|
|
display: flex;
|
|
|
display: -webkit-flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
&_rowRight_columnCenter {
|
|
|
display: flex;
|
|
|
display: -webkit-flex;
|
|
|
justify-content: flex-end;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
&_rowRight_columnEnd {
|
|
|
display: flex;
|
|
|
display: -webkit-flex;
|
|
|
justify-content: flex-end;
|
|
|
align-items: flex-end;
|
|
|
}
|
|
|
&_row_start {
|
|
|
display: flex;
|
|
|
display: -webkit-flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: flex-start;
|
|
|
}
|
|
|
&_row_start_none {
|
|
|
display: flex;
|
|
|
display: -webkit-flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: nowrap;
|
|
|
justify-content: flex-start;
|
|
|
}
|
|
|
&_row_start_c {
|
|
|
display: flex;
|
|
|
display: -webkit-flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
justify-content: flex-start;
|
|
|
}
|
|
|
&_row_between {
|
|
|
display: flex;
|
|
|
display: -webkit-flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
&_row_around {
|
|
|
display: flex;
|
|
|
display: -webkit-flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-around;
|
|
|
}
|
|
|
&_row_center {
|
|
|
display: flex;
|
|
|
display: -webkit-flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
&_row_end {
|
|
|
display: flex;
|
|
|
display: -webkit-flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
&_column_start {
|
|
|
display: flex;
|
|
|
display: -webkit-flex;
|
|
|
flex-direction: column;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: flex-start;
|
|
|
}
|
|
|
&_column_between {
|
|
|
display: flex;
|
|
|
display: -webkit-flex;
|
|
|
flex-direction: column;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
&_column_around {
|
|
|
display: flex;
|
|
|
display: -webkit-flex;
|
|
|
flex-direction: column;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-around;
|
|
|
}
|
|
|
&_column_end {
|
|
|
display: flex;
|
|
|
display: -webkit-flex;
|
|
|
flex-direction: column;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
&_column_center {
|
|
|
display: flex;
|
|
|
display: -webkit-flex;
|
|
|
flex-direction: column;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
}
|
|
|
&ell {
|
|
|
// 多行省略
|
|
|
&_1 {
|
|
|
// 示例：g_ell_1
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
display: -webkit-box;
|
|
|
-webkit-line-clamp: 1;
|
|
|
-webkit-box-orient: vertical;
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
&_2 {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
display: -webkit-box;
|
|
|
-webkit-line-clamp: 2;
|
|
|
-webkit-box-orient: vertical;
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
&_3 {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
display: -webkit-box;
|
|
|
-webkit-line-clamp: 3;
|
|
|
-webkit-box-orient: vertical;
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
&_4 {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
display: -webkit-box;
|
|
|
-webkit-line-clamp: 4;
|
|
|
-webkit-box-orient: vertical;
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&fw {
|
|
|
// 加粗
|
|
|
&_100 {
|
|
|
// 示例：g_fw_100
|
|
|
font-weight: 100;
|
|
|
}
|
|
|
&_200 {
|
|
|
font-weight: 200;
|
|
|
}
|
|
|
&_300 {
|
|
|
font-weight: 300;
|
|
|
}
|
|
|
&_400 {
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
&_500 {
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
&_600 {
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
&_700 {
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
&_800 {
|
|
|
font-weight: 800;
|
|
|
}
|
|
|
&_900 {
|
|
|
font-weight: 900;
|
|
|
}
|
|
|
&_bold {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
&c {
|
|
|
// 字体颜色
|
|
|
&_0 {
|
|
|
// 示例：g_c_0
|
|
|
color: #000;
|
|
|
}
|
|
|
&_3 {
|
|
|
color: #333;
|
|
|
}
|
|
|
&_6 {
|
|
|
color: #666;
|
|
|
}
|
|
|
&_8c {
|
|
|
color: #8c8c8c;
|
|
|
}
|
|
|
&_9 {
|
|
|
color: #999;
|
|
|
}
|
|
|
&_c {
|
|
|
color: #ccc;
|
|
|
}
|
|
|
&_f {
|
|
|
color: #fff;
|
|
|
}
|
|
|
&_04bc {
|
|
|
color: #004bbc;
|
|
|
}
|
|
|
&_d8 {
|
|
|
color: #d8d8d8;
|
|
|
}
|
|
|
&_d9 {
|
|
|
color: #d9d9d9;
|
|
|
}
|
|
|
&_57 {
|
|
|
color: #576b95;
|
|
|
}
|
|
|
&_0d {
|
|
|
color: #0d4c7f;
|
|
|
}
|
|
|
&_f52d {
|
|
|
color: #f5222d;
|
|
|
}
|
|
|
&_f40 {
|
|
|
color: #ff4400;
|
|
|
}
|
|
|
&_594e {
|
|
|
color: #594e4e;
|
|
|
}
|
|
|
&_c1e {
|
|
|
color: #52c41a;
|
|
|
}
|
|
|
&_26 {
|
|
|
color: #262626;
|
|
|
}
|
|
|
&_7 {
|
|
|
color: #777777;
|
|
|
}
|
|
|
&_8 {
|
|
|
color: #888888;
|
|
|
}
|
|
|
&_f0 {
|
|
|
color: #ff0000;
|
|
|
}
|
|
|
&_main {
|
|
|
color: #1677ff;
|
|
|
}
|
|
|
}
|
|
|
&bg {
|
|
|
// 背景色
|
|
|
&_f {
|
|
|
// 示例：g_bg_f
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
&_0 {
|
|
|
// 示例：g_bg_f
|
|
|
background-color: #000;
|
|
|
}
|
|
|
&_f0 {
|
|
|
background-color: #f0f0f0;
|
|
|
}
|
|
|
&_e {
|
|
|
background-color: #eee;
|
|
|
}
|
|
|
&_f5 {
|
|
|
background-color: #f5f5f5;
|
|
|
}
|
|
|
&_main {
|
|
|
background-color: #1677ff !important;
|
|
|
background: #1677ff !important;
|
|
|
}
|
|
|
&_f40 {
|
|
|
background-color: #ff4400;
|
|
|
}
|
|
|
}
|
|
|
&text {
|
|
|
// 字体位置
|
|
|
&_l {
|
|
|
// 示例：g_text_l
|
|
|
text-align: left;
|
|
|
}
|
|
|
&_c {
|
|
|
text-align: center;
|
|
|
}
|
|
|
&_r {
|
|
|
text-align: right;
|
|
|
}
|
|
|
&_underline {
|
|
|
text-decoration: underline;
|
|
|
}
|
|
|
}
|
|
|
&position {
|
|
|
// 定位
|
|
|
&_rela {
|
|
|
// 示例：g_position_rela
|
|
|
position: relative;
|
|
|
}
|
|
|
&_abso {
|
|
|
position: absolute;
|
|
|
&_c {
|
|
|
left: 50%;
|
|
|
top: 50%;
|
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
}
|
|
|
}
|
|
|
&_fixed {
|
|
|
position: fixed;
|
|
|
&_c {
|
|
|
left: 50%;
|
|
|
top: 50%;
|
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
&cursor {
|
|
|
// 手势
|
|
|
&_point {
|
|
|
// 示例：g_cursor_point
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
&_na {
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
&_def {
|
|
|
cursor: default;
|
|
|
}
|
|
|
}
|
|
|
&border {
|
|
|
&_d {
|
|
|
border: 1px solid #ddd;
|
|
|
}
|
|
|
&_top_d {
|
|
|
border-top: 1px solid #ddd;
|
|
|
}
|
|
|
&_right_d {
|
|
|
border-right: 1px solid #ddd;
|
|
|
}
|
|
|
&_bottom_d {
|
|
|
border-bottom: 1px solid #ddd;
|
|
|
}
|
|
|
&_left_d {
|
|
|
border-left: 1px solid #ddd;
|
|
|
}
|
|
|
&_e {
|
|
|
border: 1px solid #eee;
|
|
|
}
|
|
|
&_top_e {
|
|
|
border-top: 1px solid #eee;
|
|
|
}
|
|
|
&_right_e {
|
|
|
border-right: 1px solid #eee;
|
|
|
}
|
|
|
&_bottom_e {
|
|
|
border-bottom: 1px solid #eee;
|
|
|
}
|
|
|
&_left_e {
|
|
|
border-left: 1px solid #eee;
|
|
|
}
|
|
|
&_9 {
|
|
|
border: 1px solid #999;
|
|
|
}
|
|
|
&_d9 {
|
|
|
border: 1px solid #d9d9d9;
|
|
|
}
|
|
|
&_main {
|
|
|
border: 1px solid #1677ff;
|
|
|
}
|
|
|
}
|
|
|
&clear_scroll::-webkit-scrollbar {
|
|
|
display: none;
|
|
|
}
|
|
|
&w {
|
|
|
&_all {
|
|
|
width: 100%;
|
|
|
}
|
|
|
&_pull {
|
|
|
width: 100vw;
|
|
|
}
|
|
|
&_three {
|
|
|
width: 33.3333%;
|
|
|
}
|
|
|
}
|
|
|
&h {
|
|
|
&_all {
|
|
|
height: 100%;
|
|
|
}
|
|
|
&_pull {
|
|
|
height: 100vh;
|
|
|
}
|
|
|
&_three {
|
|
|
width: 33.3333%;
|
|
|
}
|
|
|
}
|
|
|
// 全局表格的分页器样式处理
|
|
|
&pageBottom {
|
|
|
position: sticky;
|
|
|
bottom: -16px;
|
|
|
width: 100%;
|
|
|
background-color: #fff;
|
|
|
z-index: 999;
|
|
|
}
|
|
|
// 行高设置
|
|
|
&lh {
|
|
|
&_1 {
|
|
|
line-height: 1;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 内外边距 */
|
|
|
.gmp(300);
|
|
|
.gmp(@n, @i: -100) when (@i =< @n) {
|
|
|
.g_pl_@{i} {
|
|
|
// 示例：g_pl_1,g_pl_2...g_pl_200
|
|
|
padding-left: 0px + @i;
|
|
|
}
|
|
|
.g_pr_@{i} {
|
|
|
padding-right: 0px + @i;
|
|
|
}
|
|
|
.g_pt_@{i} {
|
|
|
padding-top: 0px + @i;
|
|
|
}
|
|
|
.g_pb_@{i} {
|
|
|
padding-bottom: 0px + @i;
|
|
|
}
|
|
|
.g_ml_@{i} {
|
|
|
margin-left: 0px + @i;
|
|
|
}
|
|
|
.g_mr_@{i} {
|
|
|
margin-right: 0px + @i;
|
|
|
}
|
|
|
.g_mt_@{i} {
|
|
|
margin-top: 0px + @i;
|
|
|
}
|
|
|
.g_mb_@{i} {
|
|
|
margin-bottom: 0px + @i;
|
|
|
}
|
|
|
.g_p_@{i} {
|
|
|
padding: 0px + @i;
|
|
|
}
|
|
|
.g_m_@{i} {
|
|
|
margin: 0px + @i;
|
|
|
}
|
|
|
.gmp(@n, (@i+1));
|
|
|
}
|
|
|
|
|
|
/* 字体 */
|
|
|
.gfs(100);
|
|
|
.gfs(@n, @i: 10) when (@i =< @n) {
|
|
|
.g_fs_@{i} {
|
|
|
font-size: 0px + @i;
|
|
|
}
|
|
|
.g_fsi_@{i} {
|
|
|
font-size: 0px + @i !important;
|
|
|
}
|
|
|
.gfs(@n, (@i+1));
|
|
|
}
|
|
|
/* dot点生成 */
|
|
|
.gdot(50);
|
|
|
.gdot(@n, @i: 0) when (@i =< @n) {
|
|
|
.g_dot_@{i} {
|
|
|
width: 0px + @i;
|
|
|
height: 0px + @i;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
.gdot(@n, (@i+1));
|
|
|
}
|
|
|
/* 圆角 */
|
|
|
.gradius(30);
|
|
|
.gradius(@n, @i: 0) when (@i =< @n) {
|
|
|
.g_br_@{i} {
|
|
|
border-radius: 0px + @i;
|
|
|
}
|
|
|
.gradius(@n, (@i+1));
|
|
|
}
|
|
|
|
|
|
/* 尺寸 */
|
|
|
.gSize(500);
|
|
|
.gSize(@n, @i: 0) when (@i =< @n) {
|
|
|
.g_w_@{i} {
|
|
|
width: 0px + @i;
|
|
|
}
|
|
|
.g_h_@{i} {
|
|
|
height: 0px + @i;
|
|
|
}
|
|
|
.gSize(@n, (@i+1));
|
|
|
}
|
|
|
|
|
|
/* 最大最小宽度高度 */
|
|
|
.gSize(500);
|
|
|
.gSize(@n, @i: 0) when (@i =< @n) {
|
|
|
.g_minw_@{i} {
|
|
|
min-width: 0px + @i;
|
|
|
}
|
|
|
.g_maxw_@{i} {
|
|
|
max-width: 0px + @i;
|
|
|
}
|
|
|
.g_minh_@{i} {
|
|
|
min-height: 0px + @i;
|
|
|
}
|
|
|
.g_maxh_@{i} {
|
|
|
max-height: 0px + @i;
|
|
|
}
|
|
|
}
|
|
|
|