You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

workspace.css 7.7 KiB

4 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  1. .lr-workspace-header {
  2. padding:6px 40px;
  3. }
  4. .lr-workspace-header .scanner {
  5. position: absolute;
  6. top: 10px;
  7. left: 10px;
  8. color: #fff;
  9. }
  10. .lr-workspace-header .scanner .iconfont {
  11. font-size: 20px;
  12. font-weight: 100;
  13. }
  14. .lr-workspace-header .searchBox {
  15. position: relative;
  16. width: 100%;
  17. height: 100%;
  18. background-color: #0C86D8;
  19. }
  20. .lr-workspace-header .searchBox i {
  21. position: absolute;
  22. top: 8px;
  23. left: 10px;
  24. color: #fff;
  25. z-index: 1;
  26. font-size: 12px;
  27. }
  28. .lr-workspace-header .searchBox .search {
  29. position: relative;
  30. width: 100%;
  31. height: 100%;
  32. border-radius: 3px;
  33. line-height: 30px;
  34. font-size: 14px;
  35. background-color: #3d9ee0;
  36. padding-left: 30px;
  37. color: #fff;
  38. }
  39. .lr-workspace-header .message {
  40. position: absolute;
  41. top: 10px;
  42. right: 10px;
  43. color: #fff;
  44. }
  45. .lr-workspace-header .message .iconfont {
  46. font-size: 22px;
  47. font-weight: 100;
  48. }
  49. .lr-workspace-page {
  50. position: relative;
  51. width: 100%;
  52. height:100%;
  53. padding-top: 210px;
  54. }
  55. .lr-workspace-page .head {
  56. position: absolute;
  57. width: 100%;
  58. height:150px;
  59. top:0;
  60. left:0;
  61. }
  62. .lr-workspace-page .banner {
  63. position: relative;
  64. width: 100%;
  65. height: 120px;
  66. /*background: url(images/banner.png);*/
  67. background-size: 100% 100%;
  68. }
  69. .lr-workspace-page .banner img {
  70. height: 120px;
  71. }
  72. .lr-workspace-page .news {
  73. position: relative;
  74. height: 30px;
  75. background-color: #FFFEEC;
  76. padding:0 10px;
  77. }
  78. .lr-workspace-page .news:after {
  79. position: absolute;
  80. right: 0;
  81. bottom: 0;
  82. left: 0;
  83. height: 1px;
  84. content: '';
  85. -webkit-transform: scaleY(.5);
  86. transform: scaleY(.5);
  87. background-color: #f2f2f2;
  88. }
  89. .lr-workspace-page .news .left {
  90. margin-right: 7px;
  91. font-size: 25px;
  92. float: left;
  93. color: #F77338;
  94. line-height: 23px;
  95. }
  96. .lr-workspace-page .news .middle {
  97. float: left;
  98. width: 70%;
  99. display: inline-block;
  100. font-size: 12px;
  101. color: #F4520C;
  102. line-height: 30px;
  103. }
  104. .lr-workspace-page .news .right {
  105. float: right;
  106. margin-top: 5px;
  107. padding: 0 6px;
  108. font-size: 10px;
  109. color: #F77338;
  110. border: 1px solid #F66323;
  111. border-radius: 3px;
  112. }
  113. .lr-workspace-page .appbox {
  114. position: absolute;
  115. top: 120px;
  116. left: 0;
  117. width: 100%;
  118. min-height: 90px;
  119. background-color: #fff;
  120. padding: 10px 5px 0 5px;
  121. display: -webkit-box;
  122. display: -webkit-flex;
  123. display: -ms-flexbox;
  124. display: flex;
  125. -webkit-flex-wrap: wrap;
  126. -ms-flex-wrap: wrap;
  127. flex-wrap: wrap;
  128. text-align: center;
  129. -webkit-box-pack: start;
  130. -webkit-justify-content: flex-start;
  131. -ms-flex-pack: start;
  132. justify-content: flex-start;
  133. }
  134. .lr-workspace-page .appitem {
  135. -webkit-box-flex: 0;
  136. -webkit-flex: 0 0 25%;
  137. -ms-flex: 0 0 25%;
  138. flex: 0 0 25%;
  139. padding-bottom: 10px;
  140. }
  141. .lr-workspace-page .appitem > div{
  142. margin:auto;
  143. margin-bottom:5px;
  144. height: 45px;
  145. width: 45px;
  146. line-height: 45px;
  147. text-align: center;
  148. border-radius: 50%;
  149. }
  150. .lr-workspace-page .appitem:nth-child(7n+1) > div {
  151. background-color: #62bbff;
  152. }
  153. .lr-workspace-page .appitem:nth-child(7n+2) > div {
  154. background-color: #7bd2ff;
  155. }
  156. .lr-workspace-page .appitem:nth-child(7n+3) > div {
  157. background-color: #ffd761;
  158. }
  159. .lr-workspace-page .appitem:nth-child(7n+4) > div {
  160. background-color: #fe955c;
  161. }
  162. .lr-workspace-page .appitem:nth-child(7n+5) > div {
  163. background-color: #ff6283;
  164. }
  165. .lr-workspace-page .appitem:nth-child(7n+6) > div {
  166. background-color: #60e3f3;
  167. }
  168. .lr-workspace-page .appitem:nth-child(7n) > div {
  169. background-color: #acc8fe;
  170. }
  171. .lr-workspace-page .appitem i{
  172. color: #fff;
  173. font-size: 26px;
  174. }
  175. .lr-workspace-page .appitem > span {
  176. font-size: 12px;
  177. color: #333;
  178. }
  179. .lr-desktop-msg {
  180. position:relative;
  181. width:100%;
  182. height:100%;
  183. }
  184. /**/
  185. .lr-black-panel {
  186. position: relative;
  187. width: 100%;
  188. background-color: #fff;
  189. margin-bottom:10px;
  190. }
  191. .lr-black-panel .lr-title {
  192. position: relative;
  193. width: 100%;
  194. height: 35px;
  195. line-height: 35px;
  196. font-family: PingFangSC-Regular;
  197. font-size: 14px;
  198. color: #333333;
  199. padding-left:10px;
  200. }
  201. .lr-black-panel .lr-title:after {
  202. position: absolute;
  203. right: 0;
  204. bottom: 0;
  205. left: 0;
  206. height: 1px;
  207. content: '';
  208. -webkit-transform: scaleY(.5);
  209. transform: scaleY(.5);
  210. background-color: #c8c7cc;
  211. }
  212. .lr-black-panel .lr-content {
  213. position: relative;
  214. width: 100%;
  215. }
  216. .lr-black-panel .lr-flex-content {
  217. display: -webkit-box;
  218. display: -webkit-flex;
  219. display: -ms-flexbox;
  220. display: flex;
  221. -webkit-flex-wrap: wrap;
  222. -ms-flex-wrap: wrap;
  223. flex-wrap: wrap;
  224. text-align: center;
  225. -webkit-box-pack: start;
  226. -webkit-justify-content: flex-start;
  227. -ms-flex-pack: start;
  228. justify-content: flex-start;
  229. }
  230. .lr-black-panel .lr-flex-content .targetItem {
  231. -webkit-box-flex: 0;
  232. -webkit-flex: 0 0 33.33%;
  233. -ms-flex: 0 0 33.33%;
  234. flex: 0 0 33.33%;
  235. height: 80px;
  236. padding-top: 10px;
  237. position: relative;
  238. }
  239. .lr-black-panel .lr-flex-content .targetItem:before {
  240. position: absolute;
  241. right: 0;
  242. bottom: 0;
  243. top: 0;
  244. width: 1px;
  245. content: '';
  246. -webkit-transform: scaleX(.5);
  247. transform: scaleX(.5);
  248. background-color: #c8c7cc;
  249. }
  250. .lr-black-panel .lr-flex-content .targetItem:nth-of-type(3n):before {
  251. display: none;
  252. }
  253. .lr-black-panel .lr-flex-content .targetItem:after {
  254. position: absolute;
  255. right: 0;
  256. bottom: 0;
  257. left: 0;
  258. height: 1px;
  259. content: '';
  260. -webkit-transform: scaleY(.5);
  261. transform: scaleY(.5);
  262. background-color: #c8c7cc;
  263. }
  264. .targetItem .name {
  265. font-family: PingFangSC-Regular;
  266. font-size: 12px;
  267. color: #666666;
  268. margin-bottom:5px;
  269. }
  270. .targetItem .number {
  271. font-family: PingFangSC-Regular;
  272. font-size: 24px;
  273. color: #0188D2;
  274. }
  275. .lr-dtlist-item {
  276. padding-right:90px;
  277. }
  278. .lr-dtlist-item .date {
  279. position: absolute;
  280. right: 10px;
  281. top: 0;
  282. }
  283. .lr-chart-content {
  284. height:220px;
  285. }
  286. .lr-chart-container {
  287. position:relative;
  288. width:100%;
  289. height:100%;
  290. }