html,body {
height:100%;
}
//头部样式
.header {
background-color: transparent;
color: rgba(255,255,255,.75);
.menu .item {
&:hover {
color: #fff;
}
}
.menu .active {
color: #fff;
}
}
.footer {
position: fixed;
bottom: 0;
z-index: 100;
height: 0;
color: #828282;
background-color: #fff;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
@media (min-width: 1720px) {
width: 100%;
max-width: none;
}
@media (max-width: 760px) {
position: static;
height: auto;
}
@media (max-width: 1000px) {
position: static;
height: auto;
}
.footer_box {
margin-top: 20px;
@media (max-width: 760px) {
margin-top: 0;
}
@media (max-width: 1000px) {
border: none;
}
}
}
.mouseStay {
position: fixed;
bottom: 0;
z-index: 102;
width: 100%;
height: 30px;
&:hover + .footer {
height: 75px;
}
}
.product-wrap {
&:after {
content: '';
display: block;
clear: both;
}
.list{
position: relative;
&:nth-child(1) {
background: url('../static/images/web_img/img10_960-1020.jpg') no-repeat center center;
background-size: cover;
}
&:nth-child(2) {
background: url('../static/images/web_img/img11_960-816.jpg') no-repeat center center;
background-size: cover;
}
&:nth-child(3) {
background: url('../static/images/web_img/img12_960-1210.png') no-repeat center center;
background-size: cover;
}
@media (min-width:1000px) {
&:hover .magnifier{
-webkit-transform: scale(1) !important;
-moz-transform: scale(1) !important;
-ms-transform: scale(1) !important;
-o-transform: scale(1) !important;
transform: scale(1) !important;
}
&:hover .look_view{
top: -400px !important;
}
&:hover .look_view_mask{
height: 0 !important;
}
}
@media (max-width:1000px) {
height: 900px;
&:nth-child(1) {
margin-bottom: 10px;
}
}
}
.bigImg {
width: 100%;
height: 100%;
}
}
.product-box {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 9;
width: 100%;
height:100%;
.product-title {
height: 22%;
font-size: 36px;
color: #fff;
text-align: center;
letter-spacing: 12px;
line-height:36px;
.desc {
padding-top: 160px;
}
}
.product-cont {
float: left;
width: 100%;
height: 78%;
// height: 70%;
// margin-top: 24px;
background-color: #fff;
overflow: hidden;
.scroll {
float: left;
width: 100%;
}
}
}
.look_view_box {
// display: none;
}
.look_view {
position: absolute;
top: 35%;
width: 100%;
text-align: center;
color: #fff;
z-index: 1;
-webkit-transition: all .6s linear;
-moz-transition: all .6s linear;
-ms-transition: all .6s linear;
-o-transition: all .6s linear;
transition: all .6s linear;
.title {
font-size: 24px;
letter-spacing: 6px;
}
}
.look_view_mask {
position: absolute;
// bottom: 0;
width: 100%;
height: 100%;
opacity: .5;
background-color: #000;
-webkit-transition: all .6s linear;
-moz-transition: all .6s linear;
-ms-transition: all .6s linear;
-o-transition: all .6s linear;
transition: all .6s linear;
}
.magnifier {
// display: none;
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
width: 150px;
height: 150px;
margin-top: -75px;
margin-left: -75px;
text-align: center;
color: #fff;
cursor: pointer;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all .6s linear;
-moz-transition: all .6s linear;
-ms-transition: all .6s linear;
-o-transition: all .6s linear;
transition: all .6s linear;
.fontIcon {
position: relative;
z-index: 1;
font-size:50px;
color: #fff;
cursor: pointer;
line-height: 150px;
}
.magnifier-mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: .5;
background-color: #672d20;
border-radius: 50%;
}
img {
z-index: 10;
width: 50px;
height: 50px;
margin-top: 50px;
}
}
.top {
// margin-top: 120px;
text-align: center;
font-size: 36px;
color: #fff;
padding: 0 20px;
@media (max-width: 760px) {
font-size: 18px;
}
.number {
position: relative;
width: 100px;
height: 40px;
margin: 0 auto;
line-height: 36px;
z-index: 1;
@media (max-width: 760px) {
height: 20px;
}
&:before {
position: absolute;
top: -10px;
left: 30px;
z-index: -1;
content: "";
display: block;
width: 15px;
height: 40px;
background-color: #672d20;
-webkit-transform: skew(-35deg,0);
-moz-transform: skew(-35deg,0);
-ms-transform: skew(-35deg,0);
-o-transform: skew(-35deg,0);
transform: skew(-35deg,0);
@media (max-width: 760px) {
top: 4px;
left: 38px;
width: 9px;
height: 20px;
}
}
}
.title {
margin-top: 24px;
height: 36px;
line-height: 36px;
letter-spacing: 12px;
@media (max-width: 760px) {
font-size: 18px;
letter-spacing: 6px;
}
}
.desc {
margin-top: 4px 24px 0;
font-size: 18px;
line-height: 30px;
letter-spacing: 6px;
// white-space: nowrap;
@media (max-width: 750px) {
letter-spacing: 0;
font-size: 14px;
}
}
}
.goods-country {
display: inline-block;
padding: 0 12px;
height: 26px;
background-color: #672d20;
color: #fff;
border-radius: 15px;
text-align: center;
font-size: 16px;
line-height: 26px;
margin-top: 20px;
}
.goods-Attributes {
margin-top:4px;
&:after {
content: '';
display: block;
clear: both;
}
.goods-Attributes-line {
margin-top: 15px;
}
.cont {
float: left;
width: 50%;
@media (max-width: 1200px) {
width: 100%;
}
}
.point {
display: inline-block;
width:8px;
height:8px;
margin-right:18px;
background-color: #672d20;
border-radius: 4px;
}
.desc {
display: inline-block;
}
}
.goods-mark {
margin-top: 5%;
margin-bottom: 8%;
&:after {
content: '';
display: block;
clear: both;
}
@media (max-width: 1200px) {
margin-top: 45px;
}
.mark-item {
float: left;
width: 33%;
text-align: center;
}
.goods-mark-line {
margin-top: 10px;
padding-top: 6px;
background-color: #fafafa;
&:after {
content: '';
display: block;
clear: both;
}
}
.title {
font-size: 16px;
color: #222;
img {
max-width: 22px;
max-height:22px;
margin-right: 6px;
vertical-align: middle;
}
}
.desc {
margin-top: 14px;
font-size: 12px;
}
.shuxian {
float: left;
width: 1px;
height:48px;
margin: 12px 0;
background: #ddd;
}
}
//弹窗
.dialog-title {
margin-top: 24px;
font-size: 30px;
color: #222;
text-align: left;
line-height: 50px;
}
.dialogBox .bigImg {
height: 100%;
}
// .dialogBox .bigImg img {max-width: 100%;}
.dialog-cont {
// max-width: 652px;
width: 100%;
// margin-top: 40px;
overflow: hidden;
font-size: 16px;
color: #828282;
text-align: left;
@media (max-height: 760px) {
margin-top: 0;
}
}
//产品详情页
.goodsDetail {
&.layout {
height: auto;
margin-top: 55px;
}
.bigImg {
padding: 75px;
text-align: center;
background-color: #EED6C7;
@media (min-width: 760px) {
padding-top: 195px;
}
>img {
max-width: 100%;
}
}
.dialog-cont {
width: 100%;
margin-top: 20px;
padding: 0 12px;
}
.dialog-title {
margin-top: 8px;
}
.goods-mark {
margin-top: 20px;
margin-bottom: 40px;
}
.goods-Attributes{
padding-bottom: 20px;
border-bottom: 1px solid #eaeaea;
.cont {
width:100%;
}
}
}
.goodsDetail-footer.footer {
position: static;
color: #828282;
.footer_box {
border: none;
}
}
@media (min-width: 1358px) and (max-width: 1400px) {
.list .desc{
font-size: 16px;
}
.product-box .product-title .desc {
padding-top: 100px;
font-size: 24px;
}
}
@media (min-width: 1000px) and (max-width: 1358px) {
.product-wrap .list {
width: 33.333333333%;
}
.list .desc{
font-size: 15px;
}
.pro-detail {
width:71.88%;
}
.product-box .product-title .desc {
padding-top: 100px;
font-size: 24px;
}
.view_btn {
font-size: 16px;
}
}
@media (min-width: 1000px) {
.layout {
height: 100%;
}
.product-wrap {
height: 100%;
.list {
height: 100%;
}
.bigImg{
width: 100%;
height: 100%;
}
}
}
@media (max-width: 1000px) {
.layout {
height: auto;
}
.product-wrap {
height: 100%;
margin-bottom: 10px;
.bigImg{
height: 100%;
}
}
}
@media (max-width: 760px) {
.layout {height: auto;}
.look_view {
top: 30%;
}
.product-wrap .list {
height: 640px;
}
}