diff --git a/rc-busness/assets/css/addaddress.less b/rc-busness/assets/css/addaddress.less new file mode 100644 index 00000000..471c5f6f --- /dev/null +++ b/rc-busness/assets/css/addaddress.less @@ -0,0 +1,212 @@ + + + +@media screen and (max-width:768px){ + .usercontend{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + .rc-useaddress{ + textarea{ + display: none; + } + } + .rc-button{ + display: flex; + justify-content: center; + font-size: 14px; + width: 100%; + box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1); + height: 80px; + align-items: center; + padding:0 20px 0 20px; + span + { + width: 160px; + height: 48px; + border: 2px solid #E2001A; + border-radius: 30px; + display: flex; + align-items: center; + justify-content: center; + color: #E2001A; + } + em{ + font-style: normal; + width: 164px; + height: 48px; + background: #E2001A; + cursor: pointer; + border-radius: 30px; + display: flex; + align-items: center; + justify-content: center; + color: #FFFFFF; + margin-left: 40px; + } + } + .rc-max-width--xl{ + h2{ + display: none; + } + } + + } + +.rc-max-width--xl{ + margin-top: 16px; + input{ + width: 258px; + height: 34px; + border: none; + border-bottom: 1px solid #808285; + color: #999999; + font-size: 16px; + margin-left: 2px; + } + span{ + font-size: 16px; + font-weight: bold; + width: 22%; + text-align: center; + color: #333333; + margin-top: 2px; + } + .rc-people{ + width: 100%; + display: flex; + align-items: center; + span{ + text-align: left; + } + } +// .rc-phone{ + +// } +// .rc-address{ + +// } +// .rc-useaddress{ + +// } + + + +} + + +} + +@media screen and (min-width: 769px) +{ + .usercontend{ + display: flex; + align-items: center; + justify-content: center; + position: relative; + flex-direction: column; + .rc-button{ + display: flex; + justify-content: center; + font-size: 14px; + width: 100%; + box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1); + height: 80px; + align-items: center; + + padding:0 20px 0 20px; + span + { + width: 160px; + height: 48px; + border: 2px solid #E2001A; + border-radius: 30px; + display: flex; + align-items: center; + justify-content: center; + color: #E2001A; + } + em{ + font-style: normal; + width: 164px; + height: 48px; + background: #E2001A; + cursor: pointer; + border-radius: 30px; + display: flex; + align-items: center; + justify-content: center; + color: #FFFFFF; + margin-left: 40px; + } + } + h2{ + font-size: 26px; + color: #333333; + text-align: center; + font-weight: bold; + } + .rc-useaddress{ + display: flex; + align-items: center; + textarea{ + width: 680px; + height: 118px; + background: #FFFFFF; + border: 1px solid #808285; + opacity: 1; + border-radius: 0px; + padding-top: 12px; + padding-left: 16px; + } + +.userinput{ + display: none; +} + } + } + + +.rc-max-width--xl{ + margin-top: 16px; + input{ + width: 680px; + height: 45px; + border: 1px solid #808285; + color: #999999; + font-size: 16px; + margin-left: 2px; + padding-left: 16px; + } + span{ + font-size: 16px; + font-weight: bold; + width: 10%; + text-align: center; + color: #333333; + margin-top: 2px; + } + .rc-people{ + width: 100%; + display: flex; + align-items: center; + + } + +// .rc-phone{ + +// } +// .rc-address{ + +// } +// .rc-useaddress{ + +// } + + + +} + + +} \ No newline at end of file diff --git a/rc-busness/assets/css/editaddress.less b/rc-busness/assets/css/editaddress.less new file mode 100644 index 00000000..269b6de2 --- /dev/null +++ b/rc-busness/assets/css/editaddress.less @@ -0,0 +1,89 @@ +@media screen and (max-width:768px){ + .rc-button{ + display: flex; + justify-content: center; + font-size: 14px; + width: 100%; + box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1); + height: 80px; + align-items: center; + position: absolute; + bottom: 0; + padding:0 20px 0 20px; + span + { + width: 160px; + height: 48px; + border: 2px solid #E2001A; + border-radius: 30px; + display: flex; + align-items: center; + justify-content: center; + color: #E2001A; + } + em{ + font-style: normal; + width: 164px; + height: 48px; + background: #E2001A; + cursor: pointer; + border-radius: 30px; + display: flex; + align-items: center; + justify-content: center; + color: #FFFFFF; + margin-left: 40px; + } + } +.rc-max-width--xl{ + margin-top: 16px; + input{ + width: 258px; + height: 34px; + border: none; + border-bottom: 1px solid #808285; + color: #999999; + font-size: 16px; + margin-left: 2px; + } + span{ + font-size: 16px; + font-weight: bold; + width: 22%; + text-align: center; + color: #333333; + margin-top: 2px; + } + .rc-people{ + width: 100%; + display: flex; + align-items: center; + span{ + text-align: left; + } + + + } +// .rc-phone{ + +// } +// .rc-address{ + +// } +// .rc-useaddress{ + +// } + + + +} + + +} + +@media screen and (min-width: 769px) +{ + + + +} \ No newline at end of file diff --git a/rc-busness/assets/css/global.less b/rc-busness/assets/css/global.less index c0f8706f..903d422d 100644 --- a/rc-busness/assets/css/global.less +++ b/rc-busness/assets/css/global.less @@ -8,30 +8,6 @@ body{ .fade-leave-active { opacity: 0; } - -.ts-mask{ - width:100%; - height:100%; - position: fixed; - top:0; - left:0; - display:flex; - flex-direction: column; - justify-content: center; - align-items: center; - z-index:99; - - .ts-mask-bg{ - background-color:#000; - opacity:.6; - width:100%; - height:100%; - z-index:0; - position:absolute; - left:0; - top:0; - } -} .userloding { background: url(../image/onloading.png) center center no-repeat; width: 3.12rem; @@ -393,12 +369,15 @@ img, picture { } .ts-scrollable{ li{ - // width: 4.125rem; + width: 6rem; + overflow: hidden; padding: 0 0.62rem; height: 1.625rem; margin-left: .5rem; font-size:.75rem; - line-height: 1.375rem; + text-overflow:ellipsis; + white-space:nowrap; + line-height: 1.625rem; } &::-webkit-scrollbar{ display:none; @@ -410,6 +389,7 @@ img, picture { /* pc端 */ @media screen and (min-width: 769px) { + /deep/.van-tabs__wrap { max-width: 768px; diff --git a/rc-busness/assets/css/index.less b/rc-busness/assets/css/index.less index 77f4b563..063e45a2 100644 --- a/rc-busness/assets/css/index.less +++ b/rc-busness/assets/css/index.less @@ -5,29 +5,10 @@ /deep/.van-swipe__indicator--active{ background-color: #E1001A; } - -.ts-carousel-indicator{ - /deep/.swiper-pagination-bullet{ - margin-left:.5rem; - } - /deep/.swiper-pagination-bullet-active{ - background:#E2001A; - } - &.center{ - width:100%; - text-align: center; - } -} -.ts-position-identifier{ - -} -.ul-zhuan,.ul-dog{ - li{ - background: unset; - img{ - border-radius: 50%; - } - &.active { +.rc-ma{ + .ul-zhuan{ + li{ + background: unset;; img{ border: 3px solid #E2001A; } @@ -50,30 +31,6 @@ width:auto; } } -.ul-dog{ - width: 100%; - display: flex; - justify-content: center; - flex-wrap: wrap; - flex-direction: row; - - span{ - margin-top: .5rem; - display: block; - } - img{ - width: 9.5rem; - height: auto; - display: block; - } - li{ - cursor: pointer; - font-size: 16px; - text-align: center; - margin-top:3rem; - margin-left:3rem; - } -} @media screen and (max-width:768px){ .ul-dog{ justify-content: space-evenly; @@ -217,6 +174,7 @@ .uservideo{ width: 100%; height:auto; + max-height: 15.68rem; display: block; video{ max-width:100%; @@ -264,10 +222,6 @@ -webkit-box-orient: vertical; max-width: 60%; text-align: center; - word-break: keep-all; - height: 2.625rem; - display: flex; - align-items: center; } em{ font-style: normal; @@ -373,21 +327,14 @@ .rc-selection{ display: none; } - .sw-center{ - display: none; - } - .useraimg{ - width: 100%; - // height: 29.31rem; - object-fit: cover; - } - .ts-banner-swiper-container{ - position:relative; - .ts-carousel-indicator{ - position:absolute; - bottom:.4rem; - } - } + .sw-center{ + display: none; + } +.useraimg{ +width: 100%; +// height: 29.31rem; +object-fit: cover; +} .van-swipe-item { color: #fff; height: 100%; diff --git a/rc-busness/assets/css/integral.less b/rc-busness/assets/css/integral.less index e461175d..cf1c9309 100644 --- a/rc-busness/assets/css/integral.less +++ b/rc-busness/assets/css/integral.less @@ -26,10 +26,7 @@ span{ } } } -.rc-usermain{ - width: 92%; - margin: 0 auto; - +.rc-max-width--xl{ ul{ height: 70px; display: block; diff --git a/rc-busness/assets/css/login.less b/rc-busness/assets/css/login.less index f166c777..815bc53b 100644 --- a/rc-busness/assets/css/login.less +++ b/rc-busness/assets/css/login.less @@ -1,7 +1,7 @@ .container{ min-height:100vh; height:100%; - background-color:#f6f6f6; + background-color:#fff; display: flex; flex-direction: column; } @@ -22,6 +22,7 @@ @media screen and (max-width:768px) { .ts-max-width--460{ padding:4.375rem 1.25rem; + box-shadow: unset; } .rc-column *{ font-size:.875rem; diff --git a/rc-busness/assets/css/product-list.less b/rc-busness/assets/css/product-list.less index cf1e3bef..b1fd2b92 100644 --- a/rc-busness/assets/css/product-list.less +++ b/rc-busness/assets/css/product-list.less @@ -9,10 +9,18 @@ ul li ol li em strong i { //rc-main start margin-top:.23rem; .usersearch { + .ts-scrollable-container{ + h2{ + font-weight: bold; + color: #333333; + } + } + margin: 0 auto; overflow: hidden; } + //rc-main end } @@ -24,6 +32,53 @@ ul li ol li em strong i { .usercontentshow{ position: relative; + .rc-productcat { + display: flex; + align-items: center; + flex-wrap: nowrap; + ol{ + display: flex; + align-items: center; + flex-flow: row; + .ts-standard-btn{ + width: 7.87rem; + height: 2.25rem; + background: #FFFFFF; + border-radius: 6.25rem; + background: none; + display: flex; + align-items: center; + justify-content: center; + margin-left: 1rem; + color: #999999; + img { + height: 1rem; + } + span { + margin-left: 0.18rem; + } + } + } + .userrccat{ + width: 32%; + height: 34px; + background: #ffffff; + border-radius: 100px; + display: flex; + align-items: center; + justify-content: center; + margin-left: 0; + font-size: 14px; + span { + margin-left: 3px; + } + img { + width: 24px; + height: 16px; + } + border: 2px solid #E2001A; + } + } .userrccat{ width: 32%; height: 34px; @@ -93,48 +148,7 @@ ul li ol li em strong i { height: 617px; background: white; z-index: 999; - .rc-productcat { - display: flex; - align-items: center; - flex-wrap: nowrap; - .rc-cat { - width: 32%; - height: 34px; - background: #ffffff; - border-radius: 100px; - display: flex; - align-items: center; - justify-content: center; - margin-left: 0; - font-size: 14px; - span { - margin-left: 3px; - } - img { - width: 24px; - height: 16px; - } - } - .userrccat{ - width: 32%; - height: 34px; - background: #ffffff; - border-radius: 100px; - display: flex; - align-items: center; - justify-content: center; - margin-left: 0; - font-size: 14px; - span { - margin-left: 3px; - } - img { - width: 24px; - height: 16px; - } - border: 2px solid #E2001A; - } - } + } @@ -219,6 +233,7 @@ ul li ol li em strong i { justify-content: center; font-size: .14rem; margin-right:.2rem; + margin-left: 16px; span { margin-left: 3px; } @@ -303,6 +318,7 @@ ul li ol li em strong i { //pc端 @media screen and (min-width: 768px){ + .userrccat{ width: 327px; height: 48px; @@ -328,6 +344,7 @@ ul li ol li em strong i { } .online{ width:100%; + margin-top: 17px; &.bold{ height:0.5rem; margin-top: 5rem; @@ -378,7 +395,13 @@ ul li ol li em strong i { } .rc-bottom{ - .rc-productcat { + .rc-productcat { + ol{ + display: flex; + align-items: center; + flex-flow: row; + + } display: flex; align-items: center; flex-wrap: nowrap; @@ -485,7 +508,7 @@ border-radius: 30px; margin-left: 16px; } span { - margin-left: 0px; + margin-left: 4px; } img { width: 24px; @@ -542,18 +565,38 @@ border-radius: 30px; } */ .ts-scrollable-container{ - overflow-y: hidden; - overflow-x: clip; + width: 100%; + margin-top: 18px; h2{ display: flex; align-items: center; width: 4%; } .ts-scrollable{ - overflow-y: hidden; - overflow-x: clip; width: 100%; + ol{ + display: flex; + align-items: center; + } + .ts-standard-btn{ + width: 237px; + height: 48px; +background: #FFFFFF; +border-radius: 30px; +background: none; +display: flex; +align-items: center; +justify-content: center; +margin-left: 40px; +img { +width: 24px; +height: 24px; +} +span { +margin-left: 8px; +} + } } } diff --git a/rc-busness/assets/css/search.less b/rc-busness/assets/css/search.less index 27cce00e..e843f622 100644 --- a/rc-busness/assets/css/search.less +++ b/rc-busness/assets/css/search.less @@ -14,15 +14,6 @@ ul li ol li em strong i { position: relative; margin-top: 5.25rem; - .usersearch { - width: 100%; - margin: 0 auto; - overflow: hidden; - margin-top: 20px; - .rc-padding--md{ - padding: 0; - } - } .active{ border: 2px solid #E2001A; color: #E2001A; @@ -38,6 +29,22 @@ ul li ol li em strong i { } //手机端 @media screen and (max-width: 768px) { + .usersearch { + width: 100%; + margin: 0 auto; + overflow: hidden; + margin-top: 20px; + .ts-scrollable-container{ + h2{ + font-weight: bold; + color: #333333; + +} +} + .rc-padding--md{ + padding: 0; + } + } .rc-button { display: flex; @@ -47,6 +54,9 @@ ul li ol li em strong i { box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1); height: 80px; align-items: center; + position: absolute; + bottom: 0; + padding:0 20px 0 20px; span { width: 160px; @@ -129,8 +139,9 @@ strong{ color: #333333; margin-top: 1.5rem; h2{ - font-size: 18px; + font-size: 16px; font-weight: bold; + color: #333333; } span { font-size: 14px; @@ -168,6 +179,9 @@ strong{ // 我想搜 .usercontentshow{ position: relative; + .rc-column{ + padding-bottom: 0; + } .rc-productcat { display: flex; align-items: center; @@ -189,13 +203,15 @@ justify-content: center; margin-left: 1rem; color: #999999; img { -width: 1.5rem; height: 1rem; } span { margin-left: 0.18rem; } } + li:first-child{ + margin-left: 0; + } } //筛选 .userselect{ @@ -220,7 +236,7 @@ margin-left: 0.18rem; } .ts-scrollable-container{ - margin-top: 0.93rem; + margin-top: 1rem; } } @@ -236,6 +252,7 @@ margin-left: 0.18rem; } h2{ margin-left: 0; + font-weight: bold; } } @@ -275,22 +292,10 @@ border-radius: 100px; .rc-bottom{ position: fixed; background: white; + height: 617px; bottom: 0; left: 0; z-index: 9; - ol li{ - background: none; - width: 7.87rem; - height: 2.25rem; - background: #FFFFFF; - border-radius: 6.25rem; - background: none; - display: flex; - align-items: center; - justify-content: center; - margin-left: 1rem; - } - } .rc-bottoma{ @@ -376,7 +381,25 @@ border-radius: 100px; } //pc端 @media screen and (min-width: 768px){ + .usersearch { + width: 100%; + margin: 0 auto; + overflow: hidden; + margin-top: 40px; + .ts-scrollable-container{ + h2{ + font-weight: bold; + color: #333333; +} +} + .rc-padding--md{ + padding: 0; + } + } + .online{ + margin-top: 47px; + } /deep/.el-dialog__header { padding: 0; margin: 0; @@ -392,6 +415,7 @@ border-radius: 100px; display: flex; align-items: center; width: 6%; + color: #333333; } .ts-scrollable{ // overflow-y: hidden; @@ -501,9 +525,10 @@ margin-left: 8px; color: #333333; margin-top: 12px; h2 { - font-size: 18px; + font-size: 26px; + font-weight: bold; color: #333333; - margin-left: 12px; + margin: 0; } span { font-size: 14px; @@ -597,13 +622,16 @@ border-radius: 30px; /deep/.van-search__content--square{ background: white; } + /deep/.van-search{ + padding-left: 0; + } .van-search__content--square{ display: flex; align-items: center; justify-content: center; background: white; border: 1px solid #D7D7D7; - height: 80px; + height: 50px; width: 1200px; border-radius: 200px; } @@ -648,9 +676,11 @@ border-radius: 30px; } .rc-product { h2 { - font-size: 18px; + font-size: 26px; + font-weight: bold; color: #333333; - margin-left: 12px; + margin: 0; + } } .rc-productcat { diff --git a/rc-busness/components/addressInput.vue b/rc-busness/components/addressInput.vue index bb83bd81..931ccb23 100644 --- a/rc-busness/components/addressInput.vue +++ b/rc-busness/components/addressInput.vue @@ -41,6 +41,7 @@ export default { props:["defaultValues"], data(){ return{ + animationTimer:undefined, displayValue:"", returnValue:"", returnValueArr:[], @@ -158,7 +159,7 @@ export default { if(obj.id.indexOf(provinceId)<0) { console.log('500 : error via checking validatePickedValues'); - _self.returnValueArr[index]={}; + _self.returnValueArr.splice(index,1); } else { @@ -172,7 +173,7 @@ export default { if(areaId && obj.id.indexOf(areaId)<0) { console.log('501 : error via checking validatePickedValues'); - _self.returnValueArr[index]={}; + _self.returnValueArr.splice(index,1); } else{ validatedIndex=index; @@ -230,9 +231,15 @@ export default { //TODO show warning here let errorEle=document.querySelector(".ts-area-picker-values"); errorEle.classList.add("error"); - setTimeout(function(){ - errorEle.classList.remove("error"); - },2000); + let _self = this; + if(!this.animationTimer) + { + this.animationTimer = setTimeout(function(){ + errorEle.classList.remove("error"); + clearTimeout(_self.animationTimer); + _self.animationTimer=undefined; + },2000); + } tabIndex=lastValidatedTabIndex+1; } this.curDisplayingColIndex=tabIndex; @@ -304,6 +311,23 @@ export default { .ts-area-picker-values{ width:100%; height:100%; + &.error{ + position:relative; + width:100%; + height:78%; + &:after{ + content: " "; + position:absolute; + width:100%; + height:100%; + left:0; + top:0; + animation-name: flash-error; + animation-iteration-count: 2; + animation-duration: .5s; + animation-direction: forwards; + } + } ul{ padding:1rem 2.5rem 2rem 2.5rem; margin:0; @@ -396,10 +420,12 @@ export default { @keyframes flash-error { from { - opacity:.6; + opacity:0; + background-color:#fff; } to { opacity:.3; + background-color:#E2001A; } } \ No newline at end of file diff --git a/rc-busness/nuxt.config.js b/rc-busness/nuxt.config.js index cc8a93f8..98b61444 100644 --- a/rc-busness/nuxt.config.js +++ b/rc-busness/nuxt.config.js @@ -4,10 +4,10 @@ export default { // Global page headers: https://go.nuxtjs.dev/config-head head: { - title: 'rc-busness', + title: '皇家官方商城', htmlAttrs: { - lang: 'en', + lang: 'zh-cn', }, script: [ //{ src: '/js/rem.js' }, diff --git a/rc-busness/pages/index.vue b/rc-busness/pages/index.vue index 686d037a..0950bc2f 100644 --- a/rc-busness/pages/index.vue +++ b/rc-busness/pages/index.vue @@ -1067,7 +1067,8 @@ spaceBetween: 0, autoplay: true, pagination: { - el: '#homeBannerSwiperPagnation' + el: '#homeBannerSwiperPagnation', + clickable:true }, paginationClickable: true, loopAdditionalSlides: 100, @@ -1094,6 +1095,7 @@ loopAdditionalSlides: 100, pagination: { el: '#catStarSwiperPagnation', + clickable:true }, navigation: { nextEl: '.swiper-button-next', @@ -1117,6 +1119,7 @@ loopAdditionalSlides: 100, pagination: { el: '#dogStarSwiperPagnation', + clickable:true }, navigation: { nextEl: '.swiper-button-next', diff --git a/rc-busness/pages/productdetails/productlist.vue b/rc-busness/pages/productdetails/productlist.vue index 8c8ed82c..862c457d 100644 --- a/rc-busness/pages/productdetails/productlist.vue +++ b/rc-busness/pages/productdetails/productlist.vue @@ -11,17 +11,19 @@
-
- - {{ item.title }} -
+
    +
  1. + + {{ item.title }} +
  2. +
@@ -297,11 +299,13 @@ 确认
+ - \ No newline at end of file + diff --git a/rc-busness/pages/useraddress/editaddress.vue b/rc-busness/pages/useraddress/editaddress.vue index c0ce8fa5..bd7e2e7d 100644 --- a/rc-busness/pages/useraddress/editaddress.vue +++ b/rc-busness/pages/useraddress/editaddress.vue @@ -1,99 +1,131 @@ - \ No newline at end of file + diff --git a/rc-busness/pages/useraddress/openaddress.vue b/rc-busness/pages/useraddress/openaddress.vue index 4f776954..7c619a0a 100644 --- a/rc-busness/pages/useraddress/openaddress.vue +++ b/rc-busness/pages/useraddress/openaddress.vue @@ -4,24 +4,24 @@
-
+
- {{ item.recipient }} + {{ item.name }} - {{ item.recipientPhone }} + {{ item.tel }}
- {{ item.detailAddress }} + {{ item.address }}
@@ -312,11 +313,13 @@
+