Home Esplora Aiuto
Registrati Accedi
Cherry
/
beauti-nof
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Albero (Tree): e4c84cf485
Rami (Branch) Tag
beauti-nof
/
public
/
assets
/
sub
/
css
/
main.css

main.css 11 KB
Cronologia Originale

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183 
  1. /*公共样式*/
    2. 

  2. .main_body{ min-width:320px; }
    3. 

  3. .layui-elem-quote.title{ padding:10px 15px; margin-bottom:0; }
    4. 

  4. .layui-tab-more{ position: relative; z-index: 99; background:#fff; }
    5. 

  5. .layui-layer-tab .layui-layer-title span.layui-layer-tabnow{ height:42px !important; }
    6. 

  6. .layui-layer-tab .layui-layer-title span{ min-width:45px !important; }
    7. 

  7. .marg0{ margin:0; }
    8. 

  8. /*模拟加载层图标样式*/
    9. 

  9. .layui-layer-dialog .layui-layer-content .layui-layer-ico16{ background-size:100% 100% !important; }
    10. 

  10. 

  11. /*样式改变的过渡*/
    12. 

  12. .showMenu .layui-body,.showMenu .layui-footer,.showMenu.layui-layout-admin .layui-side,.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; }
    13. 

  13. 

  14. 

  15. .showMenu.layui-layout-admin .layui-side{ left:-200px; }
    16. 

  16. .showMenu .layui-body,.showMenu .layui-footer{ left:0; }
    17. 

  17. .layui-layout-admin .layui-main{ margin:0; }
    18. 

  18. .logo{ color: #fff; float: left; line-height:60px; font-size:20px; padding:0 25px; text-align: center; width:150px;}
    19. 

  19. .hideMenu{ float:left; width:20px; height:20px; margin:15px 15px 0 0; font-size:17px; text-align:center; padding:5px 5px; color:#fff; background-color:#1AA094; }
    20. 

  20. .hideMenu:hover{ color:#fff; }
    21. 

  21. .weather{ color:#fff; float:left; margin:15px 0 0 50px;}
    22. 

  22. .component{ float: left; width:200px; height:30px; margin-top: 15px; position: relative;}
    23. 

  23. .component .layui-input{ height:30px; line-height: 30px; font-size:12px; border:none; transition: all 0.3s; }
    24. 

  24. .component .layui-input:focus{ background:#fff; color:#000; }
    25. 

  25. .component .layui-form-select dl{ top:33px; background:#fff; }
    26. 

  26. .component .layui-form-select .layui-edge,.top_menu .layui-nav-item[mobile]{ display:none; }
    27. 

  27. .component .layui-icon{ position: absolute; right:8px; top:8px; color:#000; }
    28. 

  28. 

  29. /*顶部右侧导航*/
    30. 

  30. .layui-nav .layui-nav-item>a{ color:#fff; }
    31. 

  31. .top_menu{ position:absolute; right:0; background:none }
    32. 

  32. .top_menu.layui-nav .layui-this:after{ width:0px; }
    33. 

  33. .top_menu.layui-nav .layui-this,.closeBox.layui-nav .layui-this{ background-color:transparent; }
    34. 

  34. .top_menu.layui-nav .layui-this a,.closeBox.layui-nav .layui-this a{ color:#c2c2c2; }
    35. 

  35. .top_menu.layui-nav dd.layui-this a,.closeBox.layui-nav dd.layui-this a{ color:#333; }
    36. 

  36. .top_menu.layui-nav .layui-nav-child a:hover,.closeBox.layui-nav .layui-nav-child a:hover{ color:#fff; background-color:#5FB878; }
    37. 

  37. .top_menu .iconfont{ font-size: 14px !important; }
    38. 

  38. .top_menu .layui-nav-bar{ top:60px !important; background-color:rgba(0,0,0,0.7) }
    39. 

  39. 

  40. /*左侧用户头像*/
    41. 

  41. .layui-nav{ background-color:inherit !important; }
    42. 

  42. .layui-layout-admin .layui-side{ left:0; }
    43. 

  43. .user-photo{width: 200px; height: 120px; padding-top: 15px; padding-bottom: 5px;}
    44. 

  44. .user-photo a.img{ display: block; width: 76px; height: 76px; margin: 0 auto; margin-bottom: 15px;}
    45. 

  45. .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;}
    46. 

  46. .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;}
    47. 

  47. /*左侧导航重定义*/
    48. 

  48. .layui-nav-item a cite{ padding:0 5px; }
    49. 

  49. .layui-side-scroll{ height:auto; }
    50. 

  50. .layui-nav-tree .layui-nav-child a{ padding-left: 40px; }
    51. 

  51. .layui-nav-tree .layui-nav-child a:hover{ background-color:#4E5465; }
    52. 

  52. .layui-nav-tree .layui-nav-child dd.layui-this a:hover{ background-color:#009688; }
    53. 

  53. 

  54. /*右侧body*/
    55. 

  55. #top_tabs_box{ padding-right:138px; height:40px; border-bottom:1px solid #e2e2e2; }
    56. 

  56. #top_tabs{ position: absolute; border-bottom:none;}
    57. 

  57. /*多窗口页面操作下拉*/
    58. 

  58. .closeBox{ position:absolute; right:0; background-color:#fff !important; color:#000; border-left:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2; }
    59. 

  59. .closeBox .layui-nav-item{ line-height:40px; }
    60. 

  60. .closeBox .layui-nav-item a,.closeBox .layui-nav-item a:hover{ color:#000; }
    61. 

  61. .closeBox .layui-nav-more{ top:17px; }
    62. 

  62. .closeBox .layui-nav-mored{ top:11px; }
    63. 

  63. .closeBox .layui-nav-child{ top:42px; left:-12px; }
    64. 

  64. .closeBox .layui-nav-bar{ display:none; }
    65. 

  65. .closeBox .icon-caozuo{ font-size: 20px; position:absolute; top:1px; left:-2px; }
    66. 

  66. 

  67. .layui-body{overflow:hidden; border-top:5px solid #1AA094;border-left:2px solid #1AA094;}
    68. 

  68. .layui-tab-content{ height:100%; padding:0; }
    69. 

  69. .layui-tab-item{ position: absolute; top: 41px; bottom:0; left: 0; right: 0; padding: 0; margin: 0; -webkit-overflow-scrolling:touch; overflow:auto;}
    70. 

  70. .layui-tab-title .layui-this{ background-color:#1AA094; color:#fff; }
    71. 

  71. .layui-tab-title .layui-this:after{ border:none; }
    72. 

  72. .layui-tab-title li cite{ font-style: normal; padding-left:5px; }
    73. 

  73. .clildFrame.layui-tab-content{ padding-right: 0; }
    74. 

  74. .clildFrame.layui-tab-content iframe{ width: 100%; height:100%; border:none; min-width: 320px; position:absolute; }
    75. 

  75. /*main.html*/
    76. 

  76. .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;}
    77. 

  77. .row{ margin-left:-10px; overflow:hidden;}
    78. 

  78. .col{ padding-left:10px;}
    79. 

  79. .panel{float: left; text-align: center; width:16.666%; min-width:210px; margin-bottom: 10px;}
    80. 

  80. .panel_box a{display:block; background-color:#f2f2f2; border-radius:5px; overflow:hidden; }
    81. 

  81. .panel_icon{ width:40%; display: inline-block; padding:22px 0; background-color:#54ade8;float:left;}
    82. 

  82. .panel_icon i{ font-size:3em; color:#fff;}
    83. 

  83. .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);}
    84. 

  84. .panel_word{ width:60%; display: inline-block; float:right; margin-top: 22px; }
    85. 

  85. .panel_word span{ font-size:25px; display:block; height:30px; line-height:30px; }
    86. 

  86. .allNews em{ font-style:normal; font-size:16px;display: block; }
    87. 

  87. .panel_box a .allNews cite{ display:none; }
    88. 

  88. .panel_box a cite{ font-size:16px; display: block; font-style:normal; }
    89. 

  89. .sysNotice{ width:50%; float: left; }
    90. 

  90. .sysNotice .layui-elem-quote{ line-height:26px; position: relative;}
    91. 

  91. .sysNotice .layui-table{ margin-top:0; border-left:5px solid #e2e2e2; }
    92. 

  92. .sysNotice .title .icon-new1{ position: absolute; top:8px; margin-left: 10px; color:#f00; font-size:25px; }
    93. 

  93. .explain .layui-btn{ margin:5px 5px 5px 0; }
    94. 

  94. 

  95. /*打开页面动画*/
    96. 

  96. .layui-tab-item.layui-show{ animation:moveTop 1s; -webkit-animation:moveTop 1s; animation-fill-mode:both; -webkit-animation-fill-mode:both; }
    97. 

  97. @keyframes moveTop{
    98. 

  98.     0% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}
    99. 

  99.     100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
    100. 

  100. }
    101. 

  101. @-o-keyframes moveTop{
    102. 

  102.     0% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}
    103. 

  103.     100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
    104. 

  104. }
    105. 

  105. @-moz-keyframes moveTop{
    106. 

  106.     0% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}
    107. 

  107.     100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
    108. 

  108. }
    109. 

  109. @-webkit-keyframes moveTop{
    110. 

  110.     0% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}
    111. 

  111.     100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
    112. 

  112. }
    113. 

  113. 

  114. /*锁屏*/
    115. 

  115. .admin-header-lock{width: 320px; height: 170px; padding: 20px; position: relative; text-align: center;}
    116. 

  116. .admin-header-lock-img{width: 60px; height: 60px; margin: 0 auto;}
    117. 

  117. .admin-header-lock-img img{width: 60px; height: 60px; border-radius: 100%;}
    118. 

  118. .admin-header-lock-name{color: #009688;margin: 8px 0 15px 0;}
    119. 

  119. .input_btn{ overflow: hidden; margin-bottom: 10px; }
    120. 

  120. .admin-header-lock-input{width: 170px; color: #fff;background-color: #009688; float: left; margin:0 10px 0 40px; border:none;}
    121. 

  121. .admin-header-lock-input::-webkit-input-placeholder {color:#fff;}
    122. 

  122. .admin-header-lock-input::-moz-placeholder {color:#fff;}
    123. 

  123. .admin-header-lock-input::-ms-input-placeholder {color:#fff;}
    124. 

  124. .admin-header-lock-input:-moz-placeholder {color:#fff;}
    125. 

  125. #unlock{ float: left; }
    126. 

  126. #lock-box p{ color:#e60000; }
    127. 

  127. 

  128. /*换肤*/
    129. 

  129. .skins_box{ padding:10px 34px 0; }
    130. 

  130. .skinBtn{ text-align:right; }
    131. 

  131. /*橙色*/
    132. 

  132. .orange .layui-layout-admin .layui-header{ background-color:orange; }
    133. 

  133. .orange .layui-bg-black{ background-color:#e47214; }
    134. 

  134. /*蓝色*/
    135. 

  135. .blue .layui-layout-admin .layui-header{ background-color:#3396d8; }
    136. 

  136. .blue .layui-bg-black,.blue .hideMenu{ background-color:#146aa2; }
    137. 

  137. 

  138. /*自定义*/
    139. 

  139. .skinCustom{ visibility:hidden; }
    140. 

  140. .skinCustom input{ width:48%; margin:5px 2% 5px 0; float:left; }
    141. 

  141. 

  142. .orange .layui-nav-tree .layui-nav-child a,.blue .layui-nav-tree .layui-nav-child a{ color:#fff; }
    143. 

  143. .orange .top_menu.layui-nav .layui-nav-more,.blue .top_menu.layui-nav .layui-nav-more{border-color:#fff transparent transparent !important;}
    144. 

  144. .orange .top_menu.layui-nav-itemed .layui-nav-more,.orange .top_menu.layui-nav .layui-nav-mored,.blue .top_menu.layui-nav-itemed .layui-nav-more,.blue .top_menu.layui-nav .layui-nav-mored{border-color:transparent transparent #fff !important;}
    145. 

  145. 

  146. /*底部*/
    147. 

  147. .footer{ text-align: center; line-height:44px;border-left: 2px solid #1AA094;}
    148. 

  148. 

  149. 

  150. /*响应式*/
    151. 

  151. @media screen and (max-width:1282px){
    152. 

  152. 	.panel{ width:33.3333%; }
    153. 

  153. }
    154. 

  154. @media screen and (max-width:1050px){
    155. 

  155. 	.layui-nav.top_menu .layui-nav-item a{ padding:0 10px; }
    156. 

  156. 	/*天气信息*/
    157. 

  157. 	.weather[pc]{ display: none !important; }
    158. 

  158. 	.sysNotice{ width:100%; }
    159. 

  159. 	.component{ width:165px; }
    160. 

  160. }
    161. 

  161. @media screen and (max-width: 750px){
    162. 

  162. 	.logo{ padding:0;}
    163. 

  163. 	.top_menu .layui-nav-item[pc],.component,.site-mobile .site-tree-mobile{ display: none !important; }
    164. 

  164. 	.top_menu .layui-nav-item.showNotice[pc]{ display:inline-block !important; }
    165. 

  165. 	.top_menu .layui-nav-item[mobile]{ display:inline-block; }
    166. 

  166. 	.layui-nav.top_menu,.layui-nav.top_menu .layui-nav-item a{ padding:0 10px; }
    167. 

  167. 	.layui-layout-admin .layui-main{ margin-right: 0; }
    168. 

  168. 	.hideMenu{ display:none; }
    169. 

  169. 	/*左侧导航*/
    170. 

  170. 	.layui-layout-admin .layui-side{ left:-260px; }
    171. 

  171. 	.site-mobile .layui-side{ left: 0; z-index:9999; }
    172. 

  172. 	.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;}
    173. 

  173. 	.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;}
    174. 

  174. 

  175. 	/*layui-body*/
    176. 

  176. 	.panel{ width:50%; }
    177. 

  177. 

  178. 	.layui-body,.layui-layout-admin .layui-footer{ left:0; }
    179. 

  179. }
    180. 

  180. @media screen and (max-width:432px){
    181. 

  181. 	.top_menu .layui-nav-item.showNotice[pc]{ display:none !important; }
    182. 

  182. 	.panel{ width:100%; }
    183. 

  183. }
    184.