From baad9d2555a875826644262cb5b3f5c4e78793f3 Mon Sep 17 00:00:00 2001 From: Vion Date: Mon, 10 Jan 2022 20:23:58 +0800 Subject: [PATCH] Desktop Menu / Product detail page layout update --- rc-busness/assets/css/global.less | 667 ++++++++++++++--- rc-busness/assets/css/index.less | 245 +++---- rc-busness/assets/css/magnifier.less | 133 +--- rc-busness/assets/css/producted.less | 675 ++++++++---------- rc-busness/components/header.vue | 186 ++++- rc-busness/components/magnifier.vue | 111 ++- rc-busness/nuxt.config.js | 4 +- rc-busness/pages/productdetails/producted.vue | 84 +-- rc-busness/static/js/rem.js | 1 + 9 files changed, 1248 insertions(+), 858 deletions(-) diff --git a/rc-busness/assets/css/global.less b/rc-busness/assets/css/global.less index a2a16334..f22164e5 100644 --- a/rc-busness/assets/css/global.less +++ b/rc-busness/assets/css/global.less @@ -1,9 +1,73 @@ /*Body*/ +body{ + font-family: DINPro,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif; + line-height: 1.5; + color: #666; +} +img, picture { + display: block; + max-width: 100%; + height: auto; +} +.ts-hover-show { + display: none; +} +.ts-wechat--xs .ts-hover-show { + position: absolute; + top: 32px; + left: 0; + opacity: 0; + width: 112px; + padding: .5rem; +} +.ts-wechat--xs .ts-hover-show img { + margin: 0 auto; +} +.ts-wechat--xs:hover .ts-hover-show { + display: block; + color: #666; + -webkit-animation: fadeIn .3s ease forwards; + animation: fadeIn .3s ease forwards; +} +.rc-max-width--xl { + max-width: 1400px; +} +.rc-max-width--xl { + max-width: 1400px; + margin: 0 auto; +} +.rc-full-width { + width: 100%; +} +.rc-content-block__wrapper, .rc-max-width--lg, .rc-max-width--md, .rc-max-width--sm, .rc-max-width--xl, .rc-max-width--xxl { + margin-left: auto!important; + margin-right: auto!important; +} .rc-main { - padding:0 .2rem; + padding:0 1.25rem; box-sizing:border-box; margin:0 auto; } +.ts-remove { + text-decoration: line-through; +} + +.rc-icon.ts-wechat--xs:after { + width: 24px; + background-image: unset; + mask: url("../image/wechat.svg") no-repeat center center; + -webkit-mask: url("../image/wechat.svg") no-repeat center center; + background-color: #666; +} +.rc-icon--xs.rc-pin--xs.rc-pin--xs:after, .rc-icon.rc-pin--xs.rc-pin--xs:after { + background-position: 81.82% 57.14%; +} +.rc-icon--xs.rc-search--xs.rc-search--xs:after, .rc-icon.rc-search--xs.rc-search--xs:after { + background-position: 81.82% 85.71%; +} +.rc-icon--xs.rc-menu--xs.rc-menu--xs:after, .rc-icon.rc-menu--xs.rc-menu--xs:after { + background-position: 72.73% 0; +} .ts-product-list{ li{ img{ @@ -58,21 +122,451 @@ display:none; } } + .online{ + width:100%; + background:#d7d7d7; + margin-top:1.5rem; + height:.06rem; + &.bold{ + height:.32rem; + background:#f6f6f6; + } + } /*Body end*/ /* 头部 */ +header.rc-header .rc-header__nav ul { + margin: 0; + padding: 0; +} +.rc-header { + width: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 59; + -webkit-box-shadow: 0 2px 4px #f1f1f1; + box-shadow: 0 2px 4px #f1f1f1; +} +header.rc-header button { + background-color: transparent; +} +.rc-header__right { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.rc-header__nav { + background-color: #fff; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + width: 100%; + z-index: 59; + background: #fff; + -webkit-transition: -webkit-transform .2s ease; + transition: -webkit-transform .2s ease; + transition: transform .2s ease; + transition: transform .2s ease,-webkit-transform .2s ease; +} +header.rc-header .rc-header__nav ul { + margin: 0; + padding: 0; +} +.rc-header__nav--primary { + height: 4.167rem; +} +.rc-header__center { + align-self: center; + justify-content: center; +} +.rc-list, .rc-wysiwyg ol, .rc-wysiwyg ul { + font-size: 1em; + margin: 0; + list-style-position: outside; +} +.rc-list--inline { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.rc-list--inline .list__item, .rc-list--inline .rc-list__item { + display: inline-block; +} +.rc-list__item, .rc-wysiwyg ol>li, .rc-wysiwyg ul>li { + line-height: 1.5; + position: relative; +} +.rc-list__item:last-child, .rc-wysiwyg ol>li:last-child, .rc-wysiwyg ul>li:last-child { + margin-bottom: 0; +} +.rc-list--inline[role=menubar], .rc-list--inline[role=tablist] { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} +.rc-list__item, .rc-wysiwyg ol>li, .rc-wysiwyg ul>li { + line-height: 1.5; + position: relative; +} +.rc-list--align { + padding: 0; + margin-left: 0; + list-style-position: outside; +} +.rc-list--blank { + list-style-type: none; +} +.rc-header__brand { + -webkit-box-flex: 0; + -ms-flex: 0; + flex: 0; + padding: 16px; + height: 100%; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + text-align: center; + display: inline-block; +} +.rc-btn--icon, .rc-btn--icon--xs, .rc-input__submit--search { + overflow: visible; + width: auto; +} +.rc-btn--icon { + background-color: transparent; + color: #666; + border-color: transparent; +} +[role=menubar] .rc-btn { + margin-left: 0; + margin-right: 8px; +} +header.rc-header .rc-header__nav ul { + margin: 0; + padding: 0; +} +header.rc-header .rc-header__nav a.rc-header__brand { + padding: 15px 0 0; +} +h1, h2, h3, h4, h5, h6 { + font-weight: 300; + margin-top: 0; +} +.rc-screen-reader-text, .screen-reader-text { + clip: rect(1px,1px,1px,1px); + position: absolute!important; + height: 1px; + width: 1px; + overflow: hidden; +} .rc-top{ position: relative; } +.rc-icon.ts-weibo--xs:after { + width: 24px; + background-image: unset; + mask: url("../image/weibo.svg") no-repeat center center; + -webkit-mask: url("../image/weibo.svg") no-repeat center center; + background-color: #666; +} +.rc-icon[class*="--xs"]:after { + width: 24px; +} +.rc-icon.iconography:after, .rc-icon.rc-iconography:after { + background-image: url("../image/royal-canin.sprite--iconography.svg?v=8-10-0"); +} +.rc-icon[class*="--xs"].iconography:after, .rc-icon[class*="--xs"].rc-iconography:after { + background-image: url("../image/royal-canin.sprite--iconography--xs.svg?v=8-10-0"); + width: 24px; +} +.rc-btn--action:after, .rc-btn--icon--xs:after, .rc-btn--icon:after, .rc-center-align, .rc-input__submit--micro:after, .rc-input__submit--search:after, .rc-modal__logo, .rc-page-header .rc-logo-wrapper { + position: absolute!important; + top: 50%; + left: 50%; + -webkit-transform: translateY(-50%) translateX(-50%); + transform: translateY(-50%) translateX(-50%); +} +.rc-alert .alert__close:after, .rc-alert .rc-alert__close:after, .rc-breadcrumb__list-item:after, .rc-btn--action:after, .rc-btn--icon--xs:after, .rc-btn--icon:after, .rc-btn--icon:hover:after, .rc-btn--one:after, .rc-btn--sm:not(.rc-tab):not(.tab):after, .rc-btn--two:after, .rc-checklist-row__label:after, .rc-icon.interactive:hover:after, .rc-input--error.input:after, .rc-input--error.rc-input:after, .rc-input--success.input:after, .rc-input--success.rc-input:after, .rc-input--warning.input:after, .rc-input--warning.rc-input:after, .rc-input__checkbox:checked+.input__label--inline:after, .rc-input__checkbox:checked+.rc-input__label--inline:after, .rc-input__submit--micro:after, .rc-input__submit--search:after, .rc-list__header[aria-haspopup=true]:after, .rc-navigation--next:after, .rc-navigation--prev:after, .rc-navigation--vertical__list-item>a.active:after, .rc-navigation--vertical__list-item>a.rc-active:after, .rc-navigation--vertical__list-item>a:hover:after, .rc-response--affirmative:after, .rc-response--negative:after, .rc-select .choices:after, .rc-select:not(.rc-select-processed):after, .rc-styled-link--external:after, .rc-styled-link--new-window:after { + content: ""; + display: inline-block; + background-repeat: no-repeat; + width: 32px; + height: 32px; + overflow: hidden; + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; +} +.rc-btn, .rc-input__submit { + display: inline-block; + position: relative; + vertical-align: middle; + white-space: nowrap; + text-overflow: ellipsis; + line-height: inherit; + font-size: inherit; + text-align: center; + overflow: hidden; + padding: 6px 1.5rem; + border: 2px solid transparent; + border-radius: 999px; + text-decoration: none; + cursor: pointer; + -webkit-transition: all .2s ease; + transition: all .2s ease; + font-weight: 300; + font-family: RC TYPE,Roboto,Avenir,Helvetica,Arial,sans-serif; + width: auto; +} +.rc-alert .alert__close, .rc-alert .rc-alert__close, .rc-btn--icon, .rc-btn--icon--xs, .rc-input__submit--search { + border-radius: 0; + padding: 0; +} +.rc-icon { + vertical-align: middle; +} +.rc-btn--icon:after, .rc-icon.interactive { + -webkit-transition: background-image .2s ease; + transition: background-image .2s ease; +} +.rc-btn--icon-label, .rc-btn--icon-tab { + border-radius: 0; + overflow: visible; + text-align: left; + padding-left: 40px; + padding-right: 24px; +} +.rc-btn--icon-label:after, .rc-btn--icon-tab:after { + position: absolute!important; + top: 50%; + -webkit-transform: translateY(-50%) translateX(-50%); + transform: translateY(-50%) translateX(-50%); +} +.rc-btn--icon-label:after, .rc-btn--icon-tab:after { + left: 24px; +} +.rc-icon:after { + content: ""; + display: inline-block; + background-repeat: no-repeat; + width: 32px; + height: 32px; + overflow: hidden; + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + position: relative; +} +.rc-list__header { + display: block; + position: relative; + padding: 1rem .5rem; + width: 100%; + border-radius: 0; + text-align: left; + background-color: #fff; + font-weight: 500; + text-transform: uppercase; +} +.rc-list__header, .rc-list__header--content, .rc-list__link--content, .rc-styled-link, .rc-styled-link--cta, .rc-styled-link--external, .rc-styled-link--new-window, .rc-wysiwyg a { + background-color: transparent; + border: none; + user-select: none; + text-decoration: none; + cursor: pointer; +} +.rc-list__header, .rc-list__header--content, .rc-list__link, .rc-list__link--content, .rc-styled-link, .rc-styled-link--cta, .rc-styled-link--external, .rc-styled-link--new-window, .rc-wysiwyg a { + color: #444; + position: relative; + -webkit-transition: color .2s ease-in,border-color .2s ease-in; + transition: color .2s ease-in,border-color .2s ease-in; +} +.rc-header__nav--secondary .rc-list__header { + color: #444; +} +header.rc-header .rc-header__nav a.rc-list__header { + text-decoration: none; +} +.rc-header__nav--secondary { + position: relative; + z-index: 58; + overflow-y: hidden; + height: 2.5rem; + max-height: 2.5rem; + -webkit-box-shadow: 0 2px 4px #f1f1f1; + box-shadow: 0 2px 4px #f1f1f1; +} +.rc-container { + height: 100%; + max-width: 1400px; + background-color: #fff; + margin: auto; +} +.layout-container, .rc-layout-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + z-index: 1; + margin-left: auto; + margin-right: auto; +} +.rc-margin--none { + margin: 0!important; +} +header .rc-header__nav--secondary .rc-container .submenu { + position: fixed; + top: 120px; + left: 0; + display: flex; + background-color: #fff; + overflow: hidden; + height: 0; + width: 100%; + box-shadow: 0px 2px 12px #ddd; + opacity: .7; + -webkit-transition: height .2s ease,opacity .2s ease; + transition: height .2s ease,opacity .2s ease; +} +header .rc-header__nav--secondary .rc-container:hover .submenu { + height: 28rem; + opacity: 1; + border-top: 2px solid #e2001a; +} +.rc-list__item.list__item--group, .rc-list__item.rc-list__item--group { + break-inside: avoid; + page-break-inside: avoid; +} +header .rc-header__nav--secondary .submenu .ts-head-img { + width: 14.6vw; + height: 6.3vw; + object-fit: cover; + box-shadow: 0px 2px 4px rgba(0,0,0,.08); +} +header .rc-header__nav--secondary .submenu .rc-list__header { + font-weight: bold; +} +header.rc-header .rc-header__nav a.rc-list__header { + text-decoration: none; +} +header.rc-header .rc-header__nav ul { + margin: 0; + padding: 0; +} +.rc-list__item, .rc-wysiwyg ol>li, .rc-wysiwyg ul>li { + line-height: 1.5; + position: relative; +} +.rc-list__link { + display: block; + text-align: left; + font-weight: 300; + width: 100%; + background-color: transparent; + user-select: none; + text-decoration: none; + cursor: pointer; + padding: .25rem 0; + border-bottom: none; +} + +.rc-fixright{ + width: 3.75rem; + height: auto; + position: fixed; + right: 0; + top: 30%; + ul{ + width: 60px; + height: 181px; + box-shadow: 0px 0px 6px rgb(0 0 0 / 10%); + background-color: white; + display: flex; + flex-direction: column; + li{ + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 0.18rem; + } + li:last-child{ + margin-bottom: 0.2rem; + } + } + img{ + width: 1.875rem; + height: auto; + display: block; + } + span{ + font-size: 0.12rem; + color: #666666; + } + .tuntop{ + width: 100%; + height: 60px; + background: #FFFFFF; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); + opacity: 1; + display: block; + color: #666666; + font-size: 12px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 8px; + img{ + width: 0.22rem; + height: 0.22rem; + display: block; + } + } +} /* 手机端 */ @media screen and (max-width: 768px) { + html { + font-size:100px; + } + .rc-md-up { + display: none!important; + } .rc-main{ width:100%; } .rc-top{ margin-top: 74px; } + .rc-list__header { + background: none; + padding: .5rem 0; + border-bottom: none; + } .rc-home-header{ width: 100%; .rc-main @@ -133,101 +627,96 @@ border: 2px solid #d7d7d7; } } - .online{ - height:.03rem; - width:100%; - background:#f6f6f6; - margin-top:0.23rem; - } - .rc-fixright{ - width: 0.60rem; - height: 1.81rem; - position: fixed; - right: 0; - top: 30%; - z-index: 9999; - ul{ - width: 60px; - height: 181px; - box-shadow: 0px 0px 6px rgb(0 0 0 / 10%); - background-color: white; - display: flex; - flex-direction: column; - li{ - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 0.18rem; - } - li:last-child{ - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 0.18rem; - margin-bottom: 0.2rem; - } - } - img{ - width: 0.19rem; - height: 0.19rem; - display: block; - } - img:last-child{ - width: 0.22rem; - height: 0.22rem; - display: block; - } - span{ - font-size: 0.12rem; - color: #666666; - } - .tuntop{ - width: 60px; - height: 60px; - background: #FFFFFF; - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); - opacity: 1; - display: block; - color: #666666; - font-size: 12px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-top: 8px; - img{ - width: 0.22rem; - height: 0.22rem; - display: block; - } - } - } } /* pc端 */ -@media screen and (min-width: 768px) { +@media screen and (min-width: 769px) +{ + html { + font-size:16px; + } + .rc-top{ + margin-top: 124px; + } + .ts-list--four-column { + -webkit-column-count: 4; + column-count: 4; + } + .rc-list__header{ + background: none; + padding: .5rem 0; + border-bottom: none; + } + .rc-padding--sm { + padding: 2rem; + } + .rc-margin-bottom--xs { + margin-bottom: .5rem; + } + .rc-header { + -webkit-box-shadow: none; + box-shadow: none; + } + .rc-header__logo { + width: 120px; + } + .rc-header__nav--primary { + height: 80px; + } + .rc-list--inline .list__item, .rc-list--inline .rc-list__item { + margin-right: 32px; + } + .rc-btn--action, .rc-btn--icon, .rc-btn--icon--xs, .rc-input__submit--micro, .rc-input__submit--search { + min-width: 48px; + height: 48px; + } + .rc-md-down { + display: none!important; + } + .ts-list--four-column, .ts-list--four-column .list, .ts-list--four-column .rc-list { + page-break-inside: avoid; + break-inside: avoid; + } .rc-main { width:100%; max-width:1400px; } - .online{ - height:8px; - width:100%; - background:#f6f6f6; - margin-top:23px; + .rc-list--inline:not([role=tablist]):not([role=menubar]) { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + .layout-container, .rc-layout-container { + margin-left: -1rem; + margin-right: -1rem; + } + .rc-fixright{ + width:5.5rem; + background: #FFFFFF; + box-shadow: 0px 0px .62rem rgba(0, 0, 0, 0.16); + border-radius: .25rem; + display: flex; + flex-direction: column; + align-items: center; + ul{ + width:100%; + height: 100%; + li{ + margin-top: .5rem; + height:4.125rem; + img{ + width:22px; + height:auto; + } + } + } } .rc-home-header{ height:120px ; .rc-main { - width: 92%; + width: 100%; margin: 0 auto; // position: fixed; top: 0; - z-index: 989; background: white; display: flex; justify-content: space-between; @@ -286,4 +775,16 @@ } } -/* 头部 end */ \ No newline at end of file + +@media (max-width: 960px) +{ + .rc-lg-up { + display: none!important; + } +} +@media (min-width: 1024px) +{ + .rc-xl-down { + display: none!important; + } +} \ No newline at end of file diff --git a/rc-busness/assets/css/index.less b/rc-busness/assets/css/index.less index 15936444..e3c96bd9 100644 --- a/rc-busness/assets/css/index.less +++ b/rc-busness/assets/css/index.less @@ -440,74 +440,35 @@ } -@media screen and (min-width: 768px) +@media screen and (min-width: 769px) { .sw-center{ display: none; } .useraimg{ width: 100%; -height: 4.69rem; +height: 29.31rem; object-fit: cover; } .van-swipe-item { color: #fff; - height: 4.69rem; + height: 29.31rem; width: 100%; - font-size: 0.20rem; - line-height: 1.50rem; + font-size: 1.25rem; + line-height: 9.375rem; text-align: center; -} -.rc-fixright{ -width: 0.60rem; -height: 1.81rem; -background: #FFFFFF; -box-shadow: 0px 0px 0.10rem rgba(0, 0, 0, 0.16); -border-radius: 0.04rem; -position: fixed; -right: 0; -top: 30%; -display: flex; -flex-direction: column; -z-index: 9999; -ul{ -height: 100%; -li{ - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 0.08rem; -} -} -img{ -width: 0.30rem; -height: 0.30rem; -display: block; -} - -img{ -width: 0.30rem; -height: 0.30rem; -display: block; -} -span{ -font-size: 0.12rem; -color: #666666; -} } .rc-lunbo{ width: 100%; - margin-top: 0.46rem; + margin-top: 2.875rem; margin: 0 auto; position: relative; - margin-top: 1.50rem; + margin-top: 9.375rem; h2{ text-align: center; - font-size: 0.40rem; + font-size: 2.5rem; color: #E2001A; } #xxxFullScreen { @@ -520,7 +481,7 @@ color: #666666; .swiper-container2 { width: 100%; - height: 6.18rem; + height: 38.6rem; // overflow: visible !important; position: relative; } @@ -536,7 +497,7 @@ color: #666666; } /* 下一张 */ #swiper1 .swiper-container .swiper-wrapper .swiper-slide-next { - margin-top: 0.05rem; + margin-top: .31rem; //height: 6.18rem !important; } .swiper-container .swiper-wrapper .swiper-slide-active { @@ -558,7 +519,7 @@ color: #666666; height: auto; } span{ - font-size: 0.26rem; + font-size: 1.6rem; display: block; margin-top: 20px; color: #E2001A; @@ -580,29 +541,29 @@ color: #666666; em { font-style: normal; - font-size: 0.22rem; + font-size: 1.375rem; color: #666666; display: block; - margin-top: 0.16rem; + margin-top: 1rem; } strong { font-style: normal; - width: 1.30rem; - height: 0.40rem; + width: 8.125rem; + height: 2.5rem; border: 2px solid #E2001A; - border-radius: 0.30rem; + border-radius: 1.875rem; display: block; - line-height: 0.40rem; + line-height: 2.5rem; text-align: center; color:#E2001A; - font-size: 0.14rem; - margin-top: 0.16rem; + font-size: .875rem; + margin-top: 1rem; } } .uservideo{ -width: 5.60rem; -height: 5.06rem; +width: 35rem; +height: 31.6rem; display: block; border: 1px solid red; @@ -611,10 +572,10 @@ border: 1px solid red; position: absolute; top: 50%; left:0; -margin-top: -0.115rem; +margin-top: -.72rem; img{ - width: 0.11rem; - height: 0.22rem; + width: .69rem; + height: 1.38rem; display: block; } } @@ -622,10 +583,10 @@ img{ position: absolute; top: 50%; right:0; -margin-top: -0.115rem; +margin-top: -.72rem; img{ - width: 0.11rem; - height: 0.22rem; + width: .69rem; + height: 1.375rem; display: block; } } @@ -639,7 +600,7 @@ img{ //height: 1.65rem !important; } .swiperWrap{ -height: 4.69rem; +height: 29.3rem; width: 100%; img{ height: 4.69rem; @@ -649,11 +610,11 @@ img{ } /deep/.swiper-pagination-bullet-active{ background: red; - width: 0.08rem; - height: 0.08rem; + width: .5rem; + height: .5rem; } /deep/.swiper-pagination-bullet{ - width: 8rem; + width: 50rem; height: 8px; background: #d7d7d7; @@ -669,7 +630,7 @@ img{ } .rc-main{ width: 100%; - margin-top: 0.40rem; + margin-top: 2.5rem; .van-tabs{ display: none; } @@ -684,20 +645,20 @@ img{ flex-wrap: wrap; flex-direction: row; span{ - margin-top: 0.08rem; + margin-top: .5rem; display: block; } img{ - width: 1.58rem; - height: 1.58rem; + width: 9.875rem; + height: 9.875rem; display: block; } li{ cursor: pointer; font-size: 16px; - width: 1.58rem; + width: 9.875rem; text-align: center; - height: 1.58rem; + height: 9.875rem; background: #F6F6F6; border-radius: 50%; } @@ -707,7 +668,7 @@ img{ width: 100%; h2{ text-align: center; - font-size: 0.40rem; + font-size: 2.5rem; color: #E2001A; } .van-tabs{ @@ -724,18 +685,18 @@ img{ justify-content: center; cursor: pointer; li{ -font-size: 0.16rem; -margin-left: 0.40rem; +font-size: 1rem; +margin-left: 2.5rem; } } .rc-contair { - margin-top: 0.24rem; + margin-top: 1.25rem; ul{ text-align: center; - margin-top: 0.77rem; + margin-top: 4.8rem; display: flex; justify-content: space-between; width: 100%; @@ -748,7 +709,7 @@ margin-left: 0.40rem; justify-content: center; align-items: center; border: 1px solid #D7D7D7; - margin-top: 0.40rem; + margin-top: 2.5rem; } img{ @@ -760,18 +721,18 @@ margin-left: 0.40rem; } i{ font-style: normal; - font-size: 0.18rem; - margin-top: 0.08rem; + font-size: 1.125rem; + margin-top: .5rem; color: #666666; display: block; - font-size: 0.22rem; + font-size: 1.375rem; color: #666666; } } span{ -font-size: 0.30rem; +font-size: 1.875rem; color: #E2001A; text-overflow: -o-ellipsis-lastline; overflow: hidden; @@ -779,38 +740,38 @@ font-size: 0.30rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; - margin-top:0.16rem; + margin-top:1rem; -webkit-box-orient: vertical; } strong{ - width: 1.30rem; - height: 0.40rem; + width: 8.125rem; + height: 2.5rem; border: 2px solid #E2001A; display: flex; align-items: center; justify-content: center; - border-radius: 0.30rem; + border-radius: 1.875rem; margin: 0 auto; - font-size: 0.14rem; + font-size: .875rem; color: #E2001A; -margin-top: 0.24rem; +margin-top: 1.5rem; } .userserlect{ display: flex; width: 100%; justify-content: center; align-items: center; - padding-bottom: 0.88rem; - padding-top: 0.80rem; + padding-bottom: 5.5rem; + padding-top: 5rem; span{ -width: 1.30rem; -height: 0.40rem; +width: 8.125rem; +height: 2.5rem; background: #E2001A; text-align: center; -line-height: 0.40rem; -border-radius: 0.30rem; -font-size: 0.14rem; +line-height: 2.5rem; +border-radius: 1.875rem; +font-size: .875rem; color: #FFFFFF; } @@ -819,13 +780,13 @@ color: #FFFFFF; } } .active { - font-size: 0.16rem; + font-size: 1rem; border: 3px solid red; color: red; } .unactive { - font-size: 0.16rem; + font-size: 1rem; color: #444444; border: 1px solid #D7D7D7; } @@ -835,24 +796,24 @@ color: #FFFFFF; display: flex; justify-content: center; align-items: center; - margin-top: 0.77rem; + margin-top: 4.8rem; span{ - margin-top: 0.08rem; + margin-top: .5rem; display: block; } img{ - width: 1.58rem; - height: 1.58rem; + width: 9.875rem; + height: 9.875rem; display: block; } li{ display: inline-block; cursor: pointer; - font-size: 0.16rem; - margin-left: 0.40rem; - width: 1.58rem; + font-size: 1rem; + margin-left: 2.5rem; + width: 9.875rem; text-align: center; -height: 1.58rem; +height: 9.875rem; background: #F6F6F6; border-radius: 50%; } @@ -875,41 +836,35 @@ color: #E2001A; margin: 0 auto; text-align: center; -em{ - font-style: normal; - font-size: 0.30rem; - display: block; - padding-top: 0.80rem; + em{ + font-style: normal; + font-size: 1.875rem; + display: block; + padding-top: 5rem; + color: #E1001A; + } + span{ + font-size: 1rem; + margin-top: 1rem; + color: #666666; + display: flex; + align-items: center; + justify-content: center; + } + i{ + font-style: normal; + width: 1.57rem; + height: 0.48rem; + border: 2px solid #E2001A; + border-radius: 0.30rem; + display: block; + line-height: 0.48rem; + font-size: 0.16rem; + color: #E2001A; + margin: 0 auto; + margin-top: 0.32rem; + margin-bottom: 0.80rem; + } -color: #E1001A; -} -span{ - font-size: 0.16rem; - - margin-top: 0.17rem; -color: #666666; - -display: flex; -align-items: center; -justify-content: center; - -} -i{ - font-style: normal; - width: 1.57rem; -height: 0.48rem; -border: 2px solid #E2001A; -border-radius: 0.30rem; -display: block; -line-height: 0.48rem; -font-size: 0.16rem; -color: #E2001A; - -margin: 0 auto; -margin-top: 0.32rem; -margin-bottom: 0.80rem; - -} - -} + } } diff --git a/rc-busness/assets/css/magnifier.less b/rc-busness/assets/css/magnifier.less index b81918a9..04d7658b 100644 --- a/rc-busness/assets/css/magnifier.less +++ b/rc-busness/assets/css/magnifier.less @@ -1,8 +1,6 @@ -@media screen and (max-width:768px) { - .magnify { - position: relative; - width: 100%; - } +.magnify { + position: relative; + width: 100%; .left_contaner { width: 100%; height: 100%; @@ -11,6 +9,12 @@ box-sizing: border-box; position: relative; width: 100%; + margin:0 auto; + img { + width: auto; + height: 100%; + object-fit: contain; + } } .left_contaner .shade { background-color: rgba( 135,206,235, .5); @@ -20,17 +24,12 @@ cursor: move; display: none; } - .left_contaner .middle_img img { - width: 100%; - height: 100%; - } .left_contaner .carousel { - width: 2.56rem; - margin: .20rem auto 0 auto; + width: 16rem; + margin: 1.25rem auto 0 auto; display: -webkit-flex; - } - + .left_contaner .carousel .show_box { flex: 1; overflow: hidden; @@ -44,25 +43,21 @@ display: flex; align-items: center; img{ - width: .08rem; - height: .16rem; + width: .5rem; + height: 1rem; } - + // background: url('../assets/image/userleft.jpg') no-repeat; // background-position: center center; } .left_contaner .carousel .right_arrow { - // background: url('../assets/image/userright.png') no-repeat; - // background-position: center right; - // width: 8px; - // height: 16px; display: flex; align-items: center; img{ - width: .08rem; - height: .16rem; + width: .5rem; + height: 1rem; display: block; - margin-left: 0.06rem; + margin-left: .375rem; } } .left_contaner .carousel .picture_container { @@ -87,7 +82,7 @@ border: 2px solid #E2001A; } .left_contaner .picture_container .picture_item img { - + width: 100%; height: 100%; } @@ -104,86 +99,20 @@ left: 0px; display: none; } - +} +@media screen and (max-width:768px) { } // // /* 最小768px最大1920 *pc端/ @media screen and (min-width: 768px) and (max-width: 1920px) { -.magnify { - position: relative; -} -.left_contaner { - width: 100%; - height: 100%; -} -.left_contaner .middle_img { - box-sizing: border-box; - position: relative; -} -.left_contaner .shade { - background-color: rgba( 135,206,235, .5); - position: absolute; - top: 0; - left: 0; - cursor: move; -} -.left_contaner .middle_img img { - width: 100%; - height: 100%; -} -.left_contaner .carousel { - width: 100%; - margin-top: 20px; - display: -webkit-flex; -} -.left_contaner .carousel .show_box { - flex: 1; - overflow: hidden; - position: relative; -} -.left_contaner .carousel .arrow { - flex-basis: 25px; - cursor: pointer; -} -.left_contaner .carousel .left_arrow { - background: url('../image/rc-left.png') no-repeat; - background-position: center center; -} -.left_contaner .carousel .right_arrow { - background: url('../image/rc-left.png') no-repeat; - background-position: center right; -} -.left_contaner .carousel .picture_container { - height: 100%; - position: absolute; - overflow: hidden; - top: 0; - left: 0; -} -.left_contaner .picture_container .picture_item { - height: 100%; - float: left; - padding: 5px; - box-sizing: border-box; -} -.left_contaner .picture_container .picture_item:hover { - border: 2px solid #E2001A; -} -.left_contaner .picture_container .picture_item img { - width: 100%; - height: 100%; -} -.right_contanier { - overflow: hidden; - position: absolute; - top: 0; - border: 1px solid #ccc; -} -.right_contanier .big_img { - position: absolute; - top: 0px; - left: 0px; -} - - + .left_contaner .carousel { + width: 100%; + margin-top: 20px; + } + .right_contanier { + display:block + } + .right_contanier .big_img { + display: block; + } } \ No newline at end of file diff --git a/rc-busness/assets/css/producted.less b/rc-busness/assets/css/producted.less index e0068f71..22eec9e5 100644 --- a/rc-busness/assets/css/producted.less +++ b/rc-busness/assets/css/producted.less @@ -1,73 +1,159 @@ +.ts-product-detail{ + i { + font-style: normal; + } + .ts-realprice{ + font-size: 18px; + font-weight: 500; + color: #E1001A; + } + .ts-ecprice{ + color:#999; + font-weight: 400; + } + .ts-row-title { + font-size: 14px; + font-style: normal; + color: #333333; + display:inline-block; + } + .ts-row-title + i { + color: #666666; + display:inline-flex; + max-width:16.5rem; + } + .ts-product-header h2{ + color: #e1001a; + } + .certification li{ + display:flex; + flex-direction: row; + } + .rc-productdetai { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 10px; + i { + font-style: normal; + color: #333333; + } + span { + color: #666666; + } + em { + font-style: normal; + line-height: 22px; + color: #E2001A; + border-bottom:1px solid rgba(226, 0, 26, 0.15); + } + } + .rc-produnnum { + display: flex; + align-items: center; + margin-top: 16px; + span { + font-size: 14px; + color: #333333; + } + img { + width: 29px; + height: 29px; + } + strong { + font-style: normal; + list-style: none; + width: 30px; + height: 30px; + border: 1px solid #d7d7d7; + opacity: 1; + border-radius: 3px; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + margin: 0 5px 0 5px; + color: #666666; + } + } +} + // 手机端 -@media screen and(min-width: 320px) and(max-width:768px) { - .rc-button{ +@media screen and (max-width:768px) { + .ts-ecprice{ + font-size:.625rem; + } + .rc-productdetai{ + font-size:.875rem + } + .rc-button{ width: 100%; display: flex; align-items: center; position: fixed; justify-content: center; - height: 60px; + height: 5rem; bottom: 0; background-color: white; - + box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1); + span{ - width: 160px; -height: 48px; -background: #E2001A; -border-radius: 30px; -font-size: 16px; -color:#FFFFFF; -display: block; -display: flex; -align-items: center; -justify-content: center; + width: 9.68rem; + height: 3rem; + background: #E2001A; + border-radius: 30px; + font-size: .875rem; + color:#FFFFFF; + display: flex; + align-items: center; + justify-content: center; + flex-shrink:0; } span:last-child{ - margin-left: 40px; + margin-left: 1.56rem; } } - .rc-headera{ - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - justify-content: center; - h3{ - color:#333333; - font-size: 26px; - } - .rc-title{ - img{ - width: 96px; - height: 96px; - - } - } - .userer{ - span{ - width: 130px; -height: 40px; -border: 2px solid #E2001A; -border-radius: 30px; -display: block; -color: #E2001A; -line-height: 40px; -margin-top: 42px; -font-size: 14px; - } - i{ - font-size: 18px; - font-style: normal; - display: block; - margin-top: 32px; -color: #E1001A; - } - } -} - /deep/.el-dialog { - width: 80%; - position: relative; -} + .rc-headera{ + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + justify-content: center; + h3{ + color:#333333; + font-size: 26px; + } + .rc-title{ + img{ + width: 96px; + height: 96px; + } + } + .userer{ + span{ + width: 130px; + height: 40px; + border: 2px solid #E2001A; + border-radius: 30px; + display: block; + color: #E2001A; + line-height: 40px; + margin-top: 42px; + font-size: 14px; + } + i{ + font-size: 18px; + font-style: normal; + display: block; + margin-top: 32px; + color: #E1001A; + } + } + } + /deep/.el-dialog { + width: 80%; + position: relative; + } .rc-discount { position: relative; width: 100%; @@ -173,56 +259,16 @@ color: #E1001A; } } - .rc-header { + .ts-product-header { width: 100%; .rc-title { - width: 100%; h2 { - font-size: 22px; - color: #e1001a; + font-size: 1.375rem; + margin:1.5rem 0; } } .productdetails { - margin-top: 19px; - .rc-productdetail { - display: flex; - align-items: center; - i { - font-style: normal; - font-size: 14px; - - color: #333333; - } - - span { - font-size: 18px; - margin-left: 8px; - color: #e1001a; - } - } - .rc-productdetai { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: 10px; - i { - font-style: normal; - font-size: 14px; - color: #333333; - } - span { - font-size: 14px; - color: #666666; - margin-left: 8px; - } - em { - font-size: 14px; - font-style: normal; - margin-left: 68px; - color: #e2001a; - } - } } .rc-productdeta { @@ -242,101 +288,94 @@ color: #E1001A; width: 59px; font-size: 16px; margin-left: 4px; + margin-right: 12px; height: 39px; border-radius: 3px; } } } - .rc-produnnum { - display: flex; - align-items: center; - padding-bottom: 20px; - margin-top: 16px; - span { - font-size: 14px; - color: #333333; - } - img { - width: 29px; - height: 29px; - display: block; - margin-left: 5px; - - } - .rc-message { - width: 29px; - margin-left: 8px; - height: 29px; - display: block; - } - - strong { - font-style: normal; - list-style: none; - width: 30px; - height: 30px; - border: 1px solid #d7d7d7; - opacity: 1; - border-radius: 3px; - display: flex; - align-items: center; - justify-content: center; - font-size: 14px; - margin: 0 5px 0 5px; - color: #666666; - } - } .certification { - .rc-button{ + .rc-button{ width: 100%; padding-top: 33px; display: flex; align-items: center; span{ - width: 160px; -height: 48px; -background: #E2001A; -border-radius: 30px; -font-size: 16px; -color:#FFFFFF; -display: block; -display: flex; -align-items: center; -justify-content: center; + width: 10rem; + height: 3rem; + background: #E2001A; + border-radius: 30px; + font-size: 1rem; + color:#FFFFFF; + display: block; + display: flex; + align-items: center; + justify-content: center; } span:last-child{ - margin-left: 40px; + margin-left: 2.5rem; } } - margin-top: 16px; + margin-top: 1rem; ul { display: flex; flex-direction: column; line-height: 30px; li { - float: left; width: 100%; text-align: left; span { - font-size: 14px; + font-size: .875rem; color: #333333; } - i{ - font-style: normal; - font-size: 14px; - color: #666666; - margin-left: 8px; - } } } } } } // /* 最小768px最大1920 *pc端/ -@media screen and (min-width: 768px) and (max-width: 1920px) { +@media screen and (min-width: 768px) { + .ts-product-detail{ + padding: 0 0.2rem; + box-sizing: border-box; + margin: 0 auto; + width: 100%; + max-width: 1400px; + .rc-main{ + padding:0; + } + .ts-row-title{ + font-size: 16px; + width:82px; + } + .ts-row-title + i { + font-size: 16px; + max-width:596px; + } + } + .rc-button{ + width: 100%; + padding-top: 33px; + display: flex; + align-items: center; + span{ + width: 160px; + height: 48px; + background: #E2001A; + border-radius: 30px; + font-size: 16px; + color:#FFFFFF; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + } + span:last-child{ + margin-left: 40px; + } + } .rc-headera{ - - display: flex; + display: flex; flex-direction: column; align-items: center; text-align: center; @@ -345,80 +384,38 @@ justify-content: center; color:#333333; font-size: 26px; } - .rc-title{ + .rc-title{ img{ width: 96px; height: 96px; - } + } + .userer{ + span{ + width: 130px; + height: 40px; + border: 2px solid #E2001A; + border-radius: 30px; + display: block; + color: #E2001A; + line-height: 40px; + margin-top: 42px; + font-size: 14px; + } + i{ + font-size: 18px; + font-style: normal; + display: block; + margin-top: 32px; + color: #E1001A; + } + } } - .userer{ - span{ - width: 130px; -height: 40px; -border: 2px solid #E2001A; -border-radius: 30px; -display: block; -color: #E2001A; -line-height: 40px; -margin-top: 42px; -font-size: 14px; - } - i{ - font-size: 18px; - font-style: normal; - display: block; - margin-top: 32px; -color: #E1001A; - } + /deep/.el-dialog { + width: 440px; + height: 432px; + position: relative; } -} - .rc-header{ - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - h3{ - color:#333333; - font-size: 26px; - } - .rc-title{ - img{ - width: 96px; - height: 96px; - - } - } - .userer{ - img{ - width: 210px; - height: 210px; - display: flex; - justify-content: center; - flex-direction: column; - - } - - span{ - font-size: 16px; - -color: #333333; - } - i{ - font-size: 18px; - font-style: normal; - display: block; - margin-top: 32px; -color: #E1001A; - } - } -} - /deep/.el-dialog { - width: 440px; - height: 432px; - position: relative; -} - .rc-discount { position: relative; img { @@ -500,8 +497,8 @@ color: #E1001A; } } .rc-usermain{ - display: flex; - align-items: center; + display: flex; + align-items: center; } .active{ border: 2px solid #E2001A; @@ -515,100 +512,40 @@ color: #E1001A; cursor: pointer; font-size: 16px; } - .rc-header { - width: 100%; - margin-left: 80px; - .rc-footimage{ - overflow: hidden; - display: flex; - justify-content: center; - align-items: center; - img{ - width: 100%; - } - } + .ts-product-header { + width: 100%; + font-size: 16px; .rc-title { - height: 85px; - width: 100%; - display: flex; - align-items: center; - border-bottom: 1px solid #d8d8d8; h2 { - -font-size: 30px; - color: #e1001a; - } - } - .productdetails { - .rc-button{ - width: 100%; - padding-top: 33px; - display: flex; - align-items: center; - span{ - width: 160px; -height: 48px; -background: #E2001A; -border-radius: 30px; -font-size: 16px; -color:#FFFFFF; -display: block; -display: flex; -align-items: center; -justify-content: center; -cursor: pointer; - } - span:last-child{ - margin-left: 40px; - } - } - margin-top: 19px; - .rc-productdetail { - display: flex; - align-items: center; - i { - font-style: normal; - font-size: 18px; - - color: #333333; - } - - span { - font-size: 18px; - margin-left: 8px; - color: #e1001a; - } - } - .rc-productdetai { - display: flex; - align-items: center; - margin-top: 10px; - border-bottom: 1px solid #d7d7d7; - padding-bottom: 17px; - i { - font-style: normal; - - -font-size: 18px; - color: #333333; - } - span { - -font-size: 20px; - color: #666666; - margin-left: 8px; - } - em { - font-size: 16px; - font-style: normal; - width: 40%; - text-align: right; - display: block; -color: #E2001A; - cursor: pointer; - } + font-size: 30px; + margin-bottom:42px; } } + .ts-realprice{ + font-size: 20px; + } + .ts-ecprice{ + + } + .rc-productdetai { + em { + cursor: pointer; + border-bottom : unset; + padding-right:1rem; + position:relative; + &:after{ + content: " "; + width: .5rem; + height: 1rem; + background: url(/_nuxt/assets/image/arr-right-red.png) no-repeat left top; + background-size: contain; + display: block; + position:absolute; + right:0; + top:.25rem; + } + } + } .rc-productdeta { margin-top: 16px; @@ -616,8 +553,7 @@ color: #E2001A; display: flex; align-items: center; span { - -font-size: 18px; + font-size: 18px; color: #333333; } em { @@ -627,68 +563,33 @@ font-size: 18px; justify-content: center; width: 59px; font-size: 16px; - margin-left: 10px; height: 39px; border-radius: 3px; - color:#666666; } } } .rc-produnnum { - display: flex; - align-items: center; - padding-bottom: 20px; - margin-top: 16px; - border-bottom: 1px solid #d7d7d7; - span { - font-size: 18px; - color: #333333; - } - img { - width: 29px; - height: 29px; - display: block; - } - .rc-message { - width: 29px; - margin-left: 8px; - height: 29px; - display: block; - } - - strong { - font-style: normal; - list-style: none; - width: 30px; - height: 30px; - border: 1px solid #d7d7d7; - opacity: 1; - border-radius: 3px; - display: flex; - align-items: center; - justify-content: center; - font-size: 14px; - margin: 0 5px 0 5px; - color: #666666; - } - } + span { + font-size: 18px; + } + } .certification { .rc-button{ width: 100%; - padding-top: 33px; + padding-top: 32px; display: flex; align-items: center; span{ width: 160px; -height: 48px; -background: #E2001A; -border-radius: 30px; -font-size: 16px; -color:#FFFFFF; -display: block; -display: flex; -align-items: center; -justify-content: center; + height: 48px; + background: #E2001A; + border-radius: 30px; + font-size: 16px; + color:#FFFFFF; + display: block; + display: flex; + align-items: center; + justify-content: center; } span:last-child{ margin-left: 40px; @@ -696,26 +597,18 @@ justify-content: center; } margin-top: 16px; ul { - display: flex; - flex-direction: column; line-height:40px; - text-align: left; - li { - width: 100%; - float: left; - span { - font-size: 18px; - color: #333333; - } - i{ - font-style: normal; - font-size: 16px; - color: #666666; - margin-left: 8px; - } - } } } } + .rc-footimage{ + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + img{ + width: 100%; + } + } } \ No newline at end of file diff --git a/rc-busness/components/header.vue b/rc-busness/components/header.vue index c69734ef..7fb8023b 100644 --- a/rc-busness/components/header.vue +++ b/rc-busness/components/header.vue @@ -1,36 +1,153 @@ - \ No newline at end of file diff --git a/rc-busness/components/magnifier.vue b/rc-busness/components/magnifier.vue index 89081fa0..55930d32 100644 --- a/rc-busness/components/magnifier.vue +++ b/rc-busness/components/magnifier.vue @@ -35,29 +35,18 @@ export default { props: { tableLabelTest:Array, - middleImgWidth: { - default: 350, - type: Number - }, // 产品图片宽 - middleImgHeight: { - default: 282, - type: Number - }, // 产品图片高 - thumbnailHeight: { - default: 100, - type: Number - }, // 缩略图容器高度 imgList: Array, // 图片数据 zoom: { default: 2, // 缩略比例,放大比例 type: Number - }, - - - + } }, data() { return { + middleImgWidth:350, + middleImgHeight:350, + thumbnailHeight:100, + tableLabelTest1:this.tableLabelTest, pictureList: [ {url: require("../assets/four.png")}, @@ -86,37 +75,34 @@ export default { itemWidth: 80, // 缩略图每张的宽度 } }, - watch:{ - data:'ifadroind',// 值可以为methods的方法名 - - inputName: function(newValue) { - this.pictureList=newValue; - this.menu=newValue; - console.log(this.newValue); - } - }, + watch:{ + data:'ifadroind',// 值可以为methods的方法名 + inputName: function(newValue) { + this.pictureList=newValue; + this.menu=newValue; + console.log(this.newValue); + } + }, created() { }, mounted() { - let user= JSON.parse(localStorage.getItem("message")); - console.log(user); - if(user!==null){ - this.pictureList=user; - } - if (user && user.length) { - this.pictureList = user - } - this.middleImg = this.pictureList[0].attachmentPath; - console.log(this.middleImg); - // 计算缩略图的宽度,默认是显示4张图片,两边箭头的宽度和为50 - // this.itemWidth = (this.middleImgWidth-30) / 2 - - -this.ifadroind(); - this.$nextTick(() => { - console.log(this.menu); + let user= JSON.parse(localStorage.getItem("message")); + console.log(user); + if(user!==null){ + this.pictureList=user; + } + if (user && user.length) { + this.pictureList = user + } + this.middleImg = this.pictureList[0].attachmentPath; + console.log(this.middleImg); + // 计算缩略图的宽度,默认是显示4张图片,两边箭头的宽度和为50 + // this.itemWidth = (this.middleImgWidth-30) / 2 + this.ifadroind(); + this.$nextTick(() => { + console.log(this.menu); // 容器的高 const imgWidth = this.middleImgHeight + this.thumbnailHeight + 20 // 设置容器宽高 @@ -154,27 +140,28 @@ this.ifadroind(); methods: { //判断是手机打开还是电脑打开 - ifadroind(){ - var sUserAgent = navigator.userAgent.toLowerCase(); - var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; - var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; - var bIsMidp = sUserAgent.match(/midp/i) == "midp"; - var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; - var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; - var bIsAndroid = sUserAgent.match(/android/i) == "android"; - var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; - var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; + ifadroind(){ + var sUserAgent = navigator.userAgent.toLowerCase(); + var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; + var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; + var bIsMidp = sUserAgent.match(/midp/i) == "midp"; + var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; + var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; + var bIsAndroid = sUserAgent.match(/android/i) == "android"; + var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; + var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; - if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) { - // 设置产品图宽高 - $('.middle_img').css({ - width: this.middleImgWidth, - height: this.middleImgHeight - }) - - }else{ - -} + if ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) { + //Mob Screen + }else{ + //PC screen size + this.middleImgWidth=560; + this.middleImgHeight=560; + } + $('.middle_img').css({ + width: this.middleImgWidth, + height: this.middleImgHeight + }) }, // 产品图片鼠标移入事件,显示阴影,显示大图 boxMouseOver (e) { diff --git a/rc-busness/nuxt.config.js b/rc-busness/nuxt.config.js index 67a11eff..518988ac 100644 --- a/rc-busness/nuxt.config.js +++ b/rc-busness/nuxt.config.js @@ -1,4 +1,4 @@ -const rem = '!function(e){var t,n=document,i=window,o=n.documentElement;function u(){var t=o.getBoundingClientRect().width/e*100;o.style.fontSize=t+"px"}u(),i.addEventListener("resize",function(){clearTimeout(t),t=setTimeout(u,300)},!1),i.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(t),t=setTimeout(u,300))},!1)}(750);'; +//const rem = '!function(e){var t,n=document,i=window,o=n.documentElement;function u(){var t=o.getBoundingClientRect().width/e*100;o.style.fontSize=t+"px"}u(),i.addEventListener("resize",function(){clearTimeout(t),t=setTimeout(u,300)},!1),i.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(t),t=setTimeout(u,300))},!1)}(750);'; export default { @@ -10,7 +10,7 @@ export default { lang: 'en' }, script: [ - { src: '/js/rem.js' }, + //{ src: '/js/rem.js' }, // { src: '/js/flexible.js', type: 'text/javascript', charset: 'utf-8'}, { src: 'https://ocstest.royalcanin.com.cn:8081/livechat/chatapp/customer/branch/RoyalCanin/14053/index.js' }, { src: '"https://ocstest.royalcanin.com.cn:8081/livechat/chatapp/customer/branch/RoyalCanin/14054/index.js"' } diff --git a/rc-busness/pages/productdetails/producted.vue b/rc-busness/pages/productdetails/producted.vue index d7e667ab..08446036 100644 --- a/rc-busness/pages/productdetails/producted.vue +++ b/rc-busness/pages/productdetails/producted.vue @@ -5,43 +5,41 @@
-
+
-
+

{{ item.productName }}

-
+
- 商品价格 - ￥{{ item.rsp }} - ￥{{item.ecPrice}} + 商品价格： + ￥{{ item.rsp }} + ￥{{ item.ecPrice }}
- 活动促销: + 活动促销： 全场商品限时优惠
立即领取
-
- 加入购物车 - 立即购买 -
-
- +
+
+
+
- 商品规格： + 商品规格：