正品联盟页面兼容性调整

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

@@ -1,3 +1,10 @@
+/*
+* Prefixed by https://autoprefixer.github.io
+* PostCSS: v7.0.29,
+* Autoprefixer: v9.7.6
+* Browsers: last 4 version
+*/
+
 @charset "utf-8";
 body{margin:0}
 h1,h2,h3,p{margin:0}
@@ -15,18 +22,18 @@ ul{margin:0;padding:0;list-style-type:none}
 @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;box-sizing:border-box;padding:23px 0;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:-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 .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;box-sizing:border-box;padding:20px 16px;background-color:#ffffff;box-shadow:0 2px 10px #ebecef}
+.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;box-sizing:border-box}
-.container-main .img-box{float: left;position:relative;width:540px;height:540px;border:1px solid #ececec;box-sizing:border-box;overflow:hidden;}
+.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 .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:116px;height:116px;position:absolute;bottom:20px;right:30px;z-index:10}
+.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 .pink-box{margin:30px 0;padding:10px 16px;background:rgb(251,241,242);color:#bc1724}
 .product-desc .pink-box a{color:#bc1724}
@@ -35,8 +42,8 @@ ul{margin:0;padding:0;list-style-type:none}
 .product-desc .statement a{color:#bc1724}
 .product-desc .statement a::after{content:'?';display:inline-block;width:14px;height:14px;text-align:center;line-height:16px;font-size:14px;border:1px solid #bc1724;border-radius:50%;margin-left:5px}
 .product-desc p{margin:30px 0}
-.product-params{width:1184px;margin:16px auto 0;padding:25px;background:#FFFFFF;box-sizing:border-box}
-.product-params .title{position:relative;padding-bottom:10px;border-bottom:2px solid #eee;box-sizing:border-box}
+.product-params{width:1184px;margin:16px auto 0;padding:25px;background:#FFFFFF;-webkit-box-sizing:border-box;box-sizing:border-box}
+.product-params .title{position:relative;padding-bottom:10px;border-bottom:2px solid #eee;-webkit-box-sizing:border-box;box-sizing:border-box}
 .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 .pc-params li{float: left;width: 50%;margin: 30px 0}
@@ -52,7 +59,7 @@ ul{margin:0;padding:0;list-style-type: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%;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)}
@@ -62,27 +69,60 @@ ul{margin:0;padding:0;list-style-type:none}
 
 /*授权证书*/
 .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: 9999;top: 0;left: 0;background: rgba(0,0,0,.3)}
-.sq-book-modal img{display: block;width: 622px;height: 467px;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);
-animation: showBig 1s ease;
+.sq-book-modal{width: 100%;height: 100vh;position: fixed;z-index: 9999;top: 0;left: 0;background: rgba(0,0,0,.7)}
+.sq-book-modal img{display: block;width: 622px;height: 467px;position: fixed;top: 50%;left: 50%;
+-webkit-transform: translate(-50%,-50%);
+transform: translate(-50%,-50%);
+-ms-transform: translate(-50%,-50%);
+-webkit-animation: showBig 1s ease;
+        animation: showBig 1s ease;
 }
-@keyframes showBig {
+@-webkit-keyframes showBig {
     from{
         width: 0;
         height: 0;
         position: fixed;
         top: 50%;
         left: 50%;
-        transform: translate(-50%,-50%)
+        -webkit-transform: translate(-50%,-50%);
+        transform: translate(-50%,-50%);
+        -moz-transform:translate(-50%,-50%);
+        -ms-transform: translate(-50%,-50%);
     }
     to{
+        width: 622px;
+        height: 467px;
         position: fixed;
+        top: 50%;
+        left: 50%;
+        -webkit-transform: translate(-50%,-50%);
+        transform: translate(-50%,-50%);
+        -moz-transform:translate(-50%,-50%);
+        -ms-transform: translate(-50%,-50%);
+    }
+}
+@keyframes showBig {
+    from{
+        width: 0;
+        height: 0;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        -webkit-transform: translate(-50%,-50%);
+        transform: translate(-50%,-50%);
+        -moz-transform:translate(-50%,-50%);
+        -ms-transform: translate(-50%,-50%);
+    }
+    to{
         width: 622px;
         height: 467px;
         position: fixed;
         top: 50%;
         left: 50%;
-        transform: translate(-50%,-50%)
+        -webkit-transform: translate(-50%,-50%);
+        transform: translate(-50%,-50%);
+        -moz-transform:translate(-50%,-50%);
+        -ms-transform: translate(-50%,-50%);
     }
 }
 }
@@ -97,9 +137,9 @@ body{background: #fff}
 .container-main .product-img{width:100vw}
 .container-main .img-box .origin-logo-box{position:absolute;top:4vw;left:4vw;max-width:30vw;text-align:center;z-index:9}
 .container-main .img-box .origin-logo-box img{max-width:30vw}
-.container-main .img-box .product-authorize{width:23vw;height:23vw;position:absolute;bottom:3.2vw;right:4vw}
+.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:linear-gradient(to right,#101010,#404040);color:#fefefe;padding:4vw;font-size:4.4vw}
+.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 .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::after{content:'?';display:inline-block;width:3vw;height:3vw;text-align:center;line-height:3vw;font-size:3vw;border:1px solid #bc1724;border-radius:50%;margin-left:1vw}
@@ -118,7 +158,7 @@ body{background: #fff}
 .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%;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}
@@ -127,9 +167,39 @@ body{background: #fff}
 .float-zplm img{width: 100%}
 /*授权证书*/
 .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: 9999;top: 0;left: 0;background: rgba(0,0,0,.3)}
-.sq-book-modal img{display: block;width: 92vw;height: 69vw;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);
-animation: showBig 1s ease;}
+.sq-book-modal{width: 100%;height: 100vh;position: fixed;z-index: 9999;top: 0;left: 0;background: rgba(0,0,0,.7)}
+.sq-book-modal img{display: block;width: 92vw;height: 69vw;position: fixed;top: 50%;left: 50%;
+-webkit-transform: translate(-50%,-50%);
+        transform: translate(-50%,-50%);
+        -moz-transform:translate(-50%,-50%);
+        -ms-transform: translate(-50%,-50%);
+-webkit-animation: showBig 1s ease;
+        animation: showBig 1s ease;}
+
+@-webkit-keyframes showBig {
+    from{
+        width: 0;
+        height: 0;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        -webkit-transform: translate(-50%,-50%);
+        transform: translate(-50%,-50%);
+        -moz-transform:translate(-50%,-50%);
+        -ms-transform: translate(-50%,-50%);
+    }
+    to{
+        width: 92vw;
+        height: 69vw;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        -webkit-transform: translate(-50%,-50%);
+        transform: translate(-50%,-50%);
+        -moz-transform:translate(-50%,-50%);
+        -ms-transform: translate(-50%,-50%);
+    }
+}
 
 @keyframes showBig {
     from{
@@ -138,10 +208,21 @@ animation: showBig 1s ease;}
         position: fixed;
         top: 50%;
         left: 50%;
-        transform: translate(-50%,-50%)
+        -webkit-transform: translate(-50%,-50%);
+        transform: translate(-50%,-50%);
+        -moz-transform:translate(-50%,-50%);
+        -ms-transform: translate(-50%,-50%);
     }
     to{
-        width: 92vw;height: 69vw;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%)
+        width: 92vw;
+        height: 69vw;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        -webkit-transform: translate(-50%,-50%);
+        transform: translate(-50%,-50%);
+        -moz-transform:translate(-50%,-50%);
+        -ms-transform: translate(-50%,-50%);
     }
 }