index.less 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. .content {
  2. display: flex;
  3. justify-content: right;
  4. align-items: flex-end;
  5. height: 100vh;
  6. width: 100%;
  7. padding-bottom: 40px;
  8. color: #3b3b3b;
  9. }
  10. .left {
  11. text-align: center;
  12. height: 100%;
  13. display: flex;
  14. flex-direction: column;
  15. justify-content: flex-end;
  16. }
  17. .right {
  18. .left;
  19. }
  20. .box {
  21. margin: 28px 28px 0 0;
  22. text-align: left;
  23. position: relative;
  24. display: inline-block;
  25. cursor: pointer;
  26. border-radius: 46px 6px 48px 6px;
  27. box-shadow: 2px 13px 18px 0 rgba(9, 64, 115, 0.49);
  28. > ul {
  29. display: flex;
  30. justify-content: center;
  31. > li {
  32. text-align: center;
  33. width: 50%;
  34. }
  35. }
  36. }
  37. .smartWork {
  38. .box;
  39. width: 604px;
  40. height: 357px;
  41. background: url('@/assets/home/bg5.png') no-repeat center;
  42. background-size: 100% 100%;
  43. }
  44. .selfInspection {
  45. .box;
  46. width: 403px;
  47. height: 357px;
  48. background: url('@/assets/home/bg6.png') no-repeat center;
  49. background-size: 100% 100%;
  50. }
  51. .waterAmt {
  52. .box;
  53. width: 604px;
  54. height: 340px;
  55. background: url('@/assets/home/bg1.png') no-repeat center;
  56. background-size: 100% 100%;
  57. }
  58. .waterQuality {
  59. .box;
  60. width: 604px;
  61. height: 399px;
  62. background: url('@/assets/home/bg3.png') no-repeat center;
  63. background-size: 100% 100%;
  64. }
  65. .backlogMain {
  66. .box;
  67. width: 604px;
  68. height: 357px;
  69. background: url('@/assets/home/bg7.png') no-repeat center;
  70. background-size: 100% 100%;
  71. }
  72. .electric {
  73. .box;
  74. width: 707px;
  75. height: 335px;
  76. background: url('@/assets/home/bg2.png') no-repeat center;
  77. background-size: 100% 100%;
  78. }
  79. .medicine {
  80. .box;
  81. width: 707px;
  82. height: 399px;
  83. background: url('@/assets/home/bg4.png') no-repeat center;
  84. background-size: 100% 100%;
  85. }
  86. .scadaMain {
  87. .box;
  88. width: 707px;
  89. height: 357px;
  90. background: url('@/assets/home/bg8.png') no-repeat center;
  91. background-size: 100% 100%;
  92. }
  93. .titleContent {
  94. margin: 20px 36px;
  95. display: inline-block;
  96. position: relative;
  97. }
  98. .boxTitle {
  99. padding: 0 10px;
  100. position: relative;
  101. // z-index: 99;
  102. font-size: 32px;
  103. font-weight: 600;
  104. color: #0139f1;
  105. line-height: 34px;
  106. z-index: 1;
  107. }
  108. .line {
  109. position: absolute;
  110. bottom: 0;
  111. width: 100%;
  112. height: 14px;
  113. background: url('@/assets/home-box-line.png') no-repeat center;
  114. background-size: 100% 100%;
  115. z-index: 0;
  116. }
  117. .name {
  118. font-size: 22px;
  119. font-weight: 400;
  120. color: #ffffff;
  121. line-height: 28px;
  122. text-align: center;
  123. margin-top: 18px;
  124. }
  125. .value {
  126. margin: 50px 0;
  127. font-size: 40px;
  128. font-weight: 600;
  129. color: #3b3b3b;
  130. line-height: 50px;
  131. text-align: center;
  132. letter-spacing: 4px;
  133. font-family: PangMenZhengDao-3, PangMenZhengDao-3;
  134. }
  135. .valueLong {
  136. .value;
  137. margin: 80px 0;
  138. }
  139. .boxH {
  140. .box;
  141. height: 420px;
  142. }
  143. .mask {
  144. position: absolute;
  145. top: 0;
  146. left: 0;
  147. width: 100%;
  148. height: 100%;
  149. }
  150. .scadaContent {
  151. padding: 20px;
  152. height: 30px;
  153. width: 1000px;
  154. display: flex;
  155. justify-content: space-between;
  156. iframe {
  157. height: 100%;
  158. width: calc(50% - 10px);
  159. border: none;
  160. pointer-events: none;
  161. }
  162. }
  163. .scoreBox {
  164. margin-top: 10px;
  165. display: flex;
  166. justify-content: space-around;
  167. .score {
  168. font-size: 50px;
  169. font-weight: 600;
  170. font-family: PangMenZhengDao-3, PangMenZhengDao-3;
  171. color: #615d5d;
  172. }
  173. .scoreTitle {
  174. width: 300px;
  175. font-size: 40px;
  176. margin-top: 20px;
  177. font-family: Source Han Sans, Source Han Sans;
  178. color: #3b3b3b;
  179. }
  180. .grade {
  181. font-size: 22px;
  182. margin-top: 10px;
  183. }
  184. .circle {
  185. width: 178px;
  186. height: 178px;
  187. text-align: center;
  188. display: flex;
  189. flex-direction: column;
  190. justify-content: center;
  191. // border-image: linear-gradient(49deg, rgba(255, 123.24999645352364, 0, 1), rgba(255, 242.24999696016312, 0, 1)) 25 25;
  192. background: url('@/assets/home-circle.png') no-repeat center;
  193. background-size: 100% 100%;
  194. }
  195. }
  196. .time {
  197. font-size: 22px;
  198. text-align: right;
  199. position: absolute;
  200. right: 49px;
  201. bottom: 14px;
  202. }
  203. .insTag {
  204. position: absolute;
  205. right: 54px;
  206. top: 44px;
  207. width: 114px;
  208. height: 50px;
  209. background: #4a90e2;
  210. border-radius: 5px;
  211. text-align: center;
  212. line-height: 50px;
  213. font-size: 26px;
  214. font-weight: 400;
  215. color: #ffffff;
  216. }
  217. .insStatus {
  218. text-align: center;
  219. font-size: 42px;
  220. font-weight: 500;
  221. color: #f5a623;
  222. line-height: 56px;
  223. margin-top: 50px;
  224. margin-bottom: 22px;
  225. }
  226. .centerBox {
  227. display: flex;
  228. justify-content: space-around;
  229. height: calc(100vh - 80px);
  230. align-items: flex-end;
  231. }
  232. .backlog {
  233. margin-right: 6px;
  234. margin-bottom: 40px;
  235. padding: 0 20px;
  236. overflow-y: auto;
  237. height: 260px;
  238. color: #3b3b3b;
  239. .item {
  240. padding: 8px 0 14px;
  241. width: 100%;
  242. font-size: 22px;
  243. line-height: 50px;
  244. border-bottom: 1px solid #d8d8d8;
  245. }
  246. .titleCon {
  247. display: flex;
  248. align-items: center;
  249. }
  250. .point {
  251. display: inline-block;
  252. width: 12px;
  253. height: 24px;
  254. background-color: #ff8400;
  255. }
  256. .createTime {
  257. float: right;
  258. }
  259. .titleText {
  260. font-size: 24px;
  261. margin: 0 20px;
  262. font-family: Source Han Sans, Source Han Sans;
  263. }
  264. .bottomCon {
  265. margin-left: 24px;
  266. font-size: 20px;
  267. line-height: 36px;
  268. word-wrap: break-word;
  269. font-family: Source Han Sans, Source Han Sans;
  270. }
  271. }
  272. .count {
  273. background: #f69040;
  274. border-radius: 4px;
  275. margin-left: 10px;
  276. padding: 0 6px;
  277. }
  278. .btn1 {
  279. margin-bottom: 20px;
  280. padding: 14px 28px;
  281. font-size: 32px;
  282. font-family: Source Han Sans, Source Han Sans;
  283. font-weight: 500;
  284. color: #ffffff;
  285. display: inline-block;
  286. border-radius: 100px;
  287. background-color: #1755ff;
  288. }
  289. .btn2 {
  290. .btn1;
  291. background-color: #1d83ff;
  292. }
  293. .selfCon {
  294. margin-top: 10px;
  295. display: flex;
  296. justify-content: space-around;
  297. align-items: center;
  298. .circle {
  299. width: 178px;
  300. height: 178px;
  301. text-align: center;
  302. line-height: 178px;
  303. background: url('@/assets/home-self-circle.png') no-repeat center;
  304. background-size: 100% 100%;
  305. }
  306. .text {
  307. width: 119px;
  308. height: 50px;
  309. font-size: 50px;
  310. font-family: Source Han Sans, Source Han Sans;
  311. font-weight: 500;
  312. }
  313. .texting {
  314. width: 128px;
  315. font-size: 40px;
  316. margin-top: 20px;
  317. font-family: Source Han Sans, Source Han Sans;
  318. color: #3b3b3b;
  319. }
  320. }