Newer
Older
KaiFengPC / src / views / spongePerformance / mainIndex / index.scss
@鲁yixuan 鲁yixuan on 26 Jun 8 KB update
  1. @import '@/assets/styles/variables.module.scss';
  2. #container {
  3. position: relative;
  4. z-index: 1;
  5. display: flex;
  6. flex-direction: column;
  7. width: 100%;
  8. height: 100%;
  9. .el-table {
  10. border: 1px solid $mainColor2;
  11. }
  12. .three {
  13. margin: 10px;
  14. }
  15. .topBox {
  16. // background: red;
  17. // height: 21vh;
  18. height: 205x;
  19. margin: 5px;
  20. display: flex;
  21. justify-content: space-around;
  22. .Annualperformance {
  23. width: 50%;
  24. // background: yellow;
  25. display: flex;
  26. flex-flow: row wrap;
  27. // justify-content: center;
  28. .bag_z {
  29. width: 460px;
  30. height: 90px;
  31. // background: #3afff8;
  32. margin: 5px;
  33. display: flex;
  34. justify-content: space-around;
  35. align-items: center;
  36. .time,
  37. .defen {
  38. flex-direction: column;
  39. color: #fff;
  40. font-size: 18px;
  41. font-weight: 500;
  42. font-family: YouSheBiaoTiHei;
  43. }
  44. }
  45. .astic_border {
  46. background: url('@/assets/newImgs/HMScreen/aimage.png') no-repeat !important;
  47. background-size: 100% 100%;
  48. // border-bottom: 1px solid red;
  49. }
  50. }
  51. .achievements {
  52. width: 50%;
  53. display: flex;
  54. flex-flow: row wrap;
  55. // background: blue;
  56. .bag_a {
  57. width: 460px;
  58. height: 90px;
  59. background: #003b6d;
  60. margin: 5px;
  61. // display: flex;
  62. // justify-content: space-around;
  63. // align-items: center;
  64. border-radius: 6px;
  65. background-size: 100% 100% !important;
  66.  
  67. .conttop {
  68. width: 98%;
  69. display: flex;
  70. height: 30px;
  71. justify-content: space-between;
  72. margin-top: 10px;
  73. // background: #3afff8;
  74. }
  75. .dfFlxa {
  76. margin-top: 15px;
  77. display: flex;
  78. justify-content: space-between;
  79. }
  80. .span {
  81. display: inline-flex;
  82. width: 27px;
  83. height: 12px;
  84. margin-left: 10px;
  85. background: url('@/assets/newImgs/HMScreen/bt_img.png') no-repeat;
  86. background-size: 100% 100%;
  87. }
  88. .name {
  89. color: #ffffff;
  90. font-family: YouSheBiaoTiHei;
  91. font-size: 19px;
  92. font-style: normal;
  93. font-weight: 500;
  94. margin: -1px 10px;
  95. }
  96. .total {
  97. color: #3afff8;
  98. font-family: PangMenZhengDao;
  99. font-size: 24px;
  100. font-style: normal;
  101. font-weight: 600;
  102. }
  103. .fz {
  104. color: #ffffff;
  105. font-family: Source Han Sans CN;
  106. font-size: 14px;
  107. margin-left: 15px;
  108. }
  109. }
  110. }
  111. }
  112.  
  113. .top {
  114. // background: red;
  115. height: 8.6vh;
  116. margin: 10px;
  117. // margin: 5px;
  118. .astic {
  119. flex: 1;
  120. height: 100%;
  121. justify-content: space-around;
  122. align-items: center;
  123. margin: 0 5px;
  124. padding: 0 10px;
  125. border-radius: 6px;
  126. background-size: 100% 100% !important;
  127. }
  128. .astic_border {
  129. border-bottom: 3px solid #108ee9;
  130. }
  131. .flexClass {
  132. margin: 0 10px 0 0;
  133. flex: 0 0 auto;
  134. width: 15%;
  135. justify-content: center;
  136. }
  137. .time,
  138. .defen {
  139. flex-direction: column;
  140. color: #fff;
  141. font-size: 18px;
  142. font-weight: 500;
  143. }
  144. .khtime {
  145. margin-top: 5px;
  146. color: #fff;
  147. font-size: 14px;
  148. font-weight: 400;
  149. }
  150. .year_one {
  151. color: #003b6d;
  152. font-size: 20px;
  153. font-weight: 700;
  154. }
  155. }
  156. .total {
  157. color: #3afff8;
  158. font-size: 32px;
  159. }
  160. .center {
  161. height: 12vh;
  162. margin: 0px 10px;
  163. .astic {
  164. flex: 1;
  165. height: 100%;
  166. margin: 0 10px;
  167. display: flex;
  168. flex-direction: column;
  169. padding: 0 20px;
  170. background: #003b6d;
  171. border-radius: 4px;
  172. .cont {
  173. flex: 1;
  174. align-items: center;
  175. .span {
  176. display: inline-flex;
  177. width: 4px;
  178. height: 18px;
  179. flex-shrink: 0;
  180. border-radius: 2px;
  181. background: #0f69ff;
  182. }
  183. .name {
  184. color: #c6c6c6;
  185. font-family: Source Han Sans CN;
  186. font-size: 18px;
  187. font-style: normal;
  188. font-weight: 500;
  189. margin: -1px 10px;
  190. }
  191. .total {
  192. color: #0f69ff;
  193. font-family: PangMenZhengDao;
  194. font-size: 24px;
  195. font-style: normal;
  196. font-weight: 600;
  197. }
  198. .fz {
  199. color: #fff;
  200. font-family: Source Han Sans CN;
  201. font-size: 14px;
  202. }
  203. }
  204. .top {
  205. display: flex;
  206. height: 30px;
  207. justify-content: space-between;
  208. }
  209. }
  210. .flexClass {
  211. margin: 0 10px 0 0;
  212. }
  213. }
  214. .three {
  215. height: 32.8vh;
  216. width: 98%;
  217. background: #003b6d;
  218. .left {
  219. display: flex;
  220. background: #003b6d;
  221. padding: 0 20px;
  222. margin: 0 10px;
  223. .nnfzbz {
  224. position: relative;
  225. flex: 1;
  226. }
  227. .otherzb {
  228. max-width: 30vw;
  229. }
  230. .span {
  231. display: inline-flex;
  232. width: 27px;
  233. height: 12px;
  234. margin-left: 10px;
  235. background: url('@/assets/newImgs/HMScreen/bt_img.png') no-repeat;
  236. background-size: 100% 100%;
  237. }
  238. .tittle {
  239. color: #fff;
  240. font-size: 14px;
  241. font-style: normal;
  242. font-weight: 500;
  243. display: inline-block;
  244. margin: 0 10px;
  245. .racal {
  246. display: inline-block;
  247. width: 7px;
  248. height: 7px;
  249. margin-bottom: 1px;
  250. flex-shrink: 0;
  251. background: #3afff8;
  252. border-radius: 50%;
  253. }
  254. }
  255. .dbqk,
  256. .dbqkCenter {
  257. display: flex;
  258. flex-direction: column;
  259. justify-content: center;
  260. align-items: center;
  261. margin: 10px 0;
  262. .dffz {
  263. color: #fff;
  264. font-family: Source Han Sans CN;
  265. font-size: 14px;
  266. margin: 3px 0;
  267. }
  268. .dffzqk {
  269. color: #3afff8;
  270. opacity: 0.9;
  271. font-family: Source Han Sans CN;
  272. font-size: 14px;
  273. margin: 10px 0;
  274. }
  275. }
  276. }
  277. .right {
  278. padding: 15px 0 0 15px;
  279. }
  280. .flexClass {
  281. margin: 0 10px 0 0;
  282. }
  283. }
  284. .foot {
  285. height: 320px;
  286. overflow: hidden;
  287. display: flex;
  288. margin: 0 10px;
  289. .right,
  290. .right2 {
  291. width: 400px;
  292. }
  293. .left {
  294. flex: 1;
  295. }
  296. .left,
  297. .right,
  298. .right2 {
  299. background: #003b6d;
  300. padding: 0 10px;
  301. margin-right: 10px;
  302. .bzqk {
  303. width: 52px;
  304. height: 20px;
  305. display: inline-block;
  306. float: right;
  307. stroke-width: 1px;
  308. text-align: center;
  309. font-size: 14px;
  310. }
  311. .dw {
  312. color: #fff;
  313. font-family: Source Han Sans CN;
  314. font-size: 14px;
  315. margin-top: 5px;
  316. }
  317. .span {
  318. display: inline-flex;
  319. width: 27px;
  320. height: 12px;
  321. // margin-left: 10px;
  322. background: url('@/assets/newImgs/HMScreen/bt_img.png') no-repeat;
  323. background-size: 100% 100%;
  324. }
  325. .tittle {
  326. color: #fff;
  327. font-family: Source Han Sans CN;
  328. font-size: 16px;
  329. font-style: normal;
  330. font-weight: 500;
  331. display: inline-block;
  332. margin: 0 10px;
  333. .racal {
  334. display: inline-block;
  335. width: 7px;
  336. height: 7px;
  337. margin-bottom: 1px;
  338. flex-shrink: 0;
  339. background: #3afff8;
  340. border-radius: 50%;
  341. }
  342. .df {
  343. display: inline-block;
  344. width: 372px;
  345. text-align: center;
  346. span {
  347. color: #3afff8;
  348. }
  349. }
  350. .gs {
  351. color: #fff;
  352. font-family: Source Han Sans CN;
  353. font-size: 12px;
  354. margin-left: 3px;
  355. }
  356. }
  357. .tittle_foot {
  358. flex-direction: row;
  359. width: 95%;
  360. justify-content: space-between;
  361. }
  362. }
  363. .flexClass {
  364. margin: 0 10px 0 0;
  365. }
  366. .left {
  367. .footTable {
  368. margin: 10px 0 0 10px;
  369. }
  370. }
  371. }
  372. }
  373.  
  374. .flex {
  375. display: flex;
  376. }
  377.  
  378. .flex_center {
  379. display: flex;
  380. align-items: center;
  381. justify-content: space-between;
  382. }
  383.  
  384. .dashbord {
  385. height: 258px;
  386. border-right: 1.5px dashed #4285f4;
  387. position: absolute;
  388. top: 40px;
  389. left: 5px;
  390. }
  391.  
  392. .jsgcgl {
  393. display: flex;
  394. flex-direction: column;
  395. align-items: center;
  396. position: relative;
  397. }
  398. .dfFlx {
  399. display: flex;
  400. justify-content: space-between;
  401. }
  402. .progress {
  403. // margin: auto;
  404. width: 70%;
  405. }
  406.  
  407. :deep(.el-table .el-table__header-wrapper th) {
  408. background-color: #005cba !important;
  409. }