main.css 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. /*公共样式*/
  2. .main_body{ min-width:320px; }
  3. .layui-elem-quote.title{ padding:10px 15px; margin-bottom:0; }
  4. .layui-tab-more{ position: relative; z-index: 99; background:#fff; }
  5. .layui-layer-tab .layui-layer-title span.layui-layer-tabnow{ height:42px !important; }
  6. .layui-layer-tab .layui-layer-title span{ min-width:45px !important; }
  7. .layui-side-menu .layui-nav .layui-nav-item>a, .layui-side-menu .layui-nav-tree .layui-nav-child a{padding-top: 4px; padding-bottom: 4px;}
  8. .layui-side-menu .layui-nav .layui-nav-item a {height: 40px;line-height: 40px;padding-left: 45px;padding-right: 30px;}
  9. .layui-side-menu .layui-nav .layui-nav-item .layui-icon {position: absolute; top: 50%; left: 20px; margin-top: -19px;}
  10. /*模拟加载层图标样式*/
  11. .layui-layer-dialog .layui-layer-content .layui-layer-ico16{ background-size:100% 100% !important; }
  12. /*样式改变的过渡*/
  13. .logo,.top_menu .layui-nav-item[pc],.component,.top_menu .layui-nav-item[mobile],.layui-nav,.layui-layout-admin .layui-main,.site-mobile .layui-side,.layui-layout-admin .layui-side,.site-mobile .site-tree-mobile,.layui-body,.layui-layout-admin .layui-footer,.layui-layout-admin .layui-side,.panel,.panel .panel_icon i{ transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; }
  14. .logo{ color: #fff; float: left; font-size:20px; padding:0 10px; text-align: center; margin-right: 15px; line-height: 60px}
  15. .logo:hover{ color: #fff;}
  16. .weather{ color:#fff; float:left; margin:15px 0 0 50px;}
  17. .component{ float: left; width:200px; height:30px; margin-top: 15px; position: relative;}
  18. .component .layui-input{ height:30px; line-height: 30px; font-size:12px; border:none; transition: all 0.3s; }
  19. .component .layui-input:focus{ background:#fff; color:#000; }
  20. .component .layui-form-select dl{ top:33px; background:#fff; }
  21. .component .layui-form-select .layui-edge,.top_menu .layui-nav-item[mobile]{ display:none; }
  22. .component .layui-icon{ position: absolute; right:8px; top:8px; color:#000; }
  23. /*顶部右侧导航*/
  24. .top_menu{ position:absolute; right:0; background:none; padding: 0 }
  25. .layui-tab-title li .layui-tab-close:hover{border-radius: 50%}
  26. .layadmin-pagetabs{box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); background-color: #fff;}
  27. .layadmin-pagetabs .layui-tab-title{z-index: 1; }
  28. .layui-layout-admin .layui-header {position: fixed;top: 0;left: 0;width: 100%;}
  29. .layui-layout-admin .layui-side-menu{background-color: #393D49;}
  30. /*左侧用户头像*/
  31. .layui-layout-admin .layui-side{ left:0;}
  32. .layui-side-menu .layui-nav { background: 0 0;}
  33. .user-photo{width: 200px; height: 120px; padding-top: 15px; padding-bottom: 5px;}
  34. .user-photo a.img{ display: block; width: 76px; height: 76px; margin: 0 auto; margin-bottom: 15px;}
  35. .user-photo a.img img{ display: block; border: none; width: 100%; height: 100%; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border: 4px solid #44576b;}
  36. .user-photo p{ display: block; width: 100%; height: 25px; color: #ffffff; text-align: center; font-size: 12px; white-space: nowrap;line-height: 25px; overflow: hidden;}
  37. /*左侧导航重定义*/
  38. .layui-nav-item a cite{ padding:0 5px; }
  39. .layui-nav-tree .layui-nav-child a{ padding-left: 40px; }
  40. .layui-nav-tree .layui-nav-child a:hover{ background-color:#4E5465; }
  41. .layui-nav-tree .layui-nav-child dd.layui-this a:hover{ background-color:#009688; }
  42. /*右侧body*/
  43. #top_tabs_box{ padding-right:102px; height:40px;z-index: 1;}
  44. #top_tabs{ position: absolute; border-bottom:none;}
  45. /*多窗口页面操作下拉*/
  46. .closeBox{ position:absolute; right:0; padding: 0; background-color:#fff !important; color:#000; border-left:1px solid #e2e2e2;}
  47. .closeBox .layui-nav-item{ line-height:39px; }
  48. .closeBox .layui-nav-item a,.closeBox .layui-nav-item a:hover{ color:#666; padding: 0 12px;}
  49. .closeBox .layui-nav-child{ top: 40px; left: auto; right: 0;}
  50. .closeBox .layui-nav-bar{ display:none; }
  51. .closeBox .icon-caozuo{ font-size: 16px; color: #666;}
  52. .closeBox .layui-nav-child dd.layui-this a{background-color: #fff; color: #666;}
  53. .layui-body{overflow:hidden;}
  54. .layui-tab-content{ height:100%; padding:0; }
  55. .layui-tab-item{ position: absolute; top: 41px; bottom:0; left: 0; right: 0; padding: 0; margin: 0;-webkit-overflow-scrolling: touch;}
  56. .marg0{ margin:0; }
  57. /* .layui-tab-title .layui-this{ border-top:#1AA094; color:#fff; } */
  58. .layui-tab-title .layui-this,.layui-tab-title li:hover{background-color: #f6f6f6;}
  59. .layui-tab-title .layui-this:after{content: ''; position: absolute; top: 0; z-index: 1; left: 0; width: 100%; height: 2px; border-radius: 0; background-color: #1AA094; transition: all .3s; -webkit-transition: all .3s; border: none;}
  60. .layui-tab-title li {min-width: 0; line-height: 40px; max-width: 160px; text-overflow: ellipsis; overflow: hidden; border-right: 1px solid #f6f6f6; vertical-align: top;}
  61. .layui-tab-title li cite{ font-style: normal; padding-left:5px; }
  62. .clildFrame.layui-tab-content{ padding-right: 0; }
  63. .clildFrame.layui-tab-content iframe{ width: 100%; height: 100%; border:none; min-width: 320px; }
  64. /*main.html*/
  65. .row,.col,.panel_word,.panel_icon{ box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box;}
  66. .row{ margin-left:-10px; overflow:hidden;}
  67. .col{ padding-left:10px;}
  68. .panel{float: left; text-align: center; width:16.666%; min-width:210px; margin-bottom: 10px;}
  69. .panel_box a{display:block; background-color:#f2f2f2; border-radius:5px; overflow:hidden; }
  70. .panel_icon{ width:40%; display: inline-block; padding:22px 0; background-color:#54ade8;float:left;}
  71. .panel_icon i{ font-size:3em; color:#fff;}
  72. .panel a:hover .panel_icon i{ display:inline-block; transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg);}
  73. .panel_word{ width:60%; display: inline-block; float:right; margin-top: 22px; }
  74. .panel_word span{ font-size:25px; display:block; height:30px; line-height:30px; }
  75. .allNews em{ font-style:normal; font-size:16px;display: block; }
  76. .panel_box a .allNews cite{ display:none; }
  77. .panel_box a cite{ font-size:16px; display: block; font-style:normal; }
  78. .sysNotice{ width:50%; float: left; }
  79. .sysNotice .layui-elem-quote{ line-height:26px; position: relative;}
  80. .sysNotice .layui-table{ margin-top:0; border-left:5px solid #e2e2e2; }
  81. .sysNotice .title .icon-new1{ position: absolute; top:8px; margin-left: 10px; color:#f00; font-size:25px; }
  82. /*锁屏*/
  83. .admin-header-lock{width: 320px; height: 170px; padding: 20px; position: relative; text-align: center;}
  84. .admin-header-lock-img{width: 60px; height: 60px; margin: 0 auto;}
  85. .admin-header-lock-img img{width: 60px; height: 60px; border-radius: 100%;}
  86. .admin-header-lock-name{color: #009688;margin: 8px 0 15px 0;}
  87. .input_btn{ overflow: hidden; margin-bottom: 10px; }
  88. .admin-header-lock-input{width: 170px; color: #fff;background-color: #009688; float: left; margin:0 10px 0 40px; border:none;}
  89. .admin-header-lock-input::-webkit-input-placeholder {color:#fff;}
  90. .admin-header-lock-input::-moz-placeholder {color:#fff;}
  91. .admin-header-lock-input::-ms-input-placeholder {color:#fff;}
  92. .admin-header-lock-input:-moz-placeholder {color:#fff;}
  93. #unlock{ float: left; }
  94. #lock-box p{ color:#e60000; }
  95. /*底部*/
  96. .footer{ text-align: center; font-size:12px; border-left: 2px solid #1AA094; background-color: #fff !important; box-shadow: 0 1px 2px 0 rgba(0,0,0,.1); border-top: 1px solid rgb(230, 230, 230); z-index: 1002;}
  97. .layui-layout-admin .layui-body{bottom: 0;}
  98. .layui-layout-admin .layui-footer{height: 30px; line-height: 30px}
  99. /*响应式*/
  100. @media screen and (max-width:1282px){
  101. .panel{ width:33.3333%; }
  102. }
  103. @media screen and (max-width:1050px){
  104. .layui-nav.top_menu .layui-nav-item a{ padding:0 10px; }
  105. /*天气信息*/
  106. .weather[pc]{ display: none !important; }
  107. .sysNotice{ width:100%; }
  108. }
  109. @media screen and (max-width: 750px){
  110. .logo{ padding:0;}
  111. .top_menu .layui-nav-item[pc],.component,.site-mobile .site-tree-mobile{ display: none !important; }
  112. .top_menu .layui-nav-item.showNotice[pc]{ display:inline-block !important; }
  113. .top_menu .layui-nav-item[mobile]{ display:inline-block; }
  114. .layui-nav.top_menu,.layui-nav.top_menu .layui-nav-item a{ padding:0 10px; }
  115. .layui-layout-admin .layui-main{ margin-right: 0; }
  116. /*左侧导航*/
  117. .layui-layout-admin .layui-side{ left:-260px;}
  118. .site-mobile .layui-side{ left: 0; z-index:9999; }
  119. .site-tree-mobile {display: block!important; position: fixed; z-index: 100000; bottom: 15px; left: 15px; width: 50px; height: 50px; line-height: 50px; border-radius: 2px; text-align: center; background-color: rgba(0,0,0,.7); color: #fff;}
  120. .site-mobile .site-mobile-shade { content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.8); z-index: 999;}
  121. /*layui-body*/
  122. .panel{ width:50%; }
  123. .layui-body,.layui-layout-admin .layui-footer{ left:0; }
  124. }
  125. @media screen and (max-width:432px){
  126. .top_menu .layui-nav-item.showNotice[pc]{ display:none !important; }
  127. .panel{ width:100%; }
  128. }