@media (min-width: 319px) { html { font-size: 13.65px } } @media (min-width: 320px) { html { font-size: 13.65px } } @media (min-width: 360px) { html { font-size: 15.36px } } @media (min-width: 375px) { html { font-size: 16px } } @media (min-width: 384px) { html { font-size: 16.38px } } @media (min-width: 393px) { html { font-size: 16.77px } } @media (min-width: 412px) { html { font-size: 17.58px } } @media (min-width: 414px) { html { font-size: 17.66px } } @media (min-width: 415px) { html { font-size: 17.70px } } @media (min-width: 432px) { html { font-size: 18.432px } } @media (min-width:600px) { body { margin: 0 auto; width: 414px; font-size: 17.70px } } /*限定页面最宽为414像素*/ /*初始化*/ html { color: #000; background: #FFF; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, strong { padding: 0; margin: 0; } body { width: 100% } table { border-collapse: collapse; border-spacing: 0; } img { border: 0 } a { text-decoration: none; color: #333; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } var, em, strong { font-style: normal; } em, strong, th, var { font-style: inherit; font-weight: inherit; } li { list-style: none; } i { font-style: normal } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } input, button, textarea, select { *font-size: 100%; } input, select { -webkit-appearance: none; appearance: none } input, textarea { -webkit-tap-highlight-color: rgba(255, 0, 0, 0); } .clearfix:after { content: '\200B'; clear: both; display: block; height: 0px; } .clearfix { *zoom: 1; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /*loading动画star*/ #loading { display: none } .loader { font-size: 10px; text-indent: -9999em; border-top: 3px solid rgba(0, 0, 0, 0.1); border-right: 3px solid rgba(0, 0, 0, 0.1); border-bottom: 3px solid rgba(0, 0, 0, 0.1); border-left: 3px solid #999; -webkit-animation: load 0.8s infinite linear; -moz-animation: load 0.8s infinite linear; animation: load 0.8s infinite linear } .loader, .loader:after { border-radius: 50%; width: 48px; height: 48px; position: absolute; top: 50%; left: 50%; margin: -27px 0 0 -27px } @-webkit-keyframes load { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @keyframes load { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } /*loading动画end*/ /*焦点图stat*/ .swiper-slide { text-align: center; font-size: 0px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center } .swiper-slide img { width: 100%; display: block } .swiper-pagination .swiper-pagination-bullet-active { background: #ff6600 } .swiper-container { width: 100% } /*焦点图end*/ /*赠送他人提示浮层star*/ .tips { width: 100%; height: 100%; background-image: url(../../images/giftuser/txt_tips.png), url(../../images/giftuser/earth.png); background-repeat: no-repeat; background-position: center -60px, left bottom; background-size: 100% auto, 50% auto; cursor: pointer; } .tips2 { width: 100%; height: 100%; background-image: url(../../images/giftuser/txt_tips_2.png), url(../../images/giftuser/earth.png); background-repeat: no-repeat; background-position: center -60px, left bottom; background-size: 100% auto, 50% auto; cursor: pointer; } .tips3 { width: 100%; height: 100%; background-image: url(../../images/giftuser/txt_tips_3.png), url(../../images/giftuser/earth.png); background-repeat: no-repeat; background-position: center -60px, left bottom; background-size: 100% auto, 50% auto; cursor: pointer; } /*赠送他人提示浮层end*/ /*二维码star*/ .qr_code_none { display: none } .layout_qr_code { width: 100%; height: 100%; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 2000; background: rgba(255, 255, 255, 0.95); -webkit-animation: bg_w 0.5s ease-out both; -moz-animation: bg_w 0.5s ease-out both; animation: bg_w 0.5s ease-out both; cursor: pointer; } @-webkit-keyframes bg_w { 0% { background: rgba(255, 255, 255, 0) } 100% { background: rgba(255, 255, 255, 0.95) } } @keyframes bg_w { 0% { background: rgba(255, 255, 255, 0) } 100% { background: rgba(255, 255, 255, 0.95) } } .layout_qr_code div { display: inline-block; width: 52%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); font-size: 0; -webkit-animation: m_b_2 0.5s 0.3s ease-out both; -moz-animation: m_b_2 0.5s 0.3s ease-out both; animation: m_b_2 0.5s 0.3s ease-out both; cursor: pointer; } .layout_qr_code div span { display: block; padding: 5px; background: #FFF; border: 1px solid #dbdbdb; cursor: pointer; } @-webkit-keyframes m_b_2 { 0% { transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); opacity: 0; -webkit-opacity: 0 } 100% { transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); opacity: 1; -webkit-opacity: 1 } } @keyframes m_b_2 { 0% { transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); opacity: 0; -webkit-opacity: 0 } 100% { transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); opacity: 1; -webkit-opacity: 1 } } .layout_qr_code div img { width: 100% } .layout_qr_code div p { margin-top: 5px; line-height: 1.5rem; font-size: 0.75rem; text-align: center } .layout_qr_code div p strong { display: block; font-size: 0.875rem } /*二维码end*/ /*遮罩star*/ .win_none { display: none } .win { position: fixed; z-index: 109; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); -webkit-animation: bg 0.3s ease-out both; -moz-animation: bg 0.3s ease-out both; animation: bg 0.3s ease-out both; cursor: pointer; } .win .transparent_bg { position: fixed; z-index: 11; left: 0; right: 0; top: 0; bottom: 0 } @-webkit-keyframes bg { 0% { background: rgba(0, 0, 0, 0) } 100% { background: rgba(0, 0, 0, 0.8) } } @keyframes bg { 0% { background: rgba(0, 0, 0, 0) } 100% { background: rgba(0, 0, 0, 0.8) } } .win .layout_win { background: #FFF; position: absolute; left: 0; bottom: 0; right: 0; z-index: 12; -webkit-animation: m_b 0.3s ease-out both; animation: m_b 0.3s ease-out both; cursor: pointer } @-webkit-keyframes m_b { 0% { transform: translateY(31rem); -webkit-transform: translateY(31rem) } 100% { transform: translateY(0rem); -webkit-transform: translateY(0rem) } } @keyframes m_b { 0% { transform: translateY(31rem); -webkit-transform: translateY(31rem) } 100% { transform: translateY(0rem); -webkit-transform: translateY(0rem) } } /*遮罩end*/ /*分页star*/ .fenye { background: #FFF; font-size: 0.875rem; border-top: 1px solid #EEE; border-bottom: 1px solid #EEE } .fenye:after { content: ""; clear: both; display: block; height: 0; overflow: hidden } .fenye a.prev, .fenye a.next { display: block; width: 33%; line-height: 40px; height: 40px; float: left; text-align: center; color: #343434; position: relative } .fenye a.next { float: right } .fenye a.prev:after { content: ""; clear: both; display: block; height: 100%; width: 1px; background: #EEE; position: absolute; right: 0; top: 0; overflow: hidden } .fenye a.next:before { content: ""; clear: both; display: block; height: 100%; width: 1px; background: #EEE; position: absolute; left: 0; top: 0; overflow: hidden } .fenye a.disabled { color: #CCC } .fenye div { float: left; width: 34%; line-height: 40px; height: 40px; text-align: center; color: #343434; position: relative } .fenye div strong { color: #F60 } .fenye div select { width: 100%; height: 100%; margin: 0; padding: 0; border: none; position: absolute; left: 0; top: 0; opacity: 0; -webkit-opacity: 0 } /*分页end*/ /*有未分发商品提示浮层star*/ a.f_tips { position: fixed; left: 0; bottom: 0; right: 0; z-index: 100; font-size: 0; display: block; line-height: 35px; height: 35px; background-color: rgba(0, 0, 0, 0.65); text-align: center; color: #FFF } a.f_tips ul { display: inline-block; height: 68px; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); white-space: nowrap; font-size: 0 } a.f_tips li:first-child { display: inline-block; vertical-align: middle; padding-top: 35px; line-height: 33px; height: 33px; font-size: 0.875rem; color: #FFF } a.f_tips li:last-child { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 0 10px; font-size: 0.875rem; line-height: 23px; width: 78px; height: 68px; overflow: hidden; border-radius: 3px; -webkit-border-radius: 3px; background: url(../../images/giftuser/gift_box.jpg) no-repeat left center; background-size: 100%; color: #000 } a.f_tips li:last-child i { display: inline-block; border-radius: 10px; -webkit-border-radius: 10px; background: #FFF; margin-top: 40px; font-size: 0.875rem; line-height: 18px; height: 18px; padding: 0 8px } /*有未分发商品提示浮层end*/ /*TAB切换star*/ .tab { height: 2.5rem; position: relative; background: #FFF } .tab li { height: 2.5rem; position: relative; width: 33%; float: left } .tab li:nth-child(2) { width: 34% } .tab:before { content: ""; display: block; position: absolute; left: 66%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); height: 40%; width: 2px; background: #d2d2d2 } .tab:after { content: ""; display: block; position: absolute; left: 33%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); height: 40%; width: 2px; background: #d2d2d2 } .tab li>a { display: block; line-height: 2.5rem; height: 2.5rem; text-align: center; font-size: 0.78125rem; width: 100%; position: relative } .tab li>a>span { color: #323232; display: inline-block; padding-right: 1rem; background: url(../../images/giftuser/submenu_icon2.png) no-repeat right center; background-size: 0.5625rem auto; -webkit-background-size: 0.5625rem auto; } .tab li>a.act span { color: #F60 } .tab li>a.act:after { content: ""; display: block; width: 1.28125rem; height: 2px; border-radius: 3px; -webkit-border-radius: 3px; background: #f03d37; position: absolute; left: 50%; bottom: 0.21875rem; transform: translateX(-50%); -webkit-transform: translateX(-50%) } .tab li>a.on+dl { display: block } .tab dl { display: none; position: absolute; z-index: 220; top: 53px; left: 50%; min-width: 100px; transform: translateX(-50%); -webkit-transform: translateX(-50%); border-radius: 5px; background: #fff; -webkit-background-size: 100%; background-size: 100%; border: 1px solid #bfbfbf; box-shadow: 2px 2px 5px #DFDFDF; -webkit-box-shadow: 2px 2px 5px #DFDFDF } .tab li:last-child dl { left: auto; right: 4%; transform: translateX(0); -webkit-transform: translateX(0) } .tab dl:before { content: ""; display: inline-block; position: absolute; z-index: 240; bottom: 0; left: 50%; width: 10px; height: 8px; background: url(../../images/giftuser/arrow_up.png) no-repeat center center; -webkit-background-size: 10px auto; top: -7px; margin-left: -5px } .tab dl dd { margin: 0 10px; line-height: 45px; text-align: center; background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(194, 194, 194, 0.5)), to(rgba(194, 194, 194, 0.5)), color-stop(50%, rgba(194, 194, 194, 0.5))); background-size: 100% 1px; background-repeat: no-repeat; background-position: center bottom } .tab dl dd:last-of-type { background: none } .tab dl dd a { font-size: 0.875rem; display: block; color: #4f4d4f; text-shadow: 0px 1px 0px #ffffff; white-space: pre; overflow: hidden; text-overflow: ellipsis } /*TAB切换end*/ /*配送时间star*/ .delivery_time, .popup_confirm { background: #FFF; margin: 0 auto; border-radius: 3px; -webkit-border-radius: 3px; overflow: hidden; position: absolute; top: 50%; margin-top: -125px; width: 80%; margin-left: 10%; transform: translateY(-210%); -webkit-transform: translateY(-210%); -webkit-animation: m_t 0.3s ease-out both; animation: m_t 0.3s ease-out both; z-index: 12 } @-webkit-keyframes m_t { 0% { transform: translateY(-100%); -webkit-transform: translateY(-100%); opacity: 0 } 100% { transform: translateY(0); -webkit-transform: translateY(0); opacity: 1 } } @keyframes m_t { 0% { transform: translateY(-100%); -webkit-transform: translateY(-100%); opacity: 0 } 100% { transform: translateY(0); -webkit-transform: translateY(0); opacity: 1 } } .delivery_time li { margin: 0 5% } .delivery_time li:last-child { margin: 0; padding-bottom: 0 } .delivery_time li>label { display: block; position: relative; line-height: 2.625rem; height: 2.625rem; text-indent: 1.5625rem; width: 100%; border-bottom: 1px solid #f4f4f4; font-size: 0.8125rem } .delivery_time span { display: block; position: absolute; left: 0; top: 50%; width: 1.125rem; height: 1.125rem; transform: translateY(-50%); -webkit-transform: translateY(-50%) } .delivery_time span label { display: block; cursor: pointer; position: absolute; width: 1.125rem; height: 1.125rem; overflow: hidden; box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 100%; -webkit-border-radius: 100%; top: 0; left: 0; background: #FFF; border: 1px solid #C8C8C8 } .delivery_time span label:after { display: block; opacity: 0; content: ''; position: absolute; width: 0.5rem; height: 0.25rem; background: transparent; top: 0.25rem; left: 0.1875rem; border: 0.125rem solid #FFF; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .delivery_time span label:hover::after { opacity: 0 } .delivery_time span input { opacity: 0; position: absolute; left: 0; top: 0; z-index: 100 } .delivery_time span input[type=radio]:checked+label:after { opacity: 1 } .delivery_time span input[type=radio]:checked+label { background: #f03d37; border-color: #f03d37 } .delivery_time li:last-child { text-align: center } .delivery_time li:last-child a { display: inline-block; font-size: 1rem; color: #fff; border-bottom-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; width: 100%; text-align: center; line-height: 2.8125rem; height: 2.8125rem; margin: 0.9375rem 0 0 0; background: #f03d37 } /*配送时间end*/ /*选择优惠券start*/ .layout_win .bar { height: 2.5rem; line-height: 2.5rem; position: relative; text-align: center; font-size: 1rem; color: #343434; border-bottom: 1px solid #EEE } .layout_win .bar .close { display: block; width: 30px; height: 30px; overflow: hidden; position: absolute; right: 3%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%) } .layout_win .bar .close:after { content: ""; position: absolute; left: 50%; top: 0%; display: block; height: 30px; width: 1px; background: #666; transform: rotate(45deg); -webkit-transform: rotate(45deg) } .layout_win .bar .close:before { content: ""; position: absolute; left: 50%; top: 0; display: block; height: 30px; width: 1px; background: #666; transform: rotate(315deg); -webkit-transform: rotate(315deg) } .layout_win ul.coupon { min-height: 59px; max-height: 295px; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; margin: 0; padding: 0 4% } .layout_win .coupon>li { margin: 0; padding: 0; border-bottom: 1px solid #EEE } .layout_win .coupon>li>label ul { margin: 0 0 0 29px; padding: 0 } .layout_win .coupon>li>label { display: block; position: relative; margin: 0; padding: 5px 0 } .layout_win .coupon>li>label>span { display: block; cursor: pointer; position: absolute; width: 18px; height: 18px; border-radius: 18px; -webkit-border-radius: 18px; top: 50%; left: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); border: 1px solid #DDD } .layout_win .coupon>li>label>input { opacity: 0; display: none } .layout_win .coupon>li>label>input[type=radio]:checked+span:after { opacity: 1 } .layout_win .coupon>li>label>input[type=radio]:checked+span { background: #f03d37; border-color: #f03d37 } .layout_win .coupon>li>label>input[type=radio]:checked+span:after { display: block; opacity: 1; content: ''; position: absolute; width: 8px; height: 4px; background: 0 0; top: 5px; left: 4px; border: 2px solid #FFF; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg) } .layout_win .coupon>li>label ul:after { content: ""; display: block; clear: both; overflow: hidden; height: 0 } .layout_win .coupon>li>label ul li { float: left; height: 3rem; overflow: hidden } .layout_win .coupon>li:first-child>label ul li:first-child { line-height: 3rem; font-size: .875rem; color: #343434 } .layout_win .coupon>li>label ul li:last-child { float: right; font-size: .75rem; line-height: 3rem; color: #343434 } .layout_win .coupon>li>label ul h3 { font-size: .875rem; line-height: 1.5rem; font-weight: 400; color: #343434 } .layout_win .coupon>li>label ul h3 span { display: block; font-size: .75rem; color: #999 } .win .layout_win .btn { display: block; height: 2.8125rem !important; background: #fff; text-align: center } .layout_win .btn span, .win .layout_win .btn a { display: inline-block; font-size: 1rem; margin: 0 !important; color: #fff; width: 100% !important; text-align: center; line-height: 2.8125rem; height: 2.8125rem; background: #f03d37; border-radius: 0 !important; -webkit-border-radius: 0 !important } /*选择优惠券end*/ /*选择支付方式start*/ .wallet_payment, .other_payment>div { margin: 0 4% } .wallet_payment>label, .other_payment>div>label { display: block; position: relative; margin: 0; padding: 5px 0 } .other_payment>div>label { height: 38px; line-height: 38px } .wallet_payment>label>span, .other_payment>div>label>span { display: block; cursor: pointer; position: absolute; width: 18px; height: 18px; border-radius: 18px; -webkit-border-radius: 18px; top: 50%; left: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); border: 1px solid #DDD } .wallet_payment.disabled>label>span { background: #EEE } .wallet_payment>label>span:after, .other_payment>div>label>span:after { display: block; opacity: 0; content: ''; position: absolute; width: 8px; height: 4px; background: 0 0; top: 5px; left: 4px; border: 2px solid #FFF; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg) } .wallet_payment>label>input, .other_payment>div>label>input { opacity: 0; display: none } .wallet_payment>label>input[type=checkbox]:checked+span:after, .wallet_payment>label>input[type=radio]:checked+span:after, .other_payment>div>label>input[type=checkbox]:checked+span:after, .other_payment>div>label>input[type=radio]:checked+span:after { opacity: 1 } .wallet_payment>label>input[type=checkbox]:checked+span, .wallet_payment>label>input[type=radio]:checked+span, .other_payment>div>label>input[type=checkbox]:checked+span, .other_payment>div>label>input[type=radio]:checked+span { background: #f03d37; border-color: #f03d37 } .wallet_payment>label>ul, .other_payment>div p { margin: 0 0 0 29px; padding: 0 } .other_payment>div p { height: 38px; text-align: left } .other_payment>div p:before { content: ""; display: inline-block; margin-right: 5px; vertical-align: middle; width: 20px; height: 38px; background: url(../images/voucher_card/weixin_pay.png) no-repeat left center; background-size: 100% auto; } .wallet_payment>label>ul:after { content: ""; display: block; clear: both; overflow: hidden; height: 0 } .wallet_payment>label>ul>li { float: left; height: 48px; overflow: hidden } .wallet_payment>label>ul>li:last-child { float: right; font-size: .75rem; line-height: 48px; color: #343434 } .wallet_payment>label>ul h3 { font-size: .875rem; line-height: 1.5rem; font-weight: 400; color: #343434 } .wallet_payment.disabled>label>ul>li h3 { color: #999 } .wallet_payment>label>ul h3 span { display: block; font-size: .75rem; color: #999 } .other_payment { border-top: 10px solid #EEE } .other_payment ul { padding: 0 4%; height: 40px; border-bottom: 1px solid #EEE } .other_payment ul li { line-height: 40px; height: 40px; float: left; font-size: 0.875rem } .other_payment ul li:last-child { float: right; font-weight: bold; color: #f03d37 } /*选择支付方式end*/ /*确认弹出框star*/ .popup_confirm dt { text-align: center; font-size: 0.9375rem; line-height: 5rem; height: 5rem } .popup_confirm dd { float: left; width: 50%; height: 2.8125rem; text-align: center } .popup_confirm dd a, .popup_confirm dd label { display: inline-block; line-height: 2.8125rem; height: 2.8125rem; font-size: 1rem; width: 100%; color: #fff; text-align: center; background: #f03d37 } .popup_confirm dd a.cannel { background-color: #DDD; color: #333 } .popup_confirm dd.w_100 { float: none; width: 100% } /*确认弹出框end*/ /*导航star*/ nav .box { width: 100%; display: -webkit-box; display: -moz-box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } nav .box>* { -webkit-box-flex: 1; -moz-box-flex: 1 } .nav { height: 45px; position: fixed; z-index: 200; bottom: 0; left: 0; width: 100%; background: #FFF; -webkit-box-shadow: 0px 1px 3px #EFEFEF inset; box-shadow: 0px 1px 3px #EFEFEF inset; } .nav ul { width: 100% } .nav li { border: 1px solid #E5E5E5; border-top-color: #BFBFBF; height: 45px; border-bottom: 0; border-right: 0; position: relative; float: left; width: 33.33% } .nav li:nth-of-type(1) { border-left: 0; } .nav li>a { font-size: 0.875rem; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-bottom: 0; display: block; line-height: 45px; text-align: center } .nav li>a:only-child span { background: none; padding-left: 0 } .nav li>a.on+dl { display: block } .nav li>a span { color: #4f4d4f; display: inline-block; padding-left: 16px; background: url(../../images/giftuser/submenu_icon.png) no-repeat 4px 18px; -webkit-background-size: 9px auto; -moz-background-size: 9px auto; text-shadow: 0 1px 0 #ffffff } .nav dl { display: none; position: absolute; z-index: 220; bottom: 55px; left: 50%; min-width: 100px; transform: translateX(-50%); -webkit-transform: translateX(-50%); border-radius: 5px; background: #fff; -webkit-background-size: 100%; background-size: 100%; border: 1px solid #bfbfbf; box-shadow: 2px 2px 5px #DFDFDF; -webkit-box-shadow: 2px 2px 5px #DFDFDF } .nav li:last-child dl { left: auto; right: 4%; transform: translateX(0); -webkit-transform: translateX(0) } .nav dl:before { content: ""; display: inline-block; position: absolute; z-index: 240; left: 50%; width: 10px; height: 8px; background: url(../../images/giftuser/arrow.png) no-repeat center center; -webkit-background-size: 10px auto; bottom: -7px; margin-left: -5px } .nav dl dd { margin: 0 10px; line-height: 45px; text-align: center; background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(194, 194, 194, 0.5)), to(rgba(194, 194, 194, 0.5)), color-stop(50%, rgba(194, 194, 194, 0.5))); background-size: 100% 1px; background-repeat: no-repeat; background-position: center bottom } .nav dl dd:last-of-type { background: none } .nav dl dd a { font-size: 0.875rem; display: block; color: #4f4d4f; text-shadow: 0px 1px 0px #ffffff; white-space: pre; overflow: hidden; text-overflow: ellipsis } .nav.app li>a { line-height: 10px; height: 45px; overflow: hidden } .nav.app li>a span { color: #c7c7c7; padding-left: 0; background: 0; font-size: 0.75rem } .nav.app li>a i { display: block; line-height: 28px; height: 28px; width: 100%; overflow: hidden; text-align: center; font-size: 0 } .nav.app li>a i img { width: auto; height: 20px; vertical-align: middle } /*导航end*/ .shopping_cart_lu { position: fixed; display: block; z-index: 100; bottom: 90px; right: 12px; width: 60px; height: 60px; text-indent: -999px; overflow: hidden; background: rgba(255, 102, 0, 0.75) url(../images/commodity/shoppingcart.png) no-repeat center center; background-size: 50% auto; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; box-shadow: 0 0 5px #CCC; } .shopping_cart_lu i { position: absolute; left: 32px; top: 10px; display: inline-block; text-indent: 0; font-size: 0.75rem; color: #F60; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 20px; -webkit-border-radius: 20px; background: #FFF; box-shadow: 0 0 5px #F60 } /*富媒体*/ .rich_media { position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; z-index: 2000 } .rich_media .wrap { position: absolute; width: 88%; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); font-size: 0 } .rich_media .wrap a { display: block } .rich_media .wrap img { display: block; width: 100% } .rich_media .wrap span { position: absolute; display: block; top: -45px; right: 0; width: 25px; height: 25px; border: 2px solid #FFF; border-radius: 50%; -webkit-border-radius: 50%; background: #000 } .rich_media .wrap span:before { content: ""; display: block; position: absolute; width: 2px; height: 17px; background: #FFF; border-radius: 2px; -webkit-border-radius: 2px; transform: rotate(45deg); -webkit-transform: rotate(45deg); left: 12px; top: 4px; z-index: 2 } .rich_media .wrap span:after { content: ""; display: block; position: absolute; width: 2px; height: 17px; background: #FFF; border-radius: 2px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); left: 12px; top: 4px; z-index: 2 } /*底部版权*/ #copyright { margin: 0; padding-top: 20px; padding-bottom: 20px; color: #bdbdbd; text-align: center } #copyright>p { margin: 0; padding: 0; font-size: 10px; line-height: 15px; text-align: center } #copyright>p>a { display: inline-block; width: 80px; height: 28px; background: url(../../images/giftuser/f_logo.png) no-repeat center top; background-size: auto 28px } #copyright>p:last-child { margin: 6px 4% 0 4%; border-top: 1px solid #f1f1f1 } #copyright>p:last-child:before { content: ""; display: block; height: 10px } /*加入购物车成功*/ .success { display: inline-block; position: fixed; left: 50%; top: 50%; z-index: 400; padding: 15px 15px; border-radius: 3px; -webkit-border-radius: 3px; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); white-space: nowrap; color: #fff; font-size: 0.875rem; background: rgba(0, 0, 0, 0.80); text-align: center; cursor: pointer; } .success span { display: block } .success i { display: inline-block; width: 30px; height: 30px; border-radius: 30px; -webkit-border-radius: 30px; border: 2px solid #FFF; position: relative } .success i:after { content: ""; display: block; position: absolute; left: 10px; top: 4px; width: 8px; height: 15px; border-right: 2px solid #FFF; border-bottom: 2px solid #FFF; transform: rotate(45deg); -webkit-transform: rotate(45deg) } /*订单为空*/ .no_order:before { margin-bottom: 20px; content: ""; display: block; height: 140px; background: url(../images/empty.png) no-repeat center top; background-size: auto 100% } /*春节配送通知start*/ .layout-notice-hide { display: none } .layout-notice { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); z-index: 110; -webkit-animation: bg 0.5s 0.5s ease-out both; -moz-animation: bg 0.5s 0.5s ease-out both; animation: bg 0.5s 0.5s ease-out both; cursor: pointer } .layout-notice>div { position: absolute; top: 50%; width: 84%; margin-left: 8%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -webkit-animation: note_m_t 0.3s 0.5s ease-out both; -moz-animation: note_m_t 0.3s 0.5s ease-out both; animation: note_m_t 0.3s 0.5s ease-out both; } @-webkit-keyframes note_m_t { 0% { transform: translateY(-100%); -webkit-transform: translateY(-100%); opacity: 0 } 100% { transform: translateY(-50%); -webkit-transform: translateY(-50%); opacity: 1 } } @keyframes note_m_t { 0% { transform: translateY(-100%); -webkit-transform: translateY(-100%); opacity: 0 } 100% { transform: translateY(-50%); -webkit-transform: translateY(-50%); opacity: 1 } } .layout-notice>div img { width: 100% } .layout-notice>div a { display: block; width: 75%; height: 6%; margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); bottom: 6.8%; z-index: 10 } .layout-notice button { display: block; width: 35px; height: 35px; border-radius: 50%; -webkit-border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.70); background: none; position: absolute; right: -18px; transform: translateX(-50%) rotate(45deg); -webkit-transform: translateX(-50%) rotate(45deg); top: 0; cursor: pointer; } .layout-notice button:after { content: ""; display: block; width: 2px; height: 25px; background: rgba(255, 255, 255, 0.7); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%) } .layout-notice button:before { content: ""; display: block; width: 25px; height: 2px; background: rgba(255, 255, 255, 0.70); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%) } /*春节配送通知end*/ /*流程start*/ .step { padding: 0.90625rem 4% 0 4%; height: 4.75rem; border-bottom: 0.625rem solid #f4f4f4; position: relative; z-index: 2; background: #FFF } .step li { float: left; width: 26%; text-align: center; position: relative } .step li:nth-child(2) { width: 48% } .step li i { display: inline-block; position: relative; width: 2.0625rem; height: 2.0625rem; border-radius: 50%; -webkit-border-radius: 50% } .step li i:after { content: ""; display: block; width: 0.875rem; height: 0.875rem; border: 0.1875rem solid #FFF; border-radius: 50%; -webkit-border-radius: 50%; background-color: #f03d37; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%) } .step li span { display: block; line-height: 2rem; height: 2rem; font-size: 0.6875rem; color: #969696 } .step li span:last-child { height: 2px; position: absolute; top: 1rem; left: 0; right: 0; background: #f03d37; z-index: -1 } .step li:first-child span { left: 50% } .step li:last-child span { right: 50% } .step li.on i:after { border: none; width: 100%; height: 100%; background-image: url(../../images/giftuser/stepicon.png); background-repeat: no-repeat; background-position: left top; background-size: auto 2.0625rem } .step li.on:nth-child(2) i:after { background-position: -2.0625rem top } .step li.on:nth-child(3) i:after { background-position: right top } .step li.on span { color: #323232 } /*流程end*/ /*登录浮层start*/ .layoutlogin { position: fixed; left: 0; right: 0; bottom: 0; top: 0; background: rgba(0,0,0,0.80); z-index: 2000 } .layoutlogin > div { background: #FFF; margin: 0 auto; border-radius: 3px; -webkit-border-radius: 3px; overflow: hidden; position: absolute; top: 50%; margin-top: -125px; width: 90%; margin-left: 5%; transform: translateY(-210%); -webkit-transform: translateY(-210%); -webkit-animation: m_t 0.3s ease-out both; animation: m_t 0.3s ease-out both; z-index: 12; } .layoutlogin .bar { margin-bottom: 0.625rem; height: 2.8125rem; line-height: 2.8125rem; font-size: 1rem; text-align: center; color: #323232; border-bottom: 1px solid #f0f0f0; position: relative } .layoutlogin .bar .close { display: block; width: 1.875rem; height: 1.875rem; overflow: hidden; position: absolute; right: 3%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); } .layoutlogin .bar .close:before { content: ""; position: absolute; left: 50%; top: 0; display: block; height: 1.875rem; width: 1px; background: #666; transform: rotate(315deg); -webkit-transform: rotate(315deg); } .layoutlogin .bar .close:after { content: ""; position: absolute; left: 50%; top: 0%; display: block; height: 1.875rem; width: 1px; background: #666; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .layoutlogin .login li { margin: 0 5% 0.625rem 5%; position: relative } .layoutlogin .login li.msg { height: auto; overflow: visible; position: relative; width: auto; line-height: auto; bottom: auto; left: auto; right: auto; } .layoutlogin .login li:last-child { padding: 0; margin: 0 } .layoutlogin .login strong { display: block; margin-bottom: 0.3125rem; color: #333; font-size: 1rem; font-weight: 400; line-height: 1.25rem; } .layoutlogin .login input { height: 2.8125rem; width: 100%; padding: 0 2.5rem 0 0.625rem; line-height: 2.8125rem; box-sizing: border-box; -webkit-box-sizing: border-box; font-size: 0.875rem; background-color: #f7f7f7; border: none; outline: none; border-radius: 3px; -webkit-border-radius: 3px; } .layoutlogin .login div { margin-right: 8.125rem } .layoutlogin .login button { position: absolute; top: 0; right: 0; width: 7.1875rem; height: 2.8125rem; line-height: 2.8125rem; color: #333; background-color: #fff; border: 1px solid #ccc; box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 3px; -webkit-border-radius: 3px; font-size: 0.875rem; outline: none; } .layoutlogin .login button:disabled { color: #999; background-color: #f7f7f7 !important; border-color: #f7f7f7 !important } .layoutlogin .btn .btnlogin { display: block; width: 100%; height: 2.8125rem; margin: 1rem 0 0 0; background-color: #e6302f; color: #fff; font-size: 1rem; text-align: center; line-height: 2.8125rem; border-bottom-left-radius: 3px; -webkit-border--bottom-left-radius: 3px; border-bottom-right-radius: 3px; -webkit-border--bottom-right-radius: 3px; border-top-left-radius: 0px; -webkit-top--bottom-left-radius: 0px; border-top-right-radius: 0px; -webkit-border-top-right-radius: 0px; } .layoutlogin .error { font-size: 0.75rem; color: #fa5b5b; background-left: rem; } /*登录浮层end*/ /*抵扣说明start*/ .instruction { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.80); z-index: 100; display: none } .instruction > div { position: absolute; padding: 0 5%; width: 76%; left: 7%; right: 7%; background: #fff; font-size: 0.75rem; color: #323232; border-radius: 2px; -webkit-border-radius: 2px; top: -50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); text-align: center; animation: all 0.5s; -webkit-animation: all 0.5s; } .instruction h3 { line-height: 3.1875rem; height: 3.1875rem; font-size: 0.875rem; text-align: center; border-bottom: 1px solid #f4f4f4 } .instruction dt { margin-top: 0.625rem; line-height: 1.6875rem; height: 1.6875rem; text-align: left } .instruction dd { line-height: 1.25rem; color: #969696; text-align: left } .instruction dd li { margin-top: 0.3125rem; text-align: left } .instruction dd li:before { content: ""; display: inline-block; width: 0.3125rem; height: 0.3125rem; border-radius: 100%; -webkit-border-radius: 100%; background: #ff6868; vertical-align: middle; margin-right: 0.625rem } .instruction .btn { display: inline-block; line-height: 2.8125rem; height: 2.8125rem; font-size: 0.9375rem; text-align: center; color: #fff; background: #f03d37; margin: 0.9375rem auto; width: 80%; border-radius: 5px; -webkit-border-radius: 5px; } /*wrap分享弹出层*/ .giftpackpop { position: fixed; left: 0; top: 0; right: 0px; bottom: 0px; background: rgba(0,0,0,0.80); z-index: 110; display: none } .giftpackpop .layout_gift_link { position: absolute; left: 0; bottom: -30rem; right: 0; background: #FFF; transition: all 0.3s; -webkit-transition: all 0.3s } .giftpackpop .layout_gift_link h2 { text-align: center; line-height: 2.5rem; height: 2.5rem; border-bottom: 1px solid #f4f4f4; font-size: 1rem; color: #323232; position: relative } .giftpackpop .layout_gift_link h2 i.close { display: block; width: 1.875rem; height: 1.875rem; overflow: hidden; position: absolute; right: 5%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%) } .giftpackpop .layout_gift_link h2 i.close:after { content: ""; position: absolute; left: 50%; top: 0%; display: block; height: 1.875rem; width: 1px; background: #666; transform: rotate(45deg); -webkit-transform: rotate(45deg) } .giftpackpop .layout_gift_link h2 i.close:before { content: ""; position: absolute; left: 50%; top: 0; display: block; height: 1.875rem; width: 1px; background: #666; transform: rotate(315deg); -webkit-transform: rotate(315deg) } .giftpackpop .wraplink, .giftpackpop .wrapimg { font-size: 0 } .giftpackpop .Title { display: block; height: 2rem; line-height: 2rem; color: #323232; text-align: left; font-size: 0.8125rem; position: relative } .giftpackpop .txt { margin: 0 5% 0.625rem 5%; padding: 0.3125rem 0; font-size: 0.6875rem; line-height: 1.25rem; color: #969696; } .giftpackpop textarea { margin: 0 5%; padding: 0; border: 1px solid #e8e8e8; background: #f4f4f4; resize: none; width: 90%; height: 5rem; padding: 0.625rem; outline: none; box-sizing: border-box; -webkit-box-sizing: border-box; font-size: 0.8125rem; line-height: 1.125rem } .giftpackpop .BtnCopy { display: block; font-size: 1rem; color: #fff; width: 100%; text-align: center; line-height: 2.8125rem; height: 2.8125rem; background: #f33b2f; margin: 0; border: none } .giftpackpop .Tab { margin: 0 5%; position: relative; margin-bottom: 0.625rem } .giftpackpop .Tab:before { content: ""; display: block; width: 1px; height: 0.90625rem; background: #787878; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%) } .giftpackpop .Tab:after { content: ""; display: block; clear: both; height: 0 } .giftpackpop .Tab span { display: block; line-height: 2.5rem; height: 2.5rem; text-align: center; font-size: 0.8125rem; float: left; width: 50%; border-bottom: 0px solid #fafafa; position: relative } .giftpackpop .Tab span.on:after { content: ""; display: block; width: 1.28125rem; height: 2px; background: #f03d37; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); -webkit-transform: translateX(-50%) } .giftpackpop .wrapimg img { display: block; margin: 0 auto; width: 40%; border: 0px solid #e8e8e8; padding: 0.3125rem; background: #fff } .giftpackpop .wrapimg .img { text-align: center; margin: 0 5%; border: 1px solid #f4f4f4; padding: 0.625rem 0; position:relative } .giftpackpop .wrapimg .img i{ display:block; width:2.25rem; height:2.25rem; background:url(../../images/giftuser/enlarge.png) no-repeat center center; background-size:75%; position:absolute; bottom:5px; left:5px } .giftpackpop .layout_gift_link .pop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); z-index: 5; display: none; font-size: 0.75rem; border-radius: 1rem; -webkit-border-radius: 1rem; padding: 0 0.75rem; line-height: 2rem; height: 2rem; background: rgba(0,0,0,0.80); color: #FFF; } .giftpackpop .layout_gift_link .pop i { display: inline-block; width: 0.9375rem; height: 0.9375rem; border-radius: 100%; -webkit-border-radius: 100%; border: 2px solid #FFF; position: relative; vertical-align: middle; margin-right: 0.3125rem; } .giftpackpop .layout_gift_link .pop i:after { content: ""; display: block; position: absolute; left: 0.3125rem; top: 0.125rem; width: 0.25rem; height: 0.4375rem; border-right: 2px solid #FFF; border-bottom: 2px solid #FFF; transform: rotate(45deg); -webkit-transform: rotate(45deg) } .previewimg { position:fixed; left:0; right:0; top:0; bottom:0; z-index:111; background:rgba(0,0,0,0.90); } .previewimg img { max-height: 100%; margin: auto; display: block; position: absolute; left: 0; right: 0; top: 10%; bottom: 10%; height: auto; max-width: 80%; transform:translateY(-30rem); -webkit-transform:translateY(-30rem); vertical-align: middle; border: 0; opacity:0; -webkit-animation: imgfall 0.6s ease-out 0.3s both; animation: imgfall 0.6s ease-out 0.3s both; } @-webkit-keyframes imgfall { 0% {opacity:0; transform:translateY(-10rem); -webkit-transform:translateY(-10rem)} 100% {opacity:1; transform:translateY(0rem); -webkit-transform:translateY(0rem)} } @keyframes imgfall { 0% {opacity:0; transform:translateY(-10rem); -webkit-transform:translateY(-10rem)} 100% {opacity:1; transform:translateY(0rem); -webkit-transform:translateY(0rem)} } /*福袋*/ .layoutredbag { position:fixed; left:0; right:0; bottom:0; top:0; z-index:200; background:rgba(0,0,0,0.8) } .layoutredbag .redbag { position:absolute; left:50%; top:50%; margin:-13.203125rem 0 0 -9.46875rem; width:18.9375rem; height:26.40625rem; overflow:hidden; background:#d84e43; border-radius:5px; -webkit-border-radius:5px; } .layoutredbag .redbag:before { content:""; display:block; position:absolute; left:50%; z-index:1; bottom:8.03125rem; margin-left:-17.234375rem; display:block; width:34.46875rem; height:23.875rem; background:#e05449; border-radius:100%; -webkit-border-radius:100%; box-shadow:0 0.25rem 0.1875rem rgba(195,0,0,0.09) } .layoutredbag .headimg { position:absolute; top:3.09375rem; left:50%; margin-left:-2rem; z-index:2; width:4rem; height:4rem; border-radius:100%; -webkit-border-radius:100%; overflow:hidden; box-sizing:border-box; -webkit-box-sizing:border-box; border:2px solid #fff; background:#fff; } .layoutredbag .headimg img { display:block; width:100%; border-radius:100%; -webkit-border-radius:100%; } .layoutredbag .nickname { position:absolute; top:7.96875rem; left:0; right:0; font-size:1rem; color:#ffe2b1; z-index:2; line-height:100%; text-align:center } .layoutredbag .redbagtxt { position:absolute; top:10.9375rem; left:0; right:0; font-size:1.25rem; color:#ffe2b1; z-index:2; line-height:100%; text-align:center } .layoutredbag .open { position:absolute; top:14.84375rem; left:50%; margin-left:-3.125rem; width:6.25rem; height:6.25rem; background:#fef2cd url(../images/luckybag/chai.png) no-repeat center center; background-size:1.8125rem; z-index:2; border-radius:100%; -webkit-border-radius:100%; transform-style: preserve-3d; -webkit-transform-style:preserve-3d; } .layoutredbag .open.flip{ animation:flip 1.5s linear infinite; -webkit-animation:flip 1.5s linear infinite } @keyframes flip {0%{transform:rotateY(0deg); -webkit-transform:rotateY(0deg)} 50%{transform:rotateY(180deg); -webkit-transform:rotateY(180deg)}100%{transform:rotateY(360deg); -webkit-transform:rotateY(360deg)}} @-webkit-keyframes flip {0%{transform:rotateY(0deg); -webkit-transform:rotateY(0deg)} 50%{transform:rotateY(180deg); -webkit-transform:rotateY(180deg)}100%{transform:rotateY(360deg); -webkit-transform:rotateY(360deg)}} .layoutredbag .open:before { content:""; display:block; position:absolute; top:50%; left:50%; margin:-2.734375rem 0 0 -2.734375rem; width:5.46875rem; height:5.46875rem; border:2px solid #f6a100; z-index:3; border-radius:100%; -webkit-border-radius:100%; box-sizing:border-box; -webkit-box-sizing:border-box; } .luckybagicon { display:block; width:2.90625rem; height:3.5rem; position:absolute; background:url(../images/luckybag/icon.png) no-repeat center center; background-size:cover; animation:rubberBand 3s 1s linear infinite; } @keyframes rubberBand { from { transform: scale3d(1, 1, 1); } 5% { transform: scale3d(1.25, 0.75, 1); } 10% { transform: scale3d(0.75, 1.25, 1); } 15% { transform: scale3d(1.15, 0.85, 1); } 20% { transform: scale3d(.95, 1.05, 1); } 25% { transform: scale3d(1.05, .95, 1); } 30%,to { transform: scale3d(1, 1, 1); } }