knowledgeMap.less 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
  1. .knowledgeMapWrapper{
  2. min-width: 1200px;
  3. background: url("../images/bg2.png");
  4. background-size: cover;
  5. /* .title{
  6. position: relative;
  7. height: 40px;
  8. line-height: 40px;
  9. background-image: linear-gradient(to right, #5A8EEE , #7EABFF);
  10. filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da,endColorstr=#1C85FB);!*IE<9>*!
  11. -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";!*IE8+*!
  12. }
  13. .titleTxt{
  14. position: relative;
  15. width: 1200px;
  16. left: 50%;
  17. margin-left: -600px;
  18. color: #fff;
  19. font-size: 14px;
  20. }
  21. .titleLogo{
  22. position: relative;
  23. top: -2px;
  24. height: 20px;
  25. margin: 0 20px 0 0;
  26. }
  27. .titleLogoShaiyifu{
  28. top: 5px;
  29. height: 30px;
  30. }
  31. .titleInfo{
  32. position: relative;
  33. display: inline-block;
  34. top: -4px;
  35. height: 40px;
  36. line-height: 40px;
  37. }*/
  38. .content{
  39. position: relative;
  40. width: 1200px;
  41. left: 50%;
  42. margin-left: -600px;
  43. cursor: default;
  44. height: 100%;
  45. }
  46. .left{
  47. float: left;
  48. background: #0D2C53;
  49. height: 100%;
  50. margin: 10px 0 0 0;
  51. position: relative;
  52. border:1px #6794A8 solid;
  53. }
  54. .right{
  55. // background: #fff;
  56. width: 394px;
  57. float: right;
  58. height: 100%;
  59. margin: 10px 0 0 0;
  60. .top{
  61. position: relative;
  62. width:392px;
  63. height:80px;
  64. background:#0D2C53;
  65. border:1px #6794A8 solid;
  66. border-radius:2px;
  67. margin: 0 0 10px 0;
  68. font-size: 14px;
  69. .select{
  70. display: inline-block;
  71. width:92px;
  72. height:40px;
  73. background:rgba(66, 143, 220, 0.25);
  74. border-radius:4px;
  75. margin: 20px 10px 10px;
  76. position: relative;
  77. cursor: pointer;
  78. .selectedName{
  79. display: inline-block;
  80. width: 92px;
  81. height: 40px;
  82. line-height: 40px;
  83. color: #5BBBFF;
  84. position: relative;
  85. padding: 0 10px;
  86. }
  87. .iconSlide{
  88. width: 13px;
  89. position: absolute ;
  90. top: 16px;
  91. right: 10px;
  92. }
  93. .selectList{
  94. position: absolute;
  95. display: none;
  96. width:90px;
  97. line-height: 30px;
  98. background: #0D2C53;
  99. color: #fff;
  100. border: 1px solid #5BBBFF;
  101. z-index: 3;
  102. }
  103. .selectItem{
  104. padding: 0 10px;
  105. }
  106. .selectItem:hover{
  107. background: #1a4478;
  108. }
  109. }
  110. .search{
  111. position: absolute;
  112. display: inline-block;
  113. width:272px;
  114. top: 20px;
  115. left: 112px;
  116. input{
  117. width:192px;
  118. padding: 0 10px;
  119. height:40px;
  120. border:1px solid rgba(230,230,230,1);
  121. border-radius: 4px 0 0 4px;
  122. box-sizing: border-box;
  123. outline: none;
  124. color: #333;
  125. font-size: 14px;
  126. }
  127. input:focus{
  128. border: 1px solid #58a6e7;
  129. outline: 0;
  130. -webkit-box-shadow:#58a6e7 0px 0px 2px;
  131. -moz-box-shadow: #58a6e7 0px 0px 2px;
  132. box-shadow: #58a6e7 0px 0px 2px;
  133. }
  134. input::-ms-clear{display:none;}
  135. input::-webkit-input-placeholder{
  136. color: #aaa;
  137. }
  138.     input:-moz-placeholder,textarea:-moz-placeholder{
  139. color: #aaa;
  140. }
  141.     input::-moz-placeholder,textarea::-moz-placeholder{
  142. color: #aaa;
  143. }
  144.     input:-ms-input-placeholder,textarea:-ms-input-placeholder{
  145. color: #aaa;
  146. }
  147. .searchBtn{
  148. position: absolute;
  149. cursor: pointer;
  150. display: inline-block;
  151. width:60px;
  152. height:40px;
  153. text-align: center;
  154. line-height: 40px;
  155. background: linear-gradient(270deg, #00A6F5 0%, #0071E7 100%);
  156. border-radius:0px 4px 4px 0px;
  157. color: #fff;
  158. }
  159. .tabNameList,.tabNameListNoSearch{
  160. position: relative;
  161. top: 5px;
  162. display: none;
  163. width:192px;
  164. max-height:200px;
  165. background: #0D2C53;
  166. border:1px solid #5BBBFF;
  167. border-radius: 4px 0 0 4px;
  168. box-sizing: border-box;
  169. overflow-y: auto;
  170. z-index:2;
  171. li{
  172. height: 40px;
  173. line-height: 40px;
  174. padding: 0 10px;
  175. color: #fff;
  176. }
  177. li:hover{
  178. background: #1a4478;
  179. }
  180. .nodeItem{
  181. cursor: pointer;
  182. }
  183. }
  184. }
  185. }
  186. .bottom{
  187. background: #0D2C53;
  188. border:1px #6794A8 solid;
  189. .tabList{
  190. width: 100%;
  191. height: 43px;
  192. box-sizing: border-box;
  193. border-bottom: 1px solid #E6E6E6;
  194. position: relative;
  195. padding: 0 10px;
  196. .tabBox{
  197. padding: 0 20px 0 10px;
  198. }
  199. .tab{
  200. display: inline-block;
  201. height: 42px;
  202. line-height: 42px;
  203. margin: 0 20px 0 10px;
  204. font-size: 14px;
  205. color: #A7CFFC;
  206. cursor: pointer;
  207. }
  208. .tab:hover{
  209. color: #5A8EEE;
  210. }
  211. .activeTab{
  212. font-size: 16px;
  213. color: #5BBBFF;
  214. font-weight: bold;
  215. border-bottom: 3px solid #5BBBFF;
  216. box-sizing: border-box;
  217. }
  218. }
  219. .tabListShow{
  220. border: 1px solid #5A8EEE;
  221. // box-shadow:0px 7px 6px -2px #14274B;
  222. border-bottom: 1px solid #E6E6E6;
  223. }
  224. .showTabList{
  225. margin-right: 66px;
  226. }
  227. .toggleArrow{
  228. width: 11px;
  229. position: absolute;
  230. top: 15px;
  231. right: 0px;
  232. }
  233. .toggleTab{
  234. display: inline-block;
  235. position: absolute;
  236. font-size: 14px ;
  237. color: #A7CFFC;
  238. line-height: 44px;
  239. right: 20px;
  240. top: 0;
  241. cursor: pointer;
  242. padding: 0 10px 0 0;
  243. }
  244. .toggleTabTxt{
  245. margin-right: 3px;
  246. }
  247. .hideTabList{
  248. position: relative;
  249. background: #0D2C53;
  250. width: 100%;
  251. z-index: 2;
  252. display: none;
  253. top: -2px;
  254. left: -11px;
  255. padding: 0 10px;
  256. border: 1px solid #5A8EEE;
  257. border-top: 0;
  258. box-shadow:0px 7px 6px -2px rgba(20,39,75,0.2);
  259. }
  260. .radioList{
  261. height: 60px;
  262. line-height: 60px;
  263. padding: 0 10px;
  264. }
  265. .radioItem{
  266. font-size: 14px;
  267. color: #fff;
  268. line-height: 16px;
  269. margin-right: 20px;
  270. cursor: pointer;
  271. }
  272. .iconRadio{
  273. width: 14px;
  274. position: relative;
  275. top: 2px;
  276. }
  277. .iconSelect{
  278. width: 16px;
  279. top: 0px;
  280. position: relative;
  281. }
  282. }
  283. }
  284. .legendIcon{
  285. position: absolute;
  286. display: none;
  287. width: 35px;
  288. height: 22px;
  289. bottom: 50px;
  290. right: 5px;
  291. /*background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);*/
  292. }
  293. .legendIconImg{
  294. width: 22px;
  295. height: 22px;
  296. border-radius: 50%;
  297. position: absolute;
  298. right: 10px;
  299. top: 2px;
  300. cursor: pointer;
  301. }
  302. .legendIconImg{
  303. background: url('./../resources/images/iconSlideUp1.png') no-repeat;
  304. background-size: 22px 22px;
  305. }
  306. .legendIconImg:hover{
  307. background: url('./../resources/images/iconSlideUp1Hover.png') no-repeat;
  308. background-size: 22px 22px;
  309. }
  310. .legendSlideUp{
  311. background: url('./../resources/images/iconSlideDown1.png') no-repeat;
  312. background-size: 22px 22px;
  313. }
  314. .legendSlideUp:hover{
  315. background: url('./../resources/images/iconSlideDown1Hover.png') no-repeat;
  316. background-size: 22px 22px;
  317. }
  318. .footer{
  319. width: 100%;
  320. margin: 24px 0;
  321. text-align: center;
  322. font-size: 12px;
  323. color: #A7CFFC;
  324. }
  325. .ztree{
  326. overflow: auto;
  327. padding: 0 10px;
  328. }
  329. }