Default.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. a{
  2. text-decoration: none;/*去除a标签下划线*/
  3. }
  4. /*顶部导航栏样式*/
  5. .container{
  6. position: absolute;
  7. top: 0;
  8. right: 0;
  9. left: 0;
  10. }
  11. .header{
  12. display: flex;
  13. height: 64px;
  14. background-color: #2196f3;
  15. box-shadow: 0 4 5 #c4c0bd;
  16. box-shadow: 0px 4px 5px #c4c0bd;/*边框阴影*/
  17. align-items: baseline;
  18. }
  19. .header i{
  20. width: 24px;
  21. height: 24px;
  22. font-size: 24px;
  23. color: #fff;
  24. }
  25. .header_column{
  26. display: flex;
  27. flex: 1;
  28. width: 275px;
  29. height: 22px;
  30. margin: auto 0;
  31. align-items: center;
  32. }
  33. .header_column i{
  34. margin-left: 40px;
  35. cursor: pointer;
  36. }
  37. .img_left{
  38. flex-direction: row;
  39. width: 25px;
  40. height: 25px;
  41. }
  42. .header_column a{
  43. font-size: 24px;
  44. font-family: Roboto,Noto,Helvetica,Arial,sans-serif;/*字体样式*/
  45. color: #fff;
  46. margin-left: 34px;
  47. }
  48. .header_icon{
  49. display: flex;
  50. flex: 1;
  51. justify-content: flex-end;
  52. margin: auto;
  53. margin-right: 25px;
  54. }
  55. /*左侧导航栏样式*/
  56. .body{
  57. display: flex;
  58. }
  59. #sidebar{
  60. width: 225px;
  61. height: 500px;
  62. flex: 1;
  63. flex-direction: column;
  64. position: relative;
  65. top: 0px;
  66. left: -225px;
  67. }
  68. .row{
  69. height: 49px;
  70. display: flex;
  71. width: 225px;
  72. margin: 0 21px;
  73. justify-content: flex-start;
  74. align-items: center;
  75. }
  76. .row i{
  77. width: 24px;
  78. height: 24px;
  79. font-size: 24px;
  80. color: #757474;
  81. margin-left: 18px;
  82. }
  83. .row p{
  84. color: #333;
  85. margin-left: 35px;
  86. }
  87. /*页面导航样式*/
  88. .main{
  89. width: 100%;
  90. height: auto!important;
  91. color: black;
  92. display: flex;
  93. flex: 5;
  94. }
  95. .main_row{
  96. width: 1125px;
  97. height: 140px;
  98. padding: 10px;
  99. position: relative;
  100. top: 47px;
  101. }
  102. .icon{
  103. float: left;
  104. }
  105. .col_user{
  106. float: left;
  107. width: 330px;
  108. height: 74px;
  109. padding: 10px;
  110. }
  111. .col_database{
  112. float: left;
  113. width: 330px;
  114. height: 74px;
  115. padding: 10px;
  116. }
  117. .col_service{
  118. float: left;
  119. width: 330px;
  120. height: 74px;
  121. padding: 10px;
  122. }
  123. .main_row i{
  124. width: 74px;
  125. height: 74px;
  126. font-size: 74px;
  127. color: #757474;
  128. }
  129. /*文本和数字样式*/
  130. .col_text{
  131. float: left;
  132. }
  133. .user_text{
  134. padding: 10px 5px;
  135. font-size: 18px;
  136. color: #333;
  137. }
  138. .database_text{
  139. padding: 10px 5px;
  140. font-size: 18px;
  141. color: #333;
  142. }
  143. .service_text{
  144. padding: 10px 5px;
  145. font-size: 18px;
  146. color: #333;
  147. }
  148. .user_number{
  149. padding: 0px 5px;
  150. font-size: 24px;
  151. color: #333;
  152. line-height: 0.7;
  153. }
  154. .database_number{
  155. padding: 0px 5px;
  156. font-size: 24px;
  157. color: #333;
  158. line-height: 0.7;
  159. }
  160. .service_number{
  161. padding: 0px 5px;
  162. font-size: 24px;
  163. color: #333;
  164. line-height: 0.7;
  165. }
  166. /*font-icon替换矢量图*/
  167. @font-face {
  168. font-family: 'Material Icons';
  169. font-style: normal;
  170. font-weight: 400;
  171. src: local('Material Icons'),
  172. local('MaterialIcons-Regular'),
  173. url(MaterialIcons-Regular.woff2) format('woff2'),
  174. url(MaterialIcons-Regular.woff) format('woff');
  175. }
  176. .material-icons {
  177. font-style: normal;
  178. font-family: 'Material Icons';
  179. /* Support for all WebKit browsers. */
  180. -webkit-font-smoothing: antialiased;
  181. /* Support for Safari and Chrome. */
  182. text-rendering: optimizeLegibility;
  183. /* Support for Firefox. */
  184. -moz-osx-font-smoothing: grayscale;
  185. /* Support for IE. */
  186. -webkit-font-feature-settings: 'liga';
  187. -moz-font-feature-settings: 'liga';
  188. font-feature-settings: 'liga';
  189. }