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.
 
 
 
 
 
 

890 lines
17 KiB

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