| .wx-debug-weex-content { |
| top: 50px; |
| left: 50px; |
| height: 100%; |
| width: calc(100% - 50px); |
| min-width: 1100px; |
| position: fixed; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| z-index: 1030; |
| border-left: 1px solid #ddd; |
| [data-v-step="5"] { |
| position: absolute; |
| top: 0; |
| right: 150px; |
| width: 0; |
| height:0; |
| } |
| .bundle-list { |
| width: 100%; |
| float: left; |
| align-items: center; |
| overflow-x: auto; |
| .nopage { |
| text-align: center; |
| line-height: 80px; |
| color: #949393; |
| } |
| } |
| .bundle-item { |
| text-align: center; |
| margin-right: 20px; |
| } |
| |
| .bundle-title { |
| font-size: 12px; |
| color:#656565; |
| } |
| } |
| .wx-debug-weex-advance { |
| height: 0; |
| width: 100%; |
| background: #fff; |
| padding: 0 20px; |
| transition: all .2s ease; |
| box-shadow: -1px -4px 15px 1px #ddd inset; |
| z-index: 1; |
| &.active { |
| height: 280px; |
| } |
| .button-group { |
| display: flex; |
| width: 200px; |
| align-items: center; |
| justify-content:space-around; |
| margin: 0 auto; |
| padding-bottom:10px; |
| } |
| .title { |
| width: 100%; |
| box-sizing: content-box; |
| height: 30px; |
| line-height: 30px; |
| font-size: 16px; |
| color:#929292; |
| margin-top: 10px; |
| padding: 10px 10px; |
| margin-bottom: 10px; |
| .iconfont { |
| font-size: 18px; |
| color: #929292; |
| } |
| } |
| .row { |
| height: 60px; |
| width: 100%; |
| min-width: 1100px; |
| color:#929292; |
| box-sizing: content-box; |
| padding: 0 10px; |
| display: flex; |
| .col{ |
| display: flex; |
| align-items: top; |
| .label { |
| width: 300px; |
| line-height: 16px; |
| font-size: 14px; |
| span { |
| width: 100%; |
| display: block; |
| } |
| small { |
| a{ |
| color: inherit; |
| &:hover { |
| text-decoration: underline; |
| } |
| } |
| } |
| } |
| input { |
| flex: 1; |
| height: 32px; |
| font-size: 14px; |
| border-radius: 3px; |
| border: 1px solid #ced4da; |
| outline: none; |
| text-indent: 5px; |
| margin: 0 10px; |
| } |
| .icon-mock { |
| width: 30px; |
| height: 30px; |
| margin: 0 6px; |
| line-height: 30px; |
| display: inline-block; |
| text-align: center; |
| font-size: 18px; |
| cursor: pointer; |
| &:hover { |
| background: #f2f2f2; |
| } |
| } |
| } |
| } |
| } |
| .wx-debug-weex-menu { |
| height: 100px; |
| width: 100%; |
| border-bottom: 1px solid #ddd; |
| background: #f9f9f9; |
| position: relative; |
| display: flex; |
| z-index: 9; |
| } |
| .wx-debug-weex-inspector { |
| width: 100%; |
| flex: 1; |
| display: flex; |
| background: url(../../assets/img/ajax.gif) center center no-repeat #f0f0f0; |
| background-size: 50px; |
| margin-bottom: 40px; |
| z-index: 10; |
| } |
| .wx-debug-weex-setting { |
| margin: 10px 0px; |
| padding: 10px 10px; |
| border-radius: 5px; |
| height: 80px; |
| line-height: 60px; |
| font-size: 14px; |
| cursor: pointer; |
| } |
| .wx-debug-weex-container { |
| height: 100px; |
| width: 100%; |
| } |
| .wx-debug-weex-row { |
| height: 50px; |
| line-height: 50px; |
| display: flex; |
| flex: 1; |
| justify-content: flex-end; |
| flex-direction: row; |
| padding: 0 20px; |
| box-sizing: border-box; |
| } |
| .wx-debug-weex-select { |
| display: inline-block; |
| } |
| .wx-debug-weex-col { |
| vertical-align: middle; |
| box-sizing: content-box; |
| padding:0 10px; |
| display: flex; |
| align-items: center; |
| border-right: 1px dashed #ddd; |
| .bundleurl { |
| font-size: 12px; |
| color:#929292; |
| transition: all .2s ease; |
| &:focus { |
| color: #333; |
| } |
| } |
| &:last-child { |
| border-right: none; |
| } |
| .label { |
| width: 100px; |
| display: inline-block; |
| margin-right:10px; |
| } |
| &.switch { |
| width: 150px; |
| label { |
| margin-bottom: 0; |
| } |
| .label { |
| width: 80px; |
| } |
| } |
| &.info { |
| span { |
| width: 300px; |
| display: inline-block; |
| overflow: hidden; |
| text-overflow:ellipsis; |
| white-space: nowrap; |
| } |
| } |
| &.navigation { |
| flex: 1; |
| input { |
| width: calc(100% - 90px); |
| height: 32px; |
| border-radius: 3px; |
| border: 1px solid #ced4da; |
| outline: none; |
| margin-right: 5px; |
| text-indent: 5px; |
| } |
| span { |
| width: 30px; |
| height: 30px; |
| margin: 0 6px; |
| line-height: 30px; |
| display: inline-block; |
| text-align: center; |
| font-size: 18px; |
| cursor: pointer; |
| &:hover { |
| background: #f2f2f2; |
| } |
| } |
| } |
| &.navigation-button { |
| flex: 1; |
| .navigation-selection { |
| width: calc(100% - 90px); |
| margin-right: 10px; |
| height: 30px; |
| border: 1px solid #ddd; |
| border-radius: 3px; |
| position: relative; |
| color: #929292; |
| &:hover { |
| .navigation-selection-items { |
| display: block; |
| } |
| } |
| } |
| .text { |
| position: absolute; |
| height: 30px; |
| width: calc(100% - 30px); |
| text-align: left; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| cursor: pointer; |
| font-size: 12px; |
| top: 0; |
| left: 0; |
| line-height: 30px; |
| text-indent: 5px; |
| } |
| .iconfont { |
| position: absolute; |
| height: 30px; |
| width: 30px; |
| line-height: 30px; |
| top:0; |
| right:0; |
| text-align: center; |
| } |
| .navigation-selection-items { |
| display: none; |
| position: absolute; |
| top: 29px; |
| left: 0; |
| border: 1px solid #ddd; |
| border-top:none; |
| width: 100%; |
| background: #fff; |
| max-height: 241px; |
| overflow-y: auto; |
| li { |
| height: 30px; |
| width: 100%; |
| line-height: 30px; |
| font-size: 12px; |
| padding: 0 5px; |
| padding-right: 40px; |
| overflow: hidden; |
| text-overflow:ellipsis; |
| white-space: nowrap; |
| cursor: pointer; |
| color: #333; |
| position: relative; |
| span { |
| display: block; |
| position: absolute; |
| right: 5px; |
| top: 6px; |
| padding: 9px 5px; |
| font-size: 12px; |
| height: 12px; |
| line-height: 1px; |
| background: #929292; |
| color: #fff; |
| border-radius: 10px; |
| text-align: center; |
| } |
| &:hover { |
| background: #f2f2f2; |
| } |
| } |
| } |
| } |
| } |
| .wx-debug-weex-select { |
| width: 150px; |
| background: none; |
| } |
| .wx-debug-weex-modal { |
| padding: 10px; |
| padding-top: 0; |
| .codeArea { |
| width: 100%; |
| border: 1px solid #d0cccc; |
| border-radius: 3px; |
| font-size: 12px; |
| color: #333; |
| } |
| .footer { |
| width: 100%; |
| margin-top: 10px; |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| align-items: flex-end; |
| |
| .button-group { |
| display: flex; |
| width: 300px; |
| justify-content: flex-end; |
| align-items: flex-end; |
| } |
| } |
| } |