index.less 15 KB

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