style.css 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. @charset "utf-8";
  2. /*-----图片列表----*/
  3. .imglist{
  4. margin-right: -20px;
  5. position: relative;
  6. -webkit-touch-callout: none;
  7. -webkit-user-select: none;
  8. -khtml-user-select: none;
  9. -moz-user-select: none;
  10. -ms-user-select: none;
  11. user-select: none;
  12. }
  13. .imglist .item{
  14. margin-right: 20px;
  15. width: 150px;
  16. height: 150px;
  17. margin-top: 20px;
  18. position: absolute;
  19. left: 0;
  20. top: 0;
  21. border:solid 1px #ddd;
  22. -moz-user-select: -moz-none;
  23. -khtml-user-select: none;
  24. -webkit-user-select: none;
  25. -ms-user-select: none;
  26. user-select: none;
  27. background-color: #fff;
  28. }
  29. /*重置*/
  30. .imglist .layui-form-checkbox {
  31. position: absolute;
  32. top: 0;
  33. right: 0;
  34. z-index: 2;
  35. width: 20px;
  36. height: 20px;
  37. margin: 3px;
  38. }
  39. .imglist .layui-form-checkbox i{
  40. border: 1px solid #d2d2d2;
  41. }
  42. .imglist .checkbox{
  43. position: absolute;
  44. top: 0;
  45. right: 0;
  46. z-index: 2;
  47. width: 20px;
  48. height: 20px;
  49. margin: 3px;
  50. }
  51. .imglist .picbox{
  52. margin: auto;
  53. position: relative;
  54. }
  55. .imglist .picbox > a{
  56. height: 0;
  57. display: block;
  58. padding-bottom: 100%;
  59. position: relative;
  60. }
  61. .imglist .picbox img{
  62. position: absolute;
  63. /*left: 20px;
  64. top: 20px;
  65. right: 20px;
  66. bottom: 20px;*/
  67. left: 0px;
  68. top: 0px;
  69. right: 0px;
  70. bottom: 0px;
  71. margin: auto;
  72. max-width: 100%;
  73. max-height: 100%;
  74. }
  75. .imglist .textbox{
  76. text-align: center;
  77. margin-top: -10px;
  78. padding-bottom: 5px;
  79. display: none;
  80. }
  81. .imglist .item:hover{
  82. height: auto;
  83. box-shadow: 0 1px 3px rgba(68, 68, 68,0.3);
  84. -moz-box-shadow: 0 1px 3px rgba(68, 68, 68,0.3);
  85. -webkit-box-shadow: 0 1px 3px rgba(68, 68, 68,0.3);
  86. z-index: 9;
  87. }
  88. .imglist .item .del {
  89. position: absolute;
  90. top: -9px;
  91. right: -7px;
  92. z-index: 9;
  93. font-size: 18px;
  94. display: none;
  95. }
  96. .imglist .item:hover .del{
  97. display: block;
  98. }
  99. .imglist .item:hover .textbox{
  100. display: block;
  101. }
  102. .imglist .ident{
  103. background-color: #c33;
  104. width: 2px;
  105. position:absolute;
  106. left: 2px;
  107. top: 0;
  108. z-index: 0;
  109. height: 100px;
  110. margin-top: 10px;
  111. margin-left: -10px;
  112. display: none;
  113. }
  114. .imglist .morexy{
  115. border:solid 1px #f22;
  116. background-color: #fdd;
  117. position: absolute;
  118. left: 0;
  119. top: 0;
  120. z-index: 11;
  121. opacity: 0.5;
  122. margin: 10px 0 0 -10px;
  123. display: none;
  124. }
  125. /*-图片查看-*/
  126. .chak_box{
  127. position: fixed;
  128. left: 0;
  129. top: 0;
  130. background-color: rgba(0,0,0,0.618);
  131. width: 100%;
  132. height: 100%;
  133. z-index: 99;
  134. -moz-user-select: -moz-none;
  135. -webkit-user-select: none;
  136. -ms-user-select: none;
  137. user-select: none;
  138. display: none;
  139. }
  140. .chak_title{
  141. position: absolute;
  142. top: 0;left: 0;
  143. width: 100%;
  144. text-align: center;
  145. line-height: 50px;
  146. color: #fff;
  147. font-size: 20px;
  148. }
  149. .chak_img{
  150. position: absolute;
  151. left: 50px;
  152. top: 50px;
  153. right: 50px;
  154. bottom: 100px;
  155. margin: auto;
  156. border:solid 1px rgba(255,255,255,0.25);
  157. border-radius: 10px;
  158. overflow: hidden;
  159. }
  160. .chak_img > p{
  161. position: absolute;
  162. left: 50%;
  163. top: 50%;
  164. -ms-transform: translate(-50%,-50%);
  165. -moz-transform: translate(-50%,-50%);
  166. -webkit-transform: translate(-50%,-50%);
  167. -o-transform: translate(-50%,-50%);
  168. transform: translate(-50%,-50%);
  169. width:auto;
  170. padding: 10px 20px;
  171. background-color: #eee;
  172. background-color: rgba(0,0,0,0.5);
  173. color: #fff;
  174. font-size: 20px;
  175. border-radius: 5px;
  176. display: none;
  177. }
  178. .chak_img > img{
  179. position: absolute;
  180. left: 50%;
  181. top: 50%;
  182. max-width: 100%;
  183. max-height: 100%;
  184. min-width: 10px;
  185. -ms-transform: translate(-50%,-50%);
  186. -moz-transform: translate(-50%,-50%);
  187. -webkit-transform: translate(-50%,-50%);
  188. -o-transform: translate(-50%,-50%);
  189. transform: translate(-50%,-50%);
  190. transform-origin: center;
  191. }
  192. .chak_btn{
  193. position: absolute;
  194. width: 100%;
  195. height: 100px;
  196. bottom: 0;
  197. left: 0;
  198. text-align: center;
  199. }
  200. .chak_btn > button{
  201. border: solid 1px #fff;
  202. color: #fff;
  203. background-color: rgba(0,0,0,0.33);
  204. border-radius: 5px;
  205. height: 40px;
  206. padding: 0 15px;
  207. font-size: 16px;
  208. margin: 20px 5px;
  209. min-width: 50px;
  210. cursor: pointer;
  211. }
  212. .chak_btn > button:hover{
  213. background-color: rgba(0,0,0,0.66);
  214. }
  215. /*-/-*/
  216. .btn{
  217. padding: 4px 12px;
  218. background-color: #f6f6f6;
  219. border: solid 1px #ddd;
  220. cursor: pointer;
  221. }
  222. /*-/-*/
  223. .clear{clear: both;}
  224. .clearb:after{
  225. content: "";
  226. display: block;
  227. clear: both;
  228. }
  229. img{max-width: 100%;}
  230. .overh{overflow: hidden;position: relative;}
  231. .f_wein{font-weight: normal;}
  232. .br_b{border-bottom: solid 1px #eee;}
  233. .br_t{border-top: solid 1px #eee;}
  234. .br_n{border: 0;}
  235. .con_br{
  236. background-color: #fff;
  237. border-top:solid 4px #d5dbe5;
  238. box-shadow: 0 2px 5px 2px rgba(0,0,0,0.05);
  239. }
  240. .con_br_b{border-color: #45a7cf;}
  241. .con_br_g{border-color: #49a361;}
  242. .con_br_o{border-color: #e89f3c;}
  243. .con_br_r{border-color: #cd5542;}
  244. .con_br_c{border-color: #62cda6;}
  245. .con_br_n{border-top: 0;}
  246. .w-p100{width: 100%;}
  247. .ft_l{float: left;}
  248. .ft_r{float: right;}
  249. .pg_3{padding: 3px;}
  250. .pg_5{padding: 5px;}
  251. .pg_tb5{padding-top: 5px;padding-bottom: 5px;}
  252. .pg_tb6{padding-top: 6px;padding-bottom: 6px;}
  253. .pg_tb8{padding-top: 8px;padding-bottom: 8px;}
  254. .pg_tb10{padding-top: 10px;padding-bottom: 10px;}
  255. .pg_tb15{padding-top: 15px;padding-bottom: 15px;}
  256. .pg_tb20{padding-top: 20px;padding-bottom: 20px;}
  257. .pg_10{padding: 10px;}
  258. .pg_15{padding: 15px;}
  259. .pg_20{padding: 20px;}
  260. .pg_lr15{padding-left: 15px;padding-right: 15px;}
  261. .pg_lr25{padding-left: 25px;padding-right: 25px;}
  262. .pg_l15{padding-left: 15px;}
  263. .pg_l25{padding-left: 25px;}
  264. .pg_r25{padding-right: 25px;}
  265. .pg_b15{padding-bottom: 15px;}
  266. .pg_b25{padding-bottom: 25px;}
  267. .pg_bn{padding-bottom: 0 !important;}
  268. .pg_n{padding: 0 !important;}
  269. .bold{font-weight: bold;}
  270. .mn_5{margin: 5px;}
  271. .mn_n{margin: 0 !important;}
  272. .mb_n{margin-bottom: 0 !important;}
  273. .mb-25{margin-bottom: 25px;}
  274. .dis_n{display: none;}
  275. .dis_block{display: block;}