header.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. .navbar {
  2. background: #fff;
  3. padding: 16px 10px;
  4. z-index: 9999 !important;
  5. height: 6.5rem;
  6. }
  7. .headicon {
  8. width: 4rem;
  9. height: 4rem;
  10. margin-top: -2.8rem;
  11. margin-bottom: -2rem;
  12. margin-right: -1rem;
  13. -webkit-border-radius: 2rem;
  14. border-radius: 6rem;
  15. border: 2px solid #CCCCCC;
  16. }
  17. .nav > li {
  18. margin-top: -1.5rem;
  19. height: 6.5rem;
  20. }
  21. .headname {
  22. font-size: .9em;
  23. color: #333333;
  24. }
  25. .logout {
  26. font-size: .9em;
  27. }
  28. ul li {
  29. list-style: none;
  30. }
  31. .showHide {
  32. background-color: white;
  33. border-radius: 0.3rem;
  34. border: .1rem solid #eaeaea;
  35. display:none ;
  36. margin-top: 0.5rem;
  37. padding: .6rem 0;
  38. letter-spacing: .1rem;
  39. position: absolute;
  40. width: 10rem;
  41. }
  42. .showHide li>a{
  43. list-style: none;
  44. color: #8c8c8c;
  45. }
  46. .showHide li>a:hover{
  47. background-color: #52CC60;
  48. color: white;
  49. }
  50. .addActive{
  51. position: relative;
  52. }
  53. .showHide > li {
  54. line-height: 2.5rem;
  55. width: 100%;
  56. padding-right: .5rem;
  57. text-align: center;
  58. color: #8c8c8c;
  59. }
  60. .showHide > li:hover {
  61. background-color: #52CC60;
  62. color: white;
  63. width: 100%;
  64. }
  65. .logout img {
  66. width: 12px;
  67. height: 14px;
  68. margin-right: .5rem;
  69. margin-top: -.4rem;
  70. }
  71. .log {
  72. height: 4rem;
  73. margin-top: -1.5rem;
  74. }
  75. .addActive:hover {
  76. background-color: #CAEFCF;
  77. }
  78. .nav > li > a {
  79. color: #999999 !important;
  80. padding: 1rem 0 !important;
  81. margin: 0 1.2rem;
  82. border-bottom: solid 2px transparent;
  83. font-size: 1em;
  84. font-weight: bold;
  85. margin-top: 1.5rem;
  86. }
  87. .addActive> a:hover{
  88. color: #52CC60 !important;
  89. }
  90. .nav > .active > a {
  91. color: #52CC60 !important;
  92. background: transparent !important;
  93. padding: 1rem 0 !important;
  94. border-bottom: solid 2px #52CC60;
  95. }
  96. @media only screen and (max-width: 768px) {
  97. .nav-bedge {
  98. display: none;
  99. }
  100. }
  101. .navbar-header {
  102. margin-top: -.5rem;
  103. }
  104. .nav-bedge {
  105. position: absolute;
  106. top: -1rem;
  107. right: -4.5rem;
  108. padding: .5rem 1rem;
  109. background: rgba(255, 103, 103, 1);
  110. border-radius: 5rem;
  111. color: #fff;
  112. font-size: .85em;
  113. }
  114. .nav-bedge::before {
  115. content: '';
  116. position: absolute;
  117. bottom: 0;
  118. left: 0;
  119. width: 0;
  120. height: 0;
  121. border-top: 1rem solid rgba(255, 103, 103, 1);
  122. border-left: .5rem solid transparent;
  123. border-right: .5rem solid transparent;
  124. -webkit-transform: rotate(45deg) translate(.15rem, .3rem);
  125. -moz-transform: rotate(45deg) translate(.15rem, .3rem);
  126. -ms-transform: rotate(45deg) translate(.15rem, .3rem);
  127. -o-transform: rotate(45deg) translate(.15rem, .3rem);
  128. transform: rotate(45deg) translate(.15rem, .3rem);
  129. }
  130. /*遮罩部分*/
  131. .maskA {
  132. position: fixed;
  133. top: 0;
  134. left: 0;
  135. width: 100%;
  136. height: 100%;
  137. background: rgba(176, 176, 176, 0.45);
  138. z-index: 9999;
  139. display: none;
  140. }
  141. .glyphicon-remove {
  142. z-index: 999;
  143. }
  144. .mask-content2 {
  145. position: absolute;
  146. left: 40%;
  147. background: #FFFFFF;
  148. padding-left: 2rem;
  149. padding-right: 2rem;
  150. padding-bottom: 1rem;
  151. top: 18rem;
  152. border-radius: 5px;
  153. }
  154. .mask-content-head2 {
  155. width: 100%;
  156. margin-top: 2rem;
  157. }
  158. .mask-content2 > span {
  159. position: absolute;
  160. right: 1rem;
  161. font-size: 16px;
  162. color: #5e5e5e;
  163. padding: 1rem;
  164. }
  165. .mask-content-head2 span {
  166. font-size: 16px;
  167. font-weight: 600;
  168. text-align: center;
  169. width: 100%;
  170. line-height: 8rem;
  171. }
  172. .mask-content-btn {
  173. text-align: center;
  174. width: 100%;
  175. }
  176. .mask-content-btn a {
  177. display: inline-block;
  178. color: #7E7E7E;
  179. background: #F6F7FB;
  180. padding: .4rem 2.5rem;
  181. border-radius: 3px;
  182. margin-left: 2rem;
  183. text-decoration: none;
  184. margin-top: 1rem;
  185. cursor: pointer;
  186. }
  187. .mask-content-head2 span:nth-of-type(2) {
  188. float: right;
  189. margin-top: -1.8rem;
  190. font-size: 1.5rem;
  191. color: #7E7E7E;
  192. }
  193. .mask-content-btn .active {
  194. color: #FFFFFF;
  195. background: #52CC60;
  196. }