123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180 |
- .form-drawing-container{
- position: relative;
- box-sizing: border-box;
- height: calc(100% - 45px);
- padding: 10px;
- display: flex;
- align-items: center;
- justify-content: center;
- .form-drawing{
- width: 100%;
- height: 100%;
- &--mobile{ // 移动端
- width: 375px;
- height: 667px;
- margin: 0 auto;
- padding: 0;
- .form-item-wrap{
- border-radius: 8px;
- }
- }
- }
- .cip-form{
- height: 100%;
- }
- // form-item draggable 组件所在样式
- .form-item-wrap{
- width: 100%;
- box-sizing: border-box;
- min-height: 100%;
- border: 1px dashed #333;
- background: #fff;
- .ghost.form-drawing-item{
- margin: 0;
- width: auto;
- border: 2px solid @danger;
- height: 0;
- overflow: hidden;
- }
- }
- .table-design{
- display: flex;
- width: 100%;
- &.table-design--m{
- .el-form-item__content{
- margin-left: 0 !important;
- flex-grow: 2;
- display: block;
- width: 0;
- }
- .table-design{
- &__index{
- // mobile 特有
- }
- &__drag-wrapper{
- background: #fff;
- height: auto;
- width: 100%;
- overflow-x:hidden;
- overflow-y:auto;
- .form-drawing-item{
- margin: 4px 2px;
- }
- .form-table-options{
- min-height: 100px;
- }
- }
- }
- .form-table-options{
- box-sizing:border-box;
- width: calc(100% - 4px) !important;
- .table-ghost{
- margin: 0;
- box-sizing: content-box;
- height: 0 ;
- width: 99%;
- border: 2px solid @danger;
- overflow: hidden;
- }
- }
- }
- &.table-design--pc{
- .form-table-options{
- height: 100%;
- width: 100%;
- border: 1px dashed #ddd;
- box-sizing:border-box;
- display: flex;
- flex-grow: 2;
- .form-drawing-item{
- .cip-form-item{
- height: 100%;
- .el-form-item{
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- margin: 0;
- &__label{
- box-sizing: border-box;
- line-height: 1em;
- font-weight: bold;
- color: #909399;
- height: 48px;
- display: block;
- width: 100% !important;
- padding: 12px 10px;
- text-align: left;
- background: @tableHeadColor;
- border-bottom: 1px solid #ddd;
- }
- &__content{
- box-sizing: border-box;
- width: 100%;
- flex-grow: 2;
- background: #fff;
- padding: 12px 10px;
- }
- }
- }
- }
- .table-ghost{
- margin: 0;
- box-sizing: content-box;
- height: 99% ;
- width: 0;
- border: 2px solid @danger;
- overflow: hidden;
- }
- }
- }
- .el-form-item__content{
- margin-left: 0 !important;
- flex-grow: 2;
- display: flex;
- width: 0;
- }
- &__drag-wrapper{
- height: 110px;
- flex-grow: 2;
- overflow-x:auto;
- overflow-y:hidden;
- box-sizing: border-box;
- .form-drawing-item{
- margin: 0 2px;
- }
- }
- &__column{
- display: flex;
- flex-direction: column;
- margin: 0;
- border-left: 1px solid #ddd;
- border-bottom: 1px solid #ddd;
- &__label{
- box-sizing: border-box;
- line-height: 1em;
- font-weight: bold;
- color: #909399;
- height: 52px;
- display: block;
- width: 100% !important;
- padding: 12px 10px;
- text-align: left;
- background: @tableHeadColor;
- border-bottom: 1px solid #ddd;
- }
- &__content{
- background: #fff;
- padding: 12px 10px;
- flex-grow: 2;
- display: flex;
- align-items: center;
- }
- }
- }
- // table context draggable 组件所在样式
- }
|