You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

848 lines
16 KiB

  1. .lr-frame-top {
  2. z-index: 1;
  3. height: 60px;
  4. line-height: 60px;
  5. background: #fff
  6. }
  7. .lr-logo-title {
  8. left: 100px;
  9. color: #3498DB;
  10. padding-top: 15px
  11. }
  12. .lr-logo-title span {
  13. color: #3498DB
  14. }
  15. .lr-frame-vericon {
  16. position: absolute;
  17. top: 0;
  18. left: 0;
  19. z-index: 3;
  20. display:none;
  21. }
  22. .lr-frame-menu-wrap .lr-scroll-vertical {
  23. right: 76px
  24. }
  25. .lr-frame-menu {
  26. top: 0;
  27. width: 80px;
  28. height: 100%;
  29. background-color: #282E3B;
  30. z-index: 2
  31. }
  32. .lr-first-menu-list {
  33. width: 80px;
  34. padding-top: 58px
  35. }
  36. .lr-first-menu-list > li > .lr-menu-item {
  37. height: 64px;
  38. font-size: 12px;
  39. color: #F8F8F8;
  40. text-align: center;
  41. margin-top: 20px
  42. }
  43. .lr-first-menu-list > li:first-of-type > .lr-menu-item {
  44. margin-top: 5px
  45. }
  46. .lr-first-menu-list > li > .lr-menu-item:hover {
  47. background: #212A37
  48. }
  49. .lr-first-menu-list > li > .lr-menu-item > .lr-menu-item-icon {
  50. display: block;
  51. font-size: 20px;
  52. line-height: 40px;
  53. height: 40px;
  54. width: 40px;
  55. border-radius: 5px;
  56. margin: 0 auto;
  57. margin-bottom: 7px
  58. }
  59. .lr-first-menu-list > li > .lr-menu-item > .lr-menu-item-icon:before {
  60. color: #fff
  61. }
  62. .lr-first-menu-list > li:nth-of-type(7n+1) > .lr-menu-item > .lr-menu-item-icon {
  63. background-color: #985CE2
  64. }
  65. .lr-first-menu-list > li:nth-of-type(7n+2) > .lr-menu-item > .lr-menu-item-icon {
  66. background-color: #6A9AE1
  67. }
  68. .lr-first-menu-list > li:nth-of-type(7n+3) > .lr-menu-item > .lr-menu-item-icon {
  69. background-color: #45B1DF
  70. }
  71. .lr-first-menu-list > li:nth-of-type(7n+4) > .lr-menu-item > .lr-menu-item-icon {
  72. background-color: #48D4D7
  73. }
  74. .lr-first-menu-list > li:nth-of-type(7n+5) > .lr-menu-item > .lr-menu-item-icon {
  75. background-color: #3089DC
  76. }
  77. .lr-first-menu-list > li:nth-of-type(7n+6) > .lr-menu-item > .lr-menu-item-icon {
  78. background-color: #E4474D
  79. }
  80. .lr-first-menu-list > li:nth-of-type(7n) > .lr-menu-item > .lr-menu-item-icon {
  81. background-color: #3398DC
  82. }
  83. .lr-first-menu-list > li > .lr-menu-item > .lr-menu-item-arrow {
  84. display: block;
  85. position: absolute;
  86. left: 65px;
  87. top: 57px;
  88. text-indent: 0;
  89. font-weight: bold;
  90. color: #b8d2e1
  91. }
  92. .lr-first-menu-list > li:hover > .lr-menu-item > .lr-menu-item-arrow {
  93. text-indent: -99999px;
  94. width: 0;
  95. height: 0;
  96. border-style: solid;
  97. border-width: 8px;
  98. border-color: transparent;
  99. border-right-color: white;
  100. border-left: none;
  101. left: 67px;
  102. top: 50%;
  103. margin-top: -20px;
  104. z-index: 10
  105. }
  106. .lr-second-menu-list {
  107. position: absolute;
  108. top: 0;
  109. left: 74px;
  110. width: 135px;
  111. line-height: 28px;
  112. padding: 3px 0 3px;
  113. background: #FFF;
  114. border: 1px solid #ccc;
  115. border-radius: 3px
  116. }
  117. .lr-first-menu-list > li:hover .lr-second-menu-list {
  118. display: block
  119. }
  120. .lr-second-menu-list li {
  121. margin: 4px 0
  122. }
  123. .lr-second-menu-list .lr-menu-item {
  124. padding-left: 10px;
  125. font-size: 12px;
  126. color: #333
  127. }
  128. .lr-second-menu-list li:hover {
  129. background-color: #eee
  130. }
  131. .lr-second-menu-list > .lr-meun-had:after {
  132. font: normal normal normal 14px/1 FontAwesome;
  133. font-size: inherit;
  134. text-rendering: auto;
  135. -webkit-font-smoothing: antialiased;
  136. -moz-osx-font-smoothing: grayscale;
  137. content: "\f105";
  138. color: #333;
  139. position: absolute;
  140. top: 8px;
  141. right: 10px
  142. }
  143. .lr-second-menu-list .lr-menu-item-icon {
  144. color: #333;
  145. width: 18px;
  146. margin-right: 5px
  147. }
  148. .lr-three-menu-list {
  149. position: absolute;
  150. top: 0;
  151. left: 133px;
  152. width: 130px;
  153. line-height: 28px;
  154. padding-top: 4px;
  155. padding-bottom: 4px;
  156. background-color: #fff;
  157. font-size: 12px;
  158. color: #333;
  159. border: 1px solid #ccc
  160. }
  161. .lr-four-menu-list {
  162. display: none;
  163. position: absolute;
  164. top: 0;
  165. left: 128px;
  166. width: 130px;
  167. line-height: 28px;
  168. padding-top: 4px;
  169. padding-bottom: 4px;
  170. background-color: #fff;
  171. font-size: 12px;
  172. color: #333;
  173. border: 1px solid #ccc
  174. }
  175. .lr-three-menu-list li {
  176. margin: 4px 0
  177. }
  178. .lr-three-menu-list .lr-menu-item {
  179. padding-left: 10px;
  180. font-size: 12px;
  181. color: #333
  182. }
  183. .lr-three-menu-list li:hover {
  184. background-color: #eee
  185. }
  186. .lr-three-menu-list > .lr-meun-had:after {
  187. font: normal normal normal 14px/1 FontAwesome;
  188. font-size: inherit;
  189. text-rendering: auto;
  190. -webkit-font-smoothing: antialiased;
  191. -moz-osx-font-smoothing: grayscale;
  192. content: "\f105";
  193. color: #333;
  194. position: absolute;
  195. top: 8px;
  196. right: 10px
  197. }
  198. .lr-three-menu-list .lr-menu-item-icon {
  199. color: #333;
  200. width: 18px;
  201. margin-right: 5px
  202. }
  203. .lr-second-menu-list > li:hover .lr-three-menu-list {
  204. display: block
  205. }
  206. .lr-three-menu-list > li:hover .lr-four-menu-list {
  207. display: block
  208. }
  209. .lr-uitheme-default .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
  210. background: #eee
  211. }
  212. .lr-frame-tabs {
  213. border-bottom: 1px solid #ccc;
  214. background: #fff
  215. }
  216. .lr-frame-tabs-wrap {
  217. height: 30px
  218. }
  219. .lr-frame-tabItem {
  220. border: 1px solid transparent;
  221. background: #fff;
  222. height: 29px;
  223. line-height: 29px;
  224. color: #333;
  225. border-top-left-radius: 3px;
  226. border-top-right-radius: 3px
  227. }
  228. .lr-frame-tabItem i {
  229. color: #333;
  230. display: none
  231. }
  232. .lr-frame-tabItem.active {
  233. border: 1px solid #ccc;
  234. border-bottom: 0;
  235. height: 30px;
  236. background: #f8f8f8;
  237. color: #3999d9
  238. }
  239. .lr-frame-tabItem .reomve {
  240. top: 8px;
  241. right: 3px
  242. }
  243. .lr-frame-main {
  244. padding: 90px 0 0 80px;
  245. background: #fff
  246. }
  247. .lr-frame-main img {
  248. opacity: .2
  249. }
  250. .lr-frame-personCenter {
  251. top: 8px;
  252. right: 10px;
  253. height: 40px;
  254. line-height: 42px;
  255. color: #333
  256. }
  257. .lr-frame-personCenter .dropdown-menu {
  258. border: 1px solid #ccc;
  259. border-radius: 3px
  260. }
  261. .lr_frame_fullscreen {
  262. top: 60px
  263. }
  264. .lr-frame-personCenter span {
  265. color: #333
  266. }
  267. .lr-first-menu-list > li > a > .lr-menu-item-text {
  268. overflow: hidden;
  269. white-space: nowrap;
  270. text-overflow: ellipsis;
  271. display: block
  272. }
  273. .lr-second-menu-list .lr-menu-item-text {
  274. overflow: hidden;
  275. white-space: nowrap;
  276. text-overflow: ellipsis;
  277. display: block;
  278. position: absolute;
  279. top: 0;
  280. left: 30px;
  281. width: 90px
  282. }
  283. .lr-lzc-user {
  284. position: fixed;
  285. right: 150px;
  286. top: 11px;
  287. width: 110px;
  288. height: 40px;
  289. line-height: 40px;
  290. color: #282E3B;
  291. text-align: center;
  292. cursor: pointer;
  293. z-index: 52;
  294. }
  295. .lr-im-bell {
  296. position: fixed;
  297. right: 105px;
  298. top: 11px;
  299. width: 40px;
  300. height: 40px;
  301. line-height: 40px;
  302. color: #282E3B;
  303. text-align: center;
  304. cursor: pointer;
  305. z-index: 51;
  306. display: none;
  307. }
  308. .lr-im-bell > i {
  309. font-size: 20px
  310. }
  311. .lr-im-bell > .point {
  312. background: #D71012;
  313. position: absolute;
  314. right: 9px;
  315. top: 6px;
  316. width: 8px;
  317. height: 8px;
  318. border-radius: 50%
  319. }
  320. .lr-im-body {
  321. position: fixed;
  322. right: 10px;
  323. bottom: 10px;
  324. width: 400px;
  325. height: 500px;
  326. background: #FFF;
  327. box-shadow: 0 0 5px 0 rgba(0,0,0,0.50);
  328. z-index: 50;
  329. padding-top: 40px;
  330. display: none
  331. }
  332. .lr-im-body.open {
  333. display: block
  334. }
  335. .lr-im-title {
  336. position: absolute;
  337. top: 0;
  338. left: 0;
  339. background: #F8F8F8;
  340. width: 100%;
  341. height: 40px
  342. }
  343. .lr-im-title .title-item {
  344. position: absolute;
  345. width: 50%;
  346. height: 100%;
  347. top: 0;
  348. left: 0;
  349. cursor: pointer;
  350. color: #999;
  351. font-size: 22px;
  352. line-height: 40px;
  353. text-align: center
  354. }
  355. .lr-im-title .title-item.active {
  356. color: #3398DC
  357. }
  358. .lr-im-title .title-item.title-item-two {
  359. left: 200px
  360. }
  361. .lr-im-content {
  362. position: relative;
  363. width: 100%;
  364. height: 100%;
  365. display: none
  366. }
  367. .lr-im-content.active {
  368. display: block
  369. }
  370. .lr-im-left {
  371. position: absolute;
  372. top: 0;
  373. left: 0;
  374. width: 71px;
  375. height: 100%;
  376. border-right: 1px solid #E5E5E5
  377. }
  378. .lr-msg-userlist {
  379. position: relative;
  380. width: 100%;
  381. height: 100%
  382. }
  383. .userlist-item {
  384. position: relative;
  385. width: 100%;
  386. height: 50px;
  387. padding: 10px 0 10px 20px;
  388. cursor: pointer
  389. }
  390. .userlist-item .photo {
  391. position: relative;
  392. width: 30px;
  393. height: 30px;
  394. border-radius: 5px
  395. }
  396. .userlist-item .icon {
  397. position: relative;
  398. width: 30px;
  399. height: 30px;
  400. line-height: 30px;
  401. border-radius: 5px;
  402. background-color: #3999d9;
  403. color: #fff;
  404. font-size: 18px;
  405. text-align: center
  406. }
  407. .userlist-item img {
  408. width: 100%;
  409. height: 100%;
  410. border-radius: 5px
  411. }
  412. .userlist-item.active {
  413. background-color: #F1F1F1
  414. }
  415. .userlist-item .point {
  416. width: 8px;
  417. height: 8px;
  418. background: #DB3702;
  419. border-radius: 50%;
  420. position: absolute;
  421. right: -4px;
  422. top: -2px;
  423. display: none
  424. }
  425. .imHasMsg .point {
  426. display: block
  427. }
  428. .lr-im-msglist {
  429. padding-left: 71px
  430. }
  431. .lr-im-right {
  432. position: relative;
  433. width: 100%;
  434. height: 100%;
  435. padding-bottom: 110px;
  436. padding-top: 25px
  437. }
  438. .lr-im-touser {
  439. position: absolute;
  440. width: 100%;
  441. height: 20px;
  442. line-height: 20px;
  443. font-size: 14px;
  444. color: #333;
  445. padding-left: 5px;
  446. top: 5px;
  447. left: 0
  448. }
  449. .lr-im-msgcontent {
  450. position: relative;
  451. width: 100%;
  452. height: 100%
  453. }
  454. .lr-im-msgcontent-tool {
  455. position: absolute;
  456. height: 25px;
  457. line-height: 24px;
  458. text-align: right;
  459. width: 100%;
  460. left: 0;
  461. bottom: 85px;
  462. padding-right: 10px;
  463. border-top: 1px solid #E5E5E5;
  464. background: #F8F8F8
  465. }
  466. .lr-im-msgcontent-tool > span {
  467. cursor: pointer
  468. }
  469. .lr-im-input {
  470. position: absolute;
  471. height: 85px;
  472. width: 100%;
  473. left: 0;
  474. bottom: 0;
  475. border-top: 1px solid #E5E5E5
  476. }
  477. .lr-im-input .inp {
  478. width: 100%;
  479. height: 100%;
  480. resize: none;
  481. border: 0;
  482. outline: 0;
  483. padding: 5px
  484. }
  485. .lr-im-right.lr-im-nouser {
  486. padding-bottom: 0;
  487. padding-top: 0
  488. }
  489. .lr-im-right.lr-im-nouser .lr-im-msgcontent-tool, .lr-im-right.lr-im-nouser .lr-im-input, .lr-im-right.lr-im-nouser .lr-im-touser {
  490. display: none
  491. }
  492. .lr-im-userlist {
  493. padding-top: 61px
  494. }
  495. .lr-im-search {
  496. position: absolute;
  497. top: 0;
  498. left: 0;
  499. width: 100%;
  500. height: 51px;
  501. background: #fff;
  502. font-size: 0;
  503. padding: 10px 20px
  504. }
  505. .lr-im-search:after {
  506. content: '';
  507. display: block;
  508. position: absolute;
  509. bottom: 0;
  510. left: 20px;
  511. width: 360px;
  512. height: 1px;
  513. background: #E5E5E5
  514. }
  515. .lr-im-search i {
  516. position: absolute;
  517. left: 36px;
  518. top: 19px;
  519. font-size: 12px;
  520. font-weight: 100;
  521. color: #999
  522. }
  523. .lr-im-search input {
  524. text-align: left;
  525. float: left;
  526. font-size: 12px;
  527. padding-left: 15px;
  528. width: 100%;
  529. height: 100%;
  530. background: #fff;
  531. border-radius: 3px;
  532. box-sizing: border-box;
  533. color: #333;
  534. outline: 0;
  535. text-indent: 15px;
  536. border: 1px solid #E5E5E5
  537. }
  538. .lr-im-search input::-webkit-input-placeholder {
  539. text-align: center
  540. }
  541. .lr-im-search input::-moz-placeholder {
  542. text-align: center
  543. }
  544. .lr-im-search input:-moz-placeholder {
  545. text-align: center
  546. }
  547. .lr-im-search input:-ms-input-placeholder {
  548. text-align: center
  549. }
  550. .lr-im-content-userlist {
  551. position: relative;
  552. width: 100%;
  553. height: 100%
  554. }
  555. .lr-im-content-userlist .lr-scroll-box {
  556. padding: 0 20px
  557. }
  558. .lr-im-item-name {
  559. position: relative;
  560. width: 100%;
  561. height: 30px;
  562. line-height: 30px;
  563. cursor: pointer;
  564. font-size: 12px;
  565. color: #666
  566. }
  567. .lr-im-item-name > i {
  568. color: #999;
  569. font-size: 14px;
  570. margin: 3px
  571. }
  572. .lr-im-item-name.open > i {
  573. -webkit-transform: rotate(90deg);
  574. -moz-transform: rotate(90deg);
  575. -ms-transform: rotate(90deg);
  576. -o-transform: rotate(90deg);
  577. transform: rotate(90deg)
  578. }
  579. .lr-im-user-list {
  580. position: relative;
  581. width: 100%
  582. }
  583. .lr-im-user {
  584. position: relative;
  585. height: 43px;
  586. line-height: 43px;
  587. padding-left: 40px
  588. }
  589. .lr-im-user > img {
  590. position: absolute;
  591. top: 6px;
  592. left: 0;
  593. width: 30px;
  594. height: 30px;
  595. border-radius: 50%
  596. }
  597. .lr-im-msgcontent .im-time {
  598. position: relative;
  599. font-size: 12px;
  600. color: #999;
  601. width: 100%;
  602. height: 15px;
  603. line-height: 15px;
  604. text-align: center;
  605. margin-bottom: 10px
  606. }
  607. .lr-im-msgcontent .im-me, .lr-im-msgcontent .im-other {
  608. position: relative;
  609. word-break: break-all;
  610. height: auto;
  611. overflow: hidden;
  612. width: 100%;
  613. padding: 0 50px;
  614. margin-bottom: 10px;
  615. text-align: right
  616. }
  617. .lr-im-msgcontent .im-other {
  618. text-align: left
  619. }
  620. .lr-im-msgcontent .im-other .headimg {
  621. position: absolute;
  622. top: 0;
  623. left: 10px;
  624. width: 30px;
  625. height: 30px;
  626. border-radius: 50%
  627. }
  628. .lr-im-msgcontent .im-me img, .lr-im-msgcontent .im-other img {
  629. width: 100%;
  630. height: 100%;
  631. border-radius: 50%
  632. }
  633. .lr-im-msgcontent .im-me .content, .lr-im-msgcontent .im-other .content {
  634. display: inline-block;
  635. background: #FFF;
  636. border: 1px solid #E5E5E5;
  637. padding: 5px 13px 6px 19px;
  638. font-size: 12px;
  639. color: #333;
  640. box-sizing: border-box;
  641. position: relative;
  642. float: left;
  643. max-width: 100%;
  644. text-align: left;
  645. line-height: 20px;
  646. border-radius: 5px
  647. }
  648. .lr-im-msgcontent .im-me .content {
  649. float: right
  650. }
  651. .lr-im-msgcontent .im-other .arrow {
  652. width: 8px;
  653. height: 8px;
  654. border: 1px solid #E5E5E5;
  655. -webkit-transform: rotate(-45deg);
  656. -moz-transform: rotate(-45deg);
  657. -ms-transform: rotate(-45deg);
  658. -o-transform: rotate(-45deg);
  659. transform: rotate(-45deg);
  660. background: #fff;
  661. position: absolute;
  662. top: 11px;
  663. left: 46px;
  664. z-index: 1;
  665. clip: rect(0,8px,8px,0);
  666. border-bottom: 0;
  667. border-right: 0
  668. }
  669. .lr-im-msgcontent .im-me .headimg {
  670. position: absolute;
  671. top: 0;
  672. right: 10px;
  673. width: 30px;
  674. height: 30px;
  675. border-radius: 50%
  676. }
  677. .lr-im-msgcontent .im-me .arrow {
  678. width: 8px;
  679. height: 8px;
  680. border: 1px solid #E5E5E5;
  681. -webkit-transform: rotate(-45deg);
  682. -moz-transform: rotate(-45deg);
  683. -ms-transform: rotate(-45deg);
  684. -o-transform: rotate(-45deg);
  685. transform: rotate(-45deg);
  686. background: #fff;
  687. position: absolute;
  688. top: 11px;
  689. right: 46px;
  690. z-index: 1;
  691. clip: rect(0,8px,8px,0);
  692. border-top: 0;
  693. border-left: 0
  694. }
  695. .lr-lg-setting {
  696. position: absolute;
  697. top: 21px;
  698. left: 423px;
  699. font-size: 14px;
  700. z-index: 4
  701. }
  702. .lr-lg-setting span {
  703. color: #3498DB
  704. }
  705. .photo .fa {
  706. display: block;
  707. font-size: 20px;
  708. line-height: 30px;
  709. height: 30px;
  710. width: 30px;
  711. border-radius: 5px;
  712. margin: 0 auto;
  713. text-align: center;
  714. color: #fff;
  715. background-color: #985CE2;
  716. }
  717. /*消息中心2*/
  718. .lr-im-bell2 {
  719. position: fixed;
  720. right: 145px;
  721. top: 11px;
  722. width: 40px;
  723. height: 40px;
  724. line-height: 40px;
  725. color: #282E3B;
  726. text-align: center;
  727. cursor: pointer;
  728. z-index: 51;
  729. }