index.less 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686
  1. .devicePage {
  2. background-color: rgba(255, 255, 255, 1);
  3. position: relative;
  4. // overflow: hidden;
  5. .listBox {
  6. width: 100%;
  7. // height: calc(100vh - 100px);
  8. // height: auto;
  9. // overflow: auto;
  10. .deviceBox1 {
  11. .searchRow {
  12. margin: 18px 15px;
  13. .bd3 {
  14. width: 87px;
  15. height: 16px;
  16. .outer4 {
  17. width: 16px;
  18. height: 16px;
  19. background: url("../../assets/home/titleIcon.png") top center no-repeat;
  20. background-size: 100%;
  21. }
  22. .txt2 {
  23. width: 65px;
  24. height: 15px;
  25. overflow-wrap: break-word;
  26. color: rgba(64, 77, 116, 1);
  27. font-size: 15px;
  28. font-family: PingFangSC-Semibold;
  29. text-align: left;
  30. white-space: nowrap;
  31. line-height: 15px;
  32. display: block;
  33. }
  34. }
  35. .main5 {
  36. width: auto;
  37. cursor: pointer;
  38. .label2 {
  39. width: 20px;
  40. height: 20px;
  41. margin-right: 5px;
  42. }
  43. }
  44. }
  45. .pic1 {
  46. width: 100%;
  47. height: 2px;
  48. }
  49. .bd1 {
  50. width: 100%;
  51. height: 108px;
  52. background: url(../../assets/home/outer.png) no-repeat;
  53. background-size: 100% 100%;
  54. .box2 {
  55. width: 100%;
  56. height: 100%;
  57. .TextGroup3 {
  58. height: 57px;
  59. width: 48px;
  60. .group1 {
  61. width: 48px;
  62. height: 57px;
  63. .word4 {
  64. height: 26px;
  65. overflow-wrap: break-word;
  66. color: rgba(223, 94, 76, 1);
  67. font-size: 22px;
  68. font-family: Helvetica;
  69. text-align: center;
  70. white-space: nowrap;
  71. line-height: 26px;
  72. display: block;
  73. }
  74. .info1 {
  75. height: 17px;
  76. overflow-wrap: break-word;
  77. color: rgba(135, 135, 166, 1);
  78. font-size: 12px;
  79. text-align: center;
  80. white-space: nowrap;
  81. line-height: 17px;
  82. margin-top: 14px;
  83. display: block;
  84. }
  85. }
  86. }
  87. .TextGroup4 {
  88. height: 57px;
  89. width: 48px;
  90. .main6 {
  91. width: 48px;
  92. height: 57px;
  93. .word5 {
  94. height: 26px;
  95. overflow-wrap: break-word;
  96. color: rgba(223, 94, 76, 1);
  97. font-size: 22px;
  98. font-family: Helvetica;
  99. text-align: center;
  100. white-space: nowrap;
  101. line-height: 26px;
  102. display: block;
  103. }
  104. .word6 {
  105. height: 17px;
  106. overflow-wrap: break-word;
  107. color: rgba(135, 135, 166, 1);
  108. font-size: 12px;
  109. text-align: center;
  110. white-space: nowrap;
  111. line-height: 17px;
  112. margin-top: 14px;
  113. display: block;
  114. }
  115. }
  116. }
  117. }
  118. }
  119. }
  120. .deviceBox2 {
  121. width: 100%;
  122. .section1 {
  123. background-color: rgba(255, 255, 255, 1);
  124. margin-top: 1px;
  125. width: 100%;
  126. .outer1 {
  127. width: 100%;
  128. .bd1 {
  129. width: 100%;
  130. height: 15px;
  131. .layer1 {
  132. background-color: #5a9cc8;
  133. border-radius: 2px;
  134. width: 4px;
  135. height: 12px;
  136. margin-top: 4px;
  137. }
  138. .txtBox {
  139. width: 200px;
  140. // overflow: auto;
  141. .txt1 {
  142. white-space: nowrap;
  143. color: rgba(64, 77, 116, 1);
  144. font-size: 15px;
  145. font-family: PingFangSC-Medium;
  146. text-align: left;
  147. line-height: 15px;
  148. display: block;
  149. margin: 3px 0 0 6px;
  150. overflow: hidden;
  151. text-overflow: ellipsis;
  152. }
  153. }
  154. .layer2 {
  155. height: 18px;
  156. background: url("../../assets/device/powerOff.png") 100% no-repeat;
  157. background-size: 100%;
  158. width: 18px;
  159. margin-left: 30px;
  160. &.layerLeft {
  161. margin-left: 5px;
  162. }
  163. &.deviceOn {
  164. background: url("../../assets/device/powerOn.png") 100% no-repeat;
  165. background-size: 100%;
  166. }
  167. }
  168. .flash-icon {
  169. animation: blink-animation 0.5s infinite; // 定义闪烁动画,1s表示1秒,infinite表示无限循环
  170. }
  171. @keyframes blink-animation {
  172. 0% {
  173. opacity: 1; // 初始状态完全显示
  174. }
  175. 50% {
  176. opacity: 0; // 中间状态隐藏
  177. }
  178. 100% {
  179. opacity: 1; // 结束状态完全显示
  180. }
  181. }
  182. .box4 {
  183. width: 20px;
  184. height: 20px;
  185. background: url("../../assets/device/alarm.png") 100% no-repeat;
  186. background-size: 100%;
  187. }
  188. }
  189. .txt1 {
  190. width: 100%;
  191. color: rgba(64, 77, 116, 1);
  192. font-size: 14px;
  193. display: flex;
  194. align-items: center;
  195. }
  196. .pic1 {
  197. width: 100%;
  198. height: 2px;
  199. // margin-top: 19px;
  200. }
  201. .contentBottomCon {
  202. background-color: #e7e7e7;
  203. border-radius: 15px;
  204. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  205. padding: 5px 5px;
  206. .contentWord {
  207. // width: 100%;
  208. padding: 10px 10px;
  209. color: rgba(64, 77, 116, 1);
  210. // font-size: 14px;
  211. text-align: left;
  212. flex-wrap: wrap;
  213. line-height: 14px;
  214. display: flex;
  215. align-items: center;
  216. .word {
  217. font-size: 12px;
  218. }
  219. .word2 {
  220. width: 75%;
  221. padding: 0 0;
  222. .van-cell--center {
  223. background-color: #e7e7e7;
  224. }
  225. .van-field__control {
  226. border: 0.5px solid #ccc;
  227. background-color: #fff;
  228. padding: 2px 5px;
  229. border-radius: 3px;
  230. // width: 40%;
  231. /* 添加边框 */
  232. }
  233. .van-field__body {
  234. background-color: #e7e7e7;
  235. }
  236. }
  237. .word3 {
  238. width: 50%;
  239. padding: 0 0;
  240. margin-right: 10px;
  241. line-height: 20px;
  242. }
  243. .editIcon {
  244. color: #4d6add;
  245. // padding: 0 0 0 5px;
  246. }
  247. .btn {
  248. justify-content: flex-end;
  249. }
  250. .clickable-link {
  251. cursor: pointer;
  252. font-size: 12px;
  253. width: 240px;
  254. line-height: 20px;
  255. }
  256. }
  257. .alert-item {
  258. display: flex;
  259. justify-content: space-between; /* 左右分隔排列 */
  260. align-items: center;
  261. padding: 10px 10px;
  262. color: rgba(64, 77, 116, 1);
  263. font-size: 13px;
  264. line-height: 20px;
  265. .lineCon {
  266. width: 0.1px;
  267. height: 35px;
  268. border: 1px solid #ffffff;
  269. transform: scale(0.6);
  270. background-color: #ffffff;
  271. }
  272. }
  273. .alert-info {
  274. flex: 1; /* 左侧部分占据剩余空间 */
  275. }
  276. .alert-actions {
  277. margin-left: 10px; /* 右侧消除按钮与左侧内容之间的间距 */
  278. }
  279. .van-button--primary {
  280. background-color: #2c87c8;
  281. padding: 0 8px;
  282. margin: 0 10px 0 0;
  283. height: 25px !important;
  284. }
  285. .layer2 {
  286. width: 100%;
  287. }
  288. .layer3 {
  289. width: 100%;
  290. display: flex;
  291. align-items: center;
  292. .word1 {
  293. text-overflow: ellipsis;
  294. width: 100%;
  295. font-size: 14px;
  296. }
  297. .word3 {
  298. color: rgba(64, 77, 116, 1);
  299. width: 70%;
  300. }
  301. .editIcon {
  302. color: #2c87c8;
  303. padding: 0 0 0px 5px;
  304. }
  305. }
  306. .layer5 {
  307. // width: 100%;
  308. padding: 10px 10px;
  309. .word5 {
  310. color: rgba(64, 77, 116, 1);
  311. font-size: 12px;
  312. }
  313. }
  314. .info1 {
  315. overflow-wrap: break-word;
  316. color: rgba(64, 77, 116, 1);
  317. font-size: 14px;
  318. text-align: left;
  319. white-space: nowrap;
  320. display: block;
  321. }
  322. .info2 {
  323. overflow-wrap: break-word;
  324. color: rgba(64, 77, 116, 1);
  325. font-size: 14px;
  326. text-align: left;
  327. white-space: nowrap;
  328. display: block;
  329. }
  330. .info3 {
  331. overflow-wrap: break-word;
  332. color: rgba(64, 77, 116, 1);
  333. font-size: 14px;
  334. text-align: left;
  335. white-space: nowrap;
  336. // display: block;
  337. }
  338. .info4 {
  339. width: 60%;
  340. }
  341. .info5 {
  342. overflow-wrap: break-word;
  343. word-wrap: break-word;
  344. color: rgba(64, 77, 116, 1);
  345. font-size: 14px;
  346. text-align: left;
  347. max-width: 100%;
  348. }
  349. .editDeviceBtnCon {
  350. .box2 {
  351. width: 20px;
  352. height: 20px;
  353. background: url("../../assets/order/gotoRight.png") no-repeat;
  354. background-size: 100%;
  355. }
  356. .c-text-14 {
  357. display: inline-block;
  358. /* 将行内文本转为块级元素 */
  359. padding: 5px 8px;
  360. /* 添加内边距 */
  361. background-color: #df5e4c;
  362. border-radius: 14px;
  363. /* 添加圆角效果 */
  364. color: #fff;
  365. /* 设置文本颜色 */
  366. cursor: pointer;
  367. /* 设置光标样式 */
  368. }
  369. .l-flex-RC {
  370. margin-left: 10px;
  371. margin-right: 10px;
  372. }
  373. }
  374. .bd8 {
  375. width: 345px;
  376. height: 18px;
  377. margin: 20px 0 0 15px;
  378. .outer5 {
  379. background-color: rgba(128, 150, 236, 1);
  380. border-radius: 2px;
  381. width: 4px;
  382. height: 12px;
  383. margin-top: 4px;
  384. }
  385. .txt6 {
  386. width: 176px;
  387. height: 13px;
  388. overflow-wrap: break-word;
  389. color: rgba(64, 77, 116, 1);
  390. font-size: 14px;
  391. font-family: PingFangSC-Medium;
  392. text-align: left;
  393. white-space: nowrap;
  394. line-height: 15px;
  395. display: block;
  396. margin: 3px 0 0 6px;
  397. }
  398. .outer6 {
  399. width: 18px;
  400. height: 18px;
  401. background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng164fc6854bc0badab9c36f9e9751c42ceda02742fc5e78f7662ced4a0f76844c) 100% no-repeat;
  402. margin-left: 141px;
  403. }
  404. }
  405. .txt7 {
  406. width: 242px;
  407. height: 20px;
  408. overflow-wrap: break-word;
  409. color: rgba(64, 77, 116, 1);
  410. font-size: 14px;
  411. text-align: left;
  412. white-space: nowrap;
  413. line-height: 20px;
  414. display: block;
  415. margin: 8px 0 0 15px;
  416. }
  417. .word8 {
  418. width: 262px;
  419. height: 13px;
  420. overflow-wrap: break-word;
  421. color: rgba(64, 77, 116, 1);
  422. font-size: 14px;
  423. text-align: left;
  424. white-space: nowrap;
  425. line-height: 13px;
  426. display: block;
  427. margin: 10px 0 0 15px;
  428. }
  429. .bd9 {
  430. width: 61px;
  431. height: 17px;
  432. margin: 15px 0 0 157px;
  433. .txt8 {
  434. width: 48px;
  435. height: 17px;
  436. overflow-wrap: break-word;
  437. color: rgba(135, 135, 166, 1);
  438. font-size: 14px;
  439. text-align: center;
  440. white-space: nowrap;
  441. line-height: 17px;
  442. display: block;
  443. }
  444. .block1 {
  445. width: 10px;
  446. height: 4px;
  447. background: url("../../assets/device/deviceSelect.png") 0px -1px no-repeat;
  448. margin-top: 7px;
  449. }
  450. }
  451. .bd10 {
  452. width: 345px;
  453. height: 1px;
  454. background: url("../../assets/home/line.png") -1px 0px no-repeat;
  455. margin: 15px 0 0 15px;
  456. }
  457. .bd11 {
  458. width: 345px;
  459. height: 18px;
  460. margin: 20px 0 0 15px;
  461. .section3 {
  462. background-color: rgba(128, 150, 236, 1);
  463. border-radius: 2px;
  464. width: 4px;
  465. height: 12px;
  466. margin-top: 4px;
  467. }
  468. .txt9 {
  469. width: 176px;
  470. height: 13px;
  471. overflow-wrap: break-word;
  472. color: rgba(64, 77, 116, 1);
  473. font-size: 14px;
  474. font-family: PingFangSC-Medium;
  475. text-align: left;
  476. white-space: nowrap;
  477. line-height: 15px;
  478. display: block;
  479. margin: 3px 0 0 6px;
  480. }
  481. .section4 {
  482. width: 22px;
  483. height: 15px;
  484. background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/be1271ed70774869b81ed2d5f43b6a44_mergeImage.png) 100% no-repeat;
  485. margin: 3px 0 0 111px;
  486. }
  487. .section5 {
  488. height: 18px;
  489. background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/5723fcdad1574aef9e65c326de33d8b2_mergeImage.png) 100% no-repeat;
  490. margin-left: 8px;
  491. width: 18px;
  492. .box3 {
  493. background-color: rgba(255, 255, 255, 1);
  494. border-radius: 1px;
  495. width: 2px;
  496. height: 7px;
  497. margin: 2px 0 0 8px;
  498. }
  499. }
  500. }
  501. .txt10 {
  502. width: 242px;
  503. height: 20px;
  504. overflow-wrap: break-word;
  505. color: rgba(64, 77, 116, 1);
  506. font-size: 14px;
  507. text-align: left;
  508. white-space: nowrap;
  509. line-height: 20px;
  510. display: block;
  511. margin: 8px 0 0 15px;
  512. }
  513. }
  514. .sugarTxt {
  515. color: rgba(64, 77, 116, 1);
  516. padding: 10px 10px;
  517. .word {
  518. font-size: 12px;
  519. }
  520. }
  521. .bd6 {
  522. width: 100%;
  523. border-bottom: 1px solid #eee;
  524. .info2 {
  525. overflow-wrap: break-word;
  526. color: #2c87c8;
  527. font-size: 14px;
  528. text-align: center;
  529. white-space: nowrap;
  530. display: block;
  531. }
  532. .group2 {
  533. width: 10px;
  534. height: 10px;
  535. background: url("../../assets/device/deviceSelect.png") center no-repeat;
  536. background-size: 100%;
  537. &.checkType {
  538. transform: scaleY(-1);
  539. }
  540. }
  541. }
  542. }
  543. }
  544. }
  545. }
  546. }
  547. .passwordIdx {
  548. overflow: hidden;
  549. overflow-y: auto;
  550. .headerCon {
  551. .line {
  552. background-color: #8096ec;
  553. border-radius: 2px;
  554. width: 4px;
  555. height: 16px;
  556. }
  557. }
  558. }
  559. .van-button--primary {
  560. background-color: #2c87c8;
  561. border-color: #2c87c8;
  562. }
  563. .van-dropdown-menu__title--active {
  564. color: #2c87c8;
  565. }
  566. .van-dropdown-item__option--active,
  567. .van-dropdown-item__option--active .van-dropdown-item__icon {
  568. color: #2c87c8;
  569. }
  570. .van-dropdown-menu__title {
  571. color: #2c87c8;
  572. }
  573. .van-checkbox__icon--checked .van-icon {
  574. background-color: #2c87c8;
  575. border-color: #2c87c8;
  576. }
  577. :root {
  578. --van-width: auto;
  579. --van-popover-action-width: var(--van-width);
  580. }