fe / yohobuywap-node · Commits

Go to a project

Authored by huangyCode
Commit 73005b19a0e306b1fb0b3ba5644109352d9b2ac4 1 parent 88cf5a0e

修改商品详情

Inline Side-by-side
Showing 2 changed files with 23 additions and 1341 deletions
... ... @@ -5,6 +5,25 @@ import Page from 'js/yoho-page';
import lazyLoad from 'yoho-jquery-lazyload';
import tip from 'js/plugin/tip';
function hiddenTips($ele) {
let offsetContainer,
offsetLastColumn;
if ($ele.length > 0) {
offsetContainer = $ele[0].getBoundingClientRect().right;
if ($ele.find('.swiper-slide:last-child')[0]) {
offsetLastColumn = $ele.find('.swiper-slide:last-child')[0].getBoundingClientRect().right;
}
if (offsetLastColumn - offsetContainer < 0) {
$ele.next('.tips').css('display', 'none');
} else {
$ele.next('.tips').css('display', 'block');
}
}
}
class Detail extends Page {
constructor() {
super();
... ... @@ -15,6 +34,7 @@ class Detail extends Page {
};
this.getIntro();
}
getIntro() {
let introUrl = this.selector.introUrl.val();
let $productDesc = this.selector.productDesc;
... ... @@ -50,8 +70,8 @@ class Detail extends Page {
slidesPerView: 'auto'
});
this.hiddenTips($('#size-swiper-container'));
this.hiddenTips($('#reference-swiper-container'));
hiddenTips($('#size-swiper-container'));
hiddenTips($('#reference-swiper-container'));
window.rePosFooter && window.rePosFooter();
},
... ... @@ -62,24 +82,7 @@ class Detail extends Page {
}
});
}
hiddenTips($ele) {
let offsetContainer,
offsetLastColumn;
if ($ele.length > 0) {
offsetContainer = $ele[0].getBoundingClientRect().right;
if ($ele.find('.swiper-slide:last-child')[0]) {
offsetLastColumn = $ele.find('.swiper-slide:last-child')[0].getBoundingClientRect().right;
}
if (offsetLastColumn - offsetContainer < 0) {
$ele.next('.tips').css('display', 'none');
} else {
$ele.next('.tips').css('display', 'block');
}
}
}
}
$(() => {
new Detail();
... ...
$pageBgC: #f0f0f0;
$mainFontC: #444;
$subFontC: #b0b0b0;
$borderC: #e0e0e0;
$tableCellC: #eee;
$basicBtnC: #eb0313;
@import "../../../scss/product/detail/detail";
@import "../../../scss/layout/swiper";
@import "../../../scss/product/detail/product-description";
.good-detail-page {
overflow: hidden;
background-color: #f0f0f0;
&.hide-discount {
.goods-discount {
display: none;
}
}
.page-block {
box-sizing: border-box;
margin-bottom: 20px;
padding: 0 28px;
width: 100%;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
background-color: #fff;
> .title {
border-bottom: 1px solid $borderC;
color: $mainFontC;
font-size: 28px;
line-height: 88px;
span {
color: #a0a0a0;
font-size: 18px;
}
}
.pro-detail {
margin-top: 20px;
margin-bottom: 20px;
}
.pro-detail * {
font-size: 28px !important;
color: #444;
line-height: 40px !important;
margin-bottom: 40px;
letter-spacing: 1px;
word-break: break-all;
}
video {
width: 100%;
height: auto;
}
.detail {
margin-top: 20px;
margin-bottom: 20px;
font-size: 24px;
line-height: 36px;
b {
font-weight: bold;
}
i {
font-style: italic;
}
&.table {
width: 100%;
overflow: hidden;
.column {
box-sizing: border-box;
padding: 6px 3%;
width: 50%;
border: 1px solid #fff;
background-color: $tableCellC;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 24px;
float: left;
}
.merge-column {
width: 100% !important;
}
.oldbox {
float: left;
overflow: hidden;
box-sizing: border-box;
padding: 6px 3%;
width: 49.9%;
height: 100%;
border: 1px solid #fff;
background-color: $tableCellC;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.remind-tips {
padding-left: 18px;
font-size: 22px;
color: #e9221a;
margin-bottom: 30px;
img {
width: 28px;
float: left;
}
.wash-tags {
line-height: 30px;
height: 30px;
margin-left: 10px;
}
}
.model {
width: 100%;
height: auto;
border-bottom: 1px solid #e0e0e0;
overflow: hidden;
margin-bottom: 30px;
.portrait {
width: 175px;
float: left;
margin-bottom: 15px;
}
.portrait span {
text-align: center;
font-size: 24px;
display: block;
height: 62px;
line-height: 68px;
color: #444;
}
.portrait img {
display: block;
/* margin: 84px auto; */
max-width: 100%;
border: 0;
width: 124px;
height: 124px;
border-radius: 110px;
margin-top: 84px;
margin-left: 22px;
}
.info-list {
margin-left: 190px;
}
.info-list .list-title {
display: block;
width: 250px;
height: 40px;
background: #eee;
line-height: 40px;
text-align: center;
margin: 10px 0 30px;
}
.detail-info {
width: 48%;
height: 50px;
line-height: 50px;
display: inline-block;
.info-name {
color: #b0b0b0;
font-size: 24px;
}
&:nth-child(2) {
width: 100%;
}
}
}
.my-swiper-button-prev,
.my-swiper-button-next {
position: absolute;
top: 50%;
margin-top: -44px;
width: 48px;
height: 48px;
color: #666;
font-size: 48px;
cursor: pointer;
&.swiper-button-disabled {
opacity: 0.3;
}
}
.next-grey {
right: 30px;
left: auto;
}
.prev-grey {
right: auto;
left: 30px;
}
.tag-container {
position: absolute;
top: 40px;
left: 108px;
z-index: 2;
height: 35px;
color: #fff;
font-size: 20px;
line-height: 35px;
.good-tag {
display: inline-block;
box-sizing: border-box;
margin-left: 0.5px;
padding: 0 5px;
text-align: center;
font-size: 18px;
height: 35px;
line-height: 35px;
vertical-align: top;
}
.new-tag {
background-color: #78dc7e;
color: #fff;
}
.hot-tag {
width: 60px;
background-color: #ff575c;
color: #fff;
}
.renew-tag {
background-color: #78dc7e;
color: #fff;
}
.sale-tag {
background-color: #ff575c;
color: #fff;
}
.new-festival-tag {
color: #000;
width: 120px;
background-image: url("../../../img/product/new-festival.png");
background-repeat: no-repeat;
background-color: #fff;
background-size: 120px 38px;
}
.yohood-tag {
background-color: #000;
color: #fff;
}
.limit-tag {
border: 1px solid #000;
background-color: #fff;
color: #000;
line-height: 33px;
}
.soon-sold-out-tag {
background-color: #ffac5b;
color: #fff;
}
.is-presell {
background-color: #000;
color: #fff;
width: 60px;
}
}
.banner-container {
position: relative;
background-color: #fff;
min-height: 660px;
}
.banner-top-single {
overflow: hidden;
margin: 0 auto;
img {
margin-top: 30px;
margin-bottom: 30px;
width: 448px;
}
&.hover {
position: fixed;
width: 100%;
background-color: black;
height: 100%;
top: 0;
left: 0;
right: 0;
border: 0;
z-index: 999;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-ms-align-items: center;
align-items: center;
img {
margin-top: initial;
margin-bottom: initial;
width: 100%;
}
}
}
.banner-top {
position: relative;
overflow: hidden;
min-height: 660px;
display: flex;
align-items: center;
&.hover {
position: fixed;
width: 100%;
background-color: black;
height: 100%;
top: 0;
left: 0;
right: 0;
border: 0;
z-index: 999;
.banner-swiper {
width: 100%;
height: auto;
margin: 0 !important;
overflow: initial !important;
max-height: initial !important;
ul {
max-height: initial !important;
}
}
.swiper-pagination-bullet-active {
background-color: #fff !important;
}
}
.swiper-pagination {
position: absolute;
bottom: 40px;
z-index: 2;
.pagination-inner {
span {
background-color: #b0b0b0;
}
.swiper-pagination-bullet {
margin-right: 2PX;
}
.swiper-pagination-bullet-active {
background-color: #000;
}
}
}
}
.banner-swiper {
overflow: hidden;
margin: 30px 96px;
width: 448px;
min-height: 600px;
ul {
position: relative;
height: auto;
li {
float: left;
img {
height: auto;
}
}
}
}
.goods-name {
box-sizing: border-box;
padding: 20px 28px;
width: 100%;
background-color: #515150;
color: #fff;
.name {
font-size: 28px;
line-height: 48px;
}
.activity-phrase {
display: table-cell;
height: 40px;
background: #d0021b;
padding: 0 10px;
border-radius: 6px;
font-size: 24px;
line-height: 40px;
margin-right: 10px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 3px;
float: left;
}
}
.goods-subtitle {
display: flex;
align-items: center;
padding-right: 28px;
padding-left: 28px;
height: 88px;
border-bottom: 1px solid $borderC;
background-color: $pageBgC;
color: $subFontC;
font-size: 24px;
span {
display: -webkit-box;
overflow: hidden;
margin: 0;
text-overflow: ellipsis;
line-height: 36px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
.phrase {
color: #000;
}
.price-date,
.brand-coupon {
position: relative;
padding-right: 30px;
padding-left: 30px;
width: 100%;
height: 88px;
border-bottom: 1px solid $borderC;
background-color: #fff;
color: $subFontC;
}
.brand-coupon {
font-size: 28px;
line-height: 88px;
.promotion-icon {
line-height: 36px;
background-color: #d0021b;
color: #fff;
padding: 0 4px;
border-radius: 4px;
margin-right: 10px;
font-size: 22px;
float: left;
margin-top: 26px;
}
span {
color: $mainFontC;
}
.iconfont {
font-size: inherit;
}
.font-right {
color: $subFontC;
}
.font-quan {
color: $basicBtnC;
margin-right: 15px;
}
}
.limit-sale {
position: absolute;
top: 50%;
right: 24px;
margin-top: -24px;
padding: 4px 20px;
height: 48px;
border: 2PX solid #d0021b;
border-radius: 40px;
background-color: #fff;
color: #d0021b;
font-weight: bold;
font-size: 24px;
}
.limit-sale:active {
background-color: #f0f0f0;
}
.got-limit-sale {
position: absolute;
top: 24px;
right: 84px;
padding: 4px 20px;
border: 2px solid #d0021b;
border-color: #ccc;
border-radius: 40px;
background-color: #fff;
color: #d0021b;
color: #ccc;
font-weight: bold;
font-size: 24px;
}
.goods-price {
float: left;
font-size: 34.59px;
h2 {
display: inline-block;
line-height: 88px;
}
.seckill-price,
.current-price {
margin-right: 10px;
color: #d0021b;
}
.previous-price {
text-decoration: line-through;
}
}
.student-price {
float: left;
height: 88px;
line-height: 88px;
.student-name {
background-color: #d0021b;
font-size: 20px;
padding: 5px 10px;
color: #fff;
border-radius: 8px;
margin-right: 15px;
}
.red {
color: #d0021b;
}
}
.period-of-market {
padding: 0 30px;
background-color: #fff;
line-height: 54px;
color: #b0b0b0;
font-size: 24px;
border-bottom: 1px solid #e0e0e0;
h2 {
display: inline-block;
line-height: 88px;
}
}
.seckill-time {
float: right;
color: #d0021b;
font-size: 24px;
span {
display: inline-block;
line-height: 88px;
}
.seckill-time-pic {
background-color: #d0021b;
color: #fff;
line-height: 35px;
font-size: 18px;
padding: 0 10px;
border-radius: 5px;
margin-right: 5px;
vertical-align: middle;
}
}
.seckill-chose {
position: absolute;
bottom: 0;
right: 0;
}
.limit-num-text {
color: #d0021b;
font-size: 30px;
line-height: 80px;
position: absolute;
left: 380px;
bottom: 0;
background: #fff;
z-index: 1;
}
.seckill-time-border {
border: solid 1px #d0021b;
margin-top: 26px;
border-radius: 19px;
padding: 0 10px;
span {
line-height: 34px;
}
}
.vip-level {
box-sizing: border-box;
padding-right: 28px;
padding-left: 28px;
min-height: 88px;
border-bottom: 1px solid $borderC;
background-color: #fff;
color: #999;
font-size: 22px;
.icons-item {
float: left;
margin: 0;
width: 33.3%;
height: 88px;
&.current-level {
.vip-price {
color: #d0021b;
}
}
span {
display: inline-block;
padding-left: 8px;
padding-top: 5px;
vertical-align: middle;
line-height: 88px;
}
.vip-img {
width: 53px;
height: 32px;
}
&:nth-child(1) {
text-align: left;
.vip-img {
background: url("../../../img/product/silver.png") no-repeat;
background-size: contain;
}
}
&:nth-child(2) {
.vip-img {
background: url("../../../img/product/golden.png") no-repeat;
background-size: contain;
}
}
&:nth-child(3) {
text-align: right;
.vip-img {
background: url("../../../img/product/platinum.png") no-repeat;
background-size: contain;
}
}
}
}
.goods-discount {
padding-top: 0;
display: block;
width: 100%;
height: auto;
border-bottom: 1px solid $borderC;
background-color: #fff;
color: $mainFontC;
font-size: 28px;
h2 {
position: relative;
padding: 30px 60px 30px 30px;
line-height: 36px;
}
.coin-item > .promotion-icon,
.first-item > .promotion-icon,
.folder-item > .promotion-icon {
background-color: #d0021b;
color: #fff;
padding: 0 4px;
border-radius: 4px;
margin-right: 10px;
font-size: 22px;
float: left;
}
.short-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.iconfont {
position: absolute;
top: 30px;
right: 36px;
width: 35px;
color: #e0e0e0;
font-size: 45px;
}
.discount-folder {
display: none;
.folder-item {
border-top: 1px solid $borderC;
}
}
}
.enter-store {
position: relative;
overflow: hidden;
padding: 0 180px 0 114px;
background-color: #fff;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 84px;
.store-logo {
position: absolute;
top: 1px;
left: 0;
margin-left: 30px;
width: 68px;
height: 84px;
text-align: center;
font-size: 0;
img {
display: inline-block;
width: auto;
height: 68px;
vertical-align: middle;
}
}
.store-name {
color: $mainFontC;
font-size: 34px;
}
.store-link {
position: absolute;
top: 1px;
right: 0;
padding-right: 30px;
color: $subFontC;
text-align: right;
font-size: 28px;
span {
font-size: inherit;
}
}
}
.feedback-list {
margin-top: 20px;
margin-bottom: 20px;
background-color: #f0f0f0;
.nav-tab {
width: 100%;
padding: 10px 0;
background-color: #fff;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
}
.comment-nav,
.consult-nav {
box-sizing: border-box;
float: left;
width: 50%;
height: 60px;
line-height: 60px;
font-size: 28px;
text-align: center;
color: $subFontC;
&.focus {
color: #000;
}
}
.comment-nav {
border-right: 1px solid #ccc;
}
.content-main {
background-color: #fff;
border-bottom: 1px solid $borderC;
}
.content-main.comment-content-main {
.user-name {
font-size: 24px;
line-height: 62px;
height: 62px;
color: $mainFontC;
padding-left: 28px;
float: left;
}
.pd-right {
padding-right: 18px;
}
.user-info {
max-width: 100%;
}
.goods-spec {
max-width: 45%;
display: inline-block;
overflow: hidden;
height: 62px;
float: left;
white-space: nowrap;
text-overflow: ellipsis;
}
.goods-size {
float: left;
line-height: 62px;
}
.goods-spec,
.comment-time {
font-size: 24px;
line-height: 62px;
}
.comment-reply {
margin: 15px 28px 0 28px;
padding: 28px;
background: #f0f0f0;
box-sizing: border-box;
line-height: 32px;
color: #999;
font-size: 26px;
}
.detail-content {
color: $mainFontC;
font-size: 28px;
line-height: 36px;
padding-left: 28px;
padding-right: 28px;
}
.goods-spec,
.detail-content {
color: $mainFontC;
}
.detail-content,
.comment-time {
padding-left: 28px;
}
.comment-time {
color: #c1c1c1;
}
}
.content-main.consult-content-main {
padding: 20px 28px;
.question {
font-size: 24px;
color: $mainFontC;
span {
display: block;
float: left;
font-size: inherit;
padding-right: 15px;
}
p {
overflow: hidden;
}
}
.time {
font-size: 22px;
color: $subFontC;
}
.answer {
font-size: 24px;
line-height: 36px;
color: $subFontC;
margin-top: 14px;
span {
display: block;
float: left;
font-size: inherit;
color: $mainFontC;
padding-right: 15px;
}
p {
overflow: hidden;
}
}
}
.content-main.no-item {
height: 200px;
line-height: 200px;
color: #e0e0e0;
font-size: 16PX;
text-align: center;
span {
display: inline-block;
font-size: 16PX;
padding-right: 5PX;
}
}
.comment-content-footer,
.consult-content-footer {
display: block;
min-height: 88px;
text-align: center;
background-color: #fff;
border-bottom: 1px solid $borderC;
line-height: 88px;
font-size: 28px;
color: #b0b0b0;
.iconfont {
font-size: inherit;
}
}
.content.hide {
display: none;
}
.nodata {
height: 88px;
font-size: 28px;
line-height: 88px;
background-color: #fff;
padding: 0 28px;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
.go-consult {
float: right;
color: $subFontC;
span {
font-size: 28px;
}
}
}
}
/*
秒杀倒计时栏
*/
.seckill-count {
position: relative;
position: fixed;
bottom: 120px;
left: 50%;
margin-left: -320px;
z-index: 2;
box-sizing: border-box;
width: 640px;
height: 70px;
text-align: left;
.seckill-count-bg {
background-color: #000;
opacity: 0.7;
width: 640px;
height: 70px;
}
.seckill-count-num {
position: absolute;
top: 0;
left: 0;
padding: 0 30px;
color: white;
width: 640px;
height: 70px;
line-height: 70px;
box-sizing: border-box;
font-size: 28px;
}
}
/*
底部固定栏
*/
.cart-bar {
position: relative;
position: fixed;
bottom: 0;
left: 50%;
margin-left: -320px;
z-index: 2;
box-sizing: border-box;
padding: 20px 28px;
width: 640px;
height: 120px;
border-top: 1px solid $borderC;
background-color: #fff;
a {
display: inline-block;
}
.num-incart {
position: relative;
color: #444;
font-size: 47px;
}
.new-foot-ico {
width: 100px;
text-align: center;
vertical-align: middle;
.iconfont {
color: #444;
font-size: 40px;
line-height: 40px;
}
.tip {
color: #444;
font-size: 15px;
}
&.fav {
.favorite {
color: #ccc;
}
}
&.store {
.iconfont {
width: 42px;
height: 40px;
margin: 0 auto;
}
}
}
.opa {
opacity: 0.4;
}
.favorite {
color: #ccc;
font-size: 34px;
background-color: transparent;
}
.favorite.liked {
color: $basicBtnC !important;
}
.addto-cart,
.sold-out {
width: 260px;
height: 80px;
background-color: $basicBtnC;
color: #fff;
text-align: center;
font-size: 32px;
line-height: 80px;
}
.can-not-buy {
background-color: #ccc;
}
.sold-out {
background-color: #ccc;
}
.num-tag {
position: absolute;
top: -10px;
right: 5px;
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
background: $basicBtnC;
color: #fff;
text-align: center;
font-size: 20px;
line-height: 30px;
&.hide {
display: none;
}
}
.seckill-download-app {
width: 260px;
height: 80px;
line-height: 80px;
font-size: 30px;
text-align: center;
vertical-align: middle;
background-color: #eb0313;
color: #fff;
}
}
.store-good {
.btn-c {
display: none;
}
.fav {
width: 322px;
height: 80px;
line-height: 80px;
background-color: #eb0313;
color: #fff;
border-radius: 4px;
.tip {
color: #fff;
display: inline;
font-size: 24px;
}
.favorite {
color: #eb0313 !important;
}
.iconfont {
display: inline;
vertical-align: middle;
-webkit-text-stroke: 3px #fff;
margin-right: 5px;
font-size: 25px;
}
.liked {
color: #fff !important;
}
.opa {
opacity: 1;
}
}
.new-foot-ico {
margin-right: 20px;
}
.like-btn-c {
margin-right: 0;
}
}
.rec-word {
padding-top: 16px;
padding-left: 30px;
background-color: #fff;
.unfurled {
width: 140px;
height: 50px;
border-radius: 6px;
background: #eee;
line-height: 50px;
text-align: center;
margin: 0 auto;
color: #444;
}
.word-list {
display: none;
> * {
display: inline-block;
font-size: 24px;
border-radius: 6px;
padding: 6px 14px;
margin-right: 24px;
margin-bottom: 16px;
background: #eee;
color: #444;
}
}
}
.recommend-for-you {
border-bottom: none;
padding-left: 15px;
.tag-container {
overflow: hidden;
width: 100%;
height: 0.7rem;
position: static;
}
}
.yoho-tip {
top: 40%;
z-index: 100;
}
.product-desc {
min-height: 200px;
}
}
iframe {
display: none;
}
.is-mars-app {
.good-detail-page {
margin-bottom: 140px;
.addto-cart,
.sold-out {
margin-left: 100px;
}
.addto-cart {
background-color: #000;
}
.cart-bar {
.num-tag {
background-color: #89b374;
}
.new-foot-ico.fav {
display: none;
}
}
.suspend-home {
display: none;
}
}
}
.is-now-app {
.cart-bar {
.fav {
visibility: hidden;
}
}
}
... ...