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; } }