Browse Source

样式优化

chao 4 years ago
parent
commit
a910a2facf

+ 2 - 12
src/main/resources/static/css/product/detail.h5.css

@@ -39,6 +39,7 @@ li{list-style:none}
 .productBox .detailBox .btnBox .buy{background:#E15616;color:#FFF}
 .productBox .detailBox .concatBox{height:20vw;padding-bottom:4vw}
 .productBox .detailBox .concatBox img{height:20vw;width:auto}
+.productBox .detailBox .upgrade{width:100%;background:#F94B4B;border-radius:2px;display:inline-block;text-align:center;height:11.2vw;line-height:11.2vw;font-size:3.4vw;color:#FFF;margin:1.7vw 1.1vw}
 
 .recommendBox{margin-top:2vw;width:100%;background:#FFF}
 .recommendBox .hd{font-size:3.4vw;color:#E15621;font-weight:bold;padding:2.7vw;text-align:center}
@@ -65,18 +66,7 @@ li{list-style:none}
 .productInfo .tabCon td:nth-of-type(1){width:20%;color:#93979F}
 .productInfo .tabCon td:nth-of-type(2){width:80%;color:#4A4F58}
 .productInfo .comment{color:#93979F;padding:5vw 0}
-a.upgrade{
-    width: 40vw;
-    height: 9vw;
-    background: #F94B4B;
-    opacity: 1;
-    border-radius: 2px;
-    display: inline-block;
-    text-align: center;
-    line-height: 36px;
-    color: #FFFFFF;
-    margin: 1.7vw 1.1vw
-}
+
 .productBox .detailBox .row .l{
     display: inline-block;
     min-width: 14.5vw;

+ 31 - 180
src/main/resources/static/css/product/detail.pc.css

@@ -56,6 +56,7 @@ li{list-style:none;}
 .productBox .detailBox .detail .btn:hover,.productBox .detailBox .btnBox .cart:hover,.productBox .detailBox .btnBox .buy:hover{opacity:.8}
 .productBox .detailBox .concatBox{height:120px;padding:15px}
 .productBox .detailBox .concatBox img{height:120px;width:auto}
+.productBox .detailBox .upgrade{background:#F94B4B;border-radius:2px;display:inline-block;text-align:center;color:#FFFFFF;height:40px;line-height:40px;padding:0 30px;font-size:16px}
 
 .recommendBox{margin-bottom:16px;overflow: hidden;}
 .recommendBox .hd{font-size:16px;color:#4A4F58;font-weight:bold;padding:16px 32px}
@@ -99,183 +100,33 @@ li{list-style:none;}
 .wrap>.rgt .contact .bd div:nth-child(1){font-weight: bold;font-size: 14px;}
 .wrap>.rgt .contact .bd div{margin-bottom: 12px}
 
-.row img{width: 12px;height: 12px;display: inline-block;margin: -3px 5px}
-.row .fuwu{margin-right: 15px}
-    input[type="number"]{
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    }
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    }
-a.member-detail{
-     cursor: pointer;
-    margin-top: 5px;
-    color: #fff;
-    font-size: 14px;
-    width: 153px;
-    height: 36px;
-    background: #E15616;
-    text-align: center;
-    line-height: 36px;
-    border-radius: 2px;
-    float: left;
-}
-.Boxtext{
-    text-align: left;
-    line-height: 25px;
-    color: #333333;
-    padding-bottom: 5px;
-}
-.item-tips{
-    width: 312px;
-    height: auto;
-    padding: 12px;
-    border: 1px solid rgba(225,86,22,0.30196078431372547);
-    background: #ffffff;
-    position: absolute;
-    top: 28px;
-    left: 93px;
-}
-.tip-tr{
-    width: 100%;
-    height: 42px;
-    border-bottom: 1px solid rgba(225,86,22,0.30196078431372547);
-}
-.tips-content{
-    width: 294px;
-    height: auto;
-    border: 1px solid rgba(225,86,22,0.30196078431372547);
-    border-radius: 5px;
-    margin: auto;
-}
-.tip-td{
-    width: 146px;
-    height: 100%;
-    float: left;
-    line-height: 42px;
-    font-size: 14px;
-    color: #E15616;
-    text-align: center;
-}
-.tip-tr:last-child{
-    border-bottom: none;
-}
-.tip-td:nth-child(1){
-    border-right: 1px solid rgba(225,86,22,0.30196078431372547);
-}
-a.upgrade{
-    width: 154px;
-    height: 36px;
-    background: #F94B4B;
-    opacity: 1;
-    border-radius: 2px;
-    display: inline-block;
-    text-align: center;
-    line-height: 36px;
-    color: #FFFFFF;
-}
-.activepro{
-    width: 312px;
-    overflow: hidden;
-    cursor: pointer;
-}
-.activeimg{
-    width: 68px;
-    height: 68px;
-    float: left;
-    line-height: 68px
-}
-.activeimg img{
-    width: 100%;
-    height: 100%
-}
-.activeright{
-    float: right;
-    width: 230px
-}
-.activeright p{
-        text-align: left;
-    line-height: 20px;
-    font-size: 12px
-}
-.loginWithParam{
-    color: rgb(225, 86, 22);
-    width: 100%;
-    text-align: left
-}
-.vip-tips{
-    width: 114px;
-    height: 30px;
-    background-color: #666;
-    border-radius: 2px;
-    line-height: 30px;
-    font-size: 12px;
-    color: #FFF;
-    text-align: center;
-    position: absolute;
-    top: -29px;
-    left: 81%;
-    display: inline-block;
-     opacity: 0;
-    transition: all 1s;
-    z-index: 999
-}
-.vip-tips:before {
-    content: "";
-    width: 10px;
-    height: 10px;
-    background: #666;
-    position: absolute;
-    bottom: -3px;
-    left: 17px;
-    transform: rotate(45deg);
-}
-.icon.shop:hover .vip-tips{
-     opacity: 1;
-}
-.row .pricedeail{
-    font-weight: bold;
-}
-.original-price{
-    text-decoration:line-through;
-}
-.modalForm{
-    opacity: 0
-}
-.show{
-    opacity: 1;
-}
-.modal-back{
-    display: block;
-}
-.activityBox{
-left: 93px;
-}
-.commtext{
-    width: 700px;
-    height: 40px;
-    background-color: #ffffff;
-    border-radius: 2px;
-    border: solid 1px #b8bfca;
-    padding-left: 15px;
-    font-size: 16px
-}
-.pingjia{
-    margin-top: 25px;
-    text-align: left;
-}
-.pingjia button{
-    width: 128px;
-	height: 40px;
-	background-color: #4a4f58;
-	box-shadow: 0px 3px 6px 0px
-		rgba(147, 151, 159, 0.17);
-	border-radius: 2px;
-	color: #ffe6dc;
-}
-.comment-right{
-    float: right;
-    color: #93979f
-}
+.row img{width:12px;height:12px;display:inline-block;margin:-3px 5px}
+.row .fuwu{margin-right:15px}
+input[type="number"]{-moz-appearance:none;-webkit-appearance:none}
+input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}
+.Boxtext{text-align:left;line-height:25px;color:#333333;padding-bottom:5px}
+.item-tips{width:312px;height:auto;padding:12px;border:1px solid rgba(225,86,22,0.30196078431372547);background:#ffffff;position:absolute;top:28px;left:93px}
+.tip-tr{width:100%;height:42px;border-bottom:1px solid rgba(225,86,22,0.30196078431372547)}
+.tips-content{width:294px;height:auto;border:1px solid rgba(225,86,22,0.30196078431372547);border-radius:5px;margin:auto}
+.tip-td{width:146px;height:100%;float:left;line-height:42px;font-size:14px;color:#E15616;text-align:center}
+.tip-tr:last-child{border-bottom:none}
+.tip-td:nth-child(1){border-right:1px solid rgba(225,86,22,0.30196078431372547)}
+.activepro{width:312px;overflow:hidden;cursor:pointer}
+.activeimg{width:68px;height:68px;float:left;line-height:68px}
+.activeimg img{width:100%;height:100%}
+.activeright{float:right;width:230px}
+.activeright p{text-align:left;line-height:20px;font-size:12px}
+.loginWithParam{color:rgb(225,86,22);width:100%;text-align:left}
+.vip-tips{width:114px;height:30px;background-color:#666;border-radius:2px;line-height:30px;font-size:12px;color:#FFF;text-align:center;position:absolute;top:-29px;left:81%;display:inline-block;opacity:0;transition:all 1s;z-index:999}
+.vip-tips:before{content:"";width:10px;height:10px;background:#666;position:absolute;bottom:-3px;left:17px;transform:rotate(45deg)}
+.icon.shop:hover .vip-tips{opacity:1}
+.row .pricedeail{font-weight:bold}
+.original-price{text-decoration:line-through}
+.modalForm{opacity:0}
+.show{opacity:1}
+.modal-back{display:block}
+.activityBox{left:93px}
+.commtext{width:700px;height:40px;background-color:#ffffff;border-radius:2px;border:solid 1px #b8bfca;padding-left:15px;font-size:16px}
+.pingjia{margin-top:25px;text-align:left}
+.pingjia button{width:128px;height:40px;background-color:#4a4f58;box-shadow:0px 3px 6px 0px rgba(147,151,159,0.17);border-radius:2px;color:#ffe6dc}
+.comment-right{float:right;color:#93979f}

+ 4 - 2
src/main/resources/templates/product/detail.html

@@ -154,7 +154,7 @@
                         <em class="ser icon mIcon">正品保证</em>
                     </div>
                 </div>
-               <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
                    <div  class="btnBox" v-if="priceObj.priceFlag==2 && priceObj.userIdentity!=2">
                       <a class="upgrade" href="/user/setting/upgrade.html">升级会员查看价格</a>
                    </div>
@@ -164,7 +164,9 @@
                     </div>
                 </template>
                 <template v-else>
-                    <a href="javascript:void(0);" class="member-detail" @click="toLogin">登录查看价格</a>
+                    <div  class="btnBox">
+                        <a href="javascript:void(0);" class="upgrade" @click="toLogin">登录查看价格</a>
+                    </div>
                 </template>
             </div>
         </div>