Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
ZYjames12345
/
zhujian_OA
1
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Haara: master
Haarat Tagit
zhujian_OA
/
mobile1
/
AFrontEnd
/
css
/
sp.mobile.css

sp.mobile.css 12 KB
Pysyvä linkki Historia Raaka

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123 
  1. /*****************************手机常用部分******************************************** 2017-12-10/
    2. 

  2. 

  3. /******************************手机端样式以 mob- 开头****************************** 2017-12-10/
    4. 

  4. 

  5. /*手机头部*/
    6. 

  6. .mob-page-top{position:fixed;top:0;left:0; width:100%;height:50px;line-height:50px;font-size:17px; z-index:6;
    7. 

  7.           text-align:center;margin-bottom:20px;border-bottom:1px solid #dbdbdb;background-color:#fff;color:#333;}
    8. 

  8. .mob-page-top .left{position:absolute;left:15px;top:0; color:#333;width:10%;} /*左侧返回按钮*/
    9. 

  9. .mob-page-top .left a{float:left; width:100%; text-align:center; line-height:50px;}
    10. 

  10. .mob-page-top .right {position:absolute;right:15px;top:0;line-height:50px; color:#fff;}
    11. 

  11. .mob-page-top .right i{color:#fe5000;padding-left:15px;}
    12. 

  12. 

  13. /**没有底部切换选项卡的中部内容**/
    14. 

  14. .mob-page-content{position:absolute;top:60px;left:0;width:100%;right:0;z-index:5; padding:5px 0;}
    15. 

  15. .mob-page-box{float:left;width:100%; margin-bottom:15px;}
    16. 

  16. 

  17. /**带有固定底部的中部内容**/
    18. 

  18. .mob-fixed-content{position:absolute;top:60px; left:0;width:100%;right:0;z-index:5; padding:5px 0 50px 0;}
    19. 

  19. .mob-fixed-bottom{position: fixed; bottom: 0;width: 100%; text-align:center;  height:45px; line-height:45px; z-index: 5; padding: 0 15px; background-color:#fff; border-top:1px solid #eee; }
    20. 

  20. 

  21. .mob-fixed-bottom ul,.mob-fixed-bottom li{padding:0; margin:0; list-style:none; float:left;cursor: pointer; box-sizing:border-box;}
    22. 

  22. .mob-fixed-bottom ul{ width:100%;}
    23. 

  23. 

  24. .mob-fixed-bottom ul li.mob-bottom-active{color:orange;font-weight:800;}
    25. 

  25. 

  26. /*中间列*/
    27. 

  27. .mob-row{float:left;width:100%;padding:0 10px;table-layout: fixed;background-color:#fff;}
    28. 

  28. .mob-row li{float:left;width:100%; border-bottom:1px solid #e5e6e7; padding:10px 8px;}
    29. 

  29. .mob-row li .left{float:left;width:80%;font-weight:bold; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    30. 

  30. .mob-row li .right{float:right;width:20%;color:#8a8a8a;}
    31. 

  31. .mob-row li .gray{float:left;width:79%;line-height:20px;margin:2px 0; color:#ff9900;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size:12px;}
    32. 

  32. .mob-row li .zong{color:#e09347;}
    33. 

  33. .mob-row li.last{float:right;width:15%;border-bottom:1px solid #e5e6e7;line-height:48px; text-align:center;padding:10px 0;}
    34. 

  34. 

  35. .mob-row-title{float:left; width:100%; line-height:30px;font-weight:bold; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    36. 

  36. .mob-row-line{float:left; width:100%; padding-left:20px; line-height:22px;color:#666;}
    37. 

  37. .mob-row-line i{float:left; width:13px;height:22px; line-height:22px; text-align:center; margin-right:6px;}
    38. 

  38. 

  39. /*两列的情况 */
    40. 

  40. .mob-two-col{float:left;width:97%;padding:0 15px;margin-left:1.5%;border-bottom:1px solid #e5e6e7;}
    41. 

  41. .mob-two-col .left{float:left;line-height:22px;padding:10px 0; width:25%;}
    42. 

  42. .mob-two-col .right{float:left;line-height:22px;padding:10px 0;width:75%;color:#8a8a8a;text-align:right;}
    43. 

  43. .mob-two-col .right input{text-indent:0; background:transparent;border:none;color:#8a8a8a;width:100%;line-height:22px; font-weight:normal;text-align:right;}
    44. 

  44. .mob-two-col .right textarea{text-indent:0; background:transparent;border:none;color:#8a8a8a;width:100%;line-height:22px; font-weight:normal;text-align:right;}
    45. 

  45. .mob-two-col .right label{background:transparent;border:none;color:#8a8a8a;width:100%;line-height:22px;font-weight:normal;}
    46. 

  46. .mob-two-col-select{float:left;width:92%;padding:0 3%;margin-left:1%;border-bottom:1px solid #e5e6e7;}
    47. 

  47. .mob-two-col-select .left{float:left;line-height:22px;padding:10px 0; width:80%;}
    48. 

  48. .mob-two-col-select .right{float:left;line-height:22px;padding:10px 0;width:20%;color:#8a8a8a;text-align:right;}
    49. 

  49.  
    50. 

  50.  /*三列的情况,20171225*/
    51. 

  51. .mob-three-col{float:left;width:97%;padding:0 15px;margin-left:1.5%; box-sizing:padding-box; border-bottom:1px solid #e5e6e7;}
    52. 

  52. .mob-three-col .left{float:left;line-height:20px;padding:10px 0; width:25%;}
    53. 

  53. .mob-three-col .center{float:left;line-height:20px;padding:10px 0;width:70%;color:#8a8a8a;text-align:right;}
    54. 

  54. .mob-three-col .center input{text-indent:0; background:transparent;border:none;color:#8a8a8a;width:100%;line-height:20px; font-weight:normal;text-align:right;}
    55. 

  55. .mob-three-col .center label{background:transparent;border:none;color:#8a8a8a;width:100%;line-height:20px;padding:10px 0; font-weight:normal;}
    56. 

  56. .mob-three-col .center label.lbl_checked_info{float:right; width:70px;height:18px;line-height:18px;text-align:center;padding:0;margin:0; white-space:nowrap;}
    57. 

  57. .mob-three-col .center textarea{text-indent:0; background:transparent;border:none;color:#8a8a8a;width:100%;line-height:20px; font-weight:normal;text-align:right;}
    58. 

  58. .mob-three-col .right{float:right;line-height:20px;padding:10px 0;width:5%;color:#e47106;text-align:right;}
    59. 

  59. 

  60. /**二级页面**/
    61. 

  61. .mob-sec-page{position:fixed;top:60px;left:0;width:100%; background-color:#fff;}
    62. 

  62. .mob-sec-page-top{float:left;width:100%;line-height:22px;margin:10px 0 15px 0;text-align:center;color:#e47106;font-size:16px;}
    63. 

  63. .mob-sec-page-top .rightBtn{position:absolute;width:auto;right:15px;margin-top:-23px;}
    64. 

  64. .mob-sec-page-content{float:left;width:92%;margin-left:1%;padding:10px 3%;}
    65. 

  65. 

  66. /***常用首页横向：左图片、中标题、右箭头式 布局***/
    67. 

  67. .mob-index-box{position:absolute;top:60px;left:0;width:100%;right:0;z-index:5; padding:5px 0; background-color:#fff;}
    68. 

  68. .mob-index-row{float:left;width:100%;}
    69. 

  69. .mob-index-row li{list-style:none; padding:0; margin:0;}
    70. 

  70. .mob-index-row li:nth-child(1){float:left;width:25%;text-align:center;padding:12px 0;}
    71. 

  71. .mob-index-row li:nth-child(1) img{float:left;margin-left:20px;height:50px;width:50px;border-radius:8px;}
    72. 

  72. .mob-index-row li:nth-child(2){float:left;width:60%;border-bottom:1px solid #e5e6e7;text-indent:5px;padding:10px 0;}
    73. 

  73. .mob-index-row li:nth-child(2) .mob-index-row-up{float: left;width:100%;line-height:20px;margin:3px 0;font-weight:bold;}
    74. 

  74. .mob-index-row li:nth-child(2) .mob-index-row-bottom{float: left;width:100%;line-height:20px;margin:3px 0;color:#8a8a8a;}
    75. 

  75. .mob-index-row li:nth-child(3){float:right;width:12%; margin-right:3%; border-bottom:1px solid #e5e6e7;line-height:48px; text-align:center;padding:12px 0;}
    76. 

  76. 

  77. /**常用九宫格**/
    78. 

  78. .mob-jiu{position:absolute;top:50px;left:0;width:100%;right:0;z-index:5;}
    79. 

  79. .mob-jiu-type{float:left;width:100%;height:30px;line-height:30px;background-color:#f4f5fa;text-indent:15px;}/*九宫格分类提示标题文字*/
    80. 

  80. .mob-jiu-row{float:left;width:100%;list-style:none;border-bottom:1px solid #e5e5e5;}
    81. 

  81. .mob-jiu-row li{float:left;width:33.3333333333%;height:90px; text-align:center; background-color:#fff; list-style:none;}
    82. 

  82. .mob-jiu-row li:hover{background-color:#f0f1f4;}
    83. 

  83. .mob-jiu-row li:nth-child(2){border-left:1px solid #e3e3e3;border-right:1px solid #e3e3e3;box-sizing:border-box;}
    84. 

  84. .mob-jiu-row .mob-jiu-img{float:left;width:100%;height:40px;margin-top:15px; text-align:center;}
    85. 

  85. .mob-jiu-row .mob-jiu-img img{width:40px;height:40px;}
    86. 

  86. .mob-jiu-row .mob-jiu-title{float:left;width:100%;height:22px;line-height:22px; margin-top:5px; text-align:center;}
    87. 

  87. 

  88. /*手机页面常用图标设置，地图、时间、角色、科室、分类、圆形标、党会、任务、流程、流程*/
    89. 

  89. .mob-map-red{ float:left; height:22px; line-height:22px;  width:10px; margin-right:6px; text-align:center; color:#fff; font-size:11px !important; background:url(icons/moblie/maplocation_red.png) no-repeat center center;  background-size:10px 14px;}
    90. 

  90. .mob-map-blue{ float:left; height:22px; line-height:22px; width:10px;margin-right:6px; text-align:center; color:#fff; font-size:11px !important; background:url(icons/moblie/maplocation_blue.png) no-repeat center center;  background-size:10px 14px;}
    91. 

  91. .mob-map-orange{ float:left; height:22px; line-height:22px; width:13px;margin-right:6px; text-align:center; color:#fff; font-size:11px !important;  background:url(icons/moblie/map-address-orange.png) no-repeat center center;  background-size:10px 14px;}
    92. 

  92. .mob-logo-time{ float:left; height:22px; line-height:22px; width:13px;margin-right:6px; text-align:center; color:#fff; font-size:11px !important; background:url(icons/moblie/mob-time.png) no-repeat center center;  background-size:13px 14px;}
    93. 

  93. .mob-logo-jiaoSe{ float:left; height:22px; line-height:22px; width:13px;margin-right:6px; text-align:center; color:#fff; font-size:11px !important; background:url(icons/moblie/logo-jiaose.png) no-repeat center center;  background-size:13px 14px;}
    94. 

  94. .mob-logo-keShi{ float:left; height:22px; line-height:22px; width:13px;margin-right:6px; text-align:center; color:#fff; font-size:11px !important; background:url(icons/moblie/logo-keShi.png) no-repeat center center;  background-size:13px 14px;}
    95. 

  95. .mob-logo-ckind{ float:left; height:22px; line-height:22px; width:13px;margin-right:6px; text-align:center; color:#fff; font-size:11px !important; background:url(icons/moblie/logo-ckind.png) no-repeat center center;  background-size:13px 13px;}
    96. 

  96. .mob-logo-yuan{ float:left; height:22px; line-height:22px; width:13px;margin-right:6px; text-align:center; color:#fff; font-size:11px !important; background:url(icons/moblie/logo-yuan.png) no-repeat center center;  background-size:13px 13px;}
    97. 

  97. .mob-logo-yuanHuan{ float:left; height:22px; line-height:22px; width:13px;margin-right:6px; text-align:center; color:#fff; font-size:11px !important; background:url(icons/moblie/logo-yuanHuan.png) no-repeat center center;  background-size:13px 13px;}
    98. 

  98. .mob-logo-dangHui{ float:left; height:22px; line-height:22px; width:13px;margin-right:6px; text-align:center; color:#fff; font-size:11px !important; background:url(icons/moblie/logo-dangHui.png) no-repeat center center;  background-size:15px 15px;}
    99. 

  99. .mob-logo-dangRiHuoDong{ float:left; height:22px; line-height:22px; width:13px;margin-right:6px; text-align:center; color:#fff; font-size:11px !important; background:url(icons/moblie/logo-dangRiHuoDong.png) no-repeat center center;  background-size:13px 13px;}
    100. 

  100. .mob-logo-money{ float:left; height:22px; line-height:22px; width:13px;margin-right:6px; text-align:center; color:#fff; font-size:11px !important; background:url(icons/moblie/logo-money.png) no-repeat center center;  background-size:13px 11px;}
    101. 

  101. .mob-man-duban{ float:left; height:22px; line-height:22px; width:13px;margin-right:6px; text-align:center; color:#fff; font-size:11px !important; background:url(icons/moblie/man-duban.png) no-repeat center center;  background-size:13px 13px;}
    102. 

  102. /*任务图标*/
    103. 

  103. .mob-logo-task{ float:left; height:22px; line-height:22px; width:14px;margin-right:6px; background:url(icons/moblie/mob-logo-task.png) no-repeat center center;  background-size:14px 14px;}
    104. 

  104. /*流程图标*/
    105. 

  105. .mob-logo-flow{ float:left; height:22px; line-height:22px; width:14px;margin-right:6px; background:url(icons/moblie/mob-logo-flow.png) no-repeat center center;  background-size:14px 14px;}
    106. 

  106. /*流程图标*/
    107. 

  107. .mob-logo-yiJian{ float:left; height:22px; line-height:22px; width:14px;margin-right:6px; background:url(icons/moblie/mob-logo-yiJian.png) no-repeat center center;  background-size:14px 13px;}
    108. 

  108. 

  109. /***手机常用单选、多选-样式***/
    110. 

  110. .mob-radio-green{float:left; width:100%;}
    111. 

  111. .mob-radio-green span{color:#000;border:1px solid #01b14c;border-radius:3px;background-color:#fff; color:#666; padding:3px 10px; line-height:22px; margin:5px;}
    112. 

  112. .mob-radio-green span.active{background-color:#093;color:#fff;}
    113. 

  113. 

  114. .mob-radio-blue{float:left; width:100%;}
    115. 

  115. .mob-radio-blue span{color:#000;border:1px solid #1c84c6;border-radius:3px;background-color:#fff; color:#666; padding:3px 10px; line-height:22px; margin:5px;}
    116. 

  116. .mob-radio-blue span.mobRadActive{background-color:#1c84c6;color:#fff;}
    117. 

  117. 

  118. /*手机底部架加载更多*/
    119. 

  119. .mob-load-more{float:left; width:100%; color:#333;text-align:center; cursor:pointer; line-height:40px;height:40px;background:#fff;clear:both; margin-top:6px;}
    120. 

  120. 

  121. /**css控制圆形背景图形**/
    122. 

  122. .mob-circle-green{ float:left; width:14px;height:14px; border-radius:7px; margin-right:1px; margin-top:7px; background-color:#a4cf46;}
    123. 

  123.