user.scss 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568
  1. .userlist {
  2. width: 100%;
  3. height: 100%;
  4. display: flex;
  5. align-items: center;
  6. justify-content: space-between;
  7. box-sizing: border-box;
  8. .userlist-box {
  9. width: 100%;
  10. height: 100%;
  11. background: #ffffff;
  12. display: flex;
  13. .userlist-left {
  14. width: 5rem;
  15. height: 100%;
  16. border-right: 0.01rem solid #e6e6e6;
  17. box-sizing: border-box;
  18. display: flex;
  19. flex-direction: column;
  20. .notYet {
  21. color: #e6e6e6;
  22. font-size: 0.4rem;
  23. margin-top: 3rem;
  24. text-align: center;
  25. }
  26. .add-user {
  27. padding: .15rem;
  28. border-top: 0.01rem solid #e6e6e6;
  29. background: #fff;
  30. button {
  31. height: .4rem;
  32. line-height: .4rem;
  33. }
  34. }
  35. .user-title {
  36. text-align: center;
  37. line-height: 0.6rem;
  38. font-size: 0.18rem;
  39. font-weight: 500;
  40. height: 0.6rem;
  41. border-bottom: 0.01rem solid #e6e6e6;
  42. box-sizing: border-box;
  43. position: relative;
  44. .icongengduo1 {
  45. position: absolute;
  46. top: 50%;
  47. right: 0.2rem;
  48. transform: translateY(-50%);
  49. font-size: 0.3rem;
  50. color: $primary-color;
  51. }
  52. }
  53. .user-search {
  54. width: 100%;
  55. height: 0.6rem;
  56. border-bottom: 0.01rem solid #e6e6e6;
  57. display: flex;
  58. align-items: center;
  59. justify-content: center;
  60. padding: 0 0.2rem;
  61. box-sizing: border-box;
  62. .search {
  63. width: 5.6rem;
  64. height: 0.4rem;
  65. border-radius: 0.04rem;
  66. background: #f5f5f5;
  67. display: flex;
  68. align-items: center;
  69. padding: 0 0.2rem;
  70. box-sizing: border-box;
  71. .iconfont {
  72. font-size: 0.16rem;
  73. color: #909399;
  74. margin-right: 0.11rem;
  75. }
  76. input {
  77. width: 80%;
  78. height: 60%;
  79. border: none;
  80. font-size: 0.14rem;
  81. }
  82. }
  83. }
  84. .user-list-wrap {
  85. flex: 1;
  86. height: 0;
  87. }
  88. .user-list-scroll {
  89. width: 100%;
  90. height: 100%;
  91. .itemhover {
  92. background: #f3eeff;
  93. }
  94. .item {
  95. width: 100%;
  96. display: flex;
  97. align-items: center;
  98. padding: 0.2rem;
  99. box-sizing: border-box;
  100. border-bottom: 0.01rem solid #e6e6e6;
  101. image {
  102. width: 0.7rem;
  103. height: 0.7rem;
  104. margin-right: 0.1rem;
  105. }
  106. .item-right {
  107. display: flex;
  108. flex-direction: row;
  109. justify-content: space-between;
  110. align-items: center;
  111. height: 0.6rem;
  112. width: 100%;
  113. .user-name {
  114. font-size: 0.16rem;
  115. }
  116. .user-money {
  117. font-size: 0.14rem;
  118. margin-top: 0.1rem;
  119. }
  120. .login-time{
  121. margin-top: 0.1rem;
  122. }
  123. .user-status{
  124. text-align: right;
  125. color: #8558fa;
  126. font-size: 0.16rem;
  127. }
  128. }
  129. }
  130. }
  131. }
  132. .userlist-right {
  133. width: 0;
  134. flex: 1;
  135. height: 100%;
  136. border-right: 0.01rem solid #e6e6e6;
  137. box-sizing: border-box;
  138. .user-title {
  139. text-align: center;
  140. line-height: 0.6rem;
  141. font-size: 0.18rem;
  142. font-weight: 500;
  143. height: 0.6rem;
  144. border-bottom: 0.01rem solid #e6e6e6;
  145. box-sizing: border-box;
  146. position: relative;
  147. .icongengduo1,.iconguanbi1 {
  148. position: absolute;
  149. top: 50%;
  150. right: 0.2rem;
  151. transform: translateY(-50%);
  152. font-size: 0.3rem;
  153. color: $primary-color;
  154. cursor: pointer;
  155. }
  156. }
  157. .user-information {
  158. width: 100%;
  159. padding: 0.2rem 0.2rem 0.2rem 0.2rem;
  160. box-sizing: border-box;
  161. height: calc(100% - 0.6rem);
  162. overflow: scroll;
  163. position: relative;
  164. .title {
  165. font-size: 0.18rem;
  166. margin-bottom: 0.32rem;
  167. }
  168. .title2 {
  169. margin-bottom: 0.35rem;
  170. }
  171. .information-box {
  172. display: flex;
  173. justify-content: space-between;
  174. .box-left {
  175. width: 5rem;
  176. .information {
  177. width: 100%;
  178. padding-left: 0.1rem;
  179. box-sizing: border-box;
  180. display: flex;
  181. align-items: center;
  182. margin-bottom: 0.15rem;
  183. view {
  184. color: #303133;
  185. font-size: 0.14rem;
  186. }
  187. view:nth-child(1) {
  188. width: 1.3rem;
  189. margin-right: 0.16rem;
  190. text-align: right;
  191. }
  192. view:nth-child(2) {
  193. width: 74%;
  194. margin-right: 0.23rem;
  195. text-overflow: ellipsis;
  196. overflow: hidden;
  197. white-space: nowrap;
  198. }
  199. }
  200. .information:last-child {
  201. margin-bottom: 0.35rem;
  202. }
  203. }
  204. .user-img {
  205. width: 1.5rem;
  206. height: 1.5rem;
  207. }
  208. }
  209. .table {
  210. width: 100%;
  211. height: 2.6rem;
  212. box-sizing: border-box;
  213. .single-specification {
  214. width: 100%;
  215. max-height: 100%;
  216. padding-left: 0.1rem;
  217. box-sizing: border-box;
  218. .item {
  219. width: 100%;
  220. margin-bottom: 0.3rem;
  221. display: flex;
  222. align-items: center;
  223. image {
  224. width: 0.5rem;
  225. }
  226. .name {
  227. display: flex;
  228. align-items: center;
  229. margin-right: 0.16rem;
  230. width: 0.7rem;
  231. text-align: right;
  232. }
  233. .message {
  234. width: 74%;
  235. text-overflow: ellipsis;
  236. overflow: hidden;
  237. white-space: nowrap;
  238. }
  239. }
  240. }
  241. .table-all {
  242. width: 100%;
  243. display: flex;
  244. align-items: center;
  245. justify-content: space-between;
  246. padding: 0 0.38rem;
  247. box-sizing: border-box;
  248. .table-td {
  249. font-size: 0.14rem;
  250. text-align: left;
  251. text-overflow: ellipsis;
  252. overflow: hidden;
  253. white-space: nowrap;
  254. }
  255. }
  256. .table-th {
  257. height: 0.56rem;
  258. background: #f7f8fa;
  259. }
  260. .table-tb {
  261. width: 100%;
  262. height: calc(100% - 0.56rem);
  263. .table-tr {
  264. height: 0.7rem;
  265. border-bottom: 0.01rem solid #e6e6e6;
  266. box-sizing: border-box;
  267. .table-td {
  268. image {
  269. width: 0.5rem;
  270. height: 0.5rem;
  271. }
  272. text-overflow: -o-ellipsis-lastline;
  273. overflow: hidden;
  274. text-overflow: ellipsis;
  275. display: -webkit-box;
  276. -webkit-line-clamp: 2;
  277. line-clamp: 2;
  278. -webkit-box-orient: vertical;
  279. }
  280. }
  281. }
  282. }
  283. }
  284. }
  285. }
  286. }
  287. .no-center {
  288. width: 100%;
  289. height: 100%;
  290. display: flex;
  291. align-items: center;
  292. justify-content: center;
  293. font-size: 0.3rem;
  294. color: #909399;
  295. }
  296. view {
  297. color: #303133;
  298. }
  299. /deep/ .uni-scroll-view::-webkit-scrollbar {
  300. width: 0.05rem;
  301. height: 0.3rem;
  302. }
  303. /deep/ .uni-scroll-view::-webkit-scrollbar-thumb {
  304. border-radius: 0.1rem;
  305. box-shadow: inset 0 0 0.05rem rgba(0, 0, 0, 0.2);
  306. background: rgba(193, 193, 193, 1);
  307. }
  308. .user-information::-webkit-scrollbar {
  309. width: 0.05rem;
  310. height: 0.3rem;
  311. }
  312. .user-information::-webkit-scrollbar-thumb {
  313. border-radius: 0.1rem;
  314. box-shadow: inset 0 0 0.05rem rgba(0, 0, 0, 0.2);
  315. background: rgba(193, 193, 193, 1);
  316. }
  317. .button-box {
  318. width: 100%;
  319. .button {
  320. width: 1rem;
  321. height: 0.4rem;
  322. color: $primary-color;
  323. text-align: center;
  324. line-height: 0.4rem;
  325. float: right;
  326. font-size: 0.16rem;
  327. margin-left: 0.1rem;
  328. border: 0.01rem solid $primary-color;
  329. }
  330. .buttonhvoer {
  331. color: #ffffff;
  332. background: $primary-color;
  333. }
  334. }
  335. .button-box:after {
  336. overflow: hidden;
  337. content: '';
  338. height: 0;
  339. display: block;
  340. clear: both;
  341. }
  342. .cart-empty {
  343. position: absolute;
  344. top: 50%;
  345. left: 50%;
  346. transform: translate(-50%, -50%);
  347. width: 2.1rem;
  348. height: 1.55;
  349. }
  350. .exwarehouse-body {
  351. width: 6rem;
  352. min-height: 5rem;
  353. border-radius: 0.04rem !important;
  354. }
  355. view {
  356. color: 333;
  357. }
  358. .record-body {
  359. width: 10rem;
  360. min-height: 7rem;
  361. }
  362. .form-content {
  363. margin-top: 0.2rem;
  364. .form-item {
  365. margin-bottom: 0.1rem;
  366. display: flex;
  367. .form-label {
  368. width: 1.3rem;
  369. text-align: right;
  370. padding-right: 0.1rem;
  371. box-sizing: border-box;
  372. height: 0.32rem;
  373. line-height: 0.32rem;
  374. .required {
  375. color: red;
  376. margin-right: 0.03rem;
  377. }
  378. }
  379. .form-inline {
  380. width: 2.4rem;
  381. line-height: 0.32rem;
  382. margin-right: 0.1rem;
  383. box-sizing: border-box;
  384. .form-input {
  385. border-width: 0.01rem;
  386. border-style: solid;
  387. background-color: #fff;
  388. color: rgba(0, 0, 0, 0.85);
  389. border-radius: 0.02rem;
  390. padding-left: 0.1rem;
  391. height: 0.32rem;
  392. line-height: 0.32rem;
  393. font-size: 0.14rem;
  394. border-color: #e6e6e6;
  395. border-radius: 0.02rem;
  396. }
  397. .form-textarea {
  398. border-width: 0.01rem;
  399. border-style: solid;
  400. background-color: #fff;
  401. color: rgba(0, 0, 0, 0.85);
  402. border-radius: 0.02rem;
  403. padding-left: 0.1rem;
  404. line-height: 0.32rem;
  405. font-size: 0.14rem;
  406. border-color: #e6e6e6;
  407. height: 1rem;
  408. }
  409. button {
  410. width: calc(50% - 0.05rem);
  411. display: inline-block;
  412. margin-right: 0.1rem;
  413. &:nth-child(2) {
  414. margin-right: 0;
  415. }
  416. }
  417. .upload-box {
  418. width: 0.7rem;
  419. height: 0.7rem;
  420. cursor: pointer;
  421. .upload-img {
  422. width: 100%;
  423. height: 100%;
  424. border: 0.01rem solid #e6e6e6;
  425. image {
  426. width: 100%;
  427. height: 100%;
  428. }
  429. }
  430. .upload-icon {
  431. width: 100%;
  432. height: 100%;
  433. border: 0.01rem solid #e6e6e6;
  434. align-items: center;
  435. text-align: center;
  436. line-height: 1.2;
  437. display: flex;
  438. flex-direction: column;
  439. justify-content: center;
  440. color: #999;
  441. .iconfont {
  442. font-size: 0.3rem;
  443. }
  444. view {
  445. font-size: 0.12rem;
  446. }
  447. }
  448. }
  449. }
  450. .search-wrap {
  451. position: relative;
  452. i {
  453. position: absolute;
  454. top: 50%;
  455. right: 0.1rem;
  456. transform: translateY(-50%);
  457. border-left: 0.01rem solid #e6e6e6;
  458. line-height: 0.3rem;
  459. padding-left: 0.1rem;
  460. cursor: pointer;
  461. }
  462. }
  463. .label-list {
  464. width: calc(100% - 1.35rem);
  465. display: flex;
  466. align-items: center;
  467. flex-wrap: wrap;
  468. .label-item {
  469. border: 0.01rem solid #e6e6e6;
  470. padding: 0.07rem 0.1rem;
  471. line-height: 1;
  472. margin-right: 0.1rem;
  473. border-radius: 0.03rem;
  474. cursor: pointer;
  475. position: relative;
  476. margin-bottom: 0.1rem;
  477. i {
  478. position: absolute;
  479. right: -0.01rem;
  480. bottom: -0.01rem;
  481. color: $primary-color;
  482. display: none;
  483. }
  484. &.active {
  485. border-color: $primary-color;
  486. i {
  487. display: block;
  488. }
  489. }
  490. }
  491. }
  492. }
  493. }
  494. .form-radio-group{
  495. display: flex;
  496. align-items: center;
  497. }
  498. .form-checkbox-item, .form-radio-item{
  499. margin-right: 26rpx;
  500. display: flex;
  501. align-items: center;
  502. }
  503. /deep/ .uni-radio-input, .uni-checkbox-input{
  504. width: 36rpx;
  505. height: 36rpx;
  506. }
  507. // pop弹框
  508. .pop-box {
  509. background: #ffffff;
  510. width: 6rem;
  511. height: 3.38rem;
  512. .pop-header {
  513. padding: 0 0.15rem 0 0.2rem;
  514. height: 0.5rem;
  515. line-height: 0.5rem;
  516. border-bottom: 0.01rem solid #f0f0f0;
  517. font-size: 0.14rem;
  518. color: #333;
  519. overflow: hidden;
  520. border-radius: 0.02rem 0.2rem 0 0;
  521. box-sizing: border-box;
  522. display: flex;
  523. justify-content: space-between;
  524. .pop-header-text {
  525. }
  526. .pop-header-close {
  527. cursor: pointer;
  528. i {
  529. font-size: 0.18rem;
  530. }
  531. }
  532. }
  533. .pop-content {
  534. height: calc(100% - 1.05rem);
  535. padding: 0.2rem;
  536. box-sizing: border-box;
  537. }
  538. .form-content{
  539. margin-top: 0;
  540. padding-top: 0.2rem;
  541. display: flex;
  542. flex-direction: column;
  543. align-items: center;
  544. .form-label{
  545. width: .9rem;
  546. }
  547. }
  548. .pop-bottom {
  549. padding: 0.1rem;
  550. border-top: 0.01rem solid #eee;
  551. button {
  552. width: 95%;
  553. }
  554. }
  555. }