@charset "utf-8";
:root{
--color-main-yellow: #ffb408;/* 主色调:红色 */
--color-main-blue: #000066;/* 主色调:藏蓝色 */
--color-main-link: #0080ff;/* 锚点和链接文字的颜色 */
--color-main-text: #5f6368;/* 显示文字的主色调 */
--color-list-text: #a1a1a1;/* 表格模式下文字的颜色 */
--color-main-placeholder: #9e9e9e;/* placeholder的颜色 */
--color-border: #c3c3c3;/* 边框颜色 */
--color-light-border: #e0e0e0;/* 更浅一点的边框颜色 */
--color-dbllight-border: #f0f0f0;/* 比e0e0e0更浅的边框颜色 */
--color-input-title-focus: #4285f4;/* 输入框上边title聚焦的颜色*/
--color-input-litght-link: #93B6FF;/* */
--color-main-background: #f8f9fa;/* 界面主要灰色背景色 */
--color-active-line: #fcfaed;/* 编辑器里活动行的颜色 */
--color-bg-color: #f5f5f5;/* 背景颜色 */
}
html,body,textarea{
-webkit-font-smoothing: antialiased; /*chrome、safari*/
-moz-osx-font-smoothing: grayscale;/*firefox*/
font: 400 14px/20px Arial,sans-serif;
color: var(--color-main-text);
letter-spacing: .01428571em;
margin: 0;
-webkit-font-feature-settings: 'liga';
}
ul{list-style:none;margin:0px;padding:0px;}
a{
outline-style: none;
text-decoration: none;
color: var(--color-main-link);
}
a.needcallback{
/* 弹出框里的链接文字 */
cursor: pointer;
color: var(--color-main-link);
}
a:hover{
color: var(--color-main-yellow);
}
table{
border-collapse:collapse;
border-spacing:0;
border:none;
}
td{
padding: 0;
border: none;
}
input,select{
outline: none;
border: 1px solid var(--color-border);
}
input::-ms-clear { display: none; }
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
visibility: hidden;
pointer-events: none;
position: absolute;
right: 0;
}
select{
height:24px;
line-height:24px;
}
input[type=text],input[type=password],input[type=number]{
box-sizing:border-box;
height:24px;
line-height:24px;
}
input[type=checkbox],input[type=radio]{
margin: 0;
vertical-align: -1px;
margin-right: 4px;
}
input[type=radio]{
position: relative;
top: -1px;
vertical-align: middle;
width: 14px;
}
button, input[type=button], input[type=submit] {
background-color: #F1F1F1;
border: 1px solid #BBBBBB;
box-shadow: 0 0 1px 1px #f6f6f6 inset;
border-radius: 3px;
color: #222;
text-align: center;
padding: 3px 8px;
cursor: pointer;
}
button:hover,input[type=button]:hover,input[type=submit]:hover{
border-color: gray;
}
button{
height:1.5em\0;
line-height:1.5em\0;
padding:0 8px\0;
}
textarea{
outline: none;
}
.clearFormat:hover,.clearFormat:focus{
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;
background-position:100% 50%;
/*padding-right:20px !important;*/
}
.clearFormatHover:hover,.clearFormatHover:focus{
background-image:url('data:image/svg+xml;utf8,');
cursor:pointer;
}
/* 通用类名start-------------------------------------------------- */
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.fleft{
float: left;
}
.fright{
float: right;
}
.tright {
text-align: right;
}
/* 通用类名start-------------------------------------------------- */
/* 谷歌提供的图标库start-------------------------------------------------- */
@font-face {
font-family: 'Material Icons Extended';
font-style: normal;
font-weight: 400;
src: url(../other/MaterialIconsExtended.eot); /* For IE6-8 */
src: local('Material Icons Extended'),
url(../other/MaterialIconsExtended.ttf) format('woff2'),
url(../other/MaterialIconsExtended.woff2) format('woff2'),
url(../other/MaterialIconsExtended.woff) format('woff');
}
@font-face {
font-family: 'Material Icons Outlined';
font-style: normal;
font-weight: 400;
src: local('Material Icons Outlined'),
local('Material Icons Outlined'),
url(../other/MaterialIconsOutlined.ttf) format('ttf'),
url(../other/MaterialIconsOutlined.woff) format('woff');
}
.materialIcons,.materialIconsOutlined{
font-family: 'Material Icons Extended';
letter-spacing: 0;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
.materialIconsOutlined{
font-family: 'Material Icons Outlined';
}
/* 谷歌提供的图标库end-------------------------------------------------- */
/* dateTime还有其他一部分的输入信息，可能会需要禁用输入法start */
input[dateTime], .imeMode{
-ms-ime-mode: disabled;
ime-mode:disabled;
}
/* dateTime还有其他一部分的输入信息，可能会需要禁用输入法end */
/* 通用的做菜单栏start-------------------------------------------------- */
.col_side {
background:#f8f9fa;
width:235px;
overflow-y: scroll;
position: absolute;
top: 65px;
left: 0;
bottom: 0;
z-index:1;
padding:10px 5px 20px 0;
}
.col_side::-webkit-scrollbar {
transition-duration: 1s;
background-color: #f8f9fa;
width: 16px;
height: 0;
}
.col_side::-webkit-scrollbar-thumb {
background-color: transparent;
}
html::-webkit-scrollbar {
transition-duration: 1s;
background-color: #f8f9fa;
width: 2px;
height: 1px;
}
html::-webkit-scrollbar-track {
border-radius: 1px;
}
html::-webkit-scrollbar-thumb {
box-shadow: 0 0 10px 10px #1a73e8;
border-radius: 1px;
background-color: #1a73e8;
transition: background-color linear 1s;
}
.col_side .menu{height:40px;line-height:40px; font-weight: 500; position:relative;border-left:5px solid transparent; z-index:2;cursor: pointer;overflow: hidden;border-top-right-radius: 20px;border-bottom-right-radius: 20px;margin-right: 10px;}
.col_side .menu:hover,.col_side .menu.over {background-color:#e5e5e5;}
.col_side .mainMenu.mainLinked{background-color: #e8eaed;}
.col_side .menu:hover a{color:#3c4043;}
.col_side .menu.linked{background-color: #e8f0fe;border-left-color: #1a73e8;}
.col_side .menu.linked a{color: #1a73e8;}
.col_side .subordinateMenu{display: none}
.col_side .subordinateMenu .menu{height:32px;line-height:32px;border-top-right-radius: 16px;border-bottom-right-radius: 16px;}
.col_side .mainMenu .mainMenuIcon{display: inline-block;background: url(../imgs/nav_closed.gif) no-repeat left center;height: 10px;width: 1em;}
.col_side .mainMenu.selected .mainMenuIcon{background-image: url(../imgs/nav_opened.gif);}
.col_side > .menu .fa{display: inline-block; margin-right: 16px;height: 24px;line-height: 20px;width: 20px;text-align: center;}
.col_side a{display:block;color: rgba(0,0,0,0.54);font-size: 12px;text-decoration:none;padding-left:30px;}
.col_side .subordinateMenu a{padding-left:54px;}
.col_side .subordinateMenu .mainMenu a{padding-left:42px;}
.col_side .subordinateMenu .subordinateMenu a{padding-left:66px;}
.col_side .subordinateMenu .subordinateMenu .mainMenu a{padding-left:54px;}
.col_side .subordinateMenu .subordinateMenu .subordinateMenu a{padding-left:80px;}
.col_side .subordinateMenu .subordinateMenu .subordinateMenu .mainMenu a{padding-left:66px;}
.col_scrollbar {
transition-duration: 0.5s;
z-index: 2;
width: 1px;
position: absolute;
top: 65px;
left: 225px;
bottom: 0;
background-color: #1a73e8;
opacity: 0;
}
/*.col_side:hover + .col_manipulate {*/
/* opacity: 1;*/
/*}*/
.col_scrollbar_thumb {
transition: top 1s;
z-index: 3;
/*transition-duration: 1s;*/
background-color: #f8f9fa;
position: absolute;
width: 9px;
height: 25px;
/*opacity: 1;*/
border: solid 1px var(--color-main-yellow);
border-radius: 58px;
left: -5px;
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}
.col_scrollbar_opa {
width: 100%;
height: 100%;
z-index: 1;
position: fixed;
top: 0;
left: 0;
display: none;
}
.col_scrollbar_track {
z-index: 1;
width: 18px;
position: absolute;
top: 65px;
left: 223px;
bottom: 0;
background-color: #f8f9fa;
}
/* 通用的做菜单栏end-------------------------------------------------- */
/* 新式的输入框和下拉框样式start ------------------------------------------- */
/* 所需样本参照common.js的相关样例 */
.widthMeasuring{
height: 0;
letter-spacing: .2px;
font-size: 14px;
margin: 0;
padding: 0;
border: none;
box-shadow: none;
position: absolute;
opacity: 0;
z-index: -1;
white-space: nowrap;
}
/* 主要是为了两边对齐 */
.flexFieldContainer{
display: -webkit-flex;
display: flex;
display: -ms-flexbox;
}
.flexFieldContainer > .fieldContainer{
width: 0\9;
-ms-flex: auto;
margin-left: 10px;
margin-right: 10px;
}
.flexFieldContainer > .fieldContainer.styleThin{
width: 100%;
}
.margin0.flexFieldContainer > .fieldContainer{
margin-left: 0;
margin-right: 0;
}
.flexFieldContainer > .fieldContainer:first-child{
margin-left: 0;
}
.flexFieldContainer > .fieldContainer:last-child{
margin-right: 0;
}
/* 两个框共享一个下划线，一般是前面选择后面填写start */
.combinedFieldContainer{
width: 100%;
position: relative;
}
.combinedFieldContainer .fieldContainer .underline{
left: 0;
right: 0;
position: absolute;
}
.combinedFieldContainer .fieldContainer .field:focus ~ .underline{
z-index: 1;
}
.combinedFieldContainer .textWidth{
white-space: nowrap;
position: absolute;
opacity: 0;
height: 0;
}
.flexFieldContainer.combinedFieldContainer .fieldContainer{
margin-right: 0;
margin-left: 0;
}
/* 两个框共享一个下划线，一般是前面选择后面填写end */
/* 在同一个combinedFieldContainer内的fieldContainer，如果都没填写的话，就显示第一个输入框，如果有填充的话，再显示所有输入框start */
/* cascadeFieldContainer仅控制显隐问题，不涉及间隔和长度等问题，这个在各个其他的class进行实现 */
.cascadeFieldContainer > .cascadeFieldItem:not(:first-child)
{
display: none;
}
.cascadeFieldContainer.cascadeFilled > .cascadeFieldItem:not(:first-child) {
display: table-cell;
}
/* 在同一个combinedFieldContainer内的fieldContainer，如果都没填写的话，就显示第一个输入框，如果有填充的话，再显示所有输入框end */
.fieldContainer{
width: 100%;
margin: 15px 0 10px;
display: inline-block;
}
.matCardTitle .fieldContainer{
/* 标题上的select没有下划线,也不需要设置边界 */
margin: 0;
}
.matCardTitle .fieldContainer select.field{
padding-right: 20px;
background-position: right -3px;
}
.fieldContainer.areaContainer{
position: relative;
}
.fieldContainer .field{
border: none;
outline: none;
box-shadow: none;
box-sizing: border-box; /* 宽度和高度包含内容+padding+border */
padding: 0;
width: 100%;
font-size: 14px;
letter-spacing: .2px;
color: var(--color-main-text);
margin: 0; /* button自带margin，所以需要清除掉 */
}
.fieldContainer.areaContainer textarea.field{
height: 18px;
min-height: 18px;
line-height: 18px;
padding: 3px 0;
resize: vertical;
margin-bottom: -6px;
}
.fieldContainer .field.disabled{
color: #aaa;
}
/* 测定input或者select占用的实际宽度 */
.fieldContainer .fieldAdaptive,.fieldContainer .fieldAdaptiveWrapper{
letter-spacing: .2px;
height: 0px;
overflow: hidden;
white-space: nowrap;
margin: 0;
padding: 0;
}
.fieldContainer .fieldAdaptiveWrapper{
width: 0;
transition: width .2s;
}
/*.fieldContainer .fieldAdaptiveWrapper~input.field:focus{
width: calc(100% + 24px);
background-color: transparent;
}*/
.fieldContainer.selectContainer .fieldAdaptiveWrapper~input.field.selectInput:focus{
width: 100%;
}
.fieldContainer .fieldAdaptive{
position: absolute;
}
.fieldContainer .field:focus{
border: none;
outline: none;
}
.fieldContainer.inputSelect{
position: relative;
}
.fieldContainer .field[type=number]::-webkit-outer-spin-button,
.fieldContainer .field[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.fieldContainer .field[type=number]{
-moz-appearance: textfield;
}
.fieldContainer.inputSelect input{
position: absolute;
padding-left: 0px;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyNCIgd2lkdGg9IjIwcHgiIGhlaWdodD0iMjRweCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIj48cGF0aCBkPSJNMSAxMkw3IDE4TDEzIDEyIi8+PC9zdmc+') no-repeat right;
/*background-size: 15px 5px;*/
opacity: 0;
z-index: 1;
}
.fieldContainer.inputSelect.noDropdown input{
background-image: none;
}
.fieldContainer.inputSelect:hover input,.fieldContainer.inputSelect input:focus{
opacity: 1;
}
.fieldContainer.inputSelect:hover select,.fieldContainer.inputSelect input:focus~select{
opacity: 0;
}
.fieldContainer select.field:invalid{
color: #9e9e9e;
}
/* 兼容IE的写法，如果把这个和上面的合并，会导致IE中上面的全部失效 */
.fieldContainer .field::placeholder{
color: #9e9e9e;
}
.fieldContainer .field:-ms-input-placeholder
{
color: #9e9e9e;
}
.fieldContainer.selectContainer input.selectInput,
.fieldContainer.selectIcon .field,
.fieldContainer select.field{
/* 正规的输入型下拉框，也把右边的下拉箭头显示出来 */
padding-left: 0px;
background-color: transparent;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyNCIgd2lkdGg9IjIwcHgiIGhlaWdodD0iMjRweCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIj48cGF0aCBkPSJNMSAxMkw3IDE4TDEzIDEyIi8+PC9zdmc+') no-repeat right;
/*background-size: 15px 5px;*/
appearance:none;
-webkit-appearance: none;
-moz-appearance:none;
}
@-moz-document url-prefix(){
.fieldContainer select.field{
text-indent: -2px;
}
}
.fieldContainer select.field::-ms-expand {
display: none;
}
.fieldContainer.noDropdown select.field{
background-image: none;
}
.combinedFieldContainer .fieldContainer{
transition: all .2s;
height: 27px; /* combinedField的下划线脱离了文档流，所以少了3像素的高度，需要把这3像素的高度加回来 */
}
.combinedFieldContainer .fieldContainer select.field{
transition: all .2s;
background-image: none;
}
.combinedFieldContainer:hover .fieldContainer select.field,.combinedFieldContainer:hover .fieldContainer select.field:invalid~.placeholder{
color: #1a73e8;
}
.fieldContainer .placeholder{
position: absolute;
text-align: left;
margin-top: -22px;
color: #9e9e9e;
font-size: 14px;
line-height: normal;
pointer-events: none;
transition: all .2s;
transform-origin: top left;
letter-spacing: .2px;
}
.fieldContainer.areaContainer .placeholder{
top: 24px;
}
.fieldContainer .placeholder.transitionDuration0{
transition-duration: 0ms;
}
.fieldContainer .field:focus + .placeholder,
.fieldContainer .field[placeholder=" "]:not(:placeholder-shown) + .placeholder,
.fieldContainer .field:not([placeholder=" "]):valid + .placeholder,
.fieldContainer select.field:valid + .placeholder,
.fieldContainer .field[filled="true"] + .placeholder,
.fieldContainer .radioContainer ~ .placeholder,
.fieldContainer .checkboxContainer ~ .placeholder,
.fieldContainer .field:focus + .placeholderWrapper .placeholder,
.fieldContainer .field[placeholder=" "]:not(:placeholder-shown) + .placeholderWrapper .placeholder{
transform: scale(0.75) translateY(-20px);
}
.fieldContainer .field:focus + .placeholder .errorHolder,
.fieldContainer .field[filled="true"] + .placeholder .errorHolder,
.fieldContainer .radioContainer ~ .placeholder .errorHolder,
.fieldContainer .checkboxContainer ~ .placeholder .errorHolder,
.fieldContainer .field:focus + .placeholderWrapper .placeholder .errorHolder,
.fieldContainer .field[filled="true"] + .placeholderWrapper .placeholder .errorHolder{
transform: scale(1) translateY(0);
}
.fieldContainer .field:focus + .placeholder,
.fieldContainer .field:focus + .placeholderWrapper .placeholder{
color: #4285f4;
}
.fieldContainer .field.showCountingUnit + .placeholder{
visibility: hidden;
}
.fieldContainer .field.showCountingUnit:focus + .placeholder{
visibility: visible;
}
.fieldContainer.required .underline1{
position: relative;
float: left;
width: 10px;
height: 0px;
}
.fieldContainer.required .underline1:before{
content: " ";
position: absolute;
width: 10px;
height: 1px;
/*background-color: red;*/
right: 0;
}
.fieldContainer.required .field:focus ~ .underline .underline1:before{
height: 2px;
-webkit-animation: quantumWizPaperInputAddHeight .3s cubic-bezier(0.4,0,0.2,1);
animation: quantumWizPaperInputAddHeight .3s cubic-bezier(0.4,0,0.2,1);
}
.fieldContainer .underline{
margin-top:2px;
height:1px;
background-color: #e0e0e0;
position: relative;
}
.fieldContainer .field.errorField,
.fieldContainer .field.errorField:invalid,
.fieldContainer .field.errorField ~ .placeholder{
color: red;
}
/* 兼容IE的写法，如果把这个和上面的合并，会导致IE中上面的全部失效 */
.fieldContainer .field.errorField::placeholder{
color: red;
}
.fieldContainer .field.errorField:-ms-input-placeholder{
color: red;
}
/*.fieldContainer .field.errorField ~.underline,.fieldContainer .field.errorField ~.underline:after{
background-color: red;
}
.fieldContainer .field.emptyField ~.underline,.fieldContainer .field.emptyField ~.underline:after{
background-color: red;
}*/
.fieldContainer .field.errorMessage ~.underline,.fieldContainer .field.errorMessage ~.underline:after{
background-color: var(--color-main-yellow);
}
/* dateTime在readonly后自制光标start */
#dateTimeShowWidth{
position: absolute;
width: 0!important;
height: 0!important;
margin: 0!important;
padding: 0!important;
text-indent: 0!important;
z-index: -1;
border: none;
outline: none;
pointer-events: none;
}
.showDateTimePointer{
position: absolute;
height: 15px;
width: 1px;
background-color: #666;
margin-top: 4px;
animation:dateTimeCursorBlink 1.2s linear infinite;
display: none;
pointer-events: none;
}
/* dateTime在readonly后自制光标end */
.fieldContainer .field ~ .underline:after{
content: " ";
background-color: #4285f4;
height: 2px;
/*margin-top:-1px;*/
width:0;
display: block;
overflow: hidden;
/*-webkit-animation: quantumWizPaperInputRemoveUnderline .3s cubic-bezier(0.4,0,0.2,1);
animation: quantumWizPaperInputRemoveUnderline .3s cubic-bezier(0.4,0,0.2,1);*/
}
.fieldContainer .field:focus ~ .underline:after{
-webkit-animation: quantumWizPaperInputAddUnderline .3s cubic-bezier(0.4,0,0.2,1);
animation: quantumWizPaperInputAddUnderline .3s cubic-bezier(0.4,0,0.2,1);
width:100%;
}
.fieldContainer .errorTips.field ~ .underline:before{
content: " ";
position: absolute;
width: 100%;
height: 2px;
background-color: red;
animation: errortipsWizPaperInputAddUnderline .6s;
}
@keyframes errortipsWizPaperInputAddUnderline{
59% {
margin-left: 0
}
60%,80% {
margin-left: 5px
}
70%,90% {
margin-left: -5px
}
}
.fieldContainer .underline .showmessages{
transform: scale(0.75);
color: red;
transform-origin: top left;
position: absolute;
/*height: 0;*/
/*animation: errorShow 2.5s;*/
overflow: hidden;
}
.fieldContainer .placeholder .errorHolder{
display: inline-block;
transform: scale(0.75) translateY(5px);
transform-origin: top left;
}
.fieldContainer .placeholder .errorHolder span{
color: red;
}
.fieldContainer .placeholder .blankHolder span{
color: var(--color-main-yellow);
}
/* 带有%符号，前面要填写数字的，与之类似的可以用这种start-------------------- */
/* 如受益人份额，佣金比例 */
.placeholderTipsWrapper {
position: absolute;
top: 0;
left: 0;
height: 24px;
line-height: 24px;
white-space: nowrap;
pointer-events:none;
}
.placeholderTipsWrapper .placeholderAdaptive {
opacity: 0;
}
/* 带有%符号，前面要填写数字的，与之类似的可以用这种end-------------------- */
@keyframes errorShow {
0%{height: 0}
20%{height: 25px;}
80%{height: 25px;}
100%{height: 0;display: none;}
}
@keyframes dateTimeCursorBlink{0%{opacity: 1}50%{opacity: 1}51%{opacity: 0}100%{opacity: 0}}
@keyframes quantumWizPaperInputAddHeight{0%{height: 1px}to{height: 2px}}
@-webkit-keyframes quantumWizPaperInputAddHeight{0%{height: 1px}to{height: 2px}}
@keyframes quantumWizPaperInputRemoveUnderline{0%{width:100%;opacity:1}to{width:100%;opacity:0}}
@-webkit-keyframes quantumWizPaperInputRemoveUnderline{0%{width:100%;opacity:1}to{width:100%;opacity:0}}
@keyframes quantumWizPaperInputAddUnderline{0%{width:0;margin-left:50%;}to{width:100%;margin-left:0;}}
@-webkit-keyframes quantumWizPaperInputAddUnderline{0%{width:0;margin-left:50%;}to{width:100%;margin-left:0;}}
/* 下拉框下拉的样式 */
.fieldContainer.standardHeight,.radioContainer.standardHeight,.checkboxContainer.standardHeight,.fieldContainer .standardHeight{
/* input输入框目前的标准高度是：行高24px，下边距3px */
line-height: 24px;
}
.fieldContainer select option{
display: none;
}
.fieldContainer .options{
position: relative;
height: 0;
}
.fieldContainer .options .topDirection{
bottom: 28px;
border-radius:8px 8px 0 0;
}
.selectOptionContainer{
position: fixed;
z-index: 99999;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 0 0 8px 8px;
padding: 8px 0;
max-height: 300px;
overflow: auto;
display: none;
box-shadow: 0 2px 4px #ccc;
cursor: auto;
}
.fieldContainer .options>div{
position: absolute;
z-index: 999;
left: 0;
max-width: 100%;
/*right: 0;*/
background-color: #fff;
border: 1px solid #ccc;
border-radius: 0 0 8px 8px;
padding: 8px 0;
max-height: 300px;
overflow: auto;
display: none;
box-shadow: 0 2px 4px #ccc;
cursor: auto;
}
.fieldContainer.horizontal .ulWrapper{
max-width: unset;
}
.fieldContainer.unlimitedWidth .ulWrapper{
min-width: 175px;
right: auto;
max-width: unset;
}
.fieldContainer.fullWidth .ulWrapper{
right: 0;
}
.fieldContainer .selectInputOptions{
display: none;
}
.selectOptionContainer ul li{
overflow: hidden;
padding: 7px 22px;
line-height: 23px;
}
.selectOptionContainer.horizontal .ulWrapper ul{
display: flex;
padding-left: 12px;
padding-right: 12px;
}
.selectOptionContainer.horizontal ul li{
float: left;
padding: 0;
margin-left: 12px;
width: auto;
}
.selectOptionContainer.horizontal ul li:first-child{
margin-left: 0;
}
.selectOptionContainer ul li[likeTitle]{
border-bottom: 1px solid #ddd;
}
.selectOptionContainer ul li.preSelected{
background-color: #f1f1f1;
}
.selectOptionContainer.horizontal ul li.preSelected{
background-color: transparent;
}
.selectOptionContainer ul li:hover,
.selectOptionContainer ul li.preSelected:hover{
background-color: #f1f1f1;
}
.selectOptionContainer.horizontal ul li:hover,
.selectOptionContainer.horizontal ul li.preSelected:hover
{
background-color: transparent;
}
.selectOptionContainer ul li[likeTitle]:hover{
background-color: #fff;
}
.selectOptionContainer li .optionShow{
color:#222;
cursor: default;
/*font-size: 16px;*/
position: relative;
font-size: 13px;
text-align: left;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
}
.selectOptionContainer.horizontal .optionShow{
color: lightgray;
font-size: 12px;
cursor: pointer;
}
.selectOptionContainer.horizontal li[checked] .optionShow{
color: var(--color-main-link);
}
.selectOptionContainer ul li[likeTitle] .optionShow{
color: #1a73e8;
}
.selectOptionContainer li .optionShow .radioContainer{
display: inline-block;
width: 18px;
}
.selectOptionContainer ul li[likeTitle] .radioContainer,
.selectOptionContainer.horizontal .optionShow .radioContainer,
.selectOptionContainer.horizontal .optionShow .indent{
display: none;
}
.selectOptionContainer li .optionShow .optionContent{
display: inline-block;
}
.selectOptionContainer li[disabled] .optionShow{
color: var(--color-main-placeholder);
}
.selectOptionContainer li[disabled] .radioShow{
border-color: var(--color-main-placeholder);
}
.selectOptionContainer li .optionShow .indent{
display: inline-block;
width: 2em;
}
.selectOptionContainer li[likeTitle] .optionShow .optionContent{
margin-left: 0;
text-decoration: underline;
cursor: pointer;
}
.selectOptionContainer li .optionMainTitle{
margin-bottom: -3px;
}
.selectOptionContainer li .titleTips{
font-size: 10px;
margin-left: 5px;
color: #9e9e9e;
}
.selectOptionContainer li .optionSubTitle{
line-height: 16px;
font-size: 12px;
color: var(--color-main-text);
}
/* checkbox的统一样式start */
.fieldContainer.checkboxContainer{
margin: 0;
width: 15px;
height: 15px;
line-height: 15px;
text-indent: -1px;
}
.fieldContainer.checkboxContainer.styleThin{
text-indent: 0;
}
.checkboxContainer .title{
color: #b8b8b8;
}
.checkboxContainer .checkbox:checked ~ .title, .checkboxContainer input[type=checkbox]:checked ~ .title{
color: var(--color-main-text);
}
.fieldContainer .field[type="checkbox"]{
display: none;
}
.fieldContainer .checkboxShow{
color: #666;
display: inline-block;
}
.fieldContainer .checkboxShow:after{
content: "check_box_outline_blank";
font-family: "Material Icons Outlined";
letter-spacing: 0;
display: block;
font-size: 19px;
text-align: center;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
.fieldContainer .field:disabled ~ .checkboxShow{
color: #b8b8b8;
}
.fieldContainer .field:checked ~ .checkboxShow,
.fieldContainer .field:indeterminate ~ .checkboxShow,
.fieldContainer .field[status='indeterminate'] ~ .checkboxShow{
color: #1a73e8;
}
.fieldContainer .field.error ~ .checkboxShow,
.fieldContainer.styleThin .field.error ~ .checkboxShow {
color: red;
}
.fieldContainer .field:checked ~ .checkboxShow:after{
content: "check_box";
}
.fieldContainer .field:indeterminate ~ .checkboxShow:after,
.fieldContainer .field[status='indeterminate'] ~ .checkboxShow:after{
content: "indeterminate_check_box";
}
.fieldContainer.styleThin{
width: auto;
}
.fieldContainer.styleThin .checkboxShow{
color: #bbb;
vertical-align: -3px;
}
.fieldContainer.styleThin .checkboxShow:before{
content: " ";
display: block;
border: 1px solid currentColor;
width: 12px;
height: 12px;
position: absolute;
border-radius: 1px;
transition: border .2s;
}
.fieldContainer.styleThin .checkboxShow:after{
visibility: hidden;
font-size: 19px;
text-indent: -2px;
height: 14px;
line-height: 14px;
}
.fieldContainer.styleThin .field:disabled ~ .checkboxShow{
color: #ddd;
}
.fieldContainer.styleThin .field:checked ~ .checkboxShow:after{
visibility: visible;
content: "check";
transform: scale(.7) translateX(-1px);
}
/* checkbox的统一样式end */
/* 仅仅只有黑色三角的下拉，不显示下拉的类容start */
.fieldContainer.onlyTriangle{
width: 14px;
margin: 0;
}
.fieldContainer.onlyTriangle .field{
width: 0;
height: 0;
margin: 0;
padding: 0;
position: absolute;
}
.fieldContainer .shapeTriangle{
color: #666;
}
.fieldContainer .shapeTriangle:after{
content: "expand_more";
font-family: "Material Icons Extended";
letter-spacing: 0;
display: block;
height: 20px;
line-height: 20px;
font-size: 26px;
cursor: pointer;
text-align: center;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
.fieldContainer .field.checked~.shapeTriangle{
color: #1a73e8;
}
.fieldContainer .field:disabled~.shapeTriangle{
color: #b8b8b8;
}
/* 仅仅只有黑色三角的下拉，不显示下拉的类容end */
/* radio整体需要向下移动，因为要和线对齐，不是字对齐 */
.radioContainer.fieldContainer{
width: auto;
margin: 0;
}
.radioContainer .radio,.radioContainer input[type=radio]{
display: none;
}
.radioContainer .radioShow{
width: 11px;
height: 11px;
border-radius: 50%;
border:1px solid #666;
display: inline-block;
position: relative;
top: 1px;
margin-right: 3px;
}
.selectOptionContainer.multiple .radioShow{
border-radius: 1px;
}
.radioContainer .radio:checked ~ .radioShow, .radioContainer input[type=radio]:checked ~ .radioShow{
border-color: #1a73e8;
}
.radioContainer .radio:checked ~ .radioShow:before, .radioContainer input[type=radio]:checked ~ .radioShow:before{
content: " ";
display: block;
width: 7px;
height: 7px;
top: 2px;
left: 2px;
border-radius: 50%;
overflow: hidden;
background-color: #1a73e8;
position: absolute;
}
.selectOptionContainer.multiple .radioContainer .radio:checked ~ .radioShow:before,
.selectOptionContainer.multiple .radioContainer input[type=radio]:checked ~ .radioShow:before{
border: none;
background: transparent;
content: "check";
width: 11px;
height: 11px;
line-height: 12px;
font-size: 12px;
text-align: center;
top: 0;
left: 0;
color: #1a73e8;
font-family: "Material Icons Outlined";
}
/* radio字的颜色变化 */
.radioContainer .title{
color: #b8b8b8;
}
.radioContainer .radio:checked ~ .title, .radioContainer input[type=radio]:checked ~ .title{
color: var(--color-main-text);
}
/* radio字的颜色变化 */
/* 带有title的input进行特殊处理start */
.tableContainer{
display: table;
}
.tableContainer .tableCellContainer{
display: table-cell;
width: 0;
}
.tableContainer .tableCellContainer:last-child{
width: 100%;
}
.titleContainer{
width: 100%;
margin:15px 0 10px;
position: relative;
}
.titleContainer .fieldTitle{
color: var(--color-main-text);
}
.titleContainer .fieldTitle, .titleContainer .fieldTitleBackup,
.titleContainer .placeholder{
height: 24px;
line-height: 24px;
white-space: nowrap;
}
.titleContainer .fieldTitleBackup{
color: transparent;
/*display: inline-block;
transition: all .2s;
width: 100%;
flex: 0;*/
}
.titleContainer .placeholder{
top: 0;
margin-top: 0;
display: inline-block;
}
.placeholderWrapper{
position: absolute;
left: 0;
top: 0;
}
.fieldContainer .field:focus + .placeholderWrapper .fieldTitleBackup,
.fieldContainer .field:valid + .placeholderWrapper .fieldTitleBackup,
.fieldContainer .field[placeholder=" "]:not(:placeholder-shown) + .placeholderWrapper .fieldTitleBackup{
width: 0;
}
.placeholderWrapper.placeholderTable{
display: table;
}
.placeholderTable .placeholderCell{
display: table-cell;
}
.titleContainer .underline{
left: 0;
right: 0;
position: absolute;
bottom: -2px;
}
/* 带有title的input进行特殊处理end */
/* 新式的输入框和下拉框样式end ------------------------------------------- */
/* 智能辅助的输入框start------------------------------------------------ */
.customerAnalyseContainer .containerTitle{
line-height: 36px;
color: var(--color-main-text);
}
.customerAnalyseContainer .analyseTableWrapper{
/*position: absolute;*/
z-index: 1;
bottom: 0;
left: -1px;
right: -1px;
border-bottom: 1px solid var(--color-light-border);
background-color: #fff;
padding: 0;
}
.customerAnalyseContainer .menu,
.customerAnalyseContainer .menu label{
cursor: pointer;
}
.customerAnalyseContainer .analyseTableTitle{
line-height: 48px;
border-bottom: 1px solid var(--color-light-border);
/*margin-bottom: 8px;*/
}
.customerAnalyseContainer .analyseTableWrapper .index{
padding-left: 12px;
padding-right: 0;
font-size: 14px;
width: 20px;
}
.analyseTableMenu {
height: 30px;
}
.customerAnalyseContainer .analyseTableMenu .fright{
margin-right: 12px;
}
.customerAnalyseContainer .analyseTableWrapper .field{
background-color: transparent;
}
.customerAnalyseContainer .analyseTableWrapper table{
white-space: nowrap;
font-size: 12px;
width: auto;
}
.customerAnalyseContainer .analyseTableWrapper table tbody{
border-top:1px dashed var(--color-light-border);
}
.customerAnalyseContainer .analyseTableWrapper table tbody:first-child{
border-top:none;
}
.customerAnalyseContainer .analyseTableWrapper td{
padding-right: 48px;
}
.customerAnalyseContainer .analyseTableWrapper .lightTitle{
color: var(--color-main-placeholder);
padding-right: 0;
}
.customerAnalyseContainer .mainWrapper{
position: relative;
/*border: 1px solid var(--color-light-border);*/
background-color: #fff;
border-radius: 1px;
}
.customerAnalyseContainer .mainWrapper.active{
background-color: var(--color-input-litght-link);
}
.customerAnalyseContainer .mainMessage{
min-height: 76px;
padding: 12px 0 10px;
white-space: pre;
overflow-x: auto;
/*padding: 12px;
line-height: 18px;
min-height: 36px;
background-color: #fff;
border: 1px solid var(--color-light-border);
border-radius: 1px;*/
}
.customerAnalyseContainer .mainMessage.active{
/*background-color: var(--color-main-background);*/
}
.customerAnalyseContainer .mainMessage:focus{
outline: none;
/*border-color: var(--color-input-title-focus);*/
}
.customerAnalyseContainer .mainMessage>div{
min-height: 20px;
}
.customerAnalyseContainer .messagePlaceholder{
display: none;
position: absolute;
pointer-events: none;
line-height: 18px;
top: 12px;
left: 0;
color: var(--color-main-placeholder);
}
/*.customerAnalyseContainer .mainMessage:empty~.messagePlaceholder{*/
/* display: block;*/
/*}*/
.customerAnalyseContainer .mainMessage.empty~.messagePlaceholder{
display: block;
}
.customerAnalyseContainer .messageMenuContainer{
position: absolute;
right: 12px;
bottom: 6px;
}
.customerAnalyseContainer .showDragTips{
display: none;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
line-height: 78px;
text-align: center;
background-color: #fff;
}
.customerAnalyseContainer .preDrag .showDragTips{
display: block;
}
@media screen and (max-width: 800px) {
/* 手机和电脑有区别 */
.customerAnalyseContainer{
font-size: 14px;
}
.customerAnalyseContainer .analyseTableTitle{
padding-left: 30px;
}
.customerAnalyseContainer .mainMessage,
.customerAnalyseContainer .messagePlaceholder{
padding-left: 30px;
padding-right: 30px;
}
.customerAnalyseContainer .messagePlaceholder .messagePlaceholder1 {
display: none;
}
}
/* 智能辅助的输入框end------------------------------------------------ */
/* 列表式内容样式start------------------------------------------------------------------------------------- */
.table_msg {border:none;border-radius: 3px;padding-right:10px;margin: 0 auto;padding: 0 2em;}
.table_msg table {background-color: #FFFFFF;border-collapse: collapse;border-radius: 3px;text-align: center;width: 100%;}
.table_msg .borderhead th{border: 1px solid #D3D3D3;line-height: 32px;}
.table_msg .tbhead tr{border-top:none;}
.thead .table_cell,.tbhead th{line-height: 42px;font-size:14px;font-family:microsoft yahei;color:#777;}
.table_cell {font-style: normal;font-weight: 400;padding: 0;}
.thead .table_cell:first-child {border-left-width: 0;}
.table_msg thead th {padding-left: 2px;padding-right: 2px;text-align: left;vertical-align:middle;font-weight:400;}
.table_msg thead tr{border-bottom: 1px solid #f0f0f0;}
.table_msg tbody .tr_on{background-color:#fefefe;border-top:1px dashed #ddd;}
.table_msg tbody .first_tr{border-top: 1px solid #f0f0f0;white-space: nowrap;}
.table_msg tbody .first_tr:first-child{border: none}
.table_msg tbody .first_tr.selected{border-top-color: #f8f9fa;background-color: #f9f9f9;}
.table_msg tbody .first_tr:hover,.table_msg .first_tr_on{background-color:#f5f5f5;}
.table_msg tr {border-top: 1px solid #dcdcdc;vertical-align:middle;font-size:12px;}
.no_pad table tr {border-top: none;}
.first_tr_last {border-bottom:1px solid #ccc;}
.table_msg a{color:#0066ff;margin:0 3px;}
.table_msg tbody td {height: 18px;line-height: 18px;padding: 12px 2px; text-align: left;color:#888;}
.table_msg td.emptyData{text-align: center;font-size: 14px;}
.table_msg tbody .tcenter,.table_msg thead .tcenter{text-align:center;}
.table_msg .tbody a{color: #2E7DC6;margin:0 5px;}
.table_msg .moneyTxt{text-align:right;padding-right:8px;}/* 金额又靠齐保留2位小数 */
/* 列表式内容样式end------------------------------------------------------------------------------------- */
/* 弹出层样式start---------------------------- */
/*
info_edit_animation是为了有一个从小到大的动画效果，如果不要动画，需要在info_edit_box上加一个背景色
*/
.info_edit_opa{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.6);
z-index: 998;
display: none;
}
.info_edit_box{
width:600px;
position:fixed;
left:50%;
top: 50%;
z-index:999;
transform: translate(-50%, -50%);
display:none;
overflow: hidden;
border-radius: 5px;
}
.info_edit_box.noOpa{
overflow: visible;
}
.info_edit_animation{
background-color:#fff;
transition: transform 300ms ease 0s;
}
.info_edit_box.noOpa .info_edit_animation{
overflow: hidden;
box-shadow: 0 0 6px 2px #ccc;
border: 1px solid var(--color-border);
}
.info_edit_head{
font-size: 16px;
line-height: 55px;
height: 55px;
border-bottom: 1px solid #dadce0;
padding: 0 24px;
padding-right: 10px;
white-space: nowrap;
overflow: hidden;
}
.info_edit_title{
float:left;
}
.info_edit_close{
float: right;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.info_edit_close:before{
transition: all .2s linear;
display: block;
content: "close";
font-family: 'Material Icons Extended';
font-size: 24px;
line-height: 40px;
text-align: center;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0);
}
.info_edit_close:hover:before{
/*color: var(--color-main-text);*/
background-color: rgba(0, 0, 0, .04);
}
.info_edit_body{
padding:30px 24px;
}
.info_edit_label{height:35px;text-align:left;border-bottom:1px solid #ccc;position:relative;z-index:0;}
.info_edit_label span { position:relative;z-index:1;margin-left:1px;top:10px;height:24px;line-height:24px;display:inline-block;padding-left:15px;padding-right:15px;cursor:pointer;border:1px solid #ccc; background-color:#ECEEFF;}
.info_edit_label .info_edit_select {border-bottom:1px solid #fff;background-color:#FFF;}
.info_edit_box tr{height:1em;line-height:1em;}
.info_edit_box td{height:1em;line-height:1em;padding:5px 0px;vertical-align:middle;}
.beneRows td{padding:0;}
.info_edit_body table{width:100%;}
.info_edit_body thead{border-bottom:1px solid #ccc;}
.info_edit_body input:text,.info_edit_body select{width:200px;}
.info_edit_body textarea{width:400px;}
.info_edit_body a:hover{text-decoration: underline;}
.info_edit_foot{
height:40px;
line-height:40px;
padding: 8px 0;
text-align:center;
}
.info_edit_foot .info_edit_button{
float: right;
min-width: 64px;
padding: 0px 8px;
cursor: pointer;
transition: all .2s linear;
}
.info_edit_foot .info_edit_button:hover {
background-color: rgba(0, 0, 0, .04);
}
.info_edit_foot input{
margin:0 10px;
}
.info_edit_save,.info_edit_cancel{cursor: pointer;}
/* 弹出层样式end--------------------------------------------------------------------------------------- */
/* 保单查询后的操作按钮，收银台的支付方式的菜单列表样式start------------------- */
.listMenuHeader{
height: 44px;
line-height: 44px;
padding-left: 24px;
background-color: #f8f9fa;
}
.listMenuHeader.empty{
height: 32px;
}
.listMenuHeader .listMenuName{
color: #999;
font-size: 12px;
line-height: 20px;
position: relative;
top: 7px;
font-weight: 800;
}
.listMenuBody{
background-color: #fff;
}
.listSubMenu{
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding-left: 48px;
}
.listSubMenuBox{
height: 44px;
line-height: 44px;
border-top: 1px solid #ddd;
margin-top: -1px;
color: #3b7bea;
}
/* 收银台微信点击支付宝时提示页面的样式start */
.alipayTips{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
background-color:rgba(0,0,0,0.65);
z-index: 999;
display:none;
}
.alipayTips img{
float:right;
margin-right:0.2rem;
margin-top:0.2rem;
}
.alipayTips .alipayTipsBody{
position:absolute;
top:0.72rem;
right:0.6rem;
color:#fff;
text-align:left;
font-size:0.14rem;
}
.alipayTips .alipayTipsOpen{
padding:0.02rem 0.08rem;
margin:0 0.05rem;
border-radius:0.04rem;
background-image: linear-gradient(to bottom,#ccc 0%,#666 15%,#111 100%);
display:inline-block;
height:0.18rem;
line-height:0.18rem;
}
.alipayTips .androidImg,.alipayTips .iphoneImg{
display:inline-block;
width:0.15rem;
height:0.15rem;
background:url(../imgs/mobile/browseIco.png) no-repeat;
vertical-align: -3px;
margin-right:0.05rem;
}
.alipayTips .iphoneImg{
background-position:0 -25px;
}
/* 收银台微信点击支付宝时提示页面的样式end */
/* 保单查询后的操作按钮，收银台的支付方式的菜单列表样式end------------------- */
/*-- ----遮罩层样式---- */
/* overlayContainer下
如果class上有insetPageMode,那么overlayContentHead和overlayCategoryMenus就不显示了
*/
.overlayContainer{position:fixed;z-index:99;left:0;top:0;width:100%;height: 100%;display: none;}
.overlayContainer iframe{border: none;}
.overlayOpa {background-color: #000;opacity: 0.32;position: absolute;width: 100%;height: 100%;}
.overlayContent{position: absolute;left: 200px;top: 0;bottom: 0;right: 0;width: calc(100% - 200px);background-color: #f8f9fa;}
@media screen and (max-width: 1024px){
.overlayContent{
width: 100%;
}
}
.overlayContainer.fullWidth .overlayContent{left: 0;width: 100%;}
.overlayContentHead{
position: absolute;
width: 100%;
height: 64px;
line-height: 64px;
background-color: #fff;
border-bottom: 1px solid #dadce0;
z-index: 3;
}
.insetPageMode .overlayContentHead.fullPageHead,
.insetPageMode .overlayCategoryMenus.fullPageMenus{
display: none;
}
.insetPageMode .overlayContentBody.fullPageBody{
top: 0;
}
.overlayClose, .overlayClose:hover{
position: absolute;
top:50%;
left: 20px;
margin-top: -20px;
margin-left: 0;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
text-align: center;
color: #80868b;
font-size: 24px;
font-family: "Material Icons Extended";
letter-spacing: 0;
cursor: pointer;
padding: 0;
background-color: transparent;
background-image: none;
box-shadow: none;
border: none;
outline: none;
transition: color,background-color .5s;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
.overlayClose:hover{
color: #000;
background-color: #ddd;
}
.overlayEditContainer{
position: absolute;
top: 0;
right: 30px;
}
.overlayContentHead .overlayMenuButton{
/*border: 1px solid #1a73e8;
background-color: #1a73e8;*/
border:none;
outline: none;
background-color: var(--color-main-blue);
background-image: none;
color: #fff;
height: 36px;
line-height: 36px;
margin-right: 22px;
padding: 0 24px 0 24px;
-webkit-transition: 280ms cubic-bezier(0.4,0,0.2,1),box-shadow 280ms cubic-bezier(0.4,0,0.2,1);
transition: 280ms cubic-bezier(0.4,0,0.2,1),box-shadow 280ms cubic-bezier(0.4,0,0.2,1);
-webkit-transition-property: color,border,background-color,box-shadow;
transition-property:color,border,background-color,box-shadow;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 3px;
text-align: center;
cursor: pointer;
}
/*.overlayContentHead .overlayMenuButton:hover{
background-color: #1b67cc;
border-color: #1b67cc;
}
.overlayContentHead .overlayMenuButton:active{
background-color: #1c5bb0;
border-color: #1c5bb0;
}*/
.overlayContentHead .overlayMenuButton:disabled{
background-color: #808080;
border-color: #808080;
}
.overlayMenuButton.closeandsave{
font-size: 20px;
color: #006;
padding: 0 16px 0 16px;
margin-right: 10px;
}
.overlayMenuButton.deleallbene{
font-size: 20px;
color: red;
padding: 0 16px 0 16px;
-webkit-transition: 2000ms cubic-bezier(0.4,0,0.2,1),background-color 1500ms cubic-bezier(0.4,0,0.2,1);
transition: 2000ms cubic-bezier(0.4,0,0.2,1),background-color 1500ms cubic-bezier(0.4,0,0.2,1);
}
.overlayMenuButton.nextStepButton{
font-size: 26px;
color: #006;
padding: 0 10px 0 16px;
}
.overlayMenuButton.deleallbene:hover{
color: #fff;
background-color: red;
-webkit-box-shadow: 0 3px 1px -2px #ccc, 0 2px 2px 0 #dbdbdb, 0 1px 5px 0 #dbdbdb;
box-shadow: 0 3px 1px -2px #ccc, 0 2px 2px 0 #dbdbdb, 0 1px 5px 0 #dbdbdb;
}
.overlayMenuButton.nextStepButton, .overlayMenuButton.closeandsave, .overlayMenuButton.deleallbene{
position: relative;
height: 32px;
line-height: 32px;
vertical-align: middle;
background-color: #fff;
}
.overlayMenuButton.nextStepButton.prevStepButton{
transform: scaleX(-1);
}
.overlayMenuButton.nextStepButton .forwardLine{
position: absolute;
right: 13px;
top: 10px;
bottom: 10px;
width: 2px;
background-color: #006;
transition:background-color 280ms cubic-bezier(0.4,0,0.2,1),box-shadow 280ms cubic-bezier(0.4,0,0.2,1);
}
.overlayMenuButton.nextStepButton:hover .forwardLine{
background-color: #fff;
}
.overlayMenuButton.nextStepButton:hover, .overlayMenuButton.closeandsave:hover{
color: #fff;
background-color: #006;
-webkit-box-shadow: 0 3px 1px -2px #ccc, 0 2px 2px 0 #dbdbdb, 0 1px 5px 0 #dbdbdb;
box-shadow: 0 3px 1px -2px #ccc, 0 2px 2px 0 #dbdbdb, 0 1px 5px 0 #dbdbdb;
}
.nextStepButtonBlue,
.nextStepButton.nextStepButtonBlue,
.nextStepButtonBlue[type="button"]{
line-height: 32px;
background-color: #006;
background-image: none;
color: #fff;
padding: 0 10px 0 13px;
box-shadow: none;
border-radius: 3px;
border: none;
outline: none;
cursor: pointer;
transition: background-color .2s linear;
}
.nextStepButtonBlue:hover{
background-color: #44448f;
border: none;
}
.nextStepButtonBlue:active{
background-color: #000055;
}
.overlayTitleBox{
float: left;
height: 40px;
font-size: 22px;
line-height: 40px;
margin-top: 12px;
margin-left: 70px;
color: #ff8e07;
}
.overlaySubtitle {
height: 16px;
line-height: 16px;
color: var(--color-main-text);
}
.overlayTitle{
line-height: 28px;
font-family: Helvetica, Arial,sans-serif;
}
.overlaymainTitle {
color: #222;
font-size: 22px;
line-height: 28px;
}
.overlaySummary {
color: var(--color-main-text);
font-size: 12px;
line-height: 16px;
letter-spacing: .3px;
margin: 0 8px;
}
.scrollShadow {
-webkit-transition: box-shadow .1s ease-in-out;
transition: box-shadow .1s ease-in-out;
}
.overlayCategoryMenus {
margin-top: 64px;
height: 2px;
background-color: transparent;
position: relative;
z-index: 1;
}
.noneCategoryMenus .overlayCategoryMenus{
height: 2px;
}
.needCategoryMenus .overlayCategoryMenus{
height: 48px;
line-height: 48px;
}
.overlayCategoryMenus .categoryMenu{
float: left;
height: 48px;
line-height: 48px;
padding: 0;
margin: 0 10px;
cursor: pointer;
color: #666;
font-size: 14px;
}
.overlayCategoryMenus .categoryMenu:first-child{
margin-left: 40px;
}
.overlayCategoryMenus .categoryMenu.selected{
border-bottom: 4px solid #3b7bea;
color: #3b7bea;
}
.categoryMenuUnderline{
display: none;
position: absolute;
left: 0;
bottom: 0;
background-color: var(--color-main-yellow);
width: 0;
height: 2px;
}
.scrollShadowOn {
-webkit-box-shadow: 0 0 10px silver;
box-shadow: 0 0 10px silver;
}
/* 分页标签样式start----------------------------------------------- */
.matTabLabelContainer{
padding-left: 8px;
height: 48px;
line-height: 48px;
color: #202124;
border-bottom: 1px solid #dbdbdb;
position: relative;
}
.matTabLabelContainer .matTabLabels{
float: left;
}
.matTabLabelContainer .matTabLabel{
position: relative;
cursor: pointer;
height: 48px;
margin: 0;
padding: 0 16px;
font-size: 14px;
float: left;
overflow: hidden;
transition: color .2s;
user-select: none;
}
.matTabLabelContainer.font16 .matTabLabel{
font-size: 16px;
}
.matTabLabelContainer .matTabLabelContent{
pointer-events: none;
position: relative;
}
.matTabLabelContainer .matTabLabel.matTabLabelActive{
color: #4285f4;
}
.matTabLabelContainer .matTabLabel.matTabLabelActive .matTabLabelContent:after {
content: " ";
border-radius: 3px 3px 0 0;
height: 3px;
position: absolute;
bottom: 0px;
background-color: #4285f4;
width: 100%;
left: 0;
}
.matTabLabelContainer .matTabLabel.matTabLabelAnimating .matTabLabelContent:after{
display: none;
}
.matTabLabelContainer .matRippleElement{
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
pointer-events: none;
-webkit-transition: opacity,-webkit-transform 0ms cubic-bezier(0,0,.2,1);
transition: opacity,-webkit-transform 0ms cubic-bezier(0,0,.2,1);
-o-transition: opacity,-o-transform 0ms cubic-bezier(0,0,.2,1);
transition: opacity,transform 0ms cubic-bezier(0,0,.2,1);
transition: opacity,transform 0ms cubic-bezier(0,0,.2,1),-webkit-transform 0ms cubic-bezier(0,0,.2,1),-o-transform 0ms cubic-bezier(0,0,.2,1);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
background-color: #4285f41f;
}
.matTabLabelContainer .matInkBar{
pointer-events: none;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
height: 3px;
position: absolute;
bottom: 0px;
background-color: #4285f4;
transition: width,left .2s;
}
/* 分页标签内容页start---------- */
.matTabBodyWrapper {
position: relative;
display: flex;
display: -ms-flexbox;
transition: height 500ms cubic-bezier(0.35, 0, 0.25, 1);
}
.matTabBody {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
display: none;
flex-basis: 100%;
transition: all 500ms cubic-bezier(0.35, 0, 0.25, 1);
transform:translate3d(100%, 0px, 0px);
}
.matTabBody.matTabBodyActive {
z-index: 1;
flex-grow: 1;
display: block;
position: static;
transform: translate3d(0px, 0px, 0px);
}
/* 分页标签内容页end---------- */
/* 分页标签样式end----------------------------------------------- */
/* 区块标签样式start---------------------------------------------- */
.matCardGroup{
background-color: #fff;
border-radius: 8px;
border: 1px solid #dadce0;
margin: 32px auto;
}
.matCardGroup .matCardTitle{
font-size:16px;
height: 55px;
line-height: 55px;
border-bottom: 1px solid #dadce0;;
padding: 0 24px;
overflow: hidden;
}
.matCardGroup.closed .matCardTitle{
border-bottom-color: transparent;
}
.matCardGroup .matCardTitle .leftTitle{
float: left;
position: relative;
}
.matCardGroup.closed .leftTitle{
display: none;
}
.matCardGroup .matCardTitle .leftTitle .leftTitleDescription{
font-size: 12px;
line-height: 12px;
color: #9e9e9e;
margin-left: 5px;
}
.matCardGroup .matCardTitle .matCardTitleTip{
font-size: 12px;
color: #9e9e9e;
opacity: 0;
transition: opacity .3s;
position: absolute;
white-space: nowrap;
left: 0;
line-height: 12px;
transform-origin: left top;
bottom: 6px;
}
.matCardGroup.showTip .matCardTitle .matCardTitleTip,
.matCardGroup.closed .matCardTitle .matCardTitleTip{
opacity: 1;
}
.matCardGroup .matCardTitle .matCardExpand{
float: right;
text-align: center;
cursor: pointer;
}
.matCardGroup .matCardTitle .matCardExpand .fa{
transition: all .3s;
color: #b8b8b8;
}
.matCardGroup .matCardTitle:hover .matCardExpand .fa{
color: var(--color-main-link);
}
.matCardGroup.closed .matCardExpand .fa{
transform: rotate(-90deg);
}
.matCardGroup .matCardTitle .dimensions{
padding-top: 6px;
height: 49px;
}
.matCardGroup .matCardTitle .dimension{
font-size: 12px;
color: lightgray;
cursor: pointer;
margin-left: 10px;
}
.matCardGroup .matCardTitle .dimension.select_on{
color: var(--color-main-link);
}
.matCardGroup .matCardTitle .dimension:first-child{
margin-left: 0;
}
/* 位于标签页右上角的菜单，如果没带这个，就是位于左上角了 */
.matCardGroup .rightMenus.matCardMenus{
float: right;
margin-right: 24px;
height: 49px;
padding-top: 6px;
}
.matCardGroup .matCardMenu,.matCardGroup .matCardMenuTip{
color: #b8b8b8;
margin-left: 16px;
}
.matCardGroup .matCardMenuTip .tip{
font-size: 12px;
transform: scale(.75);
}
.matCardGroup:hover .matCardMenu{
color: var(--color-main-link);
}
.matCardGroup .matCardMenuTip .matCardMenu{
margin-left: 0;
}
.matCardGroup .matCardContent{
padding: 30px 24px;
}
.matCardGroup .scrollMatCardContent{
position: relative;
padding: 0;
}
.matCardGroup .scrollMatCardContent .leftMask,.matCardGroup .scrollMatCardContent .rightMask{
position: absolute;
top: 0;
left: 0;
bottom: 20px;
width: 24px;
background-color: #fff;
z-index: 2;
}
.matCardGroup .scrollMatCardContent .rightMask{
left: unset;
right: 0;
}
.matCardGroup .scrollMatCardContent .scrollMain{
padding: 30px 24px;
overflow: auto;
}
.matCardGroup .matCardContent.matTabBodyWrapper{
padding: 0;
}
.matCardGroup .matCardContent.matTabBodyWrapper .matTabBody{
padding: 30px 24px;
width: 100%;
box-sizing: border-box;
}
/* 区块标签样式end------------------------------------------------ */
@keyframes loadingAnimate {
0% {left: -50%;}
40% {left: 150%;}
40.1%{visibility: hidden}
40.2%{left: -50%;}
40.3%{visibility: visible;}
60% {left: 150%;}
60.1%{visibility: hidden}
60.2%{left: -50%;}
60.3%{visibility: visible;}
100%{left: -50%;}
}
.overlayContentBody {
position: absolute;
top: 65px;
width: 100%;
bottom: 0;
overflow-y: auto;
background-color: #f8f9fa;
}
.noneCategoryMenus .overlayContentBody{
top: 62px;
}
.needCategoryMenus .overlayContentBody{
top: 112px;
}
.categoryContainer {
display: none;
}
/* 划出版弹出窗口end-------------------------------------------- */
/* 关于列表式横排输入框的相关样式start-------------------------- */
.listTable tr td{
padding: 0px;
vertical-align: middle;
white-space: nowrap;
}
/* 关于列表式横排输入框的相关样式end----------------------------- */
/* 各种按钮上的点击的时候波浪特效start---------------------- */
.animationRipple{
position: relative;
overflow: hidden;
}
.matRippleElement{
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
pointer-events: none;
-webkit-transition: opacity,-webkit-transform 0ms cubic-bezier(0,0,.2,1);
transition: opacity,-webkit-transform 0ms cubic-bezier(0,0,.2,1);
-o-transition: opacity,-o-transform 0ms cubic-bezier(0,0,.2,1);
transition: opacity,transform 0ms cubic-bezier(0,0,.2,1);
transition: opacity,transform 0ms cubic-bezier(0,0,.2,1),-webkit-transform 0ms cubic-bezier(0,0,.2,1),-o-transform 0ms cubic-bezier(0,0,.2,1);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
background-color: #4285f41f;
}
/* 各种按钮上的点击的时候波浪特效end---------------------- */
/* 搜索框样式start---------------------- */
.overlaySearch {
position: absolute;
top: 4px;
left: 30%;
margin: 8px auto;
width: 500px;
height: 40px;
line-height: 40px;
transition: box-shadow .2s;
border-radius: 5px 5px 0 0;
background-color: rgb(241, 243, 244);
}
.overlaySearch:before{
color: #80868b;
content: "search";
font-family: "Material Icons Extended";
font-size: 24px;
height: 40px;
line-height: 40px;
margin: 0 16px;
width: 24px;
z-index: 0;
position: absolute;
font-feature-settings: 'liga';
}
.overlaySearchSubmit {
color: #80868b;
width: 24px;
height: 40px;
font-size: 24px;
line-height: 40px;
margin: 0 12px;
left: 0;
position: absolute;
cursor: pointer;
text-align: center;
background-color: transparent;
background-image: none;
box-shadow: none;
border: none;
outline: none;
}
.overlaySearchClear {
color: #80868b;
width: 40px;
height: 40px;
font-size: 24px;
line-height: 40px;
right: 10px;
padding: 0;
position: absolute;
cursor: pointer;
text-align: center;
opacity: 0;
display: inline-block;
transition: opacity .2s;
background-color: transparent;
background-image: none;
box-shadow: none;
border: none;
outline: none;
}
.overlaySearch:focus, .overlaySearch:hover {
background-color: #fff;
box-shadow: 0px 2px 4px -1px #ccc, 0px 4px 5px 0px #dbdbdb, 0px 1px 10px 0px #dbdbdb;
}
.overlaySearch .overlaySearchInput {
width: 460px;
height: 40px;
color: var(--color-main-text);
line-height: 40px;
border: none;
background-color: transparent;
font-size: 16px;
margin-left: 56px;
position: absolute;
left: 0;
outline: none;
}
.overlaySearchInput::placeholder {
color: #cfcfcf;
}
.overlaySearch.focus .overlaySearchClear, .overlaySearch:hover .overlaySearchClear {
opacity: 1;
}
/* 搜索框样式end---------------------- */
/* 浮动菜单类似谷歌版start */
/*
结构：
纯js调用方式见showMenuList方法
*/
.showMenuList{
display: none;
position: fixed;
border-radius: 2px;
box-shadow: 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%), 0px 5px 5px -3px rgb(0 0 0 / 20%);
background-color: #fff;
overflow: hidden;
white-space: nowrap;
z-index: 9999;
}
.showMenuList .menuContainer{
padding: 8px 0;
}
.showMenuList .separatorLine{
height: 1px;
margin: 7px 0;
background-color: #e1e1e1;
}
.showMenuList .title{
height: 20px;
line-height: 20px;
padding-bottom: 10px;
padding-left: 24px;
font-size: 12px;
color: #a1a1a1;
}
.showMenuList .menu{
position: relative;
padding-left: 64px;
padding-right: 48px;
}
.showMenuList .menu.noIcon{
padding-left: 12px;
padding-right: 12px;
}
.showMenuList .menu:hover{
background-color: #eee;
cursor: pointer;
}
.showMenuList .menuIcon{
position: absolute;
width: 24px;
height: 24px;
top: 50%;
margin-top: -12px;
left: 24px;
}
.showMenuList .menuIcon .besticon{
vertical-align: -1px;
}
.showMenuList .menuDesc{
line-height: 40px;
color: #3c4043;
}
/* 浮动菜单类似谷歌版end */
/* table样式start */
/* 九宫格式表格 start -------------------------------------------
每个td的宽度如果不指定的话，完全的平均分配表格宽度
td之间的间隔为80px(两个相邻的td各自有40px的内边距)
*/
/* 九宫格类的表格：宽度100%，不会动态添加一行，每列宽度固定占有多少百分比或者像素，多行显示一类信息 */
.squaredTable{
table-layout: fixed;
}
.squaredTable td{
padding: 0 40px;
}
.squaredTable td:first-child{
padding-left: 0;
}
.squaredTable td:last-child{
padding-right: 0;
}
/* 九宫格式表格 end -------------------------------------------*/
/* 九宫格,以grid来实现 start------------------------------------------ */
/* 以col控制列数;内部需要跨列的写法：style="grid-column: span 2;" 或者设置属性colspan=2*/
.squaredGrid{
display: grid;
grid-template-columns: repeat(3, 1fr);
-ms-grid-template-columns: repeat(3, 1fr);
-webkit-grid-template-columns: repeat(3, 1fr);
grid-column-gap: 80px;
-ms-grid-column-gap: 80px;
-webkit-grid-column-gap: 80px;
}
.squaredGrid[col="2"]{
grid-template-columns: repeat(2, 1fr);
-ms-grid-template-columns: repeat(2, 1fr);
-webkit-grid-template-columns: repeat(2, 1fr);
}
.squaredGrid[col="4"]{
grid-template-columns: repeat(4, 1fr);
-ms-grid-template-columns: repeat(4, 1fr);
-webkit-grid-template-columns: repeat(4, 1fr);
}
.squaredGrid[col="5"]{
grid-template-columns: repeat(5, 1fr);
-ms-grid-template-columns: repeat(5, 1fr);
-webkit-grid-template-columns: repeat(5, 1fr);
}
.squaredGrid[col="6"]{
grid-template-columns: repeat(6, 1fr);
-ms-grid-template-columns: repeat(6, 1fr);
-webkit-grid-template-columns: repeat(6, 1fr);
}
.squaredGrid>[colspan="2"]{
grid-column: span 2;
}
.squaredGrid>[colspan="3"]{
grid-column: span 3;
}
.squaredGrid>[colspan="4"]{
grid-column: span 4;
}
.squaredGrid>[colspan="5"]{
grid-column: span 5;
}
.squaredGrid>[colspan="6"]{
grid-column: span 6;
}
/* 九宫格,以grid来实现 end-------------------------------------------- */
/* 仿谷歌列表样式start------------------------------------------------ */
.googleTable{
table-layout: unset;
}
.googleTable[resizable] .resizableCell{
position: relative;
}
.googleTable[resizable] .resizableButton{
position: absolute;
z-index: 3;
top: 0;
bottom: 0;
right: -5px;
width: 10px;
cursor: col-resize;
}
.googleTable td{
padding: 8px 16px;
line-height: 20px;
background-color: #fff;
border-top: 1px solid var(--color-light-border);
}
.googleTable .index{
padding-left: 8px;
text-align: right;
}
.googleTable .showMoreMenu{
position: relative;
}
.googleTable .showMoreMenu .materialIcons{
position: absolute;
font-size: 18px;
cursor: pointer;
display: none;
top: 0;
right: -16px;
}
.googleTable td:hover .showMoreMenu .materialIcons{
display: block;
}
.googleTable .leftTitle{
border-right:1px solid #dadce0;
}
.googleTable .rightInnerBorder:before{
/*position: sticky的时候，table滚动后td的边框不会停在原地，所以要想其他方法创造边框*/
content: " ";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 1px;
background-color: #dadce0;
/*border-left: 1px solid #dadce0;*/
}
.googleTable .tableContent tr:last-child td{
border-bottom: 1px solid var(--color-light-border);
}
.googleTable .tableHeader td{
border-top: none;
}
.googleTable .cellWrapper{
position: relative;
}
.googleTable .cellWrapper .resizeLine{
position: absolute;
width: 8px;
top: -8px;
bottom: -8px;
right: -20px;
cursor: col-resize;
}
.googleTable .fieldContainer{
margin: 0;
}
.googleTable .field{
height: 20px;
line-height: 20px;
background-color: transparent;
}
/*.googleTable .tableContent tr:nth-child(2n - 1) td{
background-color: #f8f9fa;
}*/
.googleTable .tableContent tr td.hovering,
.googleTable .tableHeader tr td.hovering
{
background-color: #f1f3f4;
}
.googleTable .tableContent tr:hover td,
.googleTable .tableContent tr .rowHovering
{
background-color: #e8eaed;
}
.googleTable .tableContent tr td.noHover{
background-color: #fff;
}
.googleTable .tableContent .hoverAnimate:hover{
background-color: #dadce0;
}
.googleTable .fixedCell,.googleTable .resizableCell.fixedCell,.rightFixedCell{
position: sticky;
left: 0;
z-index: 2;
}
.googleTable .rightFixedCell{
right: 0;
padding: 0;
}
.googleTable .rightFixedCell.scrolling:before{
-webkit-border-end: 1px solid #80868b;
-moz-border-end: 1px solid #80868b;
border-inline-end: 1px solid #80868b;
box-shadow: inset -3px 0 3px -2px #80868b;
-moz-box-sizing: border-box;
box-sizing: border-box;
content: "";
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 5px;
}
.googleTable .fixedCell.scrolling.leftTitle:after {
-webkit-border-start: 1px solid #80868b;
-moz-border-start: 1px solid #80868b;
border-inline-start: 1px solid #80868b;
box-shadow: inset 3px 0 3px -2px #80868b;
-moz-box-sizing: border-box;
box-sizing: border-box;
content: "";
height: 100%;
position: absolute;
right: -5px;
top: 0;
width: 5px;
}
/* 仿谷歌列表样式end-------------------------------------------------- */
/* 填入内容的列表式表格 start --------------------------------------
由表头和内容两部分组成，表头可能会有标题和操作菜单
表头上的操作按钮均可以在这里写一份，以作为公用的按钮