diff --git a/rc-busness/assets/css/global.less b/rc-busness/assets/css/global.less index 8da2ca1c..903d422d 100644 --- a/rc-busness/assets/css/global.less +++ b/rc-busness/assets/css/global.less @@ -9,16 +9,10 @@ body{ opacity: 0; } .userloding { - position: fixed; - left: 50%; - margin-left: -1.56rem; - top: 50%; - margin-top: -3.75rem; background: url(../image/onloading.png) center center no-repeat; width: 3.12rem; background-size: contain; - height: 7.5rem; - z-index: 1000; + height: 3.12rem; animation: rolling 4s infinite; -webkit-animation:rolling 4s infinite; } @@ -229,13 +223,12 @@ img, picture { right: 0; top: 30%; background: #FFFFFF; - box-shadow: 0px 0px .62rem rgba(0, 0, 0, 0.16); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.16); border-radius: .25rem; z-index:3; ul{ width: 60px; height: 181px; - box-shadow: 0px 0px 6px rgb(0 0 0 / 10%); background-color: white; display: flex; flex-direction: column; @@ -323,9 +316,7 @@ img, picture { margin-top: 90px; } .rc-list__header { - background: none; - padding: .5rem 0; - border-bottom: none; + } .ts-right-arr { border-bottom:1px solid #E1001A; @@ -416,8 +407,13 @@ img, picture { display:block; li{ max-width:20rem; + min-width:18.75rem; + width:22.8vw; //margin-right:.875rem; - margin-left:2.2vw; + margin-left:2vw; + padding-left:1px; + padding-right:1px; + box-sizing: border-box; .rc-column{ span{ font-size:1.875rem; @@ -432,7 +428,7 @@ img, picture { } } img{ - width:21.7vw; + width:100%; max-width:320px; min-width:160px; } @@ -539,35 +535,40 @@ img, picture { } h2{ font-size:20px; + padding-bottom:1rem; } .ts-scrollable { + padding-bottom:1rem; + scrollbar-width: thin; li { margin-left: 30px; width: 8.125rem; height: 2.5rem; - line-height: 40px; + //line-height: 40px; font-size: .875rem; + padding:.375rem; } - /* + &::-webkit-scrollbar{ - background:unset; - height:4px; + height: 6px; + width:50%; + background:transparent; } &::-webkit-scrollbar-thumb{ background-color:#d7d7d7; - height:2px; + border-radius:10px; + width:50%; } &::-webkit-scrollbar-track{ - background-color:ddd; - - height:2px; + //background-color:#ddd; + background-color:transparent; } &::-webkit-scrollbar-button{ background:unset; } - */ + /* */ } } @@ -589,10 +590,10 @@ img, picture { { .ts-product-list { display:flex; - justify-content: space-between; + //justify-content: space-between; li{ - margin-left:0; - margin-right:0; + //margin-left:0; + //margin-right:0; } } } \ No newline at end of file diff --git a/rc-busness/assets/css/index.less b/rc-busness/assets/css/index.less index fc6f260e..77f4b563 100644 --- a/rc-busness/assets/css/index.less +++ b/rc-busness/assets/css/index.less @@ -5,29 +5,44 @@ /deep/.van-swipe__indicator--active{ background-color: #E1001A; } -.rc-ma{ - .ul-zhuan{ - li{ - background: unset;; + +.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 { img{ - border-radius: 50%; + border: 3px solid #E2001A; } - &.active { - img{ - border: 3px solid #E2001A; - } - color: #E2001A; - - } - &.unactive { - color: #444444; - img{ - border: 3px solid #D7D7D7; - } + color: #E2001A; + + } + &.unactive { + color: #444444; + img{ + border: 3px solid #D7D7D7; } } } } + .uservideo{ overflow: hidden; video{ @@ -35,17 +50,50 @@ 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{ - display: none; + justify-content: space-evenly; + img{ + width:4rem; + height:auto; + } + li{ + margin-top:1.875rem; + } } - .searchBara{ - position: fixed; + .ts-banner-swiper-container{ + margin-bottom:2.5rem; + } + .searchBara{ width: 100%; position: fixed; - top:66px; + top:3.75rem; background: white; - z-index: 9999; + z-index: 60; overflow-x: auto; white-space: nowrap; overflow-y:hidden; @@ -62,16 +110,14 @@ display: inline-block; margin-left: 0.20rem; text-align: center; - background: #F6F6F6; border-radius: 50%; opacity: 1; } - } - - .rc-login{ - width: 92%; - margin:0 auto; - } + } + .rc-login{ + width: 92%; + margin:0 auto; + } .userunlogin{ width: 100%; height: 0.60rem; @@ -101,9 +147,6 @@ } } - .van-swipe{ - z-index: 2; - } .rc-usermessage{ span{ font-size: 1rem; @@ -119,10 +162,12 @@ height: auto; object-fit: cover; } - + + .van-swipe{ + z-index: 2; + } .van-swipe-item { color: #fff; - height: 26.31rem; width: 100%; font-size: 0.20px; text-align: center; @@ -172,7 +217,6 @@ .uservideo{ width: 100%; height:auto; - max-height: 15.68rem; display: block; video{ max-width:100%; @@ -192,7 +236,7 @@ width: 100%; display: flex; flex-direction: column; - justify-content: center; + justify-content: flex-start; align-items: center; } img{ @@ -209,6 +253,7 @@ margin-top: 1.25rem; } p{ + color: #666666; font-size: .875rem; text-overflow: -o-ellipsis-lastline; overflow: hidden; @@ -219,6 +264,10 @@ -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; @@ -301,22 +350,22 @@ } } - .active { - font-size: 0.14rem; - img{ - border-width: 1px; - } - } - .unactive { - font-size: 0.14rem; - img{ - border-width: 1px; - } - } // .usermain{ // display: none; // } } +.active { + font-size: 0.14rem; + img{ + border-width: 1px; + } +} +.unactive { + font-size: 0.14rem; + img{ + border-width: 1px; + } +} @media screen and (min-width: 769px) @@ -324,14 +373,21 @@ .rc-selection{ display: none; } - .sw-center{ - display: none; - } -.useraimg{ -width: 100%; -// height: 29.31rem; -object-fit: cover; -} + .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; + } + } .van-swipe-item { color: #fff; height: 100%; @@ -350,15 +406,12 @@ object-fit: cover; #xxxFullScreen { background-color: white; // margin-top: 100px; - #swiper1 { - width: 100%; + #swiper1,#swiper2 { overflow: hidden; margin-top: 2.31rem; - - h2{ - padding-bottom: 5rem; - } - + } + h2{ + padding-bottom: 5rem; } .swiper-container2 { @@ -367,10 +420,10 @@ object-fit: cover; // overflow: visible !important; position: relative; } -#swiper1 .swiper-container .swiper-wrapper .swiper-slide { - width: 100%; - //height: 6.18rem; -} + #swiper1 .swiper-container .swiper-wrapper .swiper-slide { + width: 100%; + //height: 6.18rem; + } /* 上一张 */ #swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev { @@ -518,14 +571,18 @@ img{ display: block; } img{ - width: 10vw; - height: 10vw; + width:100%; + height: auto; + object-fit: contain; display: block; } li{ + width: 10vw; + max-width:11rem; cursor: pointer; font-size: 16px; text-align: center; + overflow:hidden; } } @@ -540,33 +597,7 @@ img{ } .usermain{ - .ul-dog{ - width: 100%; - display: flex; - justify-content: center; - flex-wrap: wrap; - flex-direction: row; - - span{ - margin-top: 2.5rem; - display: block; - } - img{ - width: 9.5rem; - height: 9.5rem; - display: block; - } - li{ - cursor: pointer; - font-size: 16px; - width: 9.875rem; - text-align: center; - height: 9.875rem; - background: #F6F6F6; - border-radius: 50%; - margin-left:3rem; - } - } + } .rc-main{ width: 100%; diff --git a/rc-busness/assets/css/login.less b/rc-busness/assets/css/login.less index 8ba135c4..815bc53b 100644 --- a/rc-busness/assets/css/login.less +++ b/rc-busness/assets/css/login.less @@ -1,7 +1,9 @@ .container{ - min-height:80vh; + min-height:100vh; height:100%; - background-color:#f6f6f6; + background-color:#fff; + display: flex; + flex-direction: column; } .ts-max-width--460{ border-radius: 3px; @@ -20,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/openaddress.less b/rc-busness/assets/css/openaddress.less index 265696d3..689de33e 100644 --- a/rc-busness/assets/css/openaddress.less +++ b/rc-busness/assets/css/openaddress.less @@ -1,310 +1,11 @@ - - -.rc-margin-bottom--lg{ - margin: 0; -} - - @media screen and (max-width:768px){ - .online{ - width:100%; - background:#d7d7d7; - margin-top:1.5rem; - height:.06rem; - &.bold{ - height:8px; - background:#f6f6f6; - } - } - .useredit{ - display: none; - } - .rc-button{ - display: flex; - align-items: center; - justify-content: center; - width: 375px; -height: 80px; -background: #FFFFFF; -box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1); -opacity: 1; -border-radius: 0px; - } - .rc-footbutton { - width: 164px; -height: 48px; -border: 2px solid #E2001A; -opacity: 1; -border-radius: 30px; -background: #E2001A; -display: flex; -justify-content: center; -align-items: center; -font-size: 16px; -color: #FFFFFF; - - - } -.rc-max-width--xl{ - padding: 24px 20px 24px 20px; - .rc-title { - display: flex; - align-items: center; - color: #333333; - font-size: 14px; - em { - font-style: normal; - font-size: 14px; - } - span { - display: block; - margin-left: 8px; - } - } - .rc-center{ - padding-top: 24px; - } - -} - - .rc-address { - margin-top: 8px; - text-overflow: -o-ellipsis-lastline; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - line-clamp: 2; - -webkit-box-orient: vertical; - font-size: 14px; - color: #333333; - } - .rc-footer { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 20px; - display: flex; - align-items: center; - .rc-right { - span { - border-bottom: 1px solid #666666; - } - span:first-child { - margin-right: 16px; - } - } - img{ - width: 43px; - } - .rc-foot{ - display: flex; - align-items: center; - color: #333333; - font-size: 14px; - span{ - margin-left: 8px; - } - } - } - } @media screen and (min-width: 769px) - { - .usercontend { - display:inline-block; -} - .usercontshow{ - .rc-button{ - display: none; - } - } - - .usercontend{ - margin-top: 40px; - } - .online{ - display: none; - } - .rc-button{ - display: none; - } - .useredit{ - width: 680px; -height: 164px; -background: #FFFFFF; -border: 1px solid #D7D7D7; -opacity: 1; -border-radius: 3px; -display: flex; -align-items: center; -justify-content: center; -img{ - width: 31px; - height: 31px; -} -span{ - color: #333333; - font-size: 18px; -} - } - .usercontend{ - .useradd{ - width: 680px; -height: 164px; -background: #FFFFFF; -border-radius: 3px; -img{ - width: 31px; - height: 31px; - display: block; -} - } - -} - .rc-max-width--xl{ - - .rc-center{ - margin-top: 24px; - margin-left: 24px; - } - .rc-cat{ - width: 640px; - border: 1px solid #D7D7D7; - border-radius: 3px; - position: relative; - margin-left: 40px; - height: 164px; - } - .rc-title { - display: flex; - align-items: center; - color: #333333; - font-size: 20px; - em { - font-style: normal; - } - span { - display: block; - margin-left: 32px; - font-size: 20px; - } - } - .rc-footer { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 20px; - display: flex; - align-items: center; - .rc-right { - position: absolute; - right: 24px; - top: 24px; - span { - border-bottom: 1px solid #666666; - } - span:first-child { - margin-right: 16px; - } - } - img{ - width: 43px; - } - .rc-foot{ - display: flex; - align-items: center; - color: #333333; - font-size: 16px; - margin-top: 16px; - span{ - margin-left: 8px; - } - } - } - - } - .rc-max-width--xl{ - - - .rc-button { - height: 80px; - background: #ffffff; - box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1); - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - display: block; - - .rc-footbutton { - width: 164px; - height: 48px; - border: 2px solid #e2001a; - opacity: 1; - border-radius: 30px; - display: flex; - align-items: center; - background: #e2001a; - span { - display: block; - text-align: center; - color: white; - font-size: 16px; - width: 100%; - } - } - } - .rc-header { - display: flex; - align-items: center; - color: #333333; - em { - font-style: normal; - font-size: 14px; - } - span { - display: block; - margin-left: 8px; - } - } - .rc-address { - margin-top: 16px; - text-overflow: -o-ellipsis-lastline; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - line-clamp: 2; - -webkit-box-orient: vertical; - font-size: 20px; - color: #333333; - - } - .rc-footer { - display: flex; - justify-content: space-between; - align-items: center; - padding-bottom: 20px; - margin-top: 8px; - .rc-right { - span { - border-bottom: 1px solid #666666; - } - span:first-child { - margin-right: 16px; - } - } - } - - - } - } \ No newline at end of file diff --git a/rc-busness/assets/image/Forms-Switch-Off@3x.png b/rc-busness/assets/image/Forms-Switch-Off@3x.png new file mode 100644 index 00000000..fcfef96a Binary files /dev/null and b/rc-busness/assets/image/Forms-Switch-Off@3x.png differ diff --git a/rc-busness/components/addressInput.vue b/rc-busness/components/addressInput.vue index 8fb5f83f..32c553a7 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:[], @@ -162,7 +163,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 { @@ -176,7 +177,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; @@ -234,9 +235,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; @@ -308,6 +315,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; @@ -400,10 +424,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/components/header.vue b/rc-busness/components/header.vue index 7c10461f..3c121957 100644 --- a/rc-busness/components/header.vue +++ b/rc-busness/components/header.vue @@ -58,11 +58,6 @@ --> - - - translations.feature.headerbar.pin - - @@ -75,16 +70,16 @@
@@ -94,49 +89,49 @@
  • - 猫 + 猫
  • - 犬 + 犬
  • - 定制营养方案 + 定制营养方案
    • +