正品联盟页面兼容性调整

src/main/resources/static/css/product/qualityauthorize.css

@@ -1,41 +1,30 @@
-/*
-* Prefixed by https://autoprefixer.github.io
-* PostCSS: v7.0.29,
-* Autoprefixer: v9.7.6
-* Browsers: last 4 version
-*/
-
-@charset "utf-8";
-body{margin:0}
+@charset "utf-8";body{margin:0}
 h1,h2,h3,p{margin:0}
 a{text-decoration:none;color:#000}
 ul{margin:0;padding:0;list-style-type:none}
 .fl-left{float:left}
 .fl-right{float:right}
 .fl-clear::after{display:block;content:'';clear:both}
-.params{border-collapse:unset;border:0;width: 100%}
-.product-params .params tr td{border: 0}
+.params{border-collapse:unset;border:0;width:100%}
+.product-params .params tr td{border:0}
 .product-params .params tr td:nth-child(2n-1){color:#999999}
-
-
-
 @media screen and (min-width:768px){body{background-color:#F8F8F8}
 .inner{width:1184px;margin:0 auto}
 .container-header{width:100%;height:auto}
-.header-top{width:100%;height:80px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:23px 0;background-image:-webkit-gradient(linear,right top, left top,from(#191919),to(#464646));background-image:-o-linear-gradient(right,#191919 0%,#464646 100%);background-image:linear-gradient(270deg,#191919 0%,#464646 100%)}
+.header-top{width:100%;height:80px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:23px 0;background-image:-o-linear-gradient(right,#191919 0%,#464646 100%);background-image:-webkit-gradient(linear,right top,left top,from(#191919),to(#464646));background-image:linear-gradient(270deg,#191919 0%,#464646 100%)}
 .header-top .logo{width:98px;height:34px;float:left}
 .header-top .logo img{width:98px;height:34px;display:block}
 .container-content{width:100%;height:auto;margin-top:16px}
 .container-content .content-top{width:100%;height:120px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:20px 16px;background-color:#ffffff;-webkit-box-shadow:0 2px 10px #ebecef;box-shadow:0 2px 10px #ebecef}
 .container-content .content-top-left{width:50%;float:left;height:100%}
 .container-main{width:1184px;height:590px;margin:0 auto;padding:25px;background:#FFF;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box}
-.container-main .img-box{float: left;position:relative;width:540px;height:540px;border:1px solid #ececec;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;}
+.container-main .img-box{float:left;position:relative;width:540px;height:540px;border:1px solid #ececec;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
 .container-main .img-box .origin-logo-box{text-align:center;width:140px;position:absolute;top:45px;left:26px;z-index:10}
 .container-main .img-box .product-brand{max-width:140px;height:auto}
 .container-main .img-box .product-img{width:100%;height:100%}
 .container-main .img-box .product-authorize{width:72px;height:72px;position:absolute;bottom:20px;right:30px;z-index:10}
-.product-desc{width:570px;line-height:30px;color:#101010;float: right;}
-.product-desc h3{font-size: 20px}
+.product-desc{width:570px;line-height:30px;color:#101010;float:right}
+.product-desc h3{font-size:20px}
 .product-desc .pink-box{margin:30px 0;padding:10px 16px;background:rgb(251,241,242);color:#bc1724}
 .product-desc .pink-box a{color:#bc1724}
 .product-desc .default-box{padding:10px 0;border-top:1px solid #eee;border-bottom:1px solid #eee}
@@ -48,10 +37,10 @@ ul{margin:0;padding:0;list-style-type:none}
 .product-params .title::after{content:'';display:block;position:absolute;bottom:-2px;left:0;width:72px;height:2px;background:#101010}
 .product-params .title span{font-size:18px;font-weight:bold}
 .product-params .p-content{color:#101010}
-.product-params .pc-params{margin-top: 30px}
-.product-params .pc-params li{float: left;width: 50%;margin: 15px 0}
-.product-params .pc-params li>div{float: left}
-.product-params .pc-params li .p-title{color: #999999}
+.product-params .pc-params{margin-top:30px}
+.product-params .pc-params li{float:left;width:50%;margin:15px 0}
+.product-params .pc-params li>div{float:left}
+.product-params .pc-params li .p-title{color:#999999}
 .footer{margin-top:60px;padding:20px 0;background-color:#eee}
 .footer p{text-align:center;font-size:14px;color:#999}
 .footer p a{color:#999}
@@ -60,26 +49,20 @@ ul{margin:0;padding:0;list-style-type:none}
 .footer p a:hover{color:#F52E3E}
 .footer-mobile{display:none}
 .product-params .params.mobile{display:none}
-
 .statementModel{position:fixed;top:0;left:0;z-index:999;width:100%;height:100vh;background:rgba(0,0,0,.4)}
-.statementModel .model{position:fixed;left:50%;top:50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform: translate(-50%,-50%);width:620px;height:380px;border-radius:4px;background:#fff;overflow:hidden}
+.statementModel .model{position:fixed;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);width:620px;height:380px;border-radius:4px;background:#fff;overflow:hidden}
 .statementModel .title{padding:15px 20px;background:#f1f1f1;font-size:18px}
 .statementModel .close{position:absolute;right:20px;top:10px;display:block;width:30px;height:30px;background:url(/img/quality/icon-close.png) no-repeat center;cursor:pointer}
 .statementModel .close:hover{background-image:url(/img/quality/icon-close-hover.png)}
 .statementModel .content{padding:15px;height:296px;overflow-y:scroll}
-.float-zplm{position: fixed;z-index: 99; bottom: 16%;right: 2%; width:90px;}
-.float-zplm img{width: 100%}
-
-/*授权证书*/
-.close{position: absolute;display: block;width: 32px;height: 32px;background: url(/img/quality/mb-close.png) no-repeat center;cursor:pointer;z-index: 999;background-size: 32px;right: 0;top: -50px;}
-.container-main .sq-book{position:absolute;width: 149px;height: 112px;bottom:20px;left:30px;z-index:10;}
-.sq-book-modal{width: 100%;height: 100vh;position: fixed;z-index: 997;top: 0;left: 0;background: rgba(0,0,0,.7);display: flex;justify-content: center;align-items: center}
-.sq-book-img{width: 622px;height: 467px;box-shadow: 0 10px 28px rgba(255,199,30,.26);position: fixed;left: 0;right: 0;margin: 0 auto;top: 20%;z-index: 998}
-.sq-book-img img{width:100%;height: auto}
-}
-
-@media screen and (max-width:768px){
-body{background: #fff}
+.float-zplm{position:fixed;z-index:99;bottom:16%;right:2%;width:90px}
+.float-zplm img{width:100%}
+.close{position:absolute;display:block;width:32px;height:32px;background:url(/img/quality/mb-close.png) no-repeat center;cursor:pointer;z-index:999;background-size:32px;right:0;top:-50px}
+.container-main .sq-book{position:absolute;width:149px;height:112px;bottom:20px;left:30px;z-index:10}
+.sq-book-modal{width:100%;height:100vh;position:fixed;z-index:997;top:0;left:0;background:rgba(0,0,0,.7);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.sq-book-img{width:622px;height:467px;-webkit-box-shadow:0 10px 28px rgba(255,199,30,.26);box-shadow:0 10px 28px rgba(255,199,30,.26);position:fixed;left:0;right:0;margin:0 auto;top:20%;z-index:998}
+.sq-book-img img{width:100%;height:auto}
+}@media screen and (max-width:768px){body{background:#fff}
 .container{font-size:3.6vw;color:#101010}
 .container-header{display:none}
 .container-content{width:100%}
@@ -90,102 +73,45 @@ body{background: #fff}
 .container-main .img-box .origin-logo-box img{max-width:30vw}
 .container-main .img-box .product-authorize{width:13.8vw;height:13.8vw;position:absolute;bottom:3.2vw;right:4vw}
 .product-desc a{color:#bc1724}
-.product-desc h3{background:-webkit-gradient(linear,left top, right top,from(#101010),to(#404040));background:-o-linear-gradient(left,#101010,#404040);background:linear-gradient(to right,#101010,#404040);color:#fefefe;padding:4vw;font-size:4.4vw}
+.product-desc h3{background:-o-linear-gradient(left,#101010,#404040);background:-webkit-gradient(linear,left top,right top,from(#101010),to(#404040));background:linear-gradient(to right,#101010,#404040);color:#fefefe;padding:4vw;font-size:4.4vw}
 .product-desc .pink-box{padding:3.2vw 4vw;background:rgb(251,241,242);color:#bc1724;line-height:8vw}
 .product-desc .default-box{width:92.3vw;margin:0 auto;padding:3.2vw 0;border-bottom:0.4vw solid #eee;line-height:8vw}
-.product-desc .statement a{display: block;padding-right: 20px;width:23.6vw; background: url(/img/quality/icon-statement.png) no-repeat center;background-size:3.8vw;background-position-x:16vw;  }
+.product-desc .statement a{display:block;padding-right:20px;width:23.6vw;background:url(/img/quality/icon-statement.png) no-repeat center;background-size:3.8vw;background-position-x:16vw}
 .product-desc p{padding:3.2vw 4vw;line-height:6vw}
 .product-desc .sn-number{padding:3.2vw 0;background:#f5f5f5}
 .product-desc .sn-number .item-row{background:rgb(251,241,242);padding:3.2vw 4vw}
 .product-params{padding:3.2vw 4vw}
 .product-params .title{padding:4vw 0;border-bottom:0.4vw solid #eee;font-size:4vw;font-weight:bold}
-.product-params .params{margin-top:3vw;border-spacing: 0 4vw}
-.product-params .params tr{line-height:6.6vw;}
+.product-params .params{margin-top:3vw;border-spacing:0 4vw}
+.product-params .params tr{line-height:6.6vw}
 .product-params .footer{display:none}
 .footer{display:none}
 .footer-mobile{padding:8vw 0 4vw;line-height:7vw;text-align:center;background:#f5f5f5}
 .footer-mobile p{color:#b2b2b2;font-size:2.4vw}
 .footer-mobile a{color:#f52e3e;font-size:3vw;font-weight:bold}
 .product-params .pc-params.pc{display:none}
-
 .statementModel{position:fixed;top:0;left:0;z-index:999;width:100%;height:100vh;background:rgba(0,0,0,.4)}
-.statementModel .model{position:fixed;left:50%;top:50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform: translate(-50%,-50%);width:86vw;height:128vw;border-radius:4px;background:#fff}
+.statementModel .model{position:fixed;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);width:86vw;height:128vw;border-radius:4px;background:#fff}
 .statementModel .title{padding:4vw 5vw;background:#f1f1f1;font-size:4.6vw;text-align:center}
 .statementModel .close{position:absolute;right:0;top:-10vw;display:block;width:8.2vw;height:8.2vw;background:url(/img/quality/mb-close.png) no-repeat center;background-size:8.2vw;cursor:pointer}
 .statementModel .content{padding:4vw;height:100vw;overflow-y:scroll}
-
-.float-zplm{position: fixed;z-index: 99; bottom: 30vw;right: 3.4vw; width:15.7vw;}
-.float-zplm img{width: 100%}
-/*授权证书*/
-.close{position: absolute;display: block;width: 7.2vw;height: 7.2vw;background: url(/img/quality/mb-close.png) no-repeat center;cursor:pointer;z-index: 999;background-size: 7.2vw;right: 0;top:-11.5vw;}
-.container-main .sq-book{position:absolute;width: 27.2vw;height: 20.6vw;bottom:4.1vw;left:4vw;z-index:10;}
-.sq-book-modal{width: 100%;height: 100vh;position: fixed;z-index: 997;top: 0;left: 0;background: rgba(0,0,0,.7)}
-.sq-book-img{z-index: 998;display: block;width: 92vw;height: 69vw;position: fixed;top: 41.2vw;left: 0;right:0;margin:0 auto;box-shadow: 0 10px 28px rgba(255,199,30,.26);
-}
-.sq-book-img img{width:100%;}
-}
-
-.myZoomIn{
-    animation: zoomIn 1s ease;
-}
-.myZoomOut{
-    animation: zoomOut 1s ease;
-}
-
-@-webkit-keyframes zoomIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(.3, .3, .3);
-    transform: scale3d(.3, .3, .3)
-  }
-
-  50% {
-    opacity: 1
-  }
-}
-
-@keyframes zoomIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(.3, .3, .3);
-    transform: scale3d(.3, .3, .3)
-  }
-
-  50% {
-    opacity: 1
-  }
-}
-
-
-
-@-webkit-keyframes zoomOut {
-  0% {
-    opacity: 1
-  }
-
-  50% {
-    opacity: 0;
-    -webkit-transform: scale3d(.3, .3, .3);
-    transform: scale3d(.3, .3, .3)
-  }
-
-  to {
-    opacity: 0
-  }
-}
-
-@keyframes zoomOut {
-  0% {
-    opacity: 1
-  }
-
-  50% {
-    opacity: 0;
-    -webkit-transform: scale3d(.3, .3, .3);
-    transform: scale3d(.3, .3, .3)
-  }
-
-  to {
-    opacity: 0
-  }
+.float-zplm{position:fixed;z-index:99;bottom:30vw;right:3.4vw;width:15.7vw}
+.float-zplm img{width:100%}
+.close{position:absolute;display:block;width:7.2vw;height:7.2vw;background:url(/img/quality/mb-close.png) no-repeat center;cursor:pointer;z-index:999;background-size:7.2vw;right:0;top:-11.5vw}
+.container-main .sq-book{position:absolute;width:27.2vw;height:20.6vw;bottom:4.1vw;left:4vw;z-index:10}
+.sq-book-modal{width:100%;height:100vh;position:fixed;z-index:997;top:0;left:0;background:rgba(0,0,0,.7)}
+.sq-book-img{z-index:998;display:block;width:92vw;height:69vw;position:fixed;top:41.2vw;left:0;right:0;margin:0 auto;-webkit-box-shadow:0 10px 28px rgba(255,199,30,.26);box-shadow:0 10px 28px rgba(255,199,30,.26)}
+.sq-book-img img{width:100%}
+}.myZoomIn{-webkit-animation:zoomIn 1s ease;animation:zoomIn 1s ease}
+.myZoomOut{-webkit-animation:zoomOut 1s ease;animation:zoomOut 1s ease}
+@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
+50%{opacity:1}
+}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
+50%{opacity:1}
+}@-webkit-keyframes zoomOut{0%{opacity:1}
+50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
+to{opacity:0}
+}@keyframes zoomOut{0%{opacity:1}
+50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
+to{opacity:0}
 }