
 @import "@core/scss/theme/config.scss";
 // 图标
 @import "@core/scss/sprite-sheets/icons.scss";
 
 @import "./imageview/viewer.scss";
 
 .cd-source-opt {
     position: relative;
     display: flex;
     &.cd-source-dom {
         height: 100%;
     }
     &.cd-modal-wrap {
         flex-direction: column;
         background: $colorContainerBg;
         .cd-title {
             label {
                 margin-left: 5px;
                 font-size: $fontSizeSmall;
                 color: $colorLight;
             }
             .cd-component-pic-icon {
                 margin: -2px 4px 0 0;
                 vertical-align: middle;
             }
         }
         .cd-modal-content {
             display: flex;
             flex: 1;
             flex-direction: column;
             text-align: left;
             .cd-source-footer {
                 .cd-modal-btns {
                     flex: 1;
                     margin: 0;
                     padding: 0 15px 0 0;
                     text-align: right;
                 }
             }
             .cd-source-hide{
                 visibility: hidden;
             }
         }
         .cd-source-content {
             max-height: 572px;
             height: calc(80vh - 126px);
         }
     }
     .cd-source-content {
         display: flex;
         flex: 1 1 auto;
         .cd-source-folder {
             display: flex;
             flex-direction: column;
             padding-top: 20px;
             width: 225px;
             .cd-source-switch {
                 margin-bottom: 16px;
                 margin-bottom: 0;       //依据产品需求，先屏蔽商图访问入口。通过css来隐藏，以后需要恢复，只要删除这行即可
                 padding: 0 20px;
                 width: 185px;
                 .cd-switch-radio{              //依据产品需求，先屏蔽商图访问入口。通过css来隐藏，以后需要恢复，只要删除这个css定义即可
                     height: 0;
                     border: 0;
                 }
             }
             h3 {
                 line-height: 20px;
                 font-size: $fontSize;
                 font-weight: normal;
                 color: $colorNormal;
             }
             .cd-source-folder-list {
                 position: relative;
                 margin: 10px 0;
                 padding: 0 7px 0 12px;
                 flex: 1;
                 .cd-folder-layout {
                     position: absolute;
                     top: 0;
                     left: 20px;
                     right: 0;
                     bottom: 0;
                     display: none;
                     overflow: auto;
                     &.cd-mouse-disabled{
                         pointer-events: none;
                     }
                     > ul{
                         &::before{
                             content: '';
                             position: absolute;
                             top: 25px;
                             left: 7px;
                             border-left: 1px dashed #ccc;
                             height: calc(100% - 41px);
                         }
                     }
                 }
                 .cd-folder-layout ul{
                     position: relative;
                     padding-left: 12px;
                 }
                 .cd-folder-layout > ul{
                     padding-left: 0;
                 }
             }
             .cd-add-btns {
                 width: 203px;
                 height: 28px;
                 border-radius: 2px;
                 margin: auto;
                 background-color: #fff;
                 border: 1px solid #999;
                 .cd-add-folder-btn {
                     display: block;
                     color: #333;
                     font-size: 12px;
                     text-align: center;
                     line-height: 28px;
                     cursor: pointer;
                     .cd-icons-folderAdd{
                         position: relative;
                         top: -2px;
                         margin-right: 5px;
                         vertical-align: middle;
                     }
                 }
             }
         }
         .cd-source-area {
             display: flex;
             flex: 1;
             flex-direction: column;
             .cd-top-part{
                 overflow: hidden;
                 padding: 20px 40px 10px;
                 .cd-source-crumbs{
                     float: left;
                     max-width: calc(100% - 90px);
                     line-height: 30px;
                     font-size: 12px;
                     color: #666;
                     .cd-crumb-item:hover{
                         cursor: pointer;
                         color: #333;
                         text-decoration: underline;
                     }
                     i{
                         display: inline-block;
                         width: 7px;
                         height: 7px;
                         border-top: 1px solid #333;
                         border-right: 1px solid #333;
                         transform: rotate(45deg);
                         margin: 0 7px 0 2px;
                     }
                 }
                 .cd-source-upload {
                     float: right;
                     flex: 1;
                     text-align: right;
                     .cd-file-upload-btn {
                         padding: 0 15px;
                         font-size: $fontSizeSmall;
                     }
                 }
                 .cd-legal-material {
                     float: right;
                     margin-right: 10px;
                 }
             }
             .cd-top-bar{
                 @include clearFix();
                 position: relative;
                 padding: 10px 0 20px;
                 .cd-source-operate{
                     float: left;
                     font-size: 12px;
                     color: #333;
                     line-height: 30px;
                     .cd-select-all i{
                         font-style: normal;
                         color: #2299FF;
                         margin: 0 2px;
                     }
                     .cd-icons-delete16{
                         left: 2px;
                         top: 3px;
                     }
                     .cd-operate-wrap{
                         display: none;
                     }
                 }
                 .cd-source-search{
                     float: right;
                 }
                 .cd-mult-operate{
                     margin-left: 20px;
                     cursor: pointer;
                     i{
                         position: relative;
                         top: 2px;
                         margin-right: 4.5px;
                     }
                 }
                 .cd-mult-operate-move:hover{
                     i{
                         @extend .cd-icons-sourceMove-hover
                     }
                 }
                 .cd-mult-operate-code:hover{
                     i{
                         @extend .cd-icons-sourceCopy-hover
                     }
                 }
                 .cd-mult-operate-remove:hover{
                     i{
                         @extend .cd-icons-delete16-hover
                     }
                 }
                 input[type="checkbox"]{
                     position: relative;
                     top: -2px;
                     width: 14px;
                     height: 14px;
                     margin-right: 5px;
                 }
             }
             .cd-content-part{
                 flex: 1;
                 padding: 0 40px;
                 background: #fafafa;
             }
             .cd-loader{
                 left: 15px !important;
                 top: 20px !important;
             }
             .cd-source-search {
                 display: flex;
                 height: 30px;
                 line-height: 28px;
                 .cd-source-order {
                     width: 125px;
                     .cd-select-el {
                         vertical-align: top;
                     }
                     label{
                         vertical-align: middle;
                     }
                 }
                 .cd-source-search-input {
                     display: inline-block;
                     margin:0 10px;
                     width: 180px;
                     height: 30px;
                     background-color: $colorContainerBg;
                     border-radius: 2px;
                     overflow: hidden;
                     vertical-align: middle;
                     input {
                         display: inline-block;
                         float: left;
                         padding: 0 10px;
                         width: 100%;
                         height: 30px;
                         line-height: 30px;
                         font-size: $fontSizeSmall;
                         &::placeholder {
                             color: $colorLight;
                         }
                     }
                     .cd-search-btn {
                         display: inline-block;
                         float: right;
                         padding: 9px;
                         height: 16px;
                         text-align: center;
                         vertical-align: middle;
                         span {
                             float: left;
                         }
                     }
                 }
                 .cd-source-search-condition{
                     font-size: 12px;
                     color: #333;
                     label{
                         margin-left: 20px;
                     }
                     input{
                         cursor: pointer;
                         margin-right: 5px;
                     }
                 }
                 .cd-source-delete-btn{
                     line-height: 30px;
                     margin-left: 45px;
                     font-size: 12px;
                     i{
                         @extend .cd-icons-remove;
                         @extend .cd-icons;
                         position: relative;
                         top: -1px;
                         margin-right: 3px;
                         vertical-align: middle;
                     }
                     span{
                         vertical-align: middle;
                     }
                     &:hover{
                         cursor: pointer;
                         i{
                             @extend .cd-icons-removeActive;
                         }
                         span{
                             color: #F44336;
                         }
                     }
                 }
             }
             .cd-source-space {
                 padding: 15px 0;
                 height: 16px;
                 line-height: 16px;
                 font-size: $fontSizeSmall;
                 color: $colorDark;
                 text-align: right;
                 a {
                     margin-left: 15px;
                     color: $colorLink;
                 }
             }
             .cd-source-list {
                 position: relative;
                 height: calc(100% - 70px);
                 & > div {
                     position: absolute;
                     top: 0;
                     left: 0;
                     right: -15px;
                     bottom: 20px;
                     padding-right: 10px;
                     overflow-x: hidden;
                     overflow-y: auto;
                 }
                 ul {
                     @include clearFix();
                     margin-right: -25px;
                     user-select: none;
                 }
                 li {
                     position: relative;
                     float: left;
                     &.cd-pic-item {
                         width: 105px;
                         margin: 0 10px 15px 0;
                         transition: all .3s;
                         .cd-pic-info {
                             position: relative;
                             width: 100%;
                             height: 127px;
                             overflow: hidden;
                             .cd-pic-show {
                                 position: relative;
                                 width: 100%;
                                 height: 105px;
                                 background-color: $colorContainerBg;
                                 background-position: center;
                                 background-repeat: no-repeat;
                                 background-size: contain;
                                 overflow: hidden;
                                 span{
                                     position: absolute;
                                     top: 0;
                                     left: 0;
                                     width: 100%;
                                     height: 100%;
                                     input{
                                         pointer-events: none;
                                         opacity: 0;
                                         z-index: -1;
                                         &:checked+label{
                                             border: 2px solid #F44336;
                                             &::before{
                                                 content: "";
                                                 position: absolute;
                                                 top: 0;
                                                 right: 0;
                                                 border-right: 16px solid #F44336;
                                                 border-top: 0;
                                                 border-bottom: 16px dashed transparent;
                                             }
                                             &::after{
                                                 content: "";
                                                 position: absolute;
                                                 top: 1px;
                                                 right: 0;
                                                 width: 7px;
                                                 height: 3px;
                                                 border-left: 1px solid #fff;
                                                 border-bottom: 1px solid #fff;
                                                 transform: rotate(-45deg);
                                             }
                                         }
                                     }
                                     label{
                                         position: absolute;
                                         top: 0;
                                         left: 0;
                                         right: 0;
                                         bottom: 0;
                                         cursor: pointer;
                                     }
                                 }
                             }
                         }
                         .cd-folder-info{
                             .cd-pic-show{
                                 height: 127px;
                                 background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAAA7CAYAAADVRbxvAAAABGdBTUEAALGPC/xhBQAAA59JREFUeAHtmzFoFEEUhv/ZuxijsdAUah21FOzUMiBGxTaFFmJtYaVgbS9oZWsjoiAkAS1SBESxTRQlIloYFY0JETRnTG5v/N+avbu97MJMuNu9I2/gbm9m387MfvvevJk3twYbafK9vWhD3GZ2KC7r1NEA68bgxrkjuGWMsZ1qp5P18h7+p8k5u8Q72Bfn8zgS3tNSgEtnD5sfebTXzjaCuLK8oUm71uJMGGL2yZwdifvRK8c6uKI6zAd2sGowRY2/aa0tFdUP33brpjoxx+fflA4MAkf3A/3lpsI2/PxbBV59B779TqnM4IUp48L5YfMp5WxXFWWCOzUM7GwztPjOVwlv6kOcSx7ZoWUY3OdTrCXPFJ5b7C/h7ulDZkF60iE0W79JAtsLiytbr6FzV65VMcraT0oLmWPca5qTmFW7k9QpdfdkMjge9ztT42QMSh2H4iu34ZFeoD60ZWrcNuTidct1gq1e1auWgoSffwXG6WTWc3QjBLbEifvVTFMtiIVTs6sh8OAdMFPAeoPOa4ifOz0Hbv4XcO8tsLjqxLgzQhYDPQXu2Rdg4iNQzdE008jTXFd6AtwfTmHENGcX024j/zKaaqV84qEdWFjG2PR8/h1waZHDGV7SCSwVaZqbO1opE9pjEhwdpwlociNAr7oScEo34iauUjEBMdWA68LuMoK4d118ZMw60ri0AE8Xd7srulYJqHYKzvdZyBhHtVNwvuBkjFON86dGZtQ4qp3/pdv7Cq4cIq+qpuqpBxE4fik4T3AMaK4E1ig4T24SBlbn4AtN5GsBNS5QjfNmx/0GalxNTdWXHOdw0XREnYMnOYa6OB1Rr+qJLdqMrgQ1HeO8wYV9NNWSgvMGVw7EOYTqHHzJ7apR48qqcb7csL5bNK6kGudFziB8M2bWgrBfwfmAk7C5yAfHdmhYyQecxOIicI/GTMhVq27YONKTBX4ETr40fO5IjWLUuAY4DZ+7g4sj5tEfCzWY6Q6Okg2N4xinC31HdhL9FdFI49RUHalRTJ2DO6uEJLcaVOMSRBwzSY3TMc4RWyTW5Bw0mOkMrr5ykCt0i9CZW4tz0A0bZ3KJ6Qiv0nmcIzp1Do6gWsUMN6OlLJoA68qhFU92nq9YNLyq7nRlg2o9I5vRUhZpXJxpFdL8ZgIE1tA4nY5sBpRVkjDVPSV8pmDBb0hldbWrymuDfeAbZRumOnPZ/OS/lq4xSMd38zSlERA2nIpcF1Zy/h8iDxAUBUOd+AAAAABJRU5ErkJggg==) center no-repeat;
                                 background-size: 78px;
                                 cursor: pointer;
                             }
                         }
                         .cd-pic-limit{
                             position: absolute;
                             top: 0;
                             left: 0;
                             width: 100%;
                             height: 105px;
                             display: none;
                             text-align: center;
                             background-color: rgba(0,0,0,0.5);
                             z-index: 2;
                             cursor: default;
                             span{
                                 margin: 30px 0 10px;
                             }
                             p{
                                 line-height: 16px;
                                 font-size: $fontSizeSmall;
                                 color: $colorWhite;
                             }
                         }
                         &.cd-pic-forbidden{
                             .cd-pic-limit{
                                 display: block;
                             }
                             input[type='radio'],
                             input[type='checkbox'] {
                                 display: none;
                             }
                             .cd-pic-show{
                                 //filter: blur(4px);
                             }
                             .cd-pic-expand{
                                 & > div{
                                     opacity: 0.5;
                                 }
                             }
                         }
                         .cd-pic-expand {
                             position: absolute;
                             left: 0;
                             right: 0;
                             bottom: 0;
                             width: 100%;
                             height: 22px;
                             line-height: 22px;
                             text-align: center;
                             color: $colorBase;
                             font-size: 0;
                             white-space: nowrap;
                             //transition: left .2s ease;
                             .cd-pic-size{
                                 background-color: #F2F2F2;
                             }
                             .cd-pic-operate{
                                 background-color: #999;
                             }
                             & > div {
                                 display: inline-block;
                                 width: 100%;
                                 font-size: $fontSizeSmall;
                                 vertical-align: top;
                                 &.cd-pic-operate {
                                     padding: 0 5px;
                                     box-sizing: border-box;
                                     > span {
                                         display: inline-block;
                                         padding-top: 3px;
                                         //width: 33.33%;
                                         width: calc((100% - 10px) / 4);
                                         height: 18px;
                                         line-height: 0;
                                         text-align: center;
                                         cursor: pointer;
                                     }
                                 }
                             }
                         }
                     }
                     &.cd-video-item {
                         float: left;
                         margin: 0 12px 15px 0;
                         width: 190px;
                         .cd-video-info {
                             position: relative;
                             width: 100%;
                             overflow: hidden;
                             border: 1px solid #E1E1E1;
                             background-color: #fff;
                             box-sizing: border-box;
                             .cd-video-show {
                                 position: relative;
                                 width: 100%;
                                 height: 120px;
                                 margin: 36px auto;
                                 background-color: $colorContainerBg;
                                 background-position: center;
                                 background-repeat: no-repeat;
                                 background-size: contain;
                                 overflow: hidden;
                             }
 
                             .cd-check-wrap{
                                 position: absolute;
                                 top: 0;
                                 left: 0;
                                 width: 100%;
                                 height: 100%;
                                 input{
                                     pointer-events: none;
                                     opacity: 0;
                                     z-index: -1;
                                     &:checked+label{
                                         border: 2px solid #F44336;
                                         &::before{
                                             content: "";
                                             position: absolute;
                                             top: 0;
                                             right: 0;
                                             border-right: 16px solid #F44336;
                                             border-top: 0;
                                             border-bottom: 16px dashed transparent;
                                         }
                                         &::after{
                                             content: "";
                                             position: absolute;
                                             top: 1px;
                                             right: 0;
                                             width: 7px;
                                             height: 3px;
                                             border-left: 1px solid #fff;
                                             border-bottom: 1px solid #fff;
                                             transform: rotate(-45deg);
                                         }
                                     }
                                 }
                                 label{
                                     position: absolute;
                                     top: 0;
                                     left: 0;
                                     right: 0;
                                     bottom: 0;
                                     cursor: pointer;
                                 }
                             }
                             .cd-video-mask{
                                 position: absolute;
                                 left: 0;
                                 top: 0;
                                 width: 100%;
                                 height: 100%;
                                 text-align: center;
                                 background-color: rgba(0, 0, 0, 0.5);
                                 span{
                                     margin: 62px 0 0;
                                 }
                                 p{
                                     margin-top: 10px;
                                     color: #fff;
                                     font-size: 12px;
                                     text-align: center;
                                 }
                                 .cd-fail-desc{
                                     font-size: 12px;
                                     color: #2299FF;
                                 }
                             }
                             .cd-video-time {
                                 position: absolute;
                                 z-index: 1;
                                 bottom: 0;
                                 right: 10px;
                                 padding: 0 5px;
                                 line-height: 28px;
                                 font-size: $fontSizeSmall;
                                 color: $colorBase;
                             }
                             .cd-video-approve {
                                 position: absolute;
                                 z-index: 1;
                                 bottom: 4px;
                                 left: 4px;
                                 width: 58px;
                                 line-height: 28px;
                                 font-size: $fontSizeSmall;
                                 color: $colorWhite;
                                 text-align: center;
                                 background-color: $colorBtnGhostBorder;
                                 &.cd-approve-fail {
                                     background-color: #FF7356;
                                 }
                             }
                         }
                     }
                     &.cd-current-item{
                         &::before{
                             content: "正在使用";
                             position: absolute;
                             z-index: 1;
                             top: 4px;
                             left: -5px;
                             width: 64px;
                             height: 20px;
                             line-height: 20px;
                             text-align: center;
                             background: #F54335;
                             font-size: 12px;
                             color: #FEFEFE;
                         }
                         &::after{
                             content: "";
                             position: absolute;
                             left: -5px;
                             top: 24px;
                             border-right: 6px solid #A0271E;
                             border-bottom: 6px dashed transparent;
                         }
                         .cd-check-wrap{
                             label{
                                 cursor: default !important;
                             }
                         }
                     }
                     &.cd-remove-transition {
                         //transform: scale(0);
                         //transform-origin: right top;
                         opacity: 0;
                     }
                     &.cd-start-point{
                         .cd-pic-show label{
                             border-style: dashed !important;
                             &::before{
                                 display: none;
                             }
                             &::after{
                                 top: 3px !important;
                                 right: 3px !important;
                                 border-color: #F44336 !important;
                             }
                         }
                     }
                     input[type='radio'],
                     input[type='checkbox'] {
                         position: absolute;
                         top: 8px;
                         right: 8px;
                         display: none;
                         &:checked {
                             display: inline-block;
                         }
                     }
                     .cd-source-name {
                         display: -webkit-box;
                         padding-top: 10px;
                         height: 32px;
                         line-height: 16px;
                         text-align: left;
                         font-size: $fontSizeSmall;
                         color: $colorNormal;
                         overflow: hidden;
                         text-overflow: ellipsis;
                         -webkit-line-clamp: 2;
                         -webkit-box-orient: vertical;
                     }
                     &:hover {
                         input[type='radio'],
                         input[type='checkbox'] {
                             display: inline-block;
                         }
                         .cd-pic-expand {
                             left: -100%;
                         }
                     }
                     &.cd-pic-st:hover{
                         .cd-pic-expand {
                             left: 0;
                         }
                     }
                 }
                 .cd-new-item {
                     animation-fill-mode: backwards;
                     animation: listPicFadeIn .3s;
                 }
             }
             .cd-video-list {
                 ul {
                     margin-right: -23px;
                 }
 
             }
         }
     }
     .cd-list-empty{
         @include flexBox;
         @include flexCenterBox;
         flex-direction: column;
         height: calc(80vh - 224px);
         max-height: 476px;
         text-align: center;
         .cd-empty-tip{
             margin-top: 20px;
             font-size: 14px;
             color: #999;
         }
     }
     .cd-source-footer {
         display: flex;
         padding: 20px 15px;
         height: 36px;
         line-height: 36px;
         .cd-pic-manage {
             a {
                 margin-left: 25px;
                 font-size: $fontSizeSmall;
                 color: $colorLink;
             }
         }
     }
     .cd-fold-tree {
         position: relative;
         margin: 0;
         //padding: 0 5px;
         padding: 0 13px 0 5px;
 
         > li > .level0 .node_name{
             margin-left: 3px;
         }
 
         .level1 .node_name{
             margin-left: 18px !important;
         }
 
         .level1 > .node_name{
             max-width: 135px;
         }
 
         .level2 > .node_name{
             max-width: 125px;
         }
 
         .level3 > .node_name{
             max-width: 115px;
         }
 
         .level4 > .node_name{
             max-width: 105px;
         }
 
         .level5 > .node_name{
             max-width: 95px;
         }
 
         &::before{
             content: '';
             position: absolute;
             top: 25px;
             left: 7px;
             border-left: 1px dashed #ccc;
             height: calc(100% - 41px);
         }
 
         ul{
             position: relative;
         }
 
         li {
             position: relative;
             line-height: 33px;
             list-style-type: none;
             text-align: left;
             outline: none;
             white-space: nowrap;
 
             span {
                 margin-right: 2px;
                 line-height: 21px;
                 font-size: $fontSizeSmall;
                 &.button {
                     position: relative;
                     display: inline-block;
                     width: 22px;
                     height: 22px;
                     line-height: 0;
                     vertical-align: middle;
                     border: 0 none;
                     cursor: pointer;
                     outline: none;
                     display: none;
                     &.edit {
                         margin: -2px 0 0 0;
                     }
                     &.edit:after {
                         content: "";
                         position: absolute;
                         top: 3px;
                         left: 3px;
                         @extend .cd-icons;
                         @extend .cd-icons-pic-edit;
                         width: 16px;
                         height: 16px;
                     }
                     &.remove {
                         margin: -2px 0 0 4px;
                     }
                     &.remove:after {
                         content: "";
                         position: absolute;
                         top: 4px;
                         left: 3px;
                         @extend .cd-icons;
                         @extend .cd-icons-pic-del;
                     }
                     &.switch {
 
                         &.level0{
                             display: none !important;
                         }
 
                         //position: absolute;
                         //top: 8px;
                         //right: 0;
                         display: inline-block;
                         width: 16px;
                         height: 16px;
                         vertical-align: middle;
                         cursor: pointer;
                         outline: none;
                         background: none;
                         display: none;
                         &:before {
                             //content: "";
                             //display: inline-block;
                             //width: 25px;
                             //height: 2px;
                             //margin-top: 14px;
                             //background-color: #f4f4f4;
                             //display: none;
                             //position: absolute;
                             //top: 3px;
                             //left: 5px;
                             //border: 5px solid;
                             //border-color: transparent transparent transparent #fff;
                             //z-index: 2;
                         }
                         &:after {
                             content: "";
                             position: absolute;
                             top: 3px;
                             left: 6px;
                             border: 5px solid;
                             border-color: transparent transparent transparent #333;
                             display: none;
                         }
                         &.noline_open{
                             @extend .cd-icons;
                             @extend .cd-icons-arrow_down;
                             position: absolute;
                             top: 14px;
                             right: -2px;
                             &::before{
                                 content: '';
                                 position: absolute;
                                 top: 50%;
                                 left: 50%;
                                 width: 20px;
                                 height: 20px;
                                 transform: translate(-50%, -50%);
                             }
                         }
                         &.noline_close{
                             @extend .cd-icons;
                             @extend .cd-icons-arrow_right;
                             position: absolute;
                             top: 11px;
                             right: 0;
                             &::before{
                                 content: '';
                                 position: absolute;
                                 top: 50%;
                                 left: 50%;
                                 width: 20px;
                                 height: 20px;
                                 transform: translate(-50%, -50%);
                             }
                         }
                         &.bottom_open ~ ul {
                             .node_name {
                                 //margin-left: 10px;
                             }
                             &.level0 {
                                 .level1 {
                                     & > .node_name {
                                         margin-left: 0;
                                     }
                                 }
                             }
                             a {
                                 &:hover {
                                     .node_name {
                                         //max-width: 82px;
                                         //width: 75px;
                                     }
                                     &.curSelectedNode_Edit {
                                         .node_name {
                                             //max-width: 130px;
                                         }
                                     }
                                 }
                             }
                         }
                         &.center_docu,
                         &.bottom_docu {
                             display: none;
                         }
                         &.bottom_close ~ a {
                             span.ico_close:before {
                                 height: 12px;
                             }
                         }
                         &.bottom_docu ~ a {
                             span.ico_docu:before {
                                 height: 12px;
                             }
                         }
                     }
                 }
             }
             ul {
                 &.level0 {
                     position: relative;
                     &:after {
                         content: "";
                         position: absolute;
                         top: 0;
                         left: 10px;
                         bottom: 20px;
                         width: 2px;
                         background-color: $colorBg;
                         display: none;
                     }
                 }
                 li {
                     ul.line {
                         .node_name {
                             //margin-left: 10px;
                         }
                         a {
                             &:hover {
                                 .node_name {
                                     //max-width: 82px;
                                 }
                                 &.curSelectedNode_Edit {
                                     .node_name {
                                         //max-width: 130px;
                                     }
                                 }
                             }
                         }
                     }
                     span {
                         &.button.ico_open:before,
                         &.button.ico_close:before,
                         &.button.ico_docu:before {
                             content: "";
                             position: absolute;
                             //top: 0;
                             //left: -2px;
                             //width: 2px;
                             //height: 34px;
                             //background-color: $colorBg;
                             top: 10px;
                             left: -2px;
                             width: 20px;
                             height: 2px;
                             background-color: $colorBg;
                         }
                         &.button.ico_open:after,
                         &.button.ico_close:after,
                         &.button.ico_docu:after {
                             content: "";
                             //position: absolute;
                             //top: 10px;
                             //left: -2px;
                             //width: 20px;
                             //height: 2px;
                             //background-color: $colorBg;
                         }
                     }
                     &.level2{
                         span {
                             &.button.ico_open:after,
                             &.button.ico_close:after,
                             &.button.ico_docu:after {
                                 width: 44px;
                             }
                         }
                     }
                 }
             }
             a {
                 display: inline-block;
                 //min-width: 90%;
                 height: 23px;
                 line-height: 23px;
                 font-size: $fontSizeSmall;
                 color: $colorDark;
                 background-color: transparent;
                 text-decoration: none;
                 white-space: nowrap;
                 .node_name {
                     display: inline-block;
                     //max-width: 118px;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     vertical-align: middle;
                 }
                 input.rename {
                     position: relative;
                     display: inline-block;
                     margin-top: -2px;
                     width: 128px;
                     height: 30px;
                     line-height: 30px;
                     text-indent: 5px;
                     font-size: $fontSizeSmall;
                     color: $colorBase;
                     border: 1px solid #E1E1E1;
                 }
                 &:hover {
                     cursor: pointer;
                     color: $colorBase;
                     .node_name {
                         //max-width: 82px;
                         //width: 75px;
                     }
                 }
                 &.level2:hover {
                     .node_name {
                         //max-width: 82px;
                         //width: 65px;
                     }
                 }
                 &.level0 {
                     span.button {
                         margin-top: -3px;
                         //&:after {
                         //    content: "";
                         //    position: absolute;
                         //    top: 3px;
                         //    left: 3px;
                         //    @extend .cd-icons;
                         //    @extend .cd-icons-folder;
                         //}
                         &.ico_open {
                             //&~span{
                             //  color: #333;
                             //}
                             //&:after{
                             //  @extend .cd-icons-folderSelected;
                             //}
                         }
                         &.edit, &.remove {
                             display: none !important;
                         }
                     }
                     &.curSelectedNode {
                         span.button {
                             &:after {
                                 @extend .cd-icons-folderSelected;
                             }
                         }
                     }
                 }
                 &:hover,&.curSelectedNode {
                     cursor: pointer;
                     color: #F44336;
                 }
                 &.curSelectedNode_Edit {
                     max-width: 130px;
                     .node_name {
                         //max-width: 130px;
                         overflow: inherit;
                     }
                 }
             }
             .node_name{
                 margin-left: 18px;
             }
             .level0 > .ico_open{
                 display: inline-block;
                 @extend .cd-icons-myFolderGrey;
                 @extend .cd-icons;
             }
         }
         & > li > ul {
             //padding: 0 0 0 12px;
             padding: 0 0 0 0;
         }
         ul{
             &::before{
                 content: "";
                 position: absolute;
                 left: 9px;
                 top: 0;
                 width: 12px;
                 height: 100%;
                 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAhCAIAAABiJd1YAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDdBNzJFMzEwMTMxMTFFOTgyRTE4N0YxRjY3OTIzRkEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDdBNzJFMzAwMTMxMTFFOTgyRTE4N0YxRjY3OTIzRkEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9IkUxQjhBMjA3NjBENzU5NkNCQTMzMEEwNzBBQzk5RERFIiBzdFJlZjpkb2N1bWVudElEPSJFMUI4QTIwNzYwRDc1OTZDQkEzMzBBMDcwQUM5OURERSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmtLEXsAAAAvSURBVHjaYvz//z8DIcDEQAQYVTSqiIGB5ezZsxCWsbExLjbjaKIbVURFRQABBgBT8w89lzq3dAAAAABJRU5ErkJggg==) repeat-y;
             }
         }
     }
 
 }
 
 .cd-tree-right-menu{
     z-index: 10;
     position: absolute;
     width: 63px;
     font-size: 14px;
     color: #333;
     background: #fff;
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
     line-height: 35px;
     text-align: center;
     cursor: pointer;
     transform-origin: 0 0;
     animation: rightMenuFadeIn .2s;
     animation-fill-mode: backwards;
     > div:hover{
         background-color: #FFF6EF;
     }
 }
 
 .cd-source-manage-code{
     display: flex;
     flex-direction: column;
     height: 100%;
     padding: 0 20px;
     .cd-code-main{
         display: flex;
         flex: 1;
         .cd-pic-area{
             display: flex;
             flex: 1;
             flex-direction: column;
         }
         .cd-code-area{
             display: flex;
             width: 475px;
             flex-direction: column;
             .cd-code-item{
                 display: flex;
                 flex: 1;
                 flex-direction: column;
             }
             textarea{
                 display: block;
                 flex: 1;
                 resize: none;
             }
             .cd-code-btn-area{
                 padding-top: 10px;
                 text-align: right;
             }
         }
     }
     .cd-code-bottom{
         line-height: 70px;
         font-size: 12px;
         color: #666;
     }
     .cd-head-tip{
         line-height: 35px;
         padding-top: 9px;
         font-size: 12px;
         color: #333;
     }
     .cd-pic-list{
         flex: 1;
         overflow-x: hidden;
         overflow-y: auto;
         padding-right: 15px;
     }
     .cd-code-pic-item{
         position: relative;
         float: left;
         width: 102px;
         height: 102px;
         margin: 0 5px 20px;
         background: no-repeat center;
         background-size: contain;
         border: 1px solid #F2F2F2;
         &:hover .cd-close-icon{
             display: block;
         }
         &.cd-code-placeholder-item {
             border: 1px dashed red;
         }
         &.cd-remove-animation{
             animation: listPicRemove .2s;
             animation-fill-mode: both;
         }
         .cd-handle{
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             cursor: -webkit-grab;
         }
         .cd-index{
             position: absolute;
             top: 0;
             left: -5px;
             width: 20px;
             height: 18px;
             line-height: 18px;
             text-align: center;
             background-color: #29F;
             font-size: 12px;
             color: #fff;
             &::before{
                 content: "";
                 position: absolute;
                 left: 0;
                 top: 100%;
                 border-top: 0 dashed transparent;
                 border-right: 5px solid #000;
                 border-bottom: 2px dashed transparent;
             }
         }
         .cd-close-icon{
             display: none;
             position: absolute;
             top: 5px;
             right: 5px;
             width: 14px;
             height: 14px;
             background-color: #DB3C30;
             border-radius: 50%;
             cursor: pointer;
             &::before{
                 content: "";
                 position: absolute;
                 top: 50%;
                 left: 50%;
                 width: 8px;
                 height: 1px;
                 background-color: #fff;
                 transform: translate(-50%,-50%) rotate(45deg);
             }
             &::after{
                 content: "";
                 position: absolute;
                 top: 50%;
                 left: 50%;
                 width: 8px;
                 height: 1px;
                 background-color: #fff;
                 transform: translate(-50%,-50%) rotate(-45deg);
             }
             &:hover{
                 transform: scale(1.1);
             }
         }
     }
 }
 
 .cd-move-obj-dialog{
     position: relative;
     height: 225px;
     margin: 20px 20px 0;
     .cd-tree-wrap{
         display: block;
         overflow: auto;
         height: 100%;
         border: 1px solid #E1E1E1;
         box-sizing: border-box;
         ul{
             padding-left: 12px !important;
         }
         .cd-fold-tree{
             margin-left: 10px;
             padding-left: 0 !important;
             width: 195px;
         }
     }
     .cd-add-folder-btn{
         position: absolute;
         bottom: -50px;
         height: 35px;
         padding: 0 10px;
         line-height: 35px;
         font-size: 12px;
         color: #666;
         cursor: pointer;
         &:hover{
             color: #333;
         }
     }
     .cd-icons-folderAdd{
         position: relative;
         top: -2px;
         margin-right: 5px;
         vertical-align: middle;
     }
 }
 
 @keyframes listPicFadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 @keyframes rightMenuFadeIn {
     from {
         transform: scale(0);
     }
     to {
         transform: scale(1);
     }
 }
 
 @keyframes listPicRemove {
     from {
         transform: scale(1);
         opacity: 1;
     }
     to {
         transform: scale(0);
         opacity: 0;
     }
 }
 