123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197 |
- a{
- text-decoration: none;/*去除a标签下划线*/
- }
- /*顶部导航栏样式*/
- .container{
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- }
- .header{
- display: flex;
- height: 64px;
- background-color: #2196f3;
- box-shadow: 0 4 5 #c4c0bd;
- box-shadow: 0px 4px 5px #c4c0bd;/*边框阴影*/
- align-items: baseline;
- }
- .header i{
- width: 24px;
- height: 24px;
- font-size: 24px;
- color: #fff;
- }
- .header_column{
- display: flex;
- flex: 1;
- width: 275px;
- height: 22px;
- margin: auto 0;
- align-items: center;
- }
- .header_column i{
- margin-left: 40px;
- cursor: pointer;
- }
- .img_left{
- flex-direction: row;
- width: 25px;
- height: 25px;
- }
- .header_column a{
- font-size: 24px;
- font-family: Roboto,Noto,Helvetica,Arial,sans-serif;/*字体样式*/
- color: #fff;
- margin-left: 34px;
- }
- .header_icon{
- display: flex;
- flex: 1;
- justify-content: flex-end;
- margin: auto;
- margin-right: 25px;
- }
- /*左侧导航栏样式*/
- .body{
- display: flex;
- }
- #sidebar{
- width: 225px;
- height: 500px;
- flex: 1;
- flex-direction: column;
- position: relative;
- top: 0px;
- left: -225px;
- }
- .row{
- height: 49px;
- display: flex;
- width: 225px;
- margin: 0 21px;
- justify-content: flex-start;
- align-items: center;
- }
- .row i{
- width: 24px;
- height: 24px;
- font-size: 24px;
- color: #757474;
- margin-left: 18px;
- }
- .row p{
- color: #333;
- margin-left: 35px;
- }
- /*页面导航样式*/
- .main{
- width: 100%;
- height: auto!important;
- color: black;
- display: flex;
- flex: 5;
- }
- .main_row{
- width: 1125px;
- height: 140px;
- padding: 10px;
- position: relative;
- top: 47px;
- }
- .icon{
- float: left;
- }
- .col_user{
- float: left;
- width: 330px;
- height: 74px;
- padding: 10px;
- }
- .col_database{
- float: left;
- width: 330px;
- height: 74px;
- padding: 10px;
- }
- .col_service{
- float: left;
- width: 330px;
- height: 74px;
- padding: 10px;
- }
- .main_row i{
- width: 74px;
- height: 74px;
- font-size: 74px;
- color: #757474;
- }
- /*文本和数字样式*/
- .col_text{
- float: left;
- }
- .user_text{
- padding: 10px 5px;
- font-size: 18px;
- color: #333;
- }
- .database_text{
- padding: 10px 5px;
- font-size: 18px;
- color: #333;
- }
- .service_text{
- padding: 10px 5px;
- font-size: 18px;
- color: #333;
- }
- .user_number{
- padding: 0px 5px;
- font-size: 24px;
- color: #333;
- line-height: 0.7;
- }
- .database_number{
- padding: 0px 5px;
- font-size: 24px;
- color: #333;
- line-height: 0.7;
- }
- .service_number{
- padding: 0px 5px;
- font-size: 24px;
- color: #333;
- line-height: 0.7;
- }
- /*font-icon替换矢量图*/
- @font-face {
- font-family: 'Material Icons';
- font-style: normal;
- font-weight: 400;
- src: local('Material Icons'),
- local('MaterialIcons-Regular'),
- url(MaterialIcons-Regular.woff2) format('woff2'),
- url(MaterialIcons-Regular.woff) format('woff');
- }
- .material-icons {
- font-style: normal;
- font-family: 'Material Icons';
- /* Support for all WebKit browsers. */
- -webkit-font-smoothing: antialiased;
- /* Support for Safari and Chrome. */
- text-rendering: optimizeLegibility;
- /* Support for Firefox. */
- -moz-osx-font-smoothing: grayscale;
- /* Support for IE. */
- -webkit-font-feature-settings: 'liga';
- -moz-font-feature-settings: 'liga';
- font-feature-settings: 'liga';
- }
|