ttk-app-core
Version:
enterprise develop framework
1,201 lines (1,166 loc) • 39.8 kB
text/less
@keyframes rotation{//
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.rotation{
transform-origin:50% 50%;
-webkit-transform: rotate(360deg);
animation: rotation 1s linear infinite;
-moz-animation: rotation 1s linear infinite;
-webkit-animation: rotation 1s linear infinite;
-o-animation: rotation 1s linear infinite;
}
.ripple {
// width:200px;
// height:200px;
border-radius: 50%;
// box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
-webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 1s;/*动画持续时间*/
-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 0s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/
}
@keyframes ripple {
0% {
transform: scale(1)
}
100% {
transform: scale(1.1)
}
}
.inventoryCosting-modal-container{
font-size: 12px;
.inventoryCosting{
.ant-form-item{
display: flex;
margin-bottom: 0px;
}
.inventoryCosting-content{
font-size: 12px;
.tips{
color: #FA954C;
padding-left: 62px;
margin-bottom: 10px;
}
.content{
display: flex;
div{
height: 32px;
line-height: 32px;
}
.contentRight{
margin-left: 15px;
}
// .td_input_antNumber{
// display: inline-block;
// }
}
}
.btnContainer{
text-align: center;
margin-top: 20px;
}
.ant-form-item-control{
label{
font-size: 12px;
}
}
.ant-form-item-control-wrapper{
display: inline-block;
}
}
.td_input_antNumber{
width: 100%;
overflow: hidden;
display: inline;
.ant-input-number {
// width: 100%;
.ant-input-number-handler-wrap{
display: none;
}
input {
text-align: right;
}
}
}
}
.app-account-monthaccount{
width: 100%;
height: 100%;
padding: 10px;
overflow: auto;
display: block;
.generateBtn[disabled]{
color: rgba(0, 0, 0, 0.25);
border-color: #d9d9d9;
&:hover{
background: #f5f5f5;
color: rgba(0, 0, 0, 0.25);
}
}
.generateBtn{
color: @primary-color;
border:1px solid @primary-color;
&:hover{
background: @primary-color;
color: #fff;
}
}
.ant-spin-nested-loading{
// @diff : 58px;
// height: -moz-calc(~"100% - @{diff}");
// height: -webkit-calc(~"100% - @{diff}");
// height: calc(~"100% - @{diff}");
position: absolute;
left: 0;
// top: 58px;
width: 100%;
height: 100%;
// padding-bottom: 58px;
// overflow-y: scroll;
}
.ant-spin-container{
height: 100%;
padding-right: 10px;
}
.refresh{
width: 30px;
height: 30px;
font-size: 28px;
border-radius: 5px;
border: 1px solid #D9D9D9;
cursor: pointer;
color: #45ACF7;
background: #fff;
float: left;
margin-left: 10px;
&:hover{
border-color: #45ACF7;
}
}
&-header{
padding: 10px;
border: 1px solid #E4E4E4;
display: block;
background: #fff;
height: 50px;
overflow: hidden;
// padding-right: 0px;
border: 1px solid #d9d9d9;
// &-leftDiv {
// display: inline-block;
// line-height: 54px;
// height: 54px;
// margin: 0px 2px;
// background: @primary-color;
// &:hover{
// background: @top-hover;
// }
&-left {
cursor:pointer;
// width: 80px;
float: left;
input{
height: 30px;
width: 80px;
font-size: 12px;
// line-height: 30px;
}
.ant-calendar-picker-icon {
// right: 11px ;
&:after{
// font-family: "edficon" ;
// content: "\E60F";
// font-size: 20px;
// cursor: pointer;
// line-height: 14px;
// color: #fff;
// -webkit-font-smoothing: antialiased;
// -moz-osx-font-smoothing: grayscale;
}
}
.ant-calendar-picker-input, .ant-calendar-picker-input:hover, .ant-calendar-picker-input:focus{
// font-size: 12px ;
// height: 54px;
// border-radius: 0;
// background-color: rgba(0,0,0,0);
// cursor:pointer;
// border: none ;
// color: #fff;
// padding: 0px 5px 0px 10px ;
}
}
&-datePicker {
// left: 253px ;
// top: 54px ;
&:after{
// content: '';
// position: absolute;
// width: 0;
// height: 0;
// border-style: solid;
// border-width: 16px;
// border-color: #ffffff #ffffff transparent transparent;
// transform: rotate(315deg);
// top: 2px;
// left: 10px;
}
.iconCustom{
color: @primary-color;
}
.ant-calendar-month-panel-selected-cell {
.iconCustom{
color: #FFFFFF;
}
}
}
// }
// &-left{
// float: left;
// input{
// height: 30px;
// width: 80px;
// font-size: 12px;
// line-height: 30px;
// }
// }
&-right{
float: right;
display: flex;
align-items: center;
height: 32px;
line-height: 32px;
&-setting{
label{
margin-right: 2px;
}
}
span{
font-size: 12px;
}
.create{
color: @primary-color;
border: 1px solid @primary-color;
}
}
}
&-content{
background: #fff;
padding: 10px ;
position: absolute;
top: 50px;
bottom: 10px;
/* width: 100%; */
left: 0;
right: 10px;
border: 1px solid #d9d9d9;
border-top: none;
.ant-spin-nested-loading > div > .ant-spin{
margin-top: 75px;
}
.app-account-final-cerficate{
// width: 100%;
// height: 100%;
overflow: auto;
// background: #fff;
.check{
text-align: left;
padding-top: 8px;
padding-left: 12px;
.checkAllbtn{
font-size: 12px;
}
}
&-header{
padding: 0px 12px;
overflow: hidden;
&-left{
float: left;
}
&-right{
float: right;
}
}
&-content {
padding: 12px;
margin-left: 0px;
overflow: hidden;
padding-top: 8px;
&-list {
// display: flex;
.item {
width: 250px;
height: 150px;
margin-right: 10px;
float: left;
margin-bottom: 10px;
border: 1px solid #d9d9d9;
position: relative;
border-radius: 3px;
&:hover{
cursor: pointer;
background: #fff ;
border: 1px solid @button-hover-color;
box-shadow: 0 0 0 1px @button-hover-color;
}
.header {
height: 37px;
line-height: 37px;
background: #F5F5F5;
padding-left: 10px;
padding-right: 5px;
color: #252525;
i{
font-size: 26px;
height: 37px;
line-height: 37px;
&:hover{
cursor: pointer;
color: @primary-color
}
}
.headerLeft{
float: left;
width: 155px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #494949;
}
.headerRight{
float: right;
}
}
.content{
font-size: 12px;
border-top: 1px solid #d9d9d9;
.subContent{
padding: 10px;
.amount{
color: #494949;
}
}
}
.footer{
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
.triangle{
float: left;
margin-right: 8px;
// width: 0;
// height: 0;
// border-bottom: 50px solid #ededed;
// border-left: 50px solid transparent;
// position: absolute;
// right: 5px;
// bottom: 2px;
&:hover{
cursor: pointer;
// border-bottom: 50px solid @primary-color;
}
i{
position: absolute;
right: 0px;
top: 18px;
font-size: 36px;
color: #fff;
}
}
.checked.triangle{
border-bottom: 50px solid @primary-color;
}
}
.disabledItem.item{
.triangle{
&:hover{
cursor: no-drop;
// border-bottom: 50px solid #ededed;
}
}
}
}
&-add {
width: 250px;
height: 150px;
border: 1px dashed #d9d9d9;
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
float: left;
&:hover{
border:1px dashed @primary-color;
cursor: pointer;
.addIcon{
color: @primary-color;
}
}
&-container{
display: flex;
.addIcon{
font-size: 60px;
color: #d9d9d9;
&:hover{
// color: @primary-color;
}
}
.addTitle{
color: #666;
height: 28px;
line-height: 28px;
}
&:hover{
cursor: pointer;
// color: @primary-color
}
}
}
}
}
.month-left {
width: 23%;
height: 100%;
// min-height: 480px;
min-width: 220px;
max-width: 310px;
&:hover{
cursor: pointer;
}
&>div:first-child{
background: #EFFAFA;;
border-bottom: 1px dashed #e8e8e8;
.menuTitle{
margin-bottom: 20px;
}
}
&>div:nth-child(2){
background: #FFF7F3;
border-top: none;
}
.menu{
height: 50%;
// border: 1px solid #e8e8e8;
display: flex;
position: relative;
.menuLeft{
width: 3px;
background: transparent;
}
.menuRight{
width: 100%;
text-align: center;
.viewCerficate{
background: #42C9C1;
border: none;
border-radius: 21px;
color: #fff;
padding: 0px 20px;
font-size: 12px;
margin-top: 10px;
position: absolute;
bottom: 5px;
/* margin: 0 auto; */
left: 50%;
/* right: 50%; */
transform: translate(-50%,-50%);
&:hover{
background: #449590;
}
}
.quanWap {
width: 100%;
height: 150px;
overflow: hidden;
position: relative;
margin-bottom: 10px;
// margin-top: 80px;
// background: url(./img/xlBg2.png) repeat-x center;
.div2{
background: url(./images/shixin.png) no-repeat center;
}
.div1{
width: 140px ;
height: 140px ;
z-index: 999;
background: url(./images/circle.png) no-repeat center;
}
.div{
width: 140px;
height: 140px;
position: absolute;
top: 42%;
left: 0;
right: 0;
// margin: -60px 0 0 -60px;
text-align: center;
cursor: pointer;
margin: -60px auto;
}
.top100 {
margin-top: 30px;
/* height: 100%; */
vertical-align: middle;
height: 140px;
line-height: 70px;
.zsNum{
font-size: 17px;
font-weight: bold;
color: #fff;
}
}
}
.clearfix:before, .clearfix:after {
display: table;
line-height: 0;
content: "";
}
.menuTitle{
margin: 20px 0px;
text-align: center;
margin-bottom: 10px;
.num{
display: inline-block;
width: 29px;
height: 29px;
line-height: 25px;
border-radius: 50%;
border: 2px solid #1EB5AD;
text-align: center;
margin-right: 5px;
color: #4AA59F;
font-size: 18px;
}
.name{
font-size: 18px;
color: #1EB5AD;
}
}
.icon{
// height: 36%;
img{
height: 100%;
}
// background: url(./images/certi.png) no-repeat center;
// width: 120px;
// height: 120px;
// margin: 0 auto;
// background-size: 110px 110px;
}
}
.arrow{
display: none;
position: absolute;
height: 0px;
width: 0px;
border-top: 9px solid transparent;
border-right: 10px solid #fff;
border-bottom: 10px solid transparent;
right: -6px;
top: 50%;
/* bottom: 50%; */
transform: translate(-50%,-50%);
}
// .currentLine{
// background: #1dba5c;
// }
// &:hover{
// cursor: pointer;
.currentLine2{
background: #FF8122;
}
.currentLine1{
background: #4ABCB1;
}
// }
}
// .menu:first-child .menuTitle{
// margin-bottom: 20px;
// }
.menu1{
.menuTitle{
.num{
color: #FF8122 ;
border: 2px solid #FF8122 ;
}
.name{
font-size: 18px;
color: #FF8122 ;
}
}
.btnContainer{
position: absolute;
bottom: 5px;
width: 100%;
left: 50%;
transform: translate(-50%,-25%);
.checkBtn{
background: #FFA460;
border: none;
border-radius: 21px;
color: #fff;
padding: 0px 20px;
font-size: 12px;
&:hover{
background: #FF8122;
}
}
.endingClosingBtn{
border: 1px solid #FF9F58;
border-radius: 21px;
color: #fff;
padding: 0px 20px;
font-size: 12px;
color: #FF9F58;
background: transparent;
&:hover{
background: #FF9F58;
color: #fff;
}
}
.endingClosingBtn[disabled]{
&:hover{
background: #f5f5f5;
}
}
.unendingClosingBtn{
margin-right: 0px ;
background: transparent;
}
.endingClosingBtn.noEdit{
color: #ccc;
background: #f5f5f5;
border-color: #d9d9d9;
}
}
}
.currentMenu{
.arrow{
display: block;
}
}
.currentMenuAccount{
// border-left: 3px solid red;
}
.currentMenuCerficate{
// border-left: 3px solid #1dba5c;
}
}
}
// display: flex;
// flex-direction: row;
// flex: 1;
// overflow: hidden;
.redSign{
color:#FD4A4A;
&:hover{
}
.itemIcon.edficon-jinggao{
color: #e94033 ;
}
}
.yellowSign{
color: #FA954C ;
}
.subItem{
display: flex;
height: 45px;
line-height: 45px;
border-bottom: 1px dashed #ececec;
flex-direction: row;
align-items: center;
}
.app-account-final-cerficate-content{
// display: none;
}
.month-right {
height: 100%;
// border: 1px solid #e7e6e6;
border-radius: 2px;
// background: #fff;
max-height: 100%;
overflow-y: auto;
position: absolute;
left: 24%;
top: 0;
right: 0;
.account-header {
// display: flex;
// justify-content: flex-end;
padding: 15px;
border-bottom: 1px solid #ececec;
overflow: hidden;
height: 58px;
.undoMonthEndingClosing{
margin-left: 10px;
}
.nav-header {
height: 30px;
line-height: 30px;
margin-right: 5px;
float: left;
.nav-header-time {
display: inline-block;
.nav-header-subtime{
}
}
}
.nav-header-button {
margin-right: 5px;
float: right;
}
}
.ant-collapse{
border: none;
}
.account-content {
font-size: 12px;
padding: 0px 12px;
background: #fff ;
border-radius: 0px;
padding-bottom: 40px;
// border: 1px solid #ececec;
border-top: none;
.ant-collapse-item-disabled{
.ant-collapse-header{
.item-text{
color: #333;
}
.title-icon{
color: #333;
}
}
.arrow{
}
}
// .ant-collapse-item-active{
.ant-collapse-header{
overflow: hidden;
padding: 5px 0 5px 0px;
font-size: 14px;
border-bottom: 1px solid #dfdcdc;
.arrow{
font-size: 22px;
right: 0px;
left: auto;
transform: rotate(-90deg);
float: right;
font-size: 26px;
&:hover{
color: @link-color;
}
&::before{
//
content: "\e60a";
font-family: "edficon" ;
}
}
}
// }
.ant-collapse-item-disabled{
.arrow{
&:hover{
color: rgba(0, 0, 0, 0.25);
}
}
}
.ant-collapse-header[aria-expanded="true"]{
.arrow{
transform: rotate(90deg);
}
}
.ant-collapse-content{
// background-color: #fff;
border-top: none;
padding-right: 0px;
.ant-collapse-content-box{
padding-top: 10px;
}
}
.account-content-item {
border-bottom: none;
padding: 10px 0;
.item-content{
padding-left: 17px;
.subContent{
height: 45px;
line-height: 45px;
border-bottom: 1px dashed #ececec;
display: flex ;
flex-direction: row;
align-items: center;
justify-content: space-between;
.left{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
}
.itemIcon{
margin-right: 6px;
font-size: 16px;
}
.itemIcon.edficon-chenggongtishi{
color: #00b38a;
}
.itemIcon.edficon-jinggao{
color: #fa954c;
}
.subContent.accountBalance{
height: auto;
border: none;
display: block ;
.subItem{
height: 45px;
line-height: 45px;
flex-direction: row;
align-items: center;
border-bottom: 1px dashed #ececec;
}
}
}
.item-content.assetCheck{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: 1px dashed #ececec;
.subContent{
display: inline ;
border-bottom: none ;
}
}
.item-content.profitLoss{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: 1px dashed #ececec;
.subContent{
border-bottom: none;
display: inline ;
}
.itemIcon{
font-size: 16px;
margin-right: 6px;
}
.itemIcon.edficon-chenggongtishi{
color: #00b38a;
}
.itemIcon.edficon-jinggao{
color: #e94033;
}
}
.item-content1{
position: relative;
.item-btn{
// position: absolute;
// right: 0px;
// bottom: 8px;
// border: none;
&:hover{
border: none;
}
}
.yellowBtn{
// background: #FA954C;
color: #FA954C;
&:hover{
// background: rgba(250,149,76,0.7)
}
}
.redBtn{
float: right;
// background: #FD4A4A;
color: #FD4A4A;
&:hover{
// background: rgba(253,74,74,0.7)
}
}
//
}
.item-title{
overflow: hidden;
height: 40px;
line-height: 40px;
float: left;
// margin-bottom: 10px;
.title-icon{
font-size: 40px;
// float: left;
display: inline-block;
vertical-align: middle;
width: 28px;
margin-right: 5px;
}
.title-icon.arrow-icon{
float: right;
}
.item-text{
// float: left;
display: inline-block;
// vertical-align: middle;
}
.item-btn{
// float: right;
}
}
.item-content{
.pauseMark{
&:hover{
text-decoration: none;
}
}
.subContent {
// display: flex;
// align-items: center;
// height: 30px;
// line-height: 30px;
// .subItem{
.item-left{
display: inline-block;
// margin-right: 20px;
width: 155px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
margin-right: 10px;
}
.item-right{
display: inline-block;
.item-code{
margin-right: 5px;
}
.item-name{
margin-right: 10px;
}
.item-balance{
margin-right: 5px;
}
}
.link{
// display: block;
// text-decoration: underline;
&:hover{
// cursor: pointer;
// text-decoration: underline;
}
}
.item-link{
display: inline-block;
.detail{
text-decoration: underline;
&:hover{
cursor: pointer;
text-decoration: underline;
}
}
}
// float: left;
}
}
}
}
}}
//响应式
//宽度
@media screen and (max-width: 1280px){
.app-account-monthaccount {
.month-right{
// left: 235px;
}
.month-left{
max-width: 250px;
min-width: 220px;
// width: 220px;
}
}
}
@media screen and (max-width:1150px){
.app-account-monthaccount {
.month-right{
left: 235px;
}
.month-left{
width: 220px;
}
}
}
@media screen and (min-width: 1280px) and (max-width:1920px){
.app-account-monthaccount {
.month-right{
// left: 325px;
// left: 28%;
}
.month-left{
max-width: 400px;
// width: 220px;
// width: 310px;
}
}
}
@media screen and (min-width: 1920px){
.app-account-monthaccount {
.month-right{
left: 415px;
// left: 28%;
}
.month-left{
// min-width: 310px;
// max-width: 360px;
// width: 220px;
width: 400px;
}
}
}
// @media screen and (min-width:1920px){
// .app-account-monthaccount {
// .month-right{
// left: 375px;
// // left: 28%;
// }
// .month-left{
// // min-width: 310px;
// // max-width: 360px;
// // width: 220px;
// width: 360px;
// }
// }
// }
//高度
@media screen and (max-height:630px){
.app-account-monthaccount{
.month-left{
height: 444px;
.menuTitle{
}
.viewCerficate{
bottom: 5px ;
}
.btnContainer{
bottom: 5px ;
}
}
}
}
@media screen and (max-height: 635px){
.app-account-monthaccount{
.month-left{
.menu:first-child{
.menuTitle{
margin-bottom: 8px ;
margin-top: 10px ;
}
}
.menu:last-child{
.menuTitle{
margin-bottom: 5px ;
margin-top: 10px ;
}
}
height: 444px;
.viewCerficate{
bottom: 0px ;
}
.btnContainer{
bottom: 0px ;
}
}
.menuRight .quanWap{
height: 145px ;
}
}
}
@media screen and (max-height: 730px) and (min-height:635px){
.app-account-monthaccount{
.month-left{
min-height: 444px;
.menu:first-child{
.menuTitle{
margin-bottom: 15px ;
}
}
.menuTitle{
margin-bottom: 5px ;
}
.viewCerficate{
bottom: 0px ;
}
.btnContainer{
bottom: 0px ;
}
}
.menuRight .quanWap{
height: 145px ;
}
}
}
@media screen and (min-height: 730px) and (max-height: 830px){
.app-account-monthaccount{
.month-left{
min-height: 544px;
.menuTitle{
margin-top: 40px ;
}
.viewCerficate{
bottom: 20px ;
}
.btnContainer{
bottom: 20px ;
}
}
}
}
@media screen and (min-height: 830px) and (max-height:900px){
.app-account-monthaccount{
.month-left{
min-height: 544px;
.menu:first-child{
.menuTitle{
margin-bottom: 20px ;
}
}
.menuTitle{
margin-top: 50px ;
}
.viewCerficate{
bottom: 60px ;
}
.btnContainer{
bottom: 60px ;
}
}
}
}
@media screen and (min-height:900px){
.app-account-monthaccount{
.month-left{
height: 716px;
.menuTitle{
margin-top: 50px ;
}
.viewCerficate{
bottom: 65px ;
}
.btnContainer{
bottom: 65px ;
}
}
}
}
//右侧自适应
@media screen and (min-width:1270px) and (max-width:1597px){
.app-account-final-cerficate{
.app-account-final-cerficate-content-list{
.item{
// width: 32.2% ;
}
}
}
}