learun-appui.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653
  1. ul,ol,li {list-style: none;}
  2. textarea {resize: none;}
  3. .mt5 {margin-top:5px !important;}
  4. .mt10 {margin-top:10px !important;}
  5. .mt20 {margin-top:20px !important;}
  6. .ml10 {margin-left:10px !important;}
  7. .ml30 {margin-left:30px !important;}
  8. .mb5{ margin-bottom:5px;}
  9. .mb10{ margin-bottom:10px;}
  10. .mb20{ margin-bottom:20px;}
  11. .padding5{padding:5px 10px;}
  12. .lineh40 {line-height:40px;}
  13. .center {text-align:center;}
  14. .P13 .item {
  15. padding:13px;
  16. }
  17. /*登录页*/
  18. .login .head {
  19. margin:100px auto 70px;
  20. width:80px;
  21. }
  22. .login .head img{
  23. max-width: 80px;
  24. max-height: 80px;
  25. width: 100%;
  26. height: 100%;
  27. border-radius: 5px;
  28. }
  29. .login .fp {
  30. float: right;
  31. font-size: 12px;
  32. color: #8b91a0;
  33. }
  34. .login .spinner svg {
  35. display:block;
  36. margin:auto;
  37. }
  38. .login .spinner{
  39. stroke: #fff;
  40. fill: #fff;
  41. }
  42. .loginfooter {
  43. position: absolute;
  44. font-size: 12px;
  45. color: #ddd;
  46. bottom: 0;
  47. width: 100%;
  48. text-align: center;
  49. }
  50. .register {
  51. margin: 20px 10px;
  52. border-top: 1px solid #EAEAEA;
  53. padding-top: 10px;
  54. text-align: center;
  55. color: #AAAAAA;
  56. }
  57. /*home页*/
  58. .banner {
  59. position: relative;
  60. }
  61. .banner img {
  62. width: 100%;height: 100%;
  63. display:block;
  64. border: none;
  65. }
  66. .banner .explain {
  67. position: absolute;
  68. left: 50%;
  69. bottom: 40%;
  70. margin-left: -100px;
  71. width: 200px;
  72. text-align: center;
  73. color: #FFF!important;
  74. }
  75. .banner .explain h1 {
  76. font-size: 26px;
  77. color: #FFF!important;
  78. font-weight: bold;
  79. }
  80. .lr-icon-right{
  81. float:right;
  82. }
  83. .lr-icon-left{
  84. float:left;
  85. }
  86. .lr-icon-left,
  87. .lr-icon-right{
  88. font-size: 16px;
  89. }
  90. .applist {
  91. height:60px;
  92. float:left;
  93. width:50%;
  94. margin:auto;
  95. border:none;
  96. border-bottom:1px solid #EAEAEA;
  97. }
  98. .applist:nth-child(even) {
  99. border-left: 1px solid #EAEAEA;
  100. }
  101. .applist>a {
  102. padding-left:60px !important;
  103. padding-right:0px !important;
  104. padding-top:19px !important;
  105. height:60px;
  106. }
  107. .applist>i:first-child,.applist>a>i:first-child {
  108. position: absolute;
  109. left: 12px;
  110. top: 12px;
  111. width: 35px;
  112. height: 35px;
  113. color:#fff;
  114. border-radius:5px;
  115. font-size:28px;
  116. }
  117. .bulletin {
  118. margin-top:10px;
  119. }
  120. .bulletin .item-divider {
  121. color:#387EF5;
  122. }
  123. /*搜索页结果标题*/
  124. .lr-searchTitle {
  125. font-size: 16px;
  126. color: rgba(0, 0, 0, 0.5);
  127. padding: 10px 0px 0px 10px;
  128. }
  129. /*我的页面*/
  130. .lr-account-item h2 {
  131. margin: 6px 0 2px 0;
  132. }
  133. .lr-account-item p{
  134. margin: 3px 2px 0px;
  135. font-size: 12px;
  136. color: #aaa;
  137. }
  138. /*通知详细页*/
  139. .lr-item{
  140. padding: 8px;
  141. }
  142. .row.lr-item-row{
  143. margin-top: 8px;
  144. }
  145. /*详情页*/
  146. .lr-details-item {
  147. padding:13px 0px;
  148. padding-left:80px;
  149. color: rgba(0, 0, 0, 0.5);
  150. min-height:48px;
  151. text-overflow:initial;
  152. white-space: initial;
  153. }
  154. .lr-details-item .lr-item-htitle {
  155. position:absolute;
  156. left:10px;
  157. color:#444;
  158. }
  159. /*分割线*****************************/
  160. .lr-topAlert {
  161. transition: all linear 0.08s;
  162. z-index:100;
  163. background-image:none;
  164. background-color:#D26159 !important;
  165. height:44px;
  166. top:-44px;
  167. }
  168. .lr-topAlert.active {
  169. top:0px;
  170. }
  171. /*加号按钮*/
  172. .lr-plug-btn {
  173. position: absolute;
  174. bottom: 0px;
  175. font-size: 50px;
  176. width: 100%;
  177. text-align: center;
  178. }
  179. /*列表按钮*/
  180. .lr-listbutton {
  181. color:red;
  182. padding:10px;
  183. text-align:center;
  184. }
  185. /*子头部工具栏*/
  186. .lr-subheader {
  187. height: 40px;
  188. padding: 0px;
  189. background-color:#fff !important;
  190. }
  191. .lr-subheader .lr-left-tool{
  192. width: 150px;
  193. height: inherit;
  194. padding: 10px;
  195. position: absolute;
  196. left: 0px;
  197. }
  198. .lr-subheader .lr-right-tool{
  199. height: inherit;
  200. padding: 0px;
  201. display: inline-flex;
  202. position: absolute;
  203. right: 0px;
  204. }
  205. .lr-subheader .lr-right-tool .button {
  206. border-left: 1px solid #F8F8F8;
  207. color: #111;
  208. min-height: initial;
  209. border-radius: 0px;
  210. height: 40px;
  211. width:60px;
  212. color: #aaaaaa;
  213. }
  214. /*下拉选择*/
  215. .lr-down-select span {
  216. margin-left:5px;
  217. }
  218. .lr-down-select .num {
  219. color:#fff;
  220. background-color:#387ef5;
  221. border-radius:3px;
  222. padding:0px 2px;
  223. }
  224. /*列表*/
  225. /*头像列*/
  226. .lr-headimgitem {
  227. padding-left:13px!important;
  228. }
  229. .lr-headimgitem span {
  230. line-height:50px;
  231. }
  232. /*类型1*/
  233. .lr-list-type1 .item {
  234. padding: 6px 0px 6px 54px;
  235. }
  236. .lr-list-type1 .item .row i:first-child{
  237. max-width: 40px;
  238. max-height: 40px;
  239. line-height: 40px;
  240. width: 40px;
  241. margin: 11px 0px;
  242. border-radius: 5px;
  243. color: #FFF;
  244. }
  245. .lr-list-type1 .item .lr-time {
  246. float:right;
  247. margin: 8px 2px 8px;
  248. }
  249. /*列表类型2*/
  250. .lr-list-type2 .lr-title {
  251. line-height: 20px;
  252. text-overflow:ellipsis;
  253. white-space:nowrap;
  254. overflow:hidden;
  255. display: block;
  256. margin-bottom:5px;
  257. }
  258. .lr-list-type2 .col-33 {
  259. border-right:1px solid #ccc;
  260. padding-left:2px;
  261. }
  262. .lr-list-type2 .col-33:last-child {
  263. border-right:0px;
  264. }
  265. .lr-list-type2 .col-33:first-child {
  266. padding-left:0px;
  267. padding-right:16px;
  268. padding-top:5px;
  269. }
  270. .lr-list-type2 .lr-item-content,
  271. .lr-list-type2 .lr-item-content p {
  272. font-size:12px !important;
  273. color:#444;
  274. }
  275. .lr-list-type2 .lr-item-content span {
  276. color:#8E8D8D;
  277. }
  278. .lr-list-type2 .lr-item-content i {
  279. margin-right: 5px;
  280. font-size: 18px;
  281. line-height: 18px;
  282. display: block;
  283. float: left;
  284. }
  285. .lr-list-type2 .item {
  286. border:0px;
  287. border-left:1px solid #EAEAEA;
  288. border-radius: 5px!important;
  289. }
  290. .lr-list-type2 .item-complex .item-content,
  291. .lr-list-type2 .item-radio .item-content{
  292. padding:5px!important;
  293. border:1px solid #EAEAEA;
  294. border-radius: 5px!important;
  295. border-left:0px;
  296. }
  297. .lr-list-type2 .button{
  298. border-color: transparent;
  299. background-color: #F9F9F9;
  300. }
  301. .lr-list-type2 .lr-trash-circled {
  302. background-color: #EF473A;
  303. color: #fff;
  304. display: block;
  305. height: 40px;
  306. width: 40px;
  307. border-radius: 50px;
  308. }
  309. /*列表类型3*/
  310. .lr-list-type3>div>i:first-child{
  311. color: #fff;
  312. left: 0;
  313. width: 50px;
  314. padding-left: 8px;
  315. border-radius: 5px 0 0 5px;
  316. }
  317. .lr-list-type3 .item {
  318. border-radius: 5px !important;
  319. }
  320. .lr-list-type3 .item-icon-left {
  321. padding-left:60px;
  322. }
  323. /*一般icon列表(看实例列表)*/
  324. .lr-iconitem {
  325. height:60px;
  326. padding-left:60px !important;
  327. padding-top:19px !important;
  328. height:58px;
  329. }
  330. .lr-iconitem>i:first-child,
  331. .lr-iconitem>a>i:first-child {
  332. position: absolute;
  333. left: 11px;
  334. top: 8px;
  335. width: 40px;
  336. height: 40px;
  337. padding:5px;
  338. color:#fff;
  339. }
  340. /*圆角列表*/
  341. .lr-list-radius,
  342. .lr-list-radius .item:first-child,
  343. .lr-list-radius .item:last-child,
  344. .lr-list-radius label,
  345. .lr-list-radius .item {
  346. border-radius:5px;
  347. }
  348. /*编辑列表*/
  349. .lr-list-form .item{
  350. padding: 8px;
  351. }
  352. .lr-list-form .item-divider{
  353. padding:3px 8px 3px 8px;
  354. }
  355. .lr-list-form .item-divider span{
  356. margin-left: 3px;
  357. color: red;
  358. vertical-align:sub;
  359. }
  360. .lr-list-form input{
  361. width: 100%;
  362. padding: 0;
  363. height: 42px;
  364. border: 1px dashed #ccc;
  365. border-radius: 5px;
  366. background: transparent;
  367. }
  368. .lr-list-form input:focus,
  369. .lr-list-form input.active{
  370. border: 0px;
  371. border-radius:0px;
  372. background: #fff;
  373. }
  374. .lr-list-form .lr-form-input{
  375. color: #111;
  376. position: absolute;
  377. width: 100%;
  378. text-align: center;
  379. left: 0;
  380. top: 18px;
  381. z-index: -1;
  382. }
  383. .lr-list-form .lr-form-input i ,
  384. .lr-list-form .lr-form-select i{
  385. margin-right:5px;
  386. }
  387. .lr-list-form .lr-form-select{
  388. color: #111;
  389. border: 1px dashed #ccc;
  390. border-radius: 5px;
  391. text-align: center;
  392. padding: 10px;
  393. }
  394. .lr-list-form .lr-form-label{
  395. height: 42px;
  396. width: 150px;
  397. border-radius: 5px;
  398. text-align: center;
  399. padding-top: 10px;
  400. color: #fff;
  401. }
  402. /*radio*/
  403. .lr-list-radio .item-radio{
  404. margin: 10px 10px 0px 10px;
  405. border-radius: 5px;
  406. }
  407. .lr-list-radio .radio-content .item-content{
  408. color: #fff;
  409. padding: 0px;
  410. }
  411. .lr-list-radio .radio-content .item-content div{
  412. padding: 13px 49px 13px 16px;
  413. }
  414. .lr-list-radio .item-radio .radio-icon {
  415. padding: 6px 10px 0px 0px;
  416. color: #fff;
  417. }
  418. .lr-list-radio .item-radio .radio-icon.ion-ios-circle-outline {
  419. visibility: visible ;
  420. }
  421. .lr-list-radio .item-radio input:checked + .radio-content .item-content {
  422. background: #387EF5;
  423. }
  424. .card {
  425. padding-top: 1px;
  426. padding-bottom: 1px;
  427. box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
  428. background-color: #fff;
  429. }
  430. /*标签*/
  431. .lr-label {
  432. text-align: center;
  433. white-space: nowrap;
  434. vertical-align: baseline;
  435. padding: 5px 10px;
  436. font-size: 12px;
  437. text-shadow: none;
  438. font-family: 'Open Sans';
  439. color: #fff;
  440. border-radius:50px;
  441. }
  442. /*动画*/
  443. .lr-slide-in-right {
  444. -webkit-transform: translate3d(100%, 0, 0);
  445. transform: translate3d(100%, 0, 0); }
  446. .lr-slide-in-right.ng-enter,
  447. .lr-slide-in-right > .ng-enter {
  448. -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
  449. transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms; }
  450. .lr-slide-in-right.ng-enter-active,
  451. .lr-slide-in-right > .ng-enter-active {
  452. -webkit-transform: translate3d(0, 0, 0);
  453. transform: translate3d(0, 0, 0); }
  454. .lr-slide-in-right.ng-leave,
  455. .lr-slide-in-right > .ng-leave {
  456. -webkit-transition: all ease-in-out 250ms;
  457. transition: all ease-in-out 250ms; }
  458. /*lr-btnToggles*/
  459. .lr-btnToggles {
  460. margin:5px auto;
  461. width: 184px;
  462. }
  463. .lr-btnToggles .button:hover {
  464. color: #fff;
  465. background: rgba(250, 250, 250, 0.2);;
  466. }
  467. .lr-btnToggles .button.button-positive:hover {
  468. color: #387EF5;
  469. }
  470. .lr-btnToggles .button.button-positive.button-outline{
  471. border-color: #fff;
  472. background: #fff;
  473. }
  474. .lr-btnToggles .button-outline.button-outline {
  475. border-color: #fff;
  476. }
  477. /*tabbed-slidebox*/
  478. .tabbed-slidebox .slider {
  479. height: 100%;
  480. }
  481. .tabbed-slidebox.btm .slider {
  482. margin-bottom: -50px;
  483. }
  484. .tabbed-slidebox .slider-slides {
  485. width: 100%;
  486. }
  487. .tabbed-slidebox .slider-slide {
  488. padding-top: 0px;
  489. color: #000;
  490. background-color: #fff;
  491. text-align: center;
  492. font-weight: 300;
  493. background-color: #F9F9F9;
  494. }
  495. .tabbed-slidebox .tsb-icons {
  496. text-align: center;
  497. position: relative;
  498. background-color:#fff;
  499. }
  500. .tabbed-slidebox .tsb-ic-wrp {
  501. display: flex;
  502. position: relative;
  503. -webkit-transition: -webkit-transform 0.3s; /* For Safari 3.1 to 6.0 */
  504. -webkit-transform:translate3d(0,0,0);
  505. border-bottom: 1px solid #EAEAEA;
  506. }
  507. .tabbed-slidebox .tabbed-slidebox {
  508. position: relative;
  509. height: 100%;
  510. overflow: hidden;
  511. }
  512. .tsb-hscroll.scroll-view{
  513. white-space: nowrap;
  514. margin: 0 auto -1px auto;
  515. }
  516. .tsb-hscroll.scroll-view .scroll-bar{
  517. visibility:hidden;
  518. display:none;
  519. height:0px;
  520. }
  521. .tsb-hscroll.scroll-view .scroll.onscroll{
  522. -webkit-transition: -webkit-transform 0.3s; /* For Safari 3.1 to 6.0 */
  523. }
  524. .tabbed-slidebox .tsb-icons .scroll a{
  525. width:auto;
  526. font-size: 14px;
  527. line-height: 35px;
  528. text-decoration: none;
  529. margin: 0 15px;
  530. color:#444;
  531. display:inline-block;
  532. }
  533. .tabbed-slidebox .tsb-icons .scroll a.active {
  534. color:#387EF5;
  535. border-bottom:2px solid #387EF5;
  536. }
  537. /*扩展颜色*/
  538. .bgcolor_a {
  539. background: #7E9DE7;
  540. }
  541. .bgcolor_b {
  542. background: #F6C34C;
  543. }
  544. .bgcolor_c {
  545. background: #46C6C8;
  546. }
  547. .bgcolor_d {
  548. background: #FF6666;
  549. }
  550. .bgcolor_e {
  551. background: #9CCC65;
  552. }
  553. .bgcolor_f {
  554. background: #14c760;
  555. }
  556. .bgcolor_g {
  557. background:#886aea;
  558. }
  559. .bgcolor_h {
  560. background: #DCDCDC;
  561. }
  562. /*拖拽组件*/
  563. .lr-component {
  564. width: 127px;
  565. height: 30px;
  566. line-height: 28px;
  567. border-radius: 5px;
  568. cursor: pointer;
  569. box-shadow: 0px 1px 3px rgba(0,0,0,.2);
  570. color:#616774;
  571. background-color:#F5F6F9;
  572. font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;
  573. }
  574. .lr-component i
  575. {
  576. padding-left: 10px;
  577. padding-right: 8px;
  578. color: #2c3849;
  579. opacity: 0.9;
  580. }
  581. ion-content .scroll {
  582. min-height:100%;
  583. }
  584. /**/
  585. .ic-selected {
  586. box-shadow: 0px 0px 2px rgba(200,0,0,0.1);
  587. }
  588. .ic-select-box {
  589. pointer-events: none;
  590. position: absolute;
  591. border: 1px solid #4a87ee;
  592. border-radius: 3px;
  593. background-color: rgba(105, 151, 242, 0.05);
  594. z-index: 15;
  595. box-sizing: border-box;
  596. }
  597. .ic-select-box .select-remove {
  598. background: url('../img/component-options-sprite.png') no-repeat transparent;
  599. width: 16px;
  600. height: 16px;
  601. background-size: 100%;
  602. }
  603. .ic-select-box .select-duplicate {
  604. background: url('../img/component-options-sprite.png') no-repeat transparent;
  605. width: 16px;
  606. height: 16px;
  607. background-size: 100%;
  608. margin-right:2px;
  609. background-position: 0px -32px;
  610. }
  611. .control-container {
  612. position:absolute;
  613. top:-8px;
  614. right:4px;
  615. height:22px;
  616. }
  617. .ic-select-box a {
  618. display: none;
  619. pointer-events: auto;
  620. background-color: #fff;
  621. color: #4a87ee;
  622. }
  623. .ic-select-box-can-delete a {
  624. display: inline-block;
  625. }
  626. .lr-component-item {
  627. margin:10px;
  628. }
  629. .lr-component-heading {
  630. border:1px dashed #ccc;
  631. border-radius:3px;
  632. color:#999;
  633. }
  634. .lr-component-heading.lr-f {
  635. border:1px dashed #fff;
  636. color:#000000;
  637. height: 45px;
  638. }
  639. .lr-component-heading.lr-f:hover {
  640. border:1px solid #4a87ee;
  641. }