You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

259 lines
5.0 KiB
CSS

@charset "utf-8";
/*-----图片列表----*/
.imglist{
margin-right: -20px;
position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.imglist .item{
margin-right: 20px;
width: 150px;
height: 150px;
margin-top: 20px;
position: absolute;
left: 0;
top: 0;
border:solid 1px #ddd;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #fff;
}
.imglist .checkbox{
position: absolute;
top: 0;
right: 0;
z-index: 2;
width: 20px;
height: 20px;
margin: 3px;
}
.imglist .picbox{
margin: auto;
}
.imglist .picbox > a{
height: 0;
display: block;
padding-bottom: 100%;
position: relative;
}
.imglist .picbox img{
position: absolute;
/*left: 20px;
top: 20px;
right: 20px;
bottom: 20px;*/
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: auto;
max-width: 100%;
max-height: 100%;
}
.imglist .textbox{
text-align: center;
margin-top: -10px;
padding-bottom: 5px;
display: none;
}
.imglist .item:hover{
height: auto;
box-shadow: 0 1px 3px rgba(68, 68, 68,0.3);
-moz-box-shadow: 0 1px 3px rgba(68, 68, 68,0.3);
-webkit-box-shadow: 0 1px 3px rgba(68, 68, 68,0.3);
z-index: 9;
}
.imglist .item:hover .textbox{
display: block;
}
.imglist .ident{
background-color: #c33;
width: 2px;
position:absolute;
left: 0;
top: 0;
z-index: 0;
height: 100px;
margin-top: 10px;
margin-left: -10px;
display: none;
}
.imglist .morexy{
border:solid 1px #f22;
background-color: #fdd;
position: absolute;
left: 0;
top: 0;
z-index: 11;
opacity: 0.5;
margin: 10px 0 0 -10px;
display: none;
}
/*-图片查看-*/
.chak_box{
position: fixed;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.618);
width: 100%;
height: 100%;
z-index: 99;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
display: none;
}
.chak_title{
position: absolute;
top: 0;left: 0;
width: 100%;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 20px;
}
.chak_img{
position: absolute;
left: 50px;
top: 50px;
right: 50px;
bottom: 100px;
margin: auto;
border:solid 1px rgba(255,255,255,0.25);
border-radius: 10px;
overflow: hidden;
}
.chak_img > p{
position: absolute;
left: 50%;
top: 50%;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width:auto;
padding: 10px 20px;
background-color: #eee;
background-color: rgba(0,0,0,0.5);
color: #fff;
font-size: 20px;
border-radius: 5px;
display: none;
}
.chak_img > img{
position: absolute;
left: 50%;
top: 50%;
max-width: 100%;
max-height: 100%;
min-width: 10px;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
transform-origin: center;
}
.chak_btn{
position: absolute;
width: 100%;
height: 100px;
bottom: 0;
left: 0;
text-align: center;
}
.chak_btn > button{
border: solid 1px #fff;
color: #fff;
background-color: rgba(0,0,0,0.33);
border-radius: 5px;
height: 40px;
padding: 0 15px;
font-size: 16px;
margin: 20px 5px;
min-width: 50px;
cursor: pointer;
}
.chak_btn > button:hover{
background-color: rgba(0,0,0,0.66);
}
/*-/-*/
.btn{
padding: 4px 12px;
background-color: #f6f6f6;
border: solid 1px #ddd;
cursor: pointer;
}
/*-/-*/
.clear{clear: both;}
.clearb:after{
content: "";
display: block;
clear: both;
}
img{max-width: 100%;}
.overh{overflow: hidden;position: relative;}
.f_wein{font-weight: normal;}
.br_b{border-bottom: solid 1px #eee;}
.br_t{border-top: solid 1px #eee;}
.br_n{border: 0;}
.con_br{
background-color: #fff;
border-top:solid 4px #d5dbe5;
box-shadow: 0 2px 5px 2px rgba(0,0,0,0.05);
}
.con_br_b{border-color: #45a7cf;}
.con_br_g{border-color: #49a361;}
.con_br_o{border-color: #e89f3c;}
.con_br_r{border-color: #cd5542;}
.con_br_c{border-color: #62cda6;}
.con_br_n{border-top: 0;}
.w-p100{width: 100%;}
.ft_l{float: left;}
.ft_r{float: right;}
.pg_3{padding: 3px;}
.pg_5{padding: 5px;}
.pg_tb5{padding-top: 5px;padding-bottom: 5px;}
.pg_tb6{padding-top: 6px;padding-bottom: 6px;}
.pg_tb8{padding-top: 8px;padding-bottom: 8px;}
.pg_tb10{padding-top: 10px;padding-bottom: 10px;}
.pg_tb15{padding-top: 15px;padding-bottom: 15px;}
.pg_tb20{padding-top: 20px;padding-bottom: 20px;}
.pg_10{padding: 10px;}
.pg_15{padding: 15px;}
.pg_20{padding: 20px;}
.pg_lr15{padding-left: 15px;padding-right: 15px;}
.pg_lr25{padding-left: 25px;padding-right: 25px;}
.pg_l15{padding-left: 15px;}
.pg_l25{padding-left: 25px;}
.pg_r25{padding-right: 25px;}
.pg_b15{padding-bottom: 15px;}
.pg_b25{padding-bottom: 25px;}
.pg_bn{padding-bottom: 0 !important;}
.pg_n{padding: 0 !important;}
.bold{font-weight: bold;}
.mn_5{margin: 5px;}
.mn_n{margin: 0 !important;}
.mb_n{margin-bottom: 0 !important;}
.mb-25{margin-bottom: 25px;}
.dis_n{display: none;}
.dis_block{display: block;}