@charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, .yoho-header .nav-back, .yoho-header .nav-home, .yoho-header .nav-btn{ margin: 0; padding: 0; border: 0; vertical-align: baseline; font: inherit; font-size: 100%; } html{ line-height: 1; } ol, ul{ list-style: none; } table{ border-spacing: 0; border-collapse: collapse; } caption, th, td{ vertical-align: middle; text-align: left; font-weight: normal; } q, blockquote{ quotes: none; } q:before, q:after, blockquote:before, blockquote:after{ content: ""; content: none; } a img{ border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary, .yoho-header .nav-back, .yoho-header .nav-home, .yoho-header .nav-btn{ display: block; } .clearfix:after{ content: ''; display: block; clear: both; } *, *:before, *:after{ box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } html, body{ width: 100%; font-size: 0.6rem; font-family: helvetica, Arial, "黑体"; line-height: 1.4; } button, input, select, textarea{ margin: 0; font-size: 100%; } img{ display: block; margin: 0 auto; max-width: 100%; border: 0; } a{ outline: none; color: #000; text-decoration: none; } *:focus{ outline: none; } .hide{ display: none; } .overflow-hidden{ overflow: hidden; } .main-wrap{ margin-right: auto; margin-left: auto; max-width: 16rem; width: 100%; } @font-face{ font-family: "iconfont"; src: url('../font/iconfont.eot'); /* IE9 */ src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), url('../font/iconfont.woff') format('woff'), url('../font/iconfont.ttf') format('truetype'), url('../font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont{ text-decoration: none; font-style: normal; font-size: 0.8rem; font-family: "iconfont" !important; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.4px; -moz-osx-font-smoothing: grayscale; } .yoho-tip{ position: fixed; top: 50%; left: 50%; z-index: 4; display: none; padding: 1.7rem 0; max-width: 15rem; width: 70%; border: none; border-radius: 0.5rem; background-color: rgba(0, 0, 0, 0.7); color: #fff; text-align: center; font-size: 0.9rem; transform: translate(-50%, -50%); } .order-failure{ background-image: url('../img/common/order-good.jpg'); background-size: 100%; } .good-failure{ background-image: url('../img/common/order-good.jpg'); background-position-x: 40%; background-size: 3.3rem !important; } .loading-mask{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; @keyframes scale{ 0%{ opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; transform: scale(1); } 45%{ opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; transform: scale(0.1); } 80%{ opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; transform: scale(1); } } position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.1); } .loading-mask .loading{ position: absolute; top: 50%; left: 50%; margin-top: -0.5rem; margin-left: -1.5rem; width: 3rem; height: 1rem; } .loading-mask .loading > div{ display: inline-block; margin: 0.1rem; width: 0.75rem; height: 0.75rem; border-radius: 100%; background: #fff; } .loading-mask .loading > div:nth-child(1){ animation: scale 0.75s (1 + 1) * 0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } .loading-mask .loading > div:nth-child(2){ animation: scale 0.75s (2 + 1) * 0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } .loading-mask .loading > div:nth-child(3){ animation: scale 0.75s (3 + 1) * 0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } /* stylelint-disable */ /** * Swiper 3.0.8 * Most modern mobile touch slider and framework with hardware accelerated transitions * * http://www.idangero.us/swiper/ * * Copyright 2015, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us/ * * Licensed under MIT * * Released on: June 14, 2015 */ .swiper-container{ position: relative; /* Fix of Webkit flickering */ z-index: 1; overflow: hidden; margin: 0 auto; } .swiper-container-no-flexbox .swiper-slide{ float: left; } .swiper-container-vertical > .swiper-wrapper{ -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-orient: vertical; -moz-box-orient: vertical; } .swiper-wrapper{ position: relative; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 100%; height: 100%; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-container-android .swiper-slide, .swiper-wrapper{ -webkit-transform: translate3d(0px, 0, 0); -moz-transform: translate3d(0px, 0, 0); -o-transform: translate(0px, 0px); -ms-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper{ -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-lines: multiple; -moz-box-lines: multiple; } .swiper-container-free-mode > .swiper-wrapper{ margin: 0 auto; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-slide{ position: relative; -ms-flex: 0 0 auto; -webkit-flex-shrink: 0; flex-shrink: 0; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } /* a11y */ .swiper-container .swiper-notification{ position: absolute; top: 0; left: 0; z-index: -1000; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; pointer-events: none; } /* IE10 Windows Phone 8 Fixes */ .swiper-wp8-horizontal{ -ms-touch-action: pan-y; touch-action: pan-y; } .swiper-wp8-vertical{ -ms-touch-action: pan-x; touch-action: pan-x; } /* Arrows */ .swiper-button-prev, .swiper-button-next{ position: absolute; top: 50%; z-index: 10; margin-top: -0.55rem; width: 0.675rem; height: 1.1rem; background-position: center; -moz-background-size: 0.675rem 1.1rem; -webkit-background-size: 0.675rem 1.1rem; background-size: 0.675rem 1.1rem; background-repeat: no-repeat; cursor: pointer; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled{ opacity: 0.35; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)"; cursor: auto; pointer-events: none; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next{ right: auto; left: 0.25rem; background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black{ background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white{ background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next, .swiper-container-rtl .swiper-button-prev{ right: 0.25rem; left: auto; background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black{ background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white{ background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } /* Pagination Styles */ .swiper-pagination{ position: absolute; z-index: 10; text-align: center; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .swiper-pagination.swiper-pagination-hidden{ opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .swiper-pagination-bullet{ display: inline-block; width: 0.2rem; height: 0.2rem; border-radius: 100%; background: #000; opacity: 0.2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; } .swiper-pagination-clickable .swiper-pagination-bullet{ cursor: pointer; } .swiper-pagination-white .swiper-pagination-bullet{ background: #fff; } .swiper-pagination-bullet-active{ background: #007aff; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .swiper-pagination-white .swiper-pagination-bullet-active{ background: #fff; } .swiper-pagination-black .swiper-pagination-bullet-active{ background: #000; } .swiper-container-vertical > .swiper-pagination{ top: 50%; right: 0.25rem; -webkit-transform: translate3d(0px, -50%, 0); -moz-transform: translate3d(0px, -50%, 0); -o-transform: translate(0px, -50%); -ms-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet{ display: block; margin: 0.125rem 0; } .swiper-container-horizontal > .swiper-pagination{ bottom: 0.25rem; left: 0; width: 100%; } .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet{ margin: 0 0.125rem; } /* 3D Container */ .swiper-container-3d{ -webkit-perspective: 30rem; -moz-perspective: 30rem; -o-perspective: 30rem; perspective: 30rem; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow{ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom{ position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; pointer-events: none; } .swiper-container-3d .swiper-slide-shadow-left{ background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); /* Safari 4+, Chrome */ background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 3.6-15 */ background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Opera 11.10-12.00 */ background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 16+, IE10, Opera 12.50+ */ } .swiper-container-3d .swiper-slide-shadow-right{ background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); /* Safari 4+, Chrome */ background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */ background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 3.6-15 */ background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Opera 11.10-12.00 */ background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 16+, IE10, Opera 12.50+ */ } .swiper-container-3d .swiper-slide-shadow-top{ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); /* Safari 4+, Chrome */ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */ background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 3.6-15 */ background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Opera 11.10-12.00 */ background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 16+, IE10, Opera 12.50+ */ } .swiper-container-3d .swiper-slide-shadow-bottom{ background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); /* Safari 4+, Chrome */ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 3.6-15 */ background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Opera 11.10-12.00 */ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 16+, IE10, Opera 12.50+ */ } /* Coverflow */ .swiper-container-coverflow .swiper-wrapper{ /* Windows 8 IE 10 fix */ -ms-perspective: 30rem; } /* Fade */ .swiper-container-fade.swiper-container-free-mode .swiper-slide{ -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide{ pointer-events: none; } .swiper-container-fade .swiper-slide .swiper-slide{ pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active{ pointer-events: auto; } /* Cube */ .swiper-container-cube{ overflow: visible; } .swiper-container-cube .swiper-slide{ visibility: hidden; width: 100%; height: 100%; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; pointer-events: none; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube.swiper-container-rtl .swiper-slide{ -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide{ visibility: visible; pointer-events: auto; } .swiper-container-cube .swiper-cube-shadow{ position: absolute; bottom: 0px; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; -webkit-filter: blur(1.25rem); filter: blur(1.25rem); } .swiper-container-cube.swiper-container-vertical .swiper-cube-shadow{ z-index: 0; } /* Scrollbar */ .swiper-scrollbar{ position: relative; border-radius: 0.25rem; background: rgba(0, 0, 0, 0.1); -ms-touch-action: none; } .swiper-container-horizontal > .swiper-scrollbar{ position: absolute; bottom: 0.075rem; left: 1%; z-index: 50; width: 98%; height: 0.125rem; } .swiper-container-vertical > .swiper-scrollbar{ position: absolute; top: 1%; right: 0.075rem; z-index: 50; width: 0.125rem; height: 98%; } .swiper-scrollbar-drag{ position: relative; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.25rem; background: rgba(0, 0, 0, 0.5); } .swiper-scrollbar-cursor-drag{ cursor: move; } /* Preloader */ .swiper-lazy-preloader{ position: absolute; top: 50%; left: 50%; z-index: 10; margin-top: -0.525rem; margin-left: -0.525rem; width: 1.05rem; height: 1.05rem; -webkit-transform-origin: 50%; -moz-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite; } .swiper-lazy-preloader:after{ display: block; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: 50%; -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat; content: ""; } .swiper-lazy-preloader-white:after{ background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } @-webkit-keyframes swiper-preloader-spin{ 100%{ -webkit-transform: rotate(360deg); } } @keyframes swiper-preloader-spin{ 100%{ transform: rotate(360deg); } } /* stylelint-enable */ .yoho-header .nav-back, .yoho-header .nav-home, .yoho-header .nav-btn{ position: absolute; top: 0; display: block; width: 2.25rem; height: 2.25rem; outline: none; color: #fff; text-align: center; font-size: 20PX; line-height: 2.25rem; } .yoho-header{ position: relative; z-index: 1; overflow: hidden; width: 100%; height: 2.25rem; background-color: #000; color: #fff; line-height: 2.25rem; } .yoho-header a.highlight{ background: rgba(200, 200, 200, 0.1); } .yoho-header .nav-back{ left: 0.25rem; } .yoho-header .nav-home{ right: 0.25rem; } .yoho-header .nav-btn{ right: 0.25rem; font-size: 14PX; } .yoho-header .nav-title{ position: absolute; top: 0; right: 0; left: 0; overflow: hidden; margin-right: 2.5rem; margin-left: 2.5rem; height: 100%; color: #fff; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; font-size: 0.9rem; } .yoho-header.boys{ background-image: linear-gradient(#323232, #414141); } .yoho-header.girls{ background: #ff88ae; } .yoho-header.kids{ background: #7ad9f9; } .yoho-header.life-style{ background: #4f4138; } .system-update{ display: none; overflow: hidden; width: 100%; height: 2.25rem; background-image: linear-gradient(#323232, #414141); line-height: 2.25rem; } .system-update .system-header{ float: left; overflow: hidden; width: 85%; height: 100%; color: #fff; text-align: center; font-size: 1.5rem; } .system-update span{ float: left; overflow: hidden; width: 14%; height: 100%; color: #fff; text-align: center; font-weight: bold; font-size: 2rem; } .homebuttom{ position: relative; z-index: 2; overflow: hidden; width: 100%; height: 2.25rem; border-top: 1px solid rgba(255, 255, 255, 0.5); color: #fff; } .homebuttom ul{ overflow: hidden; padding-top: 0.3rem; width: 100%; height: 90%; } .homebuttom ul li{ float: left; overflow: hidden; width: 25%; height: 100%; text-align: center; } .homebuttom ul li i{ display: block; margin-bottom: 0.2rem; width: 100%; height: 40%; color: #fff; } .homebuttom ul li span{ display: block; overflow: hidden; width: 100%; height: auto; color: #fff; line-height: 1rem; } .homebuttom.boys{ background-image: linear-gradient(#323232, #414141); } .homebuttom.girls{ background: #ff88ae; } .homebuttom.kids{ background: #7ad9f9; } .homebuttom.life-style{ background: #4f4138; } .yoho-footer{ position: relative; width: 100%; background-color: #fff; font-size: 0.6rem; } .yoho-footer .op-row{ padding: 0 0.75rem; height: 3rem; line-height: 3rem; } .yoho-footer .op-row span{ display: inline-block; overflow: hidden; } .yoho-footer .op-row a{ display: inline-block; overflow: hidden; } .yoho-footer .op-row .user-name{ margin-right: 1em; margin-left: 0.3em; max-width: 5rem; text-decoration: underline; text-overflow: ellipsis; white-space: nowrap; } .yoho-footer .op-row .back-to-top{ position: absolute; right: 1rem; } .yoho-footer .op-row .sep-line{ margin: 0 0.3em; } .yoho-footer .copyright{ height: 3rem; border-top: 1px solid #ccc; background-color: #eee; color: #666; text-align: center; line-height: 3rem; } .yoho-footer.bottom{ position: fixed; bottom: 0; width: 100%; } .index-page{ overflow: hidden; margin: 0 auto; width: 100%; } .index-page #yohood{ border: none; border-bottom: 0.2rem solid #fff; background-color: transparent; background-image: url('../img/channel/yohood.png'); background-position-x: 26%; background-position-y: 36%; background-size: 40%; background-repeat: no-repeat; } .index-page #yohood:active{ border-bottom-color: #000; background-color: rgba(255, 255, 255, 0.4); background-image: url('../img/channel/yohood-tapped.png'); } .index-page #yohood:active .right-icon{ color: #000; } .index-page .index-header{ box-sizing: border-box; padding: 0 0.5rem; width: 100%; height: 2.4rem; line-height: 2.4rem; } .index-page .index-header .index-logo{ float: left; width: 7.2rem; height: 2.4rem; background: url('../img/channel/yohologo.png') left center no-repeat; background-size: 7rem 1.5rem; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; transition: all 400ms; } .index-page .index-header .index-logo img{ width: 5.175rem; height: 1.225rem; vertical-align: middle; } .index-page .index-header .index-logo.action{ width: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .index-page .index-header .box{ position: relative; z-index: 1; overflow: hidden; } .index-page .index-header .box.action .no-search, .index-page .index-header .box.action .clear-text{ display: block; } .index-page .index-header .index-search{ overflow: hidden; height: 2.4rem; background: #fff; transition: width 0.4s; } .index-page .index-header .index-search .search-box{ position: relative; top: 0.5rem; overflow: hidden; box-sizing: border-box; padding-right: 2rem; height: 1.4rem; border: 1px solid #ccc; transition: width 400ms; transition: margin-left 0.4s; } .index-page .index-header .index-search input{ float: left; overflow: hidden; padding: 0.25rem; width: 96%; border: none; color: #999; font-size: 0.7rem; -webkit-appearance: none; } .index-page .index-header .index-search .iconfont{ position: absolute; top: 0.2rem; z-index: 1; width: 1rem; font-size: 0.7rem; line-height: 1rem; } .index-page .index-header .index-search .clear-text{ right: 1.25rem; display: none; color: #ccc; } .index-page .index-header .index-search .search-icon{ right: 0.25rem; color: #666; } .index-page .index-header .index-search .search-icon.empty{ color: #e6e6e6; } .index-page .index-header .no-search{ display: none; float: left; margin-right: 0.25rem; color: #999; font-size: 0.7rem; } .index-page .index-container{ position: relative; background-color: white; transition: transform 0.5s; } .index-page .index-container .index-channel{ position: relative; min-height: 20rem; background-color: #000; color: #fff; text-align: center; } .index-page .index-container .index-channel img{ width: 100%; } .index-page .index-container .index-channel .index-channel-list{ position: absolute; top: 50%; margin-top: -7.5rem; width: 100%; } .index-page .index-container .index-channel .index-channel-list .list-item{ position: relative; display: block; margin: 0 auto 1rem; width: 10.8rem; height: 2.5rem; border: 0.2rem solid #fff; background-color: #000; color: #fff; text-align: center; font-weight: bold; font-size: 0.8rem; line-height: 2.05rem; } .index-page .index-container .index-channel .index-channel-list .list-item:last-child{ margin-bottom: 0; } .index-page .index-container .index-channel .index-channel-list .lighter{ font-weight: lighter; } .index-page .index-container .index-channel .index-channel-list .right-icon{ position: absolute; top: 0; right: 0.25rem; font-weight: bold; } .index-page .index-container .index-channel .index-channel-list .homestyle{ margin-bottom: 1.25rem; width: 7.1825rem; } .header-download{ position: relative; height: 5.3rem; padding: 1.2rem 0 0; overflow: hidden; } .header-download .download-bg{ position: absolute; left: 0; top: 0; width: 100%; z-index: -1; } .header-download .yoho-logo{ height: 1.425rem; background-image: url(../img/sprite.channel.png); background-position: 0px 0px; background-size: 8.05rem 7.375rem; } .header-download p{ line-height: 1.2rem; font-size: 0.7rem; color: #fff; text-align: center; } .header-download .download-btn{ display: block; margin: 0.45rem auto 0; width: 7.35rem; height: 1.6rem; line-height: 1.6rem; border: (0.075rem) solid #fff; font-size: 0.9rem; text-align: center; color: #fff; } .header-download .close-btn{ position: absolute; top: 0.425rem; right: 0.325rem; width: 1.25rem; height: 1.25rem; background-image: url(../img/sprite.channel.png); background-position: -4.45rem -5.875rem; background-size: 8.05rem 7.375rem; } .banner-top{ position: relative; } .banner-top .swiper-pagination{ position: absolute; left: 0; right: 0; bottom: 0.5rem; text-align: center; z-index: 1; } .banner-top .swiper-pagination .pagination-inner{ display: inline-block; } .banner-top .swiper-pagination .pagination-inner span{ display: inline-block; width: 0.35rem; height: 0.35rem; background: #fff; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; margin: 0 0.225rem; border-radius: 50%; } .banner-top .swiper-pagination .pagination-inner span.swiper-pagination-bullet-active{ background: #fff; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .banner-swiper{ position: relative; height: 7.75758rem; overflow: hidden; } .banner-swiper ul{ position: relative; height: 7.75758rem; } .banner-swiper ul li{ float: left; width: 100%; height: 100%; } .banner-swiper ul li img{ width: 100%; height: 100%; } .banner-center{ margin: 0.75rem 0 0; height: 5rem; overflow: hidden; } .banner-center img{ display: block; width: 100%; height: 100%; } .banner-bottom{ margin: 0.75rem 0 0; height: 4rem; overflow: hidden; } .banner-bottom img{ display: block; width: 100%; } .side-nav{ display: none; background: #fff; position: fixed; top: 0; bottom: 0; left: 0; right: 2.5rem; width: 13.5rem; background: #f0f0f0; z-index: 4; overflow: hidden; overflow-y: auto; transition: all 0.3s; } .side-nav > ul{ margin-bottom: 0.5rem; background: #fff; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; } .side-nav li{ position: relative; height: 1.9rem; line-height: 1.9rem; background: #fff; } .side-nav li a{ display: block; height: 100%; padding-left: 2.75rem; color: #444; } .side-nav li em{ font-weight: bold; font-size: 0.65rem; } .side-nav li .title{ display: inline-block; font-size: 0.9rem; vertical-align: bottom; padding-left: 0.5rem; transform: scale(0.5); /* 此处字体小于 12px, 先扩大,再scale缩小 */ transform-origin: 0 50% 0; } .side-nav li .nav-icon, .side-nav li .nav-img{ position: absolute; width: 0.95rem; height: 0.95rem; top: 50%; margin-top: -0.475rem; left: 0.875rem; background: no-repeat left center; background-size: 100% 100%; } .side-nav li .enter-subnav{ position: absolute; right: 0.75rem; top: 0; bottom: 0; font-size: 0.9rem; color: #b0b0b0; font-weight: lighter; } .side-nav li:after{ content: ''; position: absolute; right: 0; bottom: 0; width: 10.75rem; height: 0; border-top: 1px solid #e0e0e0; } .side-nav li:last-child{} .side-nav li:last-child:after{ content: none; } .side-nav li.highlight{ background: #eee; } .side-nav .first li{ height: 2.2rem; line-height: 2.2rem; border-bottom: 1px solid #e0e0e0; } .side-nav .first li em{ font-size: 0.9rem; } .side-nav .first li .nav-img, .side-nav .first li .nav-icon{ width: 1.2rem; height: 1.2rem; margin-top: -0.6rem; left: 0.75rem; } .side-nav .first li:last-child{ border-bottom: none; } .side-nav .first li:after{ content: none; } .side-nav .first .sub-nav li{ border-bottom: 1px solid #e0e0e0; } .side-nav li.boys i{ background-image: url(../img/sprite.channel.png); background-position: 0px -5.875rem; background-size: 8.05rem 7.375rem; } .side-nav li.girls i{ background-image: url(../img/sprite.channel.png); background-position: -6.55rem 0px; background-size: 8.05rem 7.375rem; } .side-nav li.kids i{ background-image: url(../img/sprite.channel.png); background-position: -6.55rem -1.55rem; background-size: 8.05rem 7.375rem; } .side-nav li.life i{ background-image: url(../img/sprite.channel.png); background-position: -6.55rem -3.1rem; background-size: 8.05rem 7.375rem; } .side-nav li.guang .nav-icon, .side-nav li.trendfinder .nav-icon{ background-image: url(../img/sprite.channel.png); background-position: -1.55rem -5.875rem; background-size: 8.05rem 7.375rem; } .side-nav.on{ display: block; } .sub-nav{ display: none; position: fixed; bottom: 0; top: 0; left: 0; width: 13.5rem; background: #fff !important; overflow: hidden; transform: translateX(13.5rem); transition: transform 0.3s; } .sub-nav li{ height: 2rem !important; line-height: 2rem !important; border: none; border-bottom: 1px solid #e0e0e0; } .sub-nav li a{ position: relative; display: block; margin: 0 0 0 0.75rem; padding-left: 0.25rem; font-size: 0.9rem; z-index: 2; } .sub-nav li .nav-point{ position: absolute; left: 0; font-size: 0.4rem; color: #f0f0f0; } .sub-nav li em{ font-weight: normal; font-size: 0.75rem !important; } .sub-nav li:after{ content: none; } .sub-nav li.highlight{ background: #eee; } .sub-nav li:hover .nav-point, .sub-nav li.current .nav-point{ color: #3e3e3e; } .sub-nav li:first-child{ height: 2.25rem !important; line-height: 2.25rem !important; background: #3e3e3e; } .sub-nav li:first-child a{ color: #fff; border-bottom: none; padding-left: 1.75rem; } .sub-nav li:first-child .nav-back{ position: absolute; left: 0; } .sub-nav.show{ display: block; z-index: 1; transform: translateX(0); transition: transform 0.3s; } .floor-header{ margin: 0.725rem 0.75rem 0; background: #fff; border: 1px solid #e0e0e0; border-bottom: none; height: 1.75rem; line-height: 1.75rem; text-align: center; font-size: 0.75rem; color: #b1b1b1; } .floor-header-more{ position: relative; height: 2.475rem; line-height: 2.475rem; margin: 0.725rem 0 0; background: #fff; border-top: 1px solid #e0e0e0; text-align: center; font-size: 0.8rem; color: #444; } .floor-header-more .more-btn{ position: absolute; right: 0.75rem; top: 0; bottom: 0; color: #b0b0b0; font-size: 1.25rem; } .footer-tab{ position: fixed; left: 50%; bottom: 0; margin-left: -8rem; width: 100%; height: 2.5rem; max-width: 16rem; padding-top: 0.5rem; box-sizing: border-box; background: #fff; border-top: 1px solid #b0b0b0; z-index: 3; } .footer-tab .tab-item{ float: left; width: 20%; text-align: center; color: #b0b0b0; } .footer-tab .tab-item.current{ color: #414141; } .footer-tab .tab-icon{ font-size: 1rem; line-height: 1; } .footer-tab .tab-name{ margin-top: 0.25rem; font-size: 0.5rem; line-height: 1; } .boys-wrap .footer-tab .tab-item.current{ color: #414141; } .girls-wrap .footer-tab .tab-item.current{ color: #ff88ae; } .kids-wrap .footer-tab .tab-item.current{ color: #7ad9f9; } .lifestyle-wrap .footer-tab .tab-item.current{ color: #4f4138; } .hot-brands{ border-bottom: 1px solid #e0e0e0; background: #fff; margin-top: 0.75rem; } .hot-brands .floor-header{ width: 100%; background: #f0f0f0; padding: 0 0.75rem; margin: 0; border: 0; } .hot-brands .floor-header h2{ border: 1px solid #e0e0e0; background: #fff; border-bottom: 0; } .hot-brands a{ display: block; text-decoration: none; height: 100%; } .hot-brands .brand{ float: left; width: 3.95rem; height: 4.35rem; border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; overflow: hidden; } .hot-brands .brand .brand-logo{ display: table-cell; width: 3.95rem; height: 3.2rem; line-height: 3.2rem; text-align: center; font-size: 0; vertical-align: middle; } .hot-brands .brand .brand-logo img{ max-width: 100%; max-height: 100%; } .hot-brands .brand .brand-name{ line-height: 1.1rem; font-size: 0.45rem; color: #babac2; text-align: center; text-decoration: none; border-bottom: none; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; } .hot-brands .brand:nth-child(5n){ border-right: none; } .hot-brands .more{ float: left; width: 7.925rem; height: 4.35rem; border-top: 1px solid #e0e0e0; } .hot-brands .more a{ display: block; width: 100%; height: 100%; background: url('../img/channel/more-brand.png') no-repeat; background-size: 100% 100%; } .brands-swiper{ background: #fff; width: 100%; height: 4rem; border-top: 1px solid #e0e0e0; overflow: hidden; } .brands-swiper .brands-list{ position: relative; height: 4rem; } .brands-swiper .brands-list li{ float: left; padding-left: 5%; width: 21.875%; height: 3.5rem; } .brands-swiper .brands-list li a{ position: relative; display: block; width: 100%; height: 100%; line-height: 3.5rem; font-size: 0; } .brands-swiper .brands-list li img{ display: inline-block; max-width: 100%; max-height: 100%; vertical-align: middle; } .brands-swiper .brands-list li .brands-title{ position: absolute; left: 0.2rem; right: 0.2rem; bottom: 0.2rem; height: 0.7rem; line-height: 0.7rem; text-align: center; font-size: 0.45rem; color: #444; background: rgba(255, 255, 255, 0.5); overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; } .fine-brands{ background: #fff; border-top: 1px solid #e0e0e0; } .fine-brands a{ display: block; text-decoration: none; } .fine-brands .brand{ float: left; width: 3.95rem; height: 4.35rem; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; overflow: hidden; } .fine-brands .brand .brand-logo{ display: table-cell; width: 3.95rem; height: 3.25rem; vertical-align: middle; } .fine-brands .brand .brand-logo img{ display: inline-block; max-width: 3.95rem; max-height: 3.25rem; vertical-align: middle; margin: 0 auto; } .fine-brands .brand .brand-name{ line-height: 1.1rem; font-size: 0.45rem; color: #babac2; text-align: center; text-decoration: none; border-bottom: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fine-brands .brand:nth-child(4n){ border-right: none; } .fine-brands .more .brand-logo{ display: block; text-align: center; line-height: 3.75rem; } .fine-brands .more .brand-logo .iconfont{ font-size: 1.2rem; color: #333; } .creative-life{ background: #fff; } .creative-life .banner{ display: block; height: 10rem; overflow: hidden; } .creative-life .banner img{ width: 100%; height: 100%; } .creative-life .classify-list{ border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; } .creative-life .classify-list > li{ float: left; width: 5.3325rem; height: 4.85rem; border-top: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; } .creative-life .classify-logo{ width: 5.3rem; height: 4.8rem; } .creative-life .classify-logo img{ display: block; width: 100%; height: 100%; } .creative-life .classify-name{ line-height: 1.3rem; font-size: 0.65rem; color: #000; text-align: center; text-decoration: none; border-bottom: none; overflow: hidden; } .creative-life .classify:nth-child(3n){ border-right: 0; } .plus-star img{ display: block; width: 100%; height: 4.95rem; border-top: 1px solid #e0e0e0; } .maybe-like{ position: relative; background: #fff; padding-left: 0.375rem; border-top: 1px solid #ccc; margin-top: 0.75rem; } .maybe-like .title{ height: 2.6rem; font-size: 0.95rem; line-height: 2.6rem; text-align: center; color: #dadada; } .maybe-like .icon{ display: inline-block; height: 0.775rem; width: 0.775rem; background-image: url(../img/sprite.channel.png); background-position: -6.55rem -4.65rem; background-size: 8.05rem 7.375rem; } .maybe-like .maybe-like-nav{ width: 100%; height: 1.5rem; padding: 0.25rem 0; background-color: #fff; } .maybe-like .maybe-like-nav:before{ content: ''; position: absolute; border-top: 1px solid #ccc; left: 0; top: 2rem; width: 16rem; height: 0; } .maybe-like .maybe-like-nav-item{ box-sizing: border-box; float: left; width: 50%; height: 1.5rem; line-height: 1.5rem; text-align: center; color: #ccc; border-right: 1px solid #ccc; } .maybe-like .maybe-like-nav-item.focus{ color: #000; } .load-more-img{ padding-left: 0; height: 5rem; border-top: 1px solid #ccc; overflow: hidden; } .load-more-img img{ display: block; width: 100%; height: 100%; } .icons-wrapper{ box-sizing: border-box; padding: 0.75rem 0 0.4rem; background: #fff; border-bottom: 1px solid #e0e0e0; } .icons-item{ float: left; margin-bottom: 0.25rem; width: 25%; height: 3.65rem; text-align: center; } .imagebar{ display: block; margin: 0 auto; text-align: center; width: 2.45rem; height: 2.45rem; line-height: 2.45rem; box-sizing: border-box; overflow: hidden; } .imagebar img{ width: 100%; height: 100%; } .linkbar{ display: block; line-height: 1.1rem; font-size: 0.6rem; color: #444; } .linkbar:visited, .linkbar:link, .linkbar:active, .linkbar:hover{ color: #444; } .trend-coll-wrapper{ background: #fff; height: 16.125rem; border-bottom: 1px solid #e0e0e0; } .trend-coll-header{ position: relative; widows: 100%; } .trend-coll-header .trend-coll-title{ width: 100%; height: 2.5rem; line-height: 2.5rem; text-align: center; font-size: 0.85rem; color: #747474; } .trend-coll-header .more{ position: absolute; right: 0.6rem; top: 0.5rem; } .trend-coll-content{ padding: 0 0 0 0.375rem; } .trend-coll-content .lspan{ float: left; margin: 0 0.375rem; } .trend-coll-content .rspan{ float: left; margin: 0 0.375rem; } .lspanimg{ display: block; float: right; width: 6.875rem; height: 6.875rem; } .rspanimg{ display: block; float: right; width: 6.875rem; height: 6.875rem; } .trend-coll-tail{ box-sizing: border-box; width: 100%; height: 6.675rem; clear: both; } .recommend-title{ widows: 100%; height: 2.5rem; line-height: 2.5rem; text-align: center; font-size: 0.85rem; } .recommend-swiper{ width: 100%; height: 3.5rem; overflow: hidden; } .recommend-list{ position: relative; height: 100%; } .recommend-list .recommend-item{ float: left; padding-left: 5%; width: 21.875%; height: 3.5rem; } .recommend-list .recommend-item a{ display: block; width: 100%; height: 100%; } .recommend-list .recommend-item a img{ width: 100%; height: 100%; } .trend-topic-wrapper{ background: #fff; } .trend-topic-content{ position: relative; width: 100%; border-bottom: 1px solid #e0e0e0; } .trend-topic-content .swiper-pagination{ position: absolute; left: 0; right: 0; bottom: 0.55rem; text-align: center; z-index: 0; } .trend-topic-content .swiper-pagination .pagination-inner{ display: inline-block; } .trend-topic-content .swiper-pagination span{ float: left; width: 0.4rem; height: 0.4rem; margin: 0 0.2rem; background: #f0f0f0; border-radius: 50%; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .trend-topic-content .swiper-pagination span.swiper-pagination-bullet-active{ background: #b0b0b0; } .trend-topic-swiper{ height: 13.35rem; overflow: hidden; } .trend-topic-swiper ul{ position: relative; } .trend-topic-swiper ul li{ float: left; height: 13.35rem; } .trend-topic-swiper ul li .img-box{ margin: 0 auto; width: 14.5rem; height: 9rem; line-height: 9rem; text-align: center; } .trend-topic-swiper ul li .img-box img{ vertical-align: middle; width: 100%; height: 100%; } .trend-topic-swiper ul li .item-content{ margin: 0.5rem 0.75rem 0; } .trend-topic-swiper ul li .item-content .title{ line-height: 1.3rem; font-size: 0.75rem; color: #000; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; } .trend-topic-swiper ul li .item-content .time{ margin: 0.4rem 0 0; line-height: 0.6rem; color: #afafaf; font-size: 0.45rem; } .trend-topic-swiper ul li .item-content .time-icon{ margin-right: 0.2rem; font-size: 0.35rem; } .category-swiper{ position: relative; height: 10rem; overflow: hidden; } .category-swiper ul li{ float: left; width: 100%; } .category-swiper ul li a, .category-swiper ul li img{ display: block; width: 100%; height: 100%; } .category-swiper .swiper-pagination{ position: absolute; left: 0; right: 0; bottom: 0.5rem; text-align: center; } .category-swiper .swiper-pagination .pagination-inner{ display: inline-block; } .category-swiper .swiper-pagination .pagination-inner span{ display: inline-block; width: 0.35rem; height: 0.35rem; background: #fff; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; margin: 0 (0.225rem); border-radius: 50%; } .category-swiper .swiper-pagination .pagination-inner span.swiper-active-switch{ opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .goods-category{ background: #fff; } .goods-category .category-list{ height: 9.55rem; border-bottom: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; overflow: hidden; } .goods-category .category-list li{ float: left; width: 4.775rem; height: 4.775rem; border-left: 1px solid #e0e0e0; } .goods-category .category-list li .first-show{ display: none; } .goods-category .category-list li .img-box{ height: 100%; line-height: 100%; text-align: center; } .goods-category .category-list li .img-box img{ width: 100%; height: 100%; vertical-align: middle; } .goods-category .category-list li .category-name{ line-height: 0.8rem; font-size: 0.5rem; color: #444; text-align: center; } .goods-category .category-list li:first-child{ width: 6.45rem; height: 9.55rem; border-left: none; } .goods-category .category-list li:first-child .img-box{ height: 100%; line-height: 100%; } .goods-category .category-list li:first-child .category-name{ line-height: 1rem; font-size: 0.55rem; } .goods-category .category-list li:nth-child(4), .goods-category .category-list li:nth-child(5){ border-top: 1px solid #e0e0e0; } .hot-brands{ border-bottom: 1px solid #e0e0e0; background: #fff; margin-top: 0.75rem; } .hot-brands .floor-header{ width: 100%; background: #f0f0f0; padding: 0 0.75rem; margin: 0; border: 0; } .hot-brands .floor-header h2{ border: 1px solid #e0e0e0; background: #fff; border-bottom: 0; } .hot-brands a{ display: block; text-decoration: none; height: 100%; } .hot-brands .brand{ float: left; width: 3.95rem; height: 4.35rem; border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; overflow: hidden; } .hot-brands .brand .brand-logo{ display: table-cell; width: 3.95rem; height: 3.2rem; line-height: 3.2rem; text-align: center; font-size: 0; vertical-align: middle; } .hot-brands .brand .brand-logo img{ max-width: 100%; max-height: 100%; } .hot-brands .brand .brand-name{ line-height: 1.1rem; font-size: 0.45rem; color: #babac2; text-align: center; text-decoration: none; border-bottom: none; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; } .hot-brands .brand:nth-child(5n){ border-right: none; } .hot-brands .more{ float: left; width: 7.925rem; height: 4.35rem; border-top: 1px solid #e0e0e0; } .hot-brands .more a{ display: block; width: 100%; height: 100%; background: url('../img/channel/more-brand.png') no-repeat; background-size: 100% 100%; } .brands-swiper{ background: #fff; width: 100%; height: 4rem; border-top: 1px solid #e0e0e0; overflow: hidden; } .brands-swiper .brands-list{ position: relative; height: 4rem; } .brands-swiper .brands-list li{ float: left; padding-left: 5%; width: 21.875%; height: 3.5rem; } .brands-swiper .brands-list li a{ position: relative; display: block; width: 100%; height: 100%; line-height: 3.5rem; font-size: 0; } .brands-swiper .brands-list li img{ display: inline-block; max-width: 100%; max-height: 100%; vertical-align: middle; } .brands-swiper .brands-list li .brands-title{ position: absolute; left: 0.2rem; right: 0.2rem; bottom: 0.2rem; height: 0.7rem; line-height: 0.7rem; text-align: center; font-size: 0.45rem; color: #444; background: rgba(255, 255, 255, 0.5); overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; } .hot-category{ margin: 0.75rem 0 0; border-bottom: 1px solid #e0e0e0; } .hot-category .category-banner{ height: 4.95rem; } .hot-category .category-banner img{ display: block; width: 100%; height: 4.95rem; } .hot-category .category-list{ background: #fff; } .hot-category .category-list li{ float: left; width: 4rem; height: 4.35rem; border-top: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; overflow: hidden; } .hot-category .category-list li .img-box{ width: 100%; height: 100%; line-height: 3.85rem; text-align: center; overflow: hidden; font-size: 0; } .hot-category .category-list li .img-box img{ vertical-align: middle; width: 100%; height: 100%; max-width: 100%; max-height: 100%; } .hot-category .category-list li .category-title{ line-height: 0.55rem; color: #aaa; font-size: 0.45rem; text-align: center; } .home-header{ height: 2.25rem; line-height: 2.25rem; background-image: linear-gradient(#323232, #414141); position: relative; } .home-header .iconfont{ color: #fff; } .home-header .nav-btn{ position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; padding: 0 0.8rem; } .home-header .logo{ display: block; margin: 0 auto; width: 5.2rem; height: 2.175rem; background: url('../img/channel/yohologo02.png') no-repeat center center; background-size: 100%; } .home-header .logo.animate{ background: url('../img/channel/yohologo01.png') no-repeat center center; background-size: 100%; } .home-header .search-btn{ position: absolute; right: 0; top: 0; width: 2.25rem; height: 2.25rem; text-align: center; } .home-header .search-btn a{ display: block; color: #fff; font-size: 20PX; line-height: 2.25rem; } .home-header .iconfont.highlight{ background: rgba(200, 200, 200, 0.4); } .girls-wrap .home-header{ background: #ff88ae; } .kids-wrap .home-header{ background: #7ad9f9; } .lifestyle-wrap .home-header{ background: #4f4138; } .kids-wrap .logo{ font-style: italic; font-family: "helvetica", "Arial", "榛戜綋"; font-weight: bold; color: #fff; } #thumb-row{ background-color: #f0f0f0; text-align: center; padding: 0.8rem 0 0; } #thumb-row .thumb-row-box{ display: inline-block; width: 6.875rem; height: 4rem; border-radius: 0.2rem; background-size: 100%; background-repeat: no-repeat; background-position: center; margin: 0 0.36rem; } .notice-wrap .trend{ position: relative; box-sizing: border-box; float: left; width: 4.25rem; height: 1.8rem; background-image: url(../img/sprite.channel.png); background-position: 0px -4.825rem; background-size: 8.05rem 7.375rem; background-color: #fff; } .notice-wrap .trend:after{ content: ''; position: absolute; right: 0; top: 0.4rem; width: 1px; height: 1rem; background: #eee; } .notice-wrap .notice{ box-sizing: border-box; float: left; padding: 0 0.75rem; background: #fff; width: 11.75rem; height: 1.8rem; overflow: hidden; } .notice-wrap .notice .notice-item{ display: block; width: 100%; font-size: 0.6rem; line-height: 1.8rem; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notice-wrap .notice .notice-icon{ display: inline-block; margin-right: 0.25rem; width: 0.7rem; height: 0.7rem; background-image: url(../img/sprite.channel.png); background-position: -7.375rem -4.65rem; background-size: 8.05rem 7.375rem; vertical-align: middle; } .notice-wrap .notice span.notice-icon{ background-repeat: no-repeat !important; } .fresh-swiper{ position: relative; overflow: hidden; } .fresh-swiper ul li{ float: left; width: 100%; } .fresh-swiper ul li a, .fresh-swiper ul li img{ display: block; width: 100%; height: 100%; } .fresh-swiper .swiper-pagination{ position: absolute; left: 0; right: 0; bottom: 0.5rem; text-align: center; } .fresh-swiper .swiper-pagination .pagination-inner{ display: inline-block; } .fresh-swiper .swiper-pagination .pagination-inner span{ display: inline-block; width: 0.35rem; height: 0.35rem; background: #fff; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; margin: 0 0.225rem; border-radius: 50%; } .fresh-swiper .swiper-pagination .pagination-inner span.swiper-active-switch{ opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .fresh-list-swiper{ overflow: hidden; padding-bottom: 0.375rem; background-color: #fff; height: 11.75rem; } .fresh-list-swiper ul{ box-sizing: border-box; } .fresh-list-swiper li{ float: left; width: 6rem; margin: 0.5rem 0.25rem 0; border: none; } .fresh-list-swiper li .img-box{ width: 100%; height: 8rem; overflow: hidden; text-align: center; position: relative; } .fresh-list-swiper li .img-box img{ width: 100%; height: 8rem; vertical-align: middle; border: none; outline: none; } .fresh-list-swiper li .fresh-info .fresh-name a{ display: block; overflow: hidden; text-overflow: ellipsis; width: 100%; white-space: nowrap; color: #444; line-height: 1.2rem; font-size: 0.55rem; } .fresh-list-swiper li .fresh-info .cur-price{ color: #d62927; font-size: 0.55rem; } .fresh-list-swiper li .fresh-info .old-price{ margin: 0 0 0 0.25rem; color: #b0b0b0; text-decoration: line-through; font-size: 0.55rem; } .fresh-list-swiper li .fresh-info .fresh-icon{ background: #d62927; width: 2.5rem; height: 0.825rem; display: block; margin: 0.2rem auto 0; color: #fff; text-align: center; border-radius: 1rem; line-height: 0.825rem; } .fresh-list-swiper li:first-child{ margin-left: 0.5rem; } .fresh-list-swiper li:last-child{ margin-right: 0.5rem; } .fresh-list{ position: relative; padding: 0.375rem 0 0 0.375rem; } .coupon-area-page{ max-width: 16rem; overflow: hidden; } .just-img{ width: 100%; float: left; margin: 0; } .coupon-floor{ float: left; width: 100%; } .coupon-floor .floor-title{ background-color: #fff; text-align: center; height: 2.4rem; line-height: 2.4rem; font-size: 0.75rem; } .coupon-floor .floor-main{ height: 4.5rem; width: 100%; background-size: 100%; background-repeat: no-repeat; padding: 0.25rem 0.75rem; box-sizing: border-box; float: left; } .coupon-floor .floor-main .main-left{ float: left; width: 11.675rem; height: 4rem; } .coupon-floor .floor-main .main-right-receive, .coupon-floor .floor-main .main-right-use, .coupon-floor .floor-main .main-right-go{ float: right; width: 2.825rem; height: 4rem; position: relative; } .coupon-floor .floor-main .main-right-receive span, .coupon-floor .floor-main .main-right-use span, .coupon-floor .floor-main .main-right-go span{ background-repeat: no-repeat; background-size: contain; } .coupon-floor .floor-main .main-right-receive span.on-receive, .coupon-floor .floor-main .main-right-use span.on-receive, .coupon-floor .floor-main .main-right-go span.on-receive{ position: absolute; left: 50%; top: 1.25rem; margin-left: -0.65rem; display: inline-block; width: 1.3rem; height: 1.35rem; background-image: url(../img/sprite.channel.png); background-position: -3.1rem -5.875rem; background-size: 8.05rem 7.375rem; } .coupon-floor .floor-main .main-right-receive span.received, .coupon-floor .floor-main .main-right-use span.received, .coupon-floor .floor-main .main-right-go span.received{ width: 2.825rem; height: 3.3rem; background-image: url(../img/sprite.channel.png); background-position: 0px -1.475rem; background-size: 8.05rem 7.375rem; position: absolute; top: 0; right: 0; } .coupon-floor .floor-main .main-right-receive span.zero, .coupon-floor .floor-main .main-right-use span.zero, .coupon-floor .floor-main .main-right-go span.zero{ width: 2.775rem; height: 3.3rem; background-image: url(../img/sprite.channel.png); background-position: -2.875rem -1.475rem; background-size: 8.05rem 7.375rem; position: absolute; top: 0; right: 0; } .floor-mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: none; z-index: 9; } .floor-message{ position: fixed; top: 50%; left: 50%; width: 13.75rem; height: 6.25rem; margin-left: -6.875rem; margin-top: -3.125rem; z-index: 10; background-color: rgba(250, 250, 250, 0.92); display: none; border-radius: 0.25rem; } .floor-message .coupon-message-content{ border-bottom: 1px solid rgb(197, 197, 197); height: 4rem; text-align: center; line-height: 4rem; font-size: 0.7rem; } .floor-message .coupon-message-op{ height: 2.25rem; text-align: center; line-height: 2.25rem; font-size: 0.8rem; color: rgb(223, 98, 112); } .floor-tooltip{ position: fixed; top: 50%; left: 50%; width: 5.5rem; height: 3.5rem; margin-left: -2.75rem; margin-top: -1.75rem; z-index: 11; background-color: rgba(60, 60, 60, 0.7); display: none; border-radius: 0.2rem; color: #fff; } .floor-tooltip .icon-box{ height: 2.1rem; line-height: 2.1rem; text-align: center; } .floor-tooltip .icon-msg{ height: 1.4rem; text-align: center; } .mobile-container{ margin-left: auto; margin-right: auto; width: 100%; max-width: 16rem; overflow: hidden; } .mobile-wrap{ position: relative; z-index: 2; background: #f0f0f0; transition: transform 0.3s; } .mobile-wrap.menu-open{ transform: translateX(13.5rem); } .overlay{ display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; z-index: 4; transition: opacity 1s; } .overlay.show{ display: block; opacity: 0.3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; } .break-code-page{ overflow: hidden; margin: 0 auto; max-width: 16rem; } .break-code-page .banner{ width: 16rem; } .break-code-page .banner img{ width: 100%; height: 100%; } .break-code-page .banner-swiper{ height: 5rem; } .break-code-page .banner-swiper ul{ height: 5rem; } .break-code-page .swiper-size{ display: none; box-sizing: border-box; padding: 0 0.55rem; width: 100%; height: 1.25rem; border-bottom: 1px solid #e6e6e6; background: #f0f0f0; color: #999; font-size: 0.7rem; line-height: 1.25rem; } .break-code-page .swiper-size ul{ width: 100%; height: 1.25rem; } .break-code-page .swiper-size li{ float: left; padding: 0 0.55rem; width: auto; white-space: nowrap; } .break-code-page .swiper-size li.active{ color: #000; } .break-code-page #list-nav > li{ width: 20%; font-size: 0.7rem; } /* &.active a { border-bottom: 4px solid #000; } */ .break-code-page #list-nav > li a{ display: block; margin: 0 auto; width: 2.65rem; } .goods-page .list-nav{ border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; } .goods-page .list-nav > li{ float: left; width: 25%; height: 1.65rem; text-align: center; font-size: 0.7rem; line-height: 1.65rem; } .goods-page .list-nav .bytouch{ background: #eee; } .goods-page .list-nav a{ display: block; box-sizing: border-box; width: 100%; height: 100%; color: #999; } .goods-page .list-nav .active > a{ color: #000; } .goods-page .list-nav .active > a .span-test{ display: inline-block; box-sizing: border-box; width: auto; height: 100%; } .goods-page .list-nav .active > a .iconfont{ color: #999; } .goods-page .list-nav .active > a .iconfont.cur{ color: #000; } .goods-page .list-nav .new .iconfont{ font-weight: bold; transform: scale(0.8); } .goods-page .list-nav .filter .iconfont{ font-size: 0.6rem; transition: transform 0.1 ease-in; } .goods-page .list-nav .filter.active .iconfont{ transform: rotate(-180deg); } .goods-page .list-nav .icon{ position: relative; } .goods-page .list-nav .icon i{ position: absolute; font-weight: bold; transform: scale(0.8); } .goods-page .list-nav .icon .up{ top: -0.55rem; } .goods-page .list-nav .icon .down{ top: -0.2rem; } .goods-page .no-result{ margin-top: 8rem; color: #ccc; vertical-align: middle; text-align: center; font-size: 1.2em; } .goods-page .goods-container{ position: relative; padding-top: 0.2rem; padding-left: 0.375rem; min-height: 22rem; } .sale-page{ overflow: hidden; background-color: #fff; } .sale-page .banner-top .swiper-container{ height: 5rem; } .sale-page .banner-top .swiper-container ul{ height: 5rem; } .sale-page #thumb-row{ overflow: hidden; padding-left: 0.75rem; height: auto; background: #fff; text-align: left; } .sale-page #thumb-row a{ float: left; margin-right: 0.75rem; width: 6.875rem; height: 3.25rem; } .sale-page #thumb-row .thumb-row-box{ margin: 0 auto; width: 100%; height: 100%; border-radius: 0.5rem; } .sale-vip-page .good-info{ height: 14.25rem; } .sale-vip-page .sale-vip{ height: 12.65rem; } .sale-vip-page .good-detail-text .price{ white-space: nowrap; } .sale-vip-page .banner-swiper{ height: 5rem; } .sale-vip-page .banner-swiper ul{ height: 5rem; } .discount-page{ overflow: hidden; height: auto; background: #f0f0f0; } .discount-page .special-list li{ margin-bottom: 0.75rem; background: #fff; } .discount-page .special-list img{ width: 100%; height: 6.25rem; } .discount-page .special-list .special-cont{ box-sizing: border-box; padding: 0 0.5rem; height: 1.925rem; border-bottom: 1px solid #e0e0e0; line-height: 1.925rem; } .discount-page .special-list .special-title{ float: left; overflow: hidden; width: 11.25rem; height: 1.925rem; text-overflow: ellipsis; white-space: nowrap; font-size: 0.6rem; } .discount-page .special-list .special-time{ float: right; font-size: 0.55rem; } .discount-page .special-list .red-color{ color: #d0021b; } .discount-detail-page .banner{ position: relative; overflow: hidden; height: auto; } .discount-detail-page .banner .activity-time{ position: absolute; bottom: 0; left: 0; z-index: 2; box-sizing: border-box; padding-right: 0.7rem; width: 100%; height: 1.25rem; background: rgba(0, 0, 0, 0.5); color: #fff; text-align: right; font-size: 0.55rem; line-height: 1.25rem; display: none; } .discount-detail-page .banner .activity-time .time-ico{ margin-right: 0.375rem; vertical-align: text-bottom; font-size: 0.65rem; } .discount-detail-page .banner .activity-time span{ vertical-align: super; } .good-detail-page{ overflow: hidden; background-color: #f0f0f0; } .good-detail-page .yoho-tip{ z-index: 4; } .good-detail-page .page-block{ box-sizing: border-box; margin-bottom: 0.75rem; padding: 0 0.7rem; width: 100%; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #fff; } .good-detail-page .page-block > .title{ border-bottom: 1px solid #e0e0e0; color: #444; font-size: 0.7rem; line-height: 2.2rem; } .good-detail-page .page-block > .title span{ color: #a0a0a0; font-size: 0.45rem; } .good-detail-page .page-block .pro-detail{ margin-top: 0.5rem; margin-bottom: 0.5rem; } .good-detail-page .page-block .detail{ margin-top: 0.5rem; margin-bottom: 0.5rem; font-size: 0.6rem; line-height: 0.9rem; } .good-detail-page .page-block .detail b{ font-weight: bold; } .good-detail-page .page-block .detail i{ font-style: italic; } .good-detail-page .page-block .detail.table{ width: 100%; } .good-detail-page .page-block .detail.table .js-wraper{ display: flex; flex-wrap: wrap; justify-content: flex-start; } .good-detail-page .page-block .detail.table .column{ display: flex; flex-basis: 49.9%; align-items: center; box-sizing: border-box; padding: 0.15rem 3%; width: 49.9%; border: 1px solid #fff; background-color: #eee; word-wrap: break-word; font-size: 0.6rem; } .good-detail-page .page-block .detail.table .oldbox{ float: left; overflow: hidden; box-sizing: border-box; padding: 0.15rem 3%; width: 49.9%; width: 49.9%; height: 100%; border: 1px solid #fff; background-color: #eee; text-overflow: ellipsis; white-space: nowrap; } .good-detail-page .my-swiper-button-prev, .good-detail-page .my-swiper-button-next{ position: absolute; top: 50%; margin-top: -1.1rem; width: 1.2rem; height: 1.2rem; color: #666; font-size: 1.2rem; cursor: pointer; } .good-detail-page .my-swiper-button-prev.swiper-button-disabled, .good-detail-page .my-swiper-button-next.swiper-button-disabled{ opacity: 0.3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; } .good-detail-page .next-grey{ right: 0.75rem; left: auto; } .good-detail-page .prev-grey{ right: auto; left: 0.75rem; } .good-detail-page .tag-container{ position: absolute; top: 1rem; left: 2.7rem; z-index: 2; height: 0.875rem; color: #fff; font-size: 0.5rem; line-height: 0.875rem; } .good-detail-page .tag-container .good-tag{ display: inline-block; box-sizing: border-box; margin-left: 0.5px; padding: 1px 0.125rem; text-align: center; font-size: 0.45rem; } .good-detail-page .tag-container .new-tag{ background-color: #78dc7e; color: #fff; } .good-detail-page .tag-container .renew-tag{ background-color: #78dc7e; color: #fff; } .good-detail-page .tag-container .sale-tag{ background-color: #ff575c; color: #fff; } .good-detail-page .tag-container .new-festival-tag{ background-color: #000; color: #fff; } .good-detail-page .tag-container .yohood-tag{ background-color: #000; color: #fff; } .good-detail-page .tag-container .limit-tag{ border: 1px solid #000; background-color: #fff; color: #000; } .good-detail-page .tag-container .soon-sold-out-tag{ background-color: #ffac5b; color: #fff; } .good-detail-page .banner-container{ position: relative; background-color: #fff; } .good-detail-page .banner-top-single{ overflow: hidden; margin: 0 auto; } .good-detail-page .banner-top-single img{ margin-top: 0.75rem; margin-bottom: 0.75rem; width: 11.2rem; } .good-detail-page .banner-top{ position: relative; overflow: hidden; min-height: 16.5rem; } .good-detail-page .banner-top .swiper-pagination{ position: absolute; bottom: 1rem; z-index: 2; } .good-detail-page .banner-top .swiper-pagination .pagination-inner span{ background-color: #b0b0b0; } .good-detail-page .banner-top .swiper-pagination .pagination-inner .swiper-pagination-bullet{ margin-right: 2PX; } .good-detail-page .banner-top .swiper-pagination .pagination-inner .swiper-pagination-bullet-active{ background-color: #000; } .good-detail-page .banner-swiper{ overflow: hidden; margin: 0.75rem 2.4rem; min-width: 11.2rem; min-height: 15rem; } .good-detail-page .banner-swiper ul{ position: relative; height: auto; } .good-detail-page .banner-swiper ul li{ float: left; } .good-detail-page .banner-swiper ul li img{ height: auto; } .good-detail-page .goods-name{ box-sizing: border-box; padding: 0.5rem 0.7rem; width: 100%; background-color: #515150; color: #fff; font-size: 0.7rem; line-height: 1.2rem; } .good-detail-page .goods-subtitle{ display: flex; align-items: center; padding-right: 0.7rem; padding-left: 0.7rem; height: 2.2rem; border-bottom: 1px solid #e0e0e0; background-color: #f0f0f0; color: #b0b0b0; font-size: 0.6rem; } .good-detail-page .goods-subtitle span{ display: -webkit-box; overflow: hidden; margin: 0; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; line-height: 0.9rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .good-detail-page .price-date{ position: relative; padding-right: 0.7rem; padding-left: 0.7rem; width: 100%; height: 2.2rem; border-bottom: 1px solid #e0e0e0; background-color: #fff; color: #b0b0b0; } .good-detail-page .limit-sale{ position: absolute; top: 50%; right: 2.1rem; margin-top: -0.6rem; padding: 0.1rem 0.5rem; height: 1.2rem; border: 2PX solid #d0021b; border-radius: 1rem; background-color: #fff; color: #d0021b; font-weight: bold; font-size: 0.6rem; } .good-detail-page .limit-sale:active{ background-color: #f0f0f0; } .good-detail-page .got-limit-sale{ position: absolute; top: 0.6rem; right: 2.1rem; padding: 0.1rem 0.5rem; border: 0.05rem solid #d0021b; border-color: #ccc; border-radius: 1rem; background-color: #fff; color: #d0021b; color: #ccc; font-weight: bold; font-size: 0.6rem; } .good-detail-page .goods-price{ float: left; font-size: 0.86475rem; } .good-detail-page .goods-price h1{ display: inline-block; line-height: 2.2rem; } .good-detail-page .goods-price .current-price{ margin-right: 0.25rem; color: #d0021b; } .good-detail-page .goods-price .previous-price{ text-decoration: line-through; } .good-detail-page .period-of-market{ float: right; margin-right: 1.4rem; color: #d0021b; font-size: 0.6rem; } .good-detail-page .period-of-market h1{ display: inline-block; line-height: 2.2rem; } .good-detail-page .vip-level{ box-sizing: box-border; padding-right: 0.7rem; padding-left: 0.7rem; min-height: 2.2rem; border-bottom: 1px solid #e0e0e0; background-color: #fff; color: #999; font-size: 0.55rem; } .good-detail-page .vip-level .icons-item{ float: left; margin: 0; width: 33.3%; height: 2.2rem; } .good-detail-page .vip-level .icons-item span{ display: inline-block; padding-left: 0.2rem; vertical-align: middle; line-height: 2.2rem; } .good-detail-page .vip-level .icons-item .vip-img{ width: 1.325rem; height: 0.8rem; } .good-detail-page .vip-level .icons-item.current-level .vip-price{ color: #d0021b; } .good-detail-page .vip-level .icons-item:nth-child(1){ text-align: left; } .good-detail-page .vip-level .icons-item:nth-child(1) .vip-img{ background: url('../img/product/silver.png') no-repeat; } .good-detail-page .vip-level .icons-item:nth-child(2) .vip-img{ background: url('../img/product/golden.png') no-repeat; } .good-detail-page .vip-level .icons-item:nth-child(3){ text-align: right; } .good-detail-page .vip-level .icons-item:nth-child(3) .vip-img{ background: url('../img/product/platinum.png') no-repeat; } .good-detail-page .goods-discount{ display: block; width: 100%; height: auto; border-bottom: 1px solid #e0e0e0; background-color: #fff; color: #444; font-size: 0.7rem; } .good-detail-page .goods-discount h1{ position: relative; padding: 0.75rem 1.5rem 0.75rem 0.7rem; line-height: 0.9rem; } .good-detail-page .goods-discount .short-text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .good-detail-page .goods-discount .iconfont{ position: absolute; top: 0.75rem; right: 0.9rem; width: 0.875rem; color: #e0e0e0; font-size: 1.125rem; } .good-detail-page .goods-discount .discount-folder{ display: none; } .good-detail-page .goods-discount .discount-folder .folder-item{ border-top: 1px solid #e0e0e0; } .good-detail-page .enter-store{ position: relative; overflow: hidden; padding: 0 4.5rem 0 2.85rem; background-color: #fff; text-overflow: ellipsis; white-space: nowrap; line-height: 2.1rem; } .good-detail-page .enter-store .store-logo{ position: absolute; top: 1px; left: 0; margin-left: 0.75rem; width: 1.7rem; height: 2.1rem; text-align: center; font-size: 0; } .good-detail-page .enter-store .store-logo img{ display: inline-block; width: auto; height: 1.7rem; vertical-align: middle; } .good-detail-page .enter-store .store-name{ color: #444; font-size: 0.85rem; } .good-detail-page .enter-store .store-link{ position: absolute; top: 1px; right: 0; padding-right: 0.75rem; color: #b0b0b0; text-align: right; font-size: 0.7rem; } .good-detail-page .enter-store .store-link span{ font-size: inherit; } /* 底部固定栏 */ .good-detail-page .cart-bar{ position: relative; position: fixed; bottom: 0; z-index: 2; box-sizing: border-box; padding: 0.5rem 0.7rem; width: 100%; height: 3rem; border-top: 1px solid #e0e0e0; background-color: #fff; text-align: center; } .good-detail-page .cart-bar a{ display: inline-block; } .good-detail-page .cart-bar a.num-incart{ color: #444; font-size: 1.175rem; } .good-detail-page .cart-bar a.favorite{ color: #ccc; font-size: 0.85rem; } .good-detail-page .cart-bar a.favorite.liked{ color: #eb0313; } .good-detail-page .cart-bar a.addto-cart, .good-detail-page .cart-bar a.sold-out{ margin: 0 2.5rem 0 2.875rem; width: 6.5rem; height: 2rem; background-color: #eb0313; color: #fff; text-align: center; font-size: 0.8rem; line-height: 2rem; } .good-detail-page .cart-bar a.sold-out{ background-color: #f58189; } .good-detail-page .cart-bar .num-tag{ position: absolute; top: 0; left: 1.2rem; display: block; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #eb0313; color: #fff; text-align: center; font-size: 1rem; line-height: 1.8rem; transform: scale(0.5); } .good-detail-page .cart-bar .num-tag.hide{ display: none; } .good-detail-page .recommend-for-you{ border-bottom: none; } .good-detail-page .yoho-tip{ top: 40%; } .goods-comments-page .goods-comments .comment-item{ padding: 0 0.7rem; border-bottom: 1px solid #e0e0e0; } .goods-comments-page .goods-comments .comment-item .user-name{ display: inline-block; overflow: hidden; max-width: 9rem; color: #444; text-overflow: ellipsis; white-space: nowrap; font-size: 0.6rem; line-height: 1.55rem; } .goods-comments-page .goods-comments .comment-item .goods-spec, .goods-comments-page .goods-comments .comment-item .comment-time{ font-size: 0.6rem; line-height: 1.55rem; } .goods-comments-page .goods-comments .comment-item .detail-content{ color: #444; font-size: 0.6rem; line-height: 1.55rem; } .goods-comments-page .goods-comments .comment-item .goods-spec, .goods-comments-page .goods-comments .comment-item .comment-time{ font-size: 0.6rem; line-height: 1.55rem; } .goods-comments-page .goods-comments .comment-item .detail-content{ font-size: 0.7rem; line-height: 0.9rem; } .goods-comments-page .goods-comments .comment-item .goods-spec, .goods-comments-page .goods-comments .comment-item .detail-content{ color: #444; } .goods-comments-page .goods-comments .comment-item .comment-time{ color: #c1c1c1; } .goods-consults-page{ background-color: #f0f0f0; } .goods-consults-page .goto-consult{ position: fixed; top: 2.25rem; z-index: 10; box-sizing: border-box; padding: 0 0.7rem; width: 100%; height: 3rem; border-bottom: 1px solid #e0e0e0; background-color: #fff; } .goods-consults-page .goto-consult i, .goods-consults-page .goto-consult span, .goods-consults-page .goto-consult a{ color: #444; font-size: 0.7rem; line-height: 3rem; } .goods-consults-page .goto-consult .consult-logo{ padding-right: 0.375rem; } .goods-consults-page .goto-consult .enter-consult-page{ float: right; color: #b0b0b0; } .goods-consults-page .goods-consults.customer-consults .consult-item:nth-child(1){ display: block; } .goods-consults-page .goods-consults.customer-consults .consult-item:nth-child(2){ display: block; } .goods-consults-page .goods-consults.customer-consults .consult-item{ display: none; } .goods-consults-page .goods-consults{ margin-top: 0.75rem; padding: 0.5rem 0.7rem; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #fff; overflow: hidden; margin-top: 5.25rem; } .goods-consults-page .goods-consults .question{ color: #444; font-size: 0.6rem; } .goods-consults-page .goods-consults .question span{ display: block; float: left; padding-right: 0.375rem; } .goods-consults-page .goods-consults .question p{ overflow: hidden; padding-bottom: 0.375rem; border-bottom: 1px solid #e0e0e0; } .goods-consults-page .goods-consults .time{ color: #b0b0b0; font-size: 0.55rem; } .goods-consults-page .goods-consults .answer{ margin-top: 0.35rem; color: #b0b0b0; font-size: 0.6rem; line-height: 0.9rem; } .goods-consults-page .goods-consults .answer span{ display: block; float: left; padding-right: 0.375rem; color: #444; } .goods-consults-page .goods-consults .answer p{ overflow: hidden; } .goods-consults-page .goods-consults .operation{ position: relative; right: 12%; margin-top: 0.5rem; width: 120%; height: 1.5rem; border-top: 1px solid #e0e0e0; line-height: 2rem; } .goods-consults-page .goods-consults .operation li{ position: relative; float: left; width: 50%; color: #b0b0b0; text-align: center; font-size: 0.7rem; } .goods-consults-page .goods-consults .operation li .iconfont{ display: inline-block; padding-right: 5PX; font-size: inherit; } .goods-consults-page .goods-consults .operation li .animate-count{ position: absolute; top: 0; z-index: 5; display: none; font-size: 0.5rem; } .goods-consults-page .goods-consults .operation li i.count{ position: absolute; } .goods-consults-page .goods-consults .operation li.highlight{ color: #eb0313; } .goods-consults-page .goods-consults .operation li.fav .animate-count{ right: 2.5rem; } .goods-consults-page .goods-consults .operation li.useful .animate-count{ right: 2.2rem; } .goods-consults-page .readmore{ display: block; margin-top: 0.75rem; height: 2.2rem; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #fff; color: #b0b0b0; text-align: center; font-size: 0.7rem; line-height: 2.2rem; } .goods-consults-page .readmore i{ font-size: inherit; } .goods-consults-page .faq-title{ height: 2.2rem; text-align: center; font-size: 0.8rem; line-height: 2.2rem; } .goods-consults-page .goods-consults .faq-item{ margin-top: 0.75rem; padding: 0.5rem 0.7rem; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #fff; margin-top: 0; margin-bottom: 0.75rem; } .goods-consults-page .goods-consults .faq-item .question{ color: #444; font-size: 0.6rem; } .goods-consults-page .goods-consults .faq-item .question span{ display: block; float: left; padding-right: 0.375rem; } .goods-consults-page .goods-consults .faq-item .question p{ overflow: hidden; padding-bottom: 0.375rem; border-bottom: 1px solid #e0e0e0; } .goods-consults-page .goods-consults .faq-item .time{ color: #b0b0b0; font-size: 0.55rem; } .goods-consults-page .goods-consults .faq-item .answer{ margin-top: 0.35rem; color: #b0b0b0; font-size: 0.6rem; line-height: 0.9rem; } .goods-consults-page .goods-consults .faq-item .answer span{ display: block; float: left; padding-right: 0.375rem; color: #444; } .goods-consults-page .goods-consults .faq-item .answer p{ overflow: hidden; } .goods-consults-page .goods-consults .faq-item .operation{ position: relative; right: 12%; margin-top: 0.5rem; width: 120%; height: 1.5rem; border-top: 1px solid #e0e0e0; line-height: 2rem; } .goods-consults-page .goods-consults .faq-item .operation li{ position: relative; float: left; width: 50%; color: #b0b0b0; text-align: center; font-size: 0.7rem; } .goods-consults-page .goods-consults .faq-item .operation li .iconfont{ display: inline-block; padding-right: 5PX; font-size: inherit; } .goods-consults-page .goods-consults .faq-item .operation li .animate-count{ position: absolute; top: 0; z-index: 5; display: none; font-size: 0.5rem; } .goods-consults-page .goods-consults .faq-item .operation li i.count{ position: absolute; } .goods-consults-page .goods-consults .faq-item .operation li.highlight{ color: #eb0313; } .goods-consults-page .goods-consults .faq-item .operation li.fav .animate-count{ right: 2.5rem; } .goods-consults-page .goods-consults .faq-item .operation li.useful .animate-count{ right: 2.2rem; } .goods-consults-page .goods-consults .faq-item .answer{ border-bottom: none; } .consult-form-page{ padding: 0.7rem; text-align: center; } .consult-form-page textarea{ box-sizing: border-box; padding: 0.25rem; width: 100%; height: 10rem; color: #444; font-size: 0.7rem; } .consult-form-page a{ display: inline-block; margin-top: 0.5rem; width: 9rem; height: 2rem; background-color: #444; color: #fff; text-align: center; font-size: 1rem; line-height: 2rem; } .good-detail-page .feedback-list{ margin-bottom: 0.75rem; padding-top: 0.75rem; background-color: #f0f0f0; } .good-detail-page .feedback-list .nav-tab{ padding: 0.25rem 0; width: 100%; height: 1.5rem; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #fff; } .good-detail-page .feedback-list .comment-nav, .good-detail-page .feedback-list .consult-nav{ float: left; box-sizing: border-box; width: 50%; height: 1.5rem; color: #b0b0b0; text-align: center; font-size: 0.7rem; line-height: 1.5rem; } .good-detail-page .feedback-list .comment-nav.focus, .good-detail-page .feedback-list .consult-nav.focus{ color: #000; } .good-detail-page .feedback-list .comment-nav{ border-right: 1px solid #ccc; } .good-detail-page .feedback-list .content .content-main{ border-bottom: 1px solid #e0e0e0; background-color: #fff; } .good-detail-page .feedback-list .content .content-main.comment-content-main .user-name{ padding-right: 0.45rem; padding-left: 0.7rem; color: #444; font-size: 0.6rem; line-height: 1.55rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .goods-spec, .good-detail-page .feedback-list .content .content-main.comment-content-main .comment-time{ font-size: 0.6rem; line-height: 1.55rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content{ padding-right: 0.45rem; padding-left: 0.7rem; color: #444; font-size: 0.6rem; line-height: 1.55rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .goods-spec, .good-detail-page .feedback-list .content .content-main.comment-content-main .comment-time{ font-size: 0.6rem; line-height: 1.55rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content{ font-size: 0.7rem; line-height: 0.9rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .goods-spec, .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content{ color: #444; } .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content, .good-detail-page .feedback-list .content .content-main.comment-content-main .comment-time{ padding-left: 0.7rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content{ padding-right: 0.7rem; padding-left: 0.7rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content{ padding-right: 0.7rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .comment-time{ color: #c1c1c1; } .good-detail-page .feedback-list .content .content-main.consult-content-main{ padding-top: 0.5rem; padding-right: 0.7rem; padding-bottom: 0.5rem; padding-left: 0.7rem; } .good-detail-page .feedback-list .content .content-main.consult-content-main .question{ color: #444; font-size: 0.6rem; } .good-detail-page .feedback-list .content .content-main.consult-content-main .question span{ display: block; float: left; padding-right: 0.375rem; font-size: inherit; } .good-detail-page .feedback-list .content .content-main.consult-content-main .question p{ overflow: hidden; } .good-detail-page .feedback-list .content .content-main.consult-content-main .time{ color: #b0b0b0; font-size: 0.55rem; } .good-detail-page .feedback-list .content .content-main.consult-content-main .answer{ margin-top: 0.35rem; color: #b0b0b0; font-size: 0.6rem; line-height: 0.9rem; } .good-detail-page .feedback-list .content .content-main.consult-content-main .answer span{ display: block; float: left; padding-right: 0.375rem; color: #444; font-size: inherit; } .good-detail-page .feedback-list .content .content-main.consult-content-main .answer p{ overflow: hidden; } .good-detail-page .feedback-list .content .content-main.no-item{ height: 5rem; color: #e0e0e0; text-align: center; font-size: 16PX; line-height: 5rem; } .good-detail-page .feedback-list .content .content-main.no-item span{ display: inline-block; padding-right: 5PX; font-size: 16PX; } .good-detail-page .feedback-list .comment-content-footer, .good-detail-page .feedback-list .consult-content-footer{ display: block; min-height: 2.2rem; border-bottom: 1px solid #e0e0e0; background-color: #fff; color: #b0b0b0; text-align: center; font-size: 0.7rem; line-height: 2.2rem; } .good-detail-page .feedback-list .comment-content-footer .iconfont, .good-detail-page .feedback-list .consult-content-footer .iconfont{ font-size: inherit; } .good-detail-page .feedback-list .content.hide{ display: none; } .good-detail-page .feedback-list .nodata{ padding: 0 0.7rem; height: 2.2rem; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #fff; font-size: 0.7rem; line-height: 2.2rem; } .good-detail-page .feedback-list .nodata .go-consult{ float: right; color: #b0b0b0; } .good-detail-page .feedback-list .nodata .go-consult span{ font-size: 0.7rem; } .good-detail-page .goods-desc{ padding-top: 0.5rem; padding-bottom: 0.5rem; } .good-detail-page .goods-desc .service{ margin-left: 1.25rem; width: 12.35rem; height: 0.7rem; background: url('../img/product/service.png') no-repeat; background-size: cover; } .good-detail-page .goods-desc .detail{ margin-bottom: 1px; } .good-detail-page .goods-desc .desc-text{ padding: 0.4rem 0.3rem; background-color: #eee; color: #444; font-size: 0.6rem; } .good-detail-page .tips{ margin-top: 0.5rem; color: #b0b0b0; font-size: 0.45rem; } .good-detail-page .materials{ overflow: hidden; } .good-detail-page .materials .detail .material-item{ position: relative; display: block; overflow: hidden; margin: 0.25rem 0; width: 100%; height: auto; } .good-detail-page .materials .detail .material-item img{ margin: 0; } .good-detail-page .materials .detail .material-item .material-image{ position: absolute; top: 50%; left: 0; width: 23%; transform: translateY(-50%); } .good-detail-page .materials .detail .material-item .material-desc{ float: right; box-sizing: border-box; padding-left: 2%; width: 76.9%; height: auto; color: #4b4b4b; text-align: left; word-wrap: break-word; font-size: 0.6rem; line-height: 0.95rem; } .good-detail-page .materials .detail .material-item:last-child{ border-bottom: none; } .good-detail-page .materials.page-block{ margin-bottom: 0; border-bottom: none; } .good-detail-page .materials.page-block .detail{ margin-bottom: 0; } .good-detail-page .wash-tips{ padding-top: 0.5rem; } .good-detail-page .wash-tips .tip{ display: inline-block; width: 16.6%; } .good-detail-page .wash-tips .tip img{ margin-bottom: 0.25rem; width: 1.2rem; height: 1.2rem; } .good-detail-page .wash-tips .tip .caption{ display: block; padding: 0 0.325rem; min-height: 1.1rem; text-align: center; font-size: 0.45rem; line-height: 0.55rem; } .good-detail-page .wash-tips.page-block{ padding-right: 0.375rem; padding-left: 0.375rem; } .good-detail-page .product-detail{ margin-top: 0.75rem; margin-bottom: 0.75rem; } .good-detail-page .product-detail .detail img{ margin-top: 0.5rem; width: 14.525rem; height: auto; } .good-detail-page .product-detail .detail a{ color: #2f91f6; text-decoration: underline; } .good-detail-page .detail-swiper .swiper-wrapper .swiper-slide{ width: auto; } .good-detail-page .detail-swiper .swiper-wrapper .swiper-slide div{ text-align: center; } .good-detail-page .detail-swiper .swiper-wrapper .swiper-slide div.cell{ padding: 0 1rem; border: 1px solid #fff; background-color: #eee; font-size: 0.6rem; line-height: 1.325rem; } /* 模特 */ .good-detail-page #reference-swiper-container .first-group{ margin-top: 1.375rem; width: 1.75rem; } .good-detail-page #reference-swiper-container .first-group div{ height: 1.375rem; } .good-detail-page #reference-swiper-container .first-group div .avatar{ display: inline-block; margin-top: 0.175rem; width: 1rem; border-radius: 50%; } /* 测量方法 */ .good-detail-page .measurement-method .detail{ margin-top: 0; margin-bottom: 0; width: 100%; } .good-detail-page .measurement-method .detail img{ width: 100%; height: auto; } .goods-comments-page .goods-comments .comment-item{ padding: 0 0.7rem; border-bottom: 1px solid #e0e0e0; } .goods-comments-page .goods-comments .comment-item .user-name{ display: inline-block; overflow: hidden; max-width: 9rem; color: #444; text-overflow: ellipsis; white-space: nowrap; font-size: 0.6rem; line-height: 1.55rem; } .goods-comments-page .goods-comments .comment-item .goods-spec, .goods-comments-page .goods-comments .comment-item .comment-time{ font-size: 0.6rem; line-height: 1.55rem; } .goods-comments-page .goods-comments .comment-item .detail-content{ color: #444; font-size: 0.6rem; line-height: 1.55rem; } .goods-comments-page .goods-comments .comment-item .goods-spec, .goods-comments-page .goods-comments .comment-item .comment-time{ font-size: 0.6rem; line-height: 1.55rem; } .goods-comments-page .goods-comments .comment-item .detail-content{ font-size: 0.7rem; line-height: 0.9rem; } .goods-comments-page .goods-comments .comment-item .goods-spec, .goods-comments-page .goods-comments .comment-item .detail-content{ color: #444; } .goods-comments-page .goods-comments .comment-item .comment-time{ color: #c1c1c1; } .goods-consults-page{ background-color: #f0f0f0; } .goods-consults-page .goto-consult{ position: fixed; top: 2.25rem; z-index: 10; box-sizing: border-box; padding: 0 0.7rem; width: 100%; height: 3rem; border-bottom: 1px solid #e0e0e0; background-color: #fff; } .goods-consults-page .goto-consult i, .goods-consults-page .goto-consult span, .goods-consults-page .goto-consult a{ color: #444; font-size: 0.7rem; line-height: 3rem; } .goods-consults-page .goto-consult .consult-logo{ padding-right: 0.375rem; } .goods-consults-page .goto-consult .enter-consult-page{ float: right; color: #b0b0b0; } .goods-consults-page .goods-consults.customer-consults .consult-item:nth-child(1){ display: block; } .goods-consults-page .goods-consults.customer-consults .consult-item:nth-child(2){ display: block; } .goods-consults-page .goods-consults.customer-consults .consult-item{ display: none; } .goods-consults-page .goods-consults{ margin-top: 0.75rem; padding: 0.5rem 0.7rem; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #fff; overflow: hidden; margin-top: 5.25rem; } .goods-consults-page .goods-consults .question{ color: #444; font-size: 0.6rem; } .goods-consults-page .goods-consults .question span{ display: block; float: left; padding-right: 0.375rem; } .goods-consults-page .goods-consults .question p{ overflow: hidden; padding-bottom: 0.375rem; border-bottom: 1px solid #e0e0e0; } .goods-consults-page .goods-consults .time{ color: #b0b0b0; font-size: 0.55rem; } .goods-consults-page .goods-consults .answer{ margin-top: 0.35rem; color: #b0b0b0; font-size: 0.6rem; line-height: 0.9rem; } .goods-consults-page .goods-consults .answer span{ display: block; float: left; padding-right: 0.375rem; color: #444; } .goods-consults-page .goods-consults .answer p{ overflow: hidden; } .goods-consults-page .goods-consults .operation{ position: relative; right: 12%; margin-top: 0.5rem; width: 120%; height: 1.5rem; border-top: 1px solid #e0e0e0; line-height: 2rem; } .goods-consults-page .goods-consults .operation li{ position: relative; float: left; width: 50%; color: #b0b0b0; text-align: center; font-size: 0.7rem; } .goods-consults-page .goods-consults .operation li .iconfont{ display: inline-block; padding-right: 5PX; font-size: inherit; } .goods-consults-page .goods-consults .operation li .animate-count{ position: absolute; top: 0; z-index: 5; display: none; font-size: 0.5rem; } .goods-consults-page .goods-consults .operation li i.count{ position: absolute; } .goods-consults-page .goods-consults .operation li.highlight{ color: #eb0313; } .goods-consults-page .goods-consults .operation li.fav .animate-count{ right: 2.5rem; } .goods-consults-page .goods-consults .operation li.useful .animate-count{ right: 2.2rem; } .goods-consults-page .readmore{ display: block; margin-top: 0.75rem; height: 2.2rem; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #fff; color: #b0b0b0; text-align: center; font-size: 0.7rem; line-height: 2.2rem; } .goods-consults-page .readmore i{ font-size: inherit; } .goods-consults-page .faq-title{ height: 2.2rem; text-align: center; font-size: 0.8rem; line-height: 2.2rem; } .goods-consults-page .goods-consults .faq-item{ margin-top: 0.75rem; padding: 0.5rem 0.7rem; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #fff; margin-top: 0; margin-bottom: 0.75rem; } .goods-consults-page .goods-consults .faq-item .question{ color: #444; font-size: 0.6rem; } .goods-consults-page .goods-consults .faq-item .question span{ display: block; float: left; padding-right: 0.375rem; } .goods-consults-page .goods-consults .faq-item .question p{ overflow: hidden; padding-bottom: 0.375rem; border-bottom: 1px solid #e0e0e0; } .goods-consults-page .goods-consults .faq-item .time{ color: #b0b0b0; font-size: 0.55rem; } .goods-consults-page .goods-consults .faq-item .answer{ margin-top: 0.35rem; color: #b0b0b0; font-size: 0.6rem; line-height: 0.9rem; } .goods-consults-page .goods-consults .faq-item .answer span{ display: block; float: left; padding-right: 0.375rem; color: #444; } .goods-consults-page .goods-consults .faq-item .answer p{ overflow: hidden; } .goods-consults-page .goods-consults .faq-item .operation{ position: relative; right: 12%; margin-top: 0.5rem; width: 120%; height: 1.5rem; border-top: 1px solid #e0e0e0; line-height: 2rem; } .goods-consults-page .goods-consults .faq-item .operation li{ position: relative; float: left; width: 50%; color: #b0b0b0; text-align: center; font-size: 0.7rem; } .goods-consults-page .goods-consults .faq-item .operation li .iconfont{ display: inline-block; padding-right: 5PX; font-size: inherit; } .goods-consults-page .goods-consults .faq-item .operation li .animate-count{ position: absolute; top: 0; z-index: 5; display: none; font-size: 0.5rem; } .goods-consults-page .goods-consults .faq-item .operation li i.count{ position: absolute; } .goods-consults-page .goods-consults .faq-item .operation li.highlight{ color: #eb0313; } .goods-consults-page .goods-consults .faq-item .operation li.fav .animate-count{ right: 2.5rem; } .goods-consults-page .goods-consults .faq-item .operation li.useful .animate-count{ right: 2.2rem; } .goods-consults-page .goods-consults .faq-item .answer{ border-bottom: none; } .consult-form-page{ padding: 0.7rem; text-align: center; } .consult-form-page textarea{ box-sizing: border-box; padding: 0.25rem; width: 100%; height: 10rem; color: #444; font-size: 0.7rem; } .consult-form-page a{ display: inline-block; margin-top: 0.5rem; width: 9rem; height: 2rem; background-color: #444; color: #fff; text-align: center; font-size: 1rem; line-height: 2rem; } .good-detail-page .feedback-list{ margin-bottom: 0.75rem; padding-top: 0.75rem; background-color: #f0f0f0; } .good-detail-page .feedback-list .nav-tab{ padding: 0.25rem 0; width: 100%; height: 1.5rem; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #fff; } .good-detail-page .feedback-list .comment-nav, .good-detail-page .feedback-list .consult-nav{ float: left; box-sizing: border-box; width: 50%; height: 1.5rem; color: #b0b0b0; text-align: center; font-size: 0.7rem; line-height: 1.5rem; } .good-detail-page .feedback-list .comment-nav.focus, .good-detail-page .feedback-list .consult-nav.focus{ color: #000; } .good-detail-page .feedback-list .comment-nav{ border-right: 1px solid #ccc; } .good-detail-page .feedback-list .content .content-main{ border-bottom: 1px solid #e0e0e0; background-color: #fff; } .good-detail-page .feedback-list .content .content-main.comment-content-main .user-name{ padding-right: 0.45rem; padding-left: 0.7rem; color: #444; font-size: 0.6rem; line-height: 1.55rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .goods-spec, .good-detail-page .feedback-list .content .content-main.comment-content-main .comment-time{ font-size: 0.6rem; line-height: 1.55rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content{ padding-right: 0.45rem; padding-left: 0.7rem; color: #444; font-size: 0.6rem; line-height: 1.55rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .goods-spec, .good-detail-page .feedback-list .content .content-main.comment-content-main .comment-time{ font-size: 0.6rem; line-height: 1.55rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content{ font-size: 0.7rem; line-height: 0.9rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .goods-spec, .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content{ color: #444; } .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content, .good-detail-page .feedback-list .content .content-main.comment-content-main .comment-time{ padding-left: 0.7rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content{ padding-right: 0.7rem; padding-left: 0.7rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content{ padding-right: 0.7rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .comment-time{ color: #c1c1c1; } .good-detail-page .feedback-list .content .content-main.consult-content-main{ padding-top: 0.5rem; padding-right: 0.7rem; padding-bottom: 0.5rem; padding-left: 0.7rem; } .good-detail-page .feedback-list .content .content-main.consult-content-main .question{ color: #444; font-size: 0.6rem; } .good-detail-page .feedback-list .content .content-main.consult-content-main .question span{ display: block; float: left; padding-right: 0.375rem; font-size: inherit; } .good-detail-page .feedback-list .content .content-main.consult-content-main .question p{ overflow: hidden; } .good-detail-page .feedback-list .content .content-main.consult-content-main .time{ color: #b0b0b0; font-size: 0.55rem; } .good-detail-page .feedback-list .content .content-main.consult-content-main .answer{ margin-top: 0.35rem; color: #b0b0b0; font-size: 0.6rem; line-height: 0.9rem; } .good-detail-page .feedback-list .content .content-main.consult-content-main .answer span{ display: block; float: left; padding-right: 0.375rem; color: #444; font-size: inherit; } .good-detail-page .feedback-list .content .content-main.consult-content-main .answer p{ overflow: hidden; } .good-detail-page .feedback-list .content .content-main.no-item{ height: 5rem; color: #e0e0e0; text-align: center; font-size: 16PX; line-height: 5rem; } .good-detail-page .feedback-list .content .content-main.no-item span{ display: inline-block; padding-right: 5PX; font-size: 16PX; } .good-detail-page .feedback-list .comment-content-footer, .good-detail-page .feedback-list .consult-content-footer{ display: block; min-height: 2.2rem; border-bottom: 1px solid #e0e0e0; background-color: #fff; color: #b0b0b0; text-align: center; font-size: 0.7rem; line-height: 2.2rem; } .good-detail-page .feedback-list .comment-content-footer .iconfont, .good-detail-page .feedback-list .consult-content-footer .iconfont{ font-size: inherit; } .good-detail-page .feedback-list .content.hide{ display: none; } .good-detail-page .feedback-list .nodata{ padding: 0 0.7rem; height: 2.2rem; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #fff; font-size: 0.7rem; line-height: 2.2rem; } .good-detail-page .feedback-list .nodata .go-consult{ float: right; color: #b0b0b0; } .good-detail-page .feedback-list .nodata .go-consult span{ font-size: 0.7rem; } .goods-comments-page .goods-comments .comment-item{ padding: 0 0.7rem; border-bottom: 1px solid #e0e0e0; } .goods-comments-page .goods-comments .comment-item .user-name{ display: inline-block; overflow: hidden; max-width: 9rem; color: #444; text-overflow: ellipsis; white-space: nowrap; font-size: 0.6rem; line-height: 1.55rem; } .goods-comments-page .goods-comments .comment-item .goods-spec, .goods-comments-page .goods-comments .comment-item .comment-time{ font-size: 0.6rem; line-height: 1.55rem; } .goods-comments-page .goods-comments .comment-item .detail-content{ color: #444; font-size: 0.6rem; line-height: 1.55rem; } .goods-comments-page .goods-comments .comment-item .goods-spec, .goods-comments-page .goods-comments .comment-item .comment-time{ font-size: 0.6rem; line-height: 1.55rem; } .goods-comments-page .goods-comments .comment-item .detail-content{ font-size: 0.7rem; line-height: 0.9rem; } .goods-comments-page .goods-comments .comment-item .goods-spec, .goods-comments-page .goods-comments .comment-item .detail-content{ color: #444; } .goods-comments-page .goods-comments .comment-item .comment-time{ color: #c1c1c1; } .goods-consults-page{ background-color: #f0f0f0; } .goods-consults-page .goto-consult{ position: fixed; top: 2.25rem; z-index: 10; box-sizing: border-box; padding: 0 0.7rem; width: 100%; height: 3rem; border-bottom: 1px solid #e0e0e0; background-color: #fff; } .goods-consults-page .goto-consult i, .goods-consults-page .goto-consult span, .goods-consults-page .goto-consult a{ color: #444; font-size: 0.7rem; line-height: 3rem; } .goods-consults-page .goto-consult .consult-logo{ padding-right: 0.375rem; } .goods-consults-page .goto-consult .enter-consult-page{ float: right; color: #b0b0b0; } .goods-consults-page .goods-consults.customer-consults .consult-item:nth-child(1){ display: block; } .goods-consults-page .goods-consults.customer-consults .consult-item:nth-child(2){ display: block; } .goods-consults-page .goods-consults.customer-consults .consult-item{ display: none; } .goods-consults-page .goods-consults{ margin-top: 0.75rem; padding: 0.5rem 0.7rem; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #fff; overflow: hidden; margin-top: 5.25rem; } .goods-consults-page .goods-consults .question{ color: #444; font-size: 0.6rem; } .goods-consults-page .goods-consults .question span{ display: block; float: left; padding-right: 0.375rem; } .goods-consults-page .goods-consults .question p{ overflow: hidden; padding-bottom: 0.375rem; border-bottom: 1px solid #e0e0e0; } .goods-consults-page .goods-consults .time{ color: #b0b0b0; font-size: 0.55rem; } .goods-consults-page .goods-consults .answer{ margin-top: 0.35rem; color: #b0b0b0; font-size: 0.6rem; line-height: 0.9rem; } .goods-consults-page .goods-consults .answer span{ display: block; float: left; padding-right: 0.375rem; color: #444; } .goods-consults-page .goods-consults .answer p{ overflow: hidden; } .goods-consults-page .goods-consults .operation{ position: relative; right: 12%; margin-top: 0.5rem; width: 120%; height: 1.5rem; border-top: 1px solid #e0e0e0; line-height: 2rem; } .goods-consults-page .goods-consults .operation li{ position: relative; float: left; width: 50%; color: #b0b0b0; text-align: center; font-size: 0.7rem; } .goods-consults-page .goods-consults .operation li .iconfont{ display: inline-block; padding-right: 5PX; font-size: inherit; } .goods-consults-page .goods-consults .operation li .animate-count{ position: absolute; top: 0; z-index: 5; display: none; font-size: 0.5rem; } .goods-consults-page .goods-consults .operation li i.count{ position: absolute; } .goods-consults-page .goods-consults .operation li.highlight{ color: #eb0313; } .goods-consults-page .goods-consults .operation li.fav .animate-count{ right: 2.5rem; } .goods-consults-page .goods-consults .operation li.useful .animate-count{ right: 2.2rem; } .goods-consults-page .readmore{ display: block; margin-top: 0.75rem; height: 2.2rem; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #fff; color: #b0b0b0; text-align: center; font-size: 0.7rem; line-height: 2.2rem; } .goods-consults-page .readmore i{ font-size: inherit; } .goods-consults-page .faq-title{ height: 2.2rem; text-align: center; font-size: 0.8rem; line-height: 2.2rem; } .goods-consults-page .goods-consults .faq-item{ margin-top: 0.75rem; padding: 0.5rem 0.7rem; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #fff; margin-top: 0; margin-bottom: 0.75rem; } .goods-consults-page .goods-consults .faq-item .question{ color: #444; font-size: 0.6rem; } .goods-consults-page .goods-consults .faq-item .question span{ display: block; float: left; padding-right: 0.375rem; } .goods-consults-page .goods-consults .faq-item .question p{ overflow: hidden; padding-bottom: 0.375rem; border-bottom: 1px solid #e0e0e0; } .goods-consults-page .goods-consults .faq-item .time{ color: #b0b0b0; font-size: 0.55rem; } .goods-consults-page .goods-consults .faq-item .answer{ margin-top: 0.35rem; color: #b0b0b0; font-size: 0.6rem; line-height: 0.9rem; } .goods-consults-page .goods-consults .faq-item .answer span{ display: block; float: left; padding-right: 0.375rem; color: #444; } .goods-consults-page .goods-consults .faq-item .answer p{ overflow: hidden; } .goods-consults-page .goods-consults .faq-item .operation{ position: relative; right: 12%; margin-top: 0.5rem; width: 120%; height: 1.5rem; border-top: 1px solid #e0e0e0; line-height: 2rem; } .goods-consults-page .goods-consults .faq-item .operation li{ position: relative; float: left; width: 50%; color: #b0b0b0; text-align: center; font-size: 0.7rem; } .goods-consults-page .goods-consults .faq-item .operation li .iconfont{ display: inline-block; padding-right: 5PX; font-size: inherit; } .goods-consults-page .goods-consults .faq-item .operation li .animate-count{ position: absolute; top: 0; z-index: 5; display: none; font-size: 0.5rem; } .goods-consults-page .goods-consults .faq-item .operation li i.count{ position: absolute; } .goods-consults-page .goods-consults .faq-item .operation li.highlight{ color: #eb0313; } .goods-consults-page .goods-consults .faq-item .operation li.fav .animate-count{ right: 2.5rem; } .goods-consults-page .goods-consults .faq-item .operation li.useful .animate-count{ right: 2.2rem; } .goods-consults-page .goods-consults .faq-item .answer{ border-bottom: none; } .consult-form-page{ padding: 0.7rem; text-align: center; } .consult-form-page textarea{ box-sizing: border-box; padding: 0.25rem; width: 100%; height: 10rem; color: #444; font-size: 0.7rem; } .consult-form-page a{ display: inline-block; margin-top: 0.5rem; width: 9rem; height: 2rem; background-color: #444; color: #fff; text-align: center; font-size: 1rem; line-height: 2rem; } .good-detail-page .feedback-list{ margin-bottom: 0.75rem; padding-top: 0.75rem; background-color: #f0f0f0; } .good-detail-page .feedback-list .nav-tab{ padding: 0.25rem 0; width: 100%; height: 1.5rem; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #fff; } .good-detail-page .feedback-list .comment-nav, .good-detail-page .feedback-list .consult-nav{ float: left; box-sizing: border-box; width: 50%; height: 1.5rem; color: #b0b0b0; text-align: center; font-size: 0.7rem; line-height: 1.5rem; } .good-detail-page .feedback-list .comment-nav.focus, .good-detail-page .feedback-list .consult-nav.focus{ color: #000; } .good-detail-page .feedback-list .comment-nav{ border-right: 1px solid #ccc; } .good-detail-page .feedback-list .content .content-main{ border-bottom: 1px solid #e0e0e0; background-color: #fff; } .good-detail-page .feedback-list .content .content-main.comment-content-main .user-name{ padding-right: 0.45rem; padding-left: 0.7rem; color: #444; font-size: 0.6rem; line-height: 1.55rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .goods-spec, .good-detail-page .feedback-list .content .content-main.comment-content-main .comment-time{ font-size: 0.6rem; line-height: 1.55rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content{ padding-right: 0.45rem; padding-left: 0.7rem; color: #444; font-size: 0.6rem; line-height: 1.55rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .goods-spec, .good-detail-page .feedback-list .content .content-main.comment-content-main .comment-time{ font-size: 0.6rem; line-height: 1.55rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content{ font-size: 0.7rem; line-height: 0.9rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .goods-spec, .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content{ color: #444; } .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content, .good-detail-page .feedback-list .content .content-main.comment-content-main .comment-time{ padding-left: 0.7rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content{ padding-right: 0.7rem; padding-left: 0.7rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .detail-content{ padding-right: 0.7rem; } .good-detail-page .feedback-list .content .content-main.comment-content-main .comment-time{ color: #c1c1c1; } .good-detail-page .feedback-list .content .content-main.consult-content-main{ padding-top: 0.5rem; padding-right: 0.7rem; padding-bottom: 0.5rem; padding-left: 0.7rem; } .good-detail-page .feedback-list .content .content-main.consult-content-main .question{ color: #444; font-size: 0.6rem; } .good-detail-page .feedback-list .content .content-main.consult-content-main .question span{ display: block; float: left; padding-right: 0.375rem; font-size: inherit; } .good-detail-page .feedback-list .content .content-main.consult-content-main .question p{ overflow: hidden; } .good-detail-page .feedback-list .content .content-main.consult-content-main .time{ color: #b0b0b0; font-size: 0.55rem; } .good-detail-page .feedback-list .content .content-main.consult-content-main .answer{ margin-top: 0.35rem; color: #b0b0b0; font-size: 0.6rem; line-height: 0.9rem; } .good-detail-page .feedback-list .content .content-main.consult-content-main .answer span{ display: block; float: left; padding-right: 0.375rem; color: #444; font-size: inherit; } .good-detail-page .feedback-list .content .content-main.consult-content-main .answer p{ overflow: hidden; } .good-detail-page .feedback-list .content .content-main.no-item{ height: 5rem; color: #e0e0e0; text-align: center; font-size: 16PX; line-height: 5rem; } .good-detail-page .feedback-list .content .content-main.no-item span{ display: inline-block; padding-right: 5PX; font-size: 16PX; } .good-detail-page .feedback-list .comment-content-footer, .good-detail-page .feedback-list .consult-content-footer{ display: block; min-height: 2.2rem; border-bottom: 1px solid #e0e0e0; background-color: #fff; color: #b0b0b0; text-align: center; font-size: 0.7rem; line-height: 2.2rem; } .good-detail-page .feedback-list .comment-content-footer .iconfont, .good-detail-page .feedback-list .consult-content-footer .iconfont{ font-size: inherit; } .good-detail-page .feedback-list .content.hide{ display: none; } .good-detail-page .feedback-list .nodata{ padding: 0 0.7rem; height: 2.2rem; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #fff; font-size: 0.7rem; line-height: 2.2rem; } .good-detail-page .feedback-list .nodata .go-consult{ float: right; color: #b0b0b0; } .good-detail-page .feedback-list .nodata .go-consult span{ font-size: 0.7rem; } .recommend-for-you{ padding: 0.75rem 0; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background: #fff; } .recommend-for-you .title{ color: #444; text-align: center; font-size: 0.8rem; line-height: 2.2rem; } .recommend-for-you .swiper-container{ padding: 0.75rem 0 0.5rem; width: 100%; } .recommend-for-you .swiper-container .swiper-slide{ float: left; padding: 0 0.25rem; width: 3.9rem; } .recommend-for-you .swiper-container .swiper-slide img{ width: 100%; height: 5.2rem; } .recommend-for-you .swiper-container .swiper-slide:first-child{ padding-left: 0.75rem; } .recommend-for-you .swiper-container .swiper-slide:last-child{ padding-right: 0.75rem; } .recommend-for-you .sale-name{ overflow: hidden; margin-top: 0.5rem; width: 100%; color: #444; text-overflow: ellipsis; white-space: nowrap; } .recommend-for-you .price{ position: relative; margin-top: 0.2rem; font-size: 0.6rem; line-height: 1; } .recommend-for-you .price .sale-price{ display: block; margin-right: 0.2rem; color: #d9134f; } .recommend-for-you .price .old-price{ display: block; color: #b0b0b0; text-decoration: line-through; } .recommend-for-you .price .no-price{ color: #444; } .good-info{ float: left; margin: 0.25rem 0.375rem 1rem; width: 6.9rem; height: 12.65rem; } .good-info .tag-container{ overflow: hidden; width: 100%; height: 0.7rem; } .good-info .tag-container .good-tag{ display: block; float: left; box-sizing: border-box; margin-right: 0.1rem; height: 0.7rem; text-align: center; font-size: 0.45rem; line-height: 0.7rem; } .good-info .tag-container .good-tag:last-child{ margin-right: 0; } .good-info .tag-container .new-tag{ width: 1.5rem; background-color: #78dc7e; color: #fff; } .good-info .tag-container .renew-tag{ width: 2.25rem; background-color: #78dc7e; color: #fff; } .good-info .tag-container .sale-tag{ width: 1.5rem; background-color: #ff575c; color: #fff; } .good-info .tag-container .new-festival-tag{ width: 2.25rem; background-color: #000; color: #fff; } .good-info .tag-container .limit-tag{ width: 2.5rem; border: 1px solid #000; color: #000; } .good-detail-img{ position: relative; height: 9.2rem; } .good-detail-img .good-islike{ position: absolute; top: 0; right: 0; width: 1.5rem; height: 1.5rem; color: #b0b0b0; text-align: center; text-decoration: none; font-size: 0.75rem; line-height: 1.5rem; } .good-detail-img .good-like{ color: #d72928; } .good-detail-img img{ display: block; width: 100%; height: 9.2rem; } .good-detail-img .few-tag{ position: absolute; bottom: 0; width: 100%; height: 0.7rem; background: #ffac5b; color: #fff; text-align: center; font-size: 0.45rem; line-height: 0.7rem; } .good-detail-text .name a{ display: block; margin: 0.5rem 0; min-height: 1.5rem; color: #444; font-size: 0.55rem; } .good-detail-text .price{ font-size: 0.55rem; line-height: 0.55rem; } .good-detail-text .price .sale-price{ color: #d62927; } .good-detail-text .price .sale-price.no-price{ color: #000; } .good-detail-text .price .market-price{ margin: 0 0 0 0.125rem; color: #b0b0b0; text-decoration: line-through; } .good-detail-text .vip-grade{ display: inline-block; margin-right: 0.2rem; width: 1.3rem; height: 0.8rem; vertical-align: text-bottom; } .good-detail-text .vip-grade-3{ background: url('../img/product/golden.png') no-repeat; background-size: contain; } .good-detail-text .vip-grade-2{ background: url('../img/product/platinum.png') no-repeat; background-size: contain; } .good-detail-text .vip-grade-1{ background: url('../img/product/silver.png') no-repeat; background-size: contain; } .good-detail-text .vip-info{ margin-top: 0.475rem; color: #444; font-size: 0.45rem; line-height: 0.8rem; } .good-detail-text .vip-info .vip-icon{ display: inline-block; margin-right: 0.2rem; width: 2.2rem; height: 0.8rem; background: url('../img/product/vip-icon.png') no-repeat; background-size: contain; vertical-align: bottom; } .filter-mask, .filter-body{ position: absolute; top: 0; right: 0; left: 0; } .filter-mask{ height: 100%; background: rgba(0, 0, 0, 0.1); } .filter-body{ height: 22rem; background: #fff; color: #000; font-size: 0.7rem; cursor: pointer; } .filter-body .classify{ width: 50%; height: 100%; background: #f8f8f8; } .filter-body .classify > li{ height: 3rem; line-height: 3rem; } .filter-body .classify > li > *{ box-sizing: border-box; } .filter-body .classify > li .shower{ overflow: hidden; padding-left: 1rem; width: 100%; color: #333; text-overflow: ellipsis; white-space: nowrap; } .filter-body .classify > li .shower.highlight{ background: #eee; } .filter-body .classify > li .default{ color: #999; } .filter-body .classify > li .title{ float: left; color: #000; } .filter-body .classify > li.active{ background: #fff; } .filter-body .sub-classify{ position: absolute; top: 0; left: 50%; display: none; overflow: auto; -webkit-overflow-scrolling: touch; width: 50%; height: 22rem; } .filter-body .sub-classify > li{ overflow: hidden; padding-left: 0.75rem; height: 3rem; border-bottom: 1px solid #e6e6e6; text-overflow: ellipsis; white-space: nowrap; line-height: 3rem; } .filter-body .sub-classify > li.highlight{ background: #eee; } .filter-body .sub-classify .chosed-icon{ display: none; } .filter-body .sub-classify .chosed .chosed-icon{ display: inline; } .filter-body .active > .sub-classify{ display: block; } .suspend-cart{ position: fixed; right: 0.75rem; bottom: 3.5rem; z-index: 10; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(0, 0, 0, 0.3); text-align: center; line-height: 2.2rem; } .suspend-cart a{ display: block; width: 100%; height: 100%; } .suspend-cart .iconfont{ color: #fff; font-size: 0.9rem; } .suspend-cart .cart-count{ position: absolute; top: -0.6rem; right: -0.5rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #f03d35; color: #fff; text-align: center; font-size: 1rem; line-height: 1.8rem; transform: scale(0.5); } .chose-panel{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; display: none; height: 100%; background: rgba(0, 0, 0, 0.3); } .chose-panel .main{ position: absolute; right: 0; bottom: 0; left: 0; height: 15.25rem; background: #fff; } .chose-panel .infos{ padding: 0 0.55rem; height: 11.5rem; } .chose-panel .chose-items{ overflow: auto; height: 8.125rem; } .chose-panel .basic-info{ position: relative; overflow: hidden; margin-top: 0.75rem; margin-bottom: 0.75rem; } .chose-panel .thumb{ float: left; margin-right: 0.5rem; width: 2.5rem; } .chose-panel .text-info{ height: auto; } .chose-panel .text-info .name{ display: -webkit-box; overflow: hidden; height: 1.85rem; font-size: 0.7rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .chose-panel .text-info .price{ display: inline; font-size: 0.6rem; } .chose-panel .text-info .sale-price{ margin-right: 0.375rem; color: #e10; } .chose-panel .text-info .sale-price.no-price{ color: #000; } .chose-panel .text-info .market-price{ color: #b0b0b0; text-decoration: line-through; } .chose-panel .color-list, .chose-panel .size-list, .chose-panel .num{ position: relative; padding-left: 2rem; font-size: 0.7rem; } .chose-panel .color-list input.disabled, .chose-panel .size-list input.disabled, .chose-panel .num input.disabled{ border-radius: 0; background-color: #fff; color: #000; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-appearance: none; } .chose-panel .color-list > span, .chose-panel .size-list > span, .chose-panel .num > span{ position: absolute; top: 0.5rem; left: 0; } .chose-panel .color-list > span.left-num, .chose-panel .size-list > span.left-num, .chose-panel .num > span.left-num{ position: absolute; top: 0.5rem; left: 9.5rem; } .chose-panel .color-list span.disabled, .chose-panel .size-list span.disabled, .chose-panel .num span.disabled{ color: #e6e6e6; } .chose-panel .size-list li.hide{ display: none; } .chose-panel .block{ display: block; float: left; box-sizing: border-box; margin-right: 0.75rem; margin-bottom: 0.75rem; padding: 0 0.5rem; min-width: 2rem; height: 2rem; border: 1px solid #000; text-align: center; line-height: 2rem; } .chose-panel .block.chosed{ border-color: #e10; background: url('../img/shopping-cart/right.png') no-repeat; background-position: bottom right; background-size: 0.95rem; color: #e10; } .chose-panel .block.zero-stock{ border-color: #e0e0e0; color: #e0e0e0; } .chose-panel .block.zero-stock.chosed{ border-color: #e0e0e0; background: none; background-color: #c0c0c0; color: #e0e0e0; } .chose-panel .num{ margin-bottom: 0.5rem; } .chose-panel .num .btn{ display: block; float: left; width: 2rem; height: 2rem; border: 1px solid #e6e6e6; text-align: center; line-height: 2rem; } .chose-panel .num .btn.disable{ color: #e6e6e6; } .chose-panel .good-num{ float: left; margin-left: -1px; padding: 0; width: 2.65rem; height: 2rem; border: 1px solid #e6e6e6; text-align: center; line-height: 2rem; } .chose-panel .btn-plus{ margin-left: -1px; } .chose-panel .btn-wrap{ position: relative; box-sizing: border-box; padding: 0.5rem; height: 3rem; border-top: 1px solid #e6e6e6; background: #fff; text-align: center; } .chose-panel .btn-wrap .btn-sure{ width: 6.5rem; height: 2rem; border: none; background: #e10; color: #fff; font-size: 0.8rem; } .receive-coupon-page *{ margin: 0; padding: 0; font-size: 0.35rem; } .receive-coupon-page .bg-contain{ width: 100%; height: 100%; position: absolute; background: #c4211a; } .receive-coupon-page .bg-contain img{ width: 100%; height: auto; } .receive-coupon-page .page{ width: 100%; height: auto; padding-bottom: 1.5rem; position: absolute; top: 0; bottom: 0; } .receive-coupon-page .coupon-centent, .receive-coupon-page .gain-coupon-centent{ margin-top: 10.7rem !important; height: 13rem; margin-left: 0.75rem; margin-right: 0.75rem; background: #9d1a15; overflow: hidden; border-radius: 0.3rem; } .receive-coupon-page .coupon-centent{ position: relative; } .receive-coupon-page .coupon-centent .title{ position: absolute; top: 1rem; left: 50%; margin-left: -5rem; width: 10.025rem; height: 1.425rem; background-image: url(../img/sprite.img.png); background-position: -4.25rem -5.45rem; background-size: 14.5rem 9.65rem; } .receive-coupon-page .coupon-centent .under-title{ position: absolute; top: 2.5rem; width: 100%; height: 11.575rem; } .receive-coupon-page .coupon-centent .input-content{ height: 5.15rem; margin: 0.75rem 0.75rem 0; position: relative; } .receive-coupon-page .coupon-centent .input-content input{ height: 2.2rem; width: 100%; margin-bottom: 0.75rem; border: 1px solid #fff; font-size: 0.7rem; color: #fff; background: #9d1a15; border-radius: 0.3rem; text-align: center; outline: none; } .receive-coupon-page .coupon-centent .input-content div{ height: 2.2rem; width: 100%; text-align: center; font-size: 0.7rem; border-radius: 0.3rem; background: #b0b0b0; color: #e0e0e0; line-height: 2.2rem; } .receive-coupon-page .coupon-centent .input-content .verification-code, .receive-coupon-page .coupon-centent .input-content .get{ background: #fff; color: #444; } .receive-coupon-page .coupon-centent .has-clear{ padding-right: 0.75rem; } .receive-coupon-page .coupon-centent .clear-input{ position: absolute; padding: 0.25rem; top: 0.4rem; right: 1.25rem; font-size: 0.7rem; color: #666; z-index: 1; } .receive-coupon-page .coupon-centent .coupon-description{ width: 100%; height: 3.4rem; position: relative; background-image: url(../img/sprite.img.png); background-position: 0px 0px; background-size: 14.5rem 9.65rem; } .receive-coupon-page .coupon-centent .coupon-description span{ position: absolute; bottom: 0; left: 40%; width: 20%; height: 2rem; } .receive-coupon-page .gain-coupon-centent p{ width: 100%; height: 1rem; line-height: 1rem; text-align: center; color: #fff; font-size: 0.425rem; } .receive-coupon-page .gain-coupon-centent p.phone{ margin-top: 0.25rem; font-size: 0.75rem; font-weight: bold; } .receive-coupon-page .gain-coupon-centent .coupon{ padding-top: 1.25rem; width: 90%; margin-left: 5%; height: 5.5rem; background: ##9d1a15; } .receive-coupon-page .gain-coupon-centent .coupon img{ width: 100%; height: auto; } .receive-coupon-page .gain-coupon-centent .use-coupon-btn{ height: 2.2rem; line-height: 2.2rem; margin: 0.75rem 1.375rem; background: #444; color: #fff; text-align: center; border-radius: 0.1rem; } .receive-coupon-page .gain-coupon-centent span{ font-weight: bold; display: inline-block; width: 3.475rem; height: 1.05rem; align: center; font-size: 0.6rem; color: #fff; margin: 0 40%; background-image: url(../img/sprite.img.png); background-position: -9.825rem -3.45rem; background-size: 14.5rem 9.65rem; } .receive-coupon-page .gain-coupon-centent a{ color: #fff; font-size: 0.7rem; } .receive-coupon-page .dialog{ width: 84%; height: 10.25rem; position: absolute; background: #fff; border-radius: 0.6rem; left: 8%; top: 5.875rem; z-index: 2; } .receive-coupon-page .dialog .close{ width: 1rem; height: 1rem; overflow: hidden; background-image: url(../img/sprite.img.png); background-position: -13.35rem -3.45rem; background-size: 14.5rem 9.65rem; color: #f1f1f1; position: absolute; top: -0.5rem; right: -0.5rem; line-height: 1rem; text-align: center; } .receive-coupon-page .hidden{ display: none; } .receive-coupon-page .phone-error{ text-align: center; line-height: 14rem; } .receive-coupon-page .mask{ width: 100%; height: 100%; overflow: hidden; background-color: #000; opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; position: fixed; top: 0; left: 0; z-index: 1; } .receive-coupon-page .activity-message{ width: 100%; height: 10.25rem; overflow: scroll; } .receive-coupon-page .activity-message h3{ width: 100%; height: 1rem; margin-top: 1rem; margin-bottom: 0.25rem; line-height: 1rem; font-size: 0.8rem; text-align: center; } .receive-coupon-page .activity-message p{ width: 85%; height: auto; overflow: hidden; margin: 0 auto; font-size: 0.65rem; line-height: 1rem; padding-left: 0.65rem; text-indent: -0.65rem; } .receive-coupon-page .messages{ width: 84%; height: 4rem; position: absolute; background: rgba(0, 0, 0, 0.9); border-radius: 0.6rem; left: 8%; top: 45%; margin-top: -2rem; z-index: 2; color: #fff; } .receive-coupon-page .messages p{ line-height: 4rem; font-size: 0.6rem; } .receive-coupon-page .tip-wrap{ width: 100%; height: 100%; background: #9d1a15; position: fixed; top: 0; left: 0; z-index: 3; } .receive-coupon-page .tip{ width: 100%; height: 100%; background: #9d1a15; position: absolute; top: 0; left: 0; } .receive-coupon-page .tip .header{ width: 4.25rem; height: 4.25rem; margin-top: 40%; margin-left: auto; margin-right: auto; background-image: url(../img/sprite.img.png); background-position: 0px -5.45rem; background-size: 14.5rem 9.65rem; } .receive-coupon-page .tip .title{ margin-top: 0.75rem; font-size: 0.7rem; color: #fff; text-align: center; margin-left: auto; margin-right: auto; } .receive-coupon-page .tip .logo{ width: 9.775rem; height: 1.95rem; margin-top: 4.75rem; margin-left: auto; margin-right: auto; background-image: url(../img/sprite.img.png); background-position: 0px -3.45rem; background-size: 14.5rem 9.65rem; } .receive-coupon-page .tip .desc{ font-size: 0.6rem; color: #444; } .receive-coupon-page .tip .button{ display: block; margin: 0.75rem auto; width: 6.75rem; height: 1.4rem; font-size: 0.65rem; line-height: 1.4rem; text-align: center; color: #fff; background: #000; } /*# sourceMappingURL=index.css.map */