mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
Homepage / Product list / Product Detail / header / footer / RoyalCanin css,js added
This commit is contained in:
Vion
parent
016080859d
commit
b93b2f1180
@ -1,19 +0,0 @@
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
@ -10,23 +10,65 @@ img, picture {
|
||||
height: auto;
|
||||
}
|
||||
.rc-main {
|
||||
padding:0 1.25rem;
|
||||
padding-left:1.25rem;
|
||||
padding-right:1.25rem;
|
||||
box-sizing:border-box;
|
||||
margin:0 auto;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
.ts-remove {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.ts-product-list{
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
&:after{
|
||||
content:"";
|
||||
width:154px;
|
||||
}
|
||||
li{
|
||||
img{
|
||||
width: 320px;
|
||||
height:auto;
|
||||
object-fit: contain;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #D7D7D7;
|
||||
display: inline-flex;
|
||||
border-radius: 4px;
|
||||
flex-direction: column;
|
||||
max-width:10rem;
|
||||
.rc-column
|
||||
{
|
||||
text-align:center;
|
||||
padding:0 1rem;
|
||||
box-sizing: border-box;
|
||||
span{
|
||||
height:2.75rem;
|
||||
font-size: 1rem;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
color:#E2001A;
|
||||
}
|
||||
i{
|
||||
font-style: normal;
|
||||
font-size: 1.125rem;
|
||||
margin-top: .5rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
img{
|
||||
width:10rem;
|
||||
height:10rem;
|
||||
object-fit: contain;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
height: auto;
|
||||
}
|
||||
.active{
|
||||
color: #E2001A;
|
||||
cursor: pointer;
|
||||
@ -36,24 +78,37 @@ img, picture {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.rc-age{
|
||||
display: flex;
|
||||
h2{
|
||||
color:#333333;
|
||||
.rc-container {
|
||||
height: 100%;
|
||||
max-width: 1400px;
|
||||
background-color: #fff;
|
||||
margin: auto;
|
||||
}
|
||||
.ts-standard-btn{
|
||||
font-style: normal;
|
||||
width: 8.125rem;
|
||||
height: 2.5rem;
|
||||
border: 2px solid #E2001A;
|
||||
border-radius: 1.875rem;
|
||||
display: block;
|
||||
line-height: 2.5rem;
|
||||
font-size: .875rem;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
background: #E2001A;
|
||||
&.center{
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
ol{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
text-align: center;
|
||||
width: 86%;
|
||||
}
|
||||
li{
|
||||
flex-shrink: 0;
|
||||
&.ts-standard-btn--two{
|
||||
background-color: transparent;
|
||||
color: #e2001a;
|
||||
border-color: #e2001a;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rc-mubu{
|
||||
height: 100%;
|
||||
background: #333333;
|
||||
@ -63,14 +118,41 @@ img, picture {
|
||||
width: 100%;
|
||||
z-index: 8;
|
||||
}
|
||||
.ts-scrollable{
|
||||
overflow-y:hidden;
|
||||
overflow-x:auto;
|
||||
white-space: nowrap;
|
||||
&::-webkit-scrollbar{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
.ts-scrollable-container{
|
||||
display: flex;
|
||||
h2{
|
||||
margin:0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.ts-scrollable{
|
||||
overflow-y:hidden;
|
||||
overflow-x:auto;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
text-align: center;
|
||||
width: 86%;
|
||||
&::-webkit-scrollbar{
|
||||
display:none;
|
||||
}
|
||||
li{
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
.active{
|
||||
color: #E2001A;
|
||||
cursor: pointer;
|
||||
border: 2px solid #E2001A;
|
||||
}
|
||||
.unactive{
|
||||
color:#999999;
|
||||
cursor: pointer;
|
||||
border: 2px solid #d7d7d7;
|
||||
}
|
||||
}
|
||||
|
||||
.online{
|
||||
width:100%;
|
||||
background:#d7d7d7;
|
||||
@ -90,6 +172,10 @@ img, picture {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 30%;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 0px .62rem rgba(0, 0, 0, 0.16);
|
||||
border-radius: .25rem;
|
||||
z-index:3;
|
||||
ul{
|
||||
width: 60px;
|
||||
height: 181px;
|
||||
@ -103,7 +189,7 @@ img, picture {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 0.18rem;
|
||||
margin-top: 1.125rem;
|
||||
}
|
||||
li:last-child{
|
||||
margin-bottom: 0.2rem;
|
||||
@ -131,7 +217,6 @@ img, picture {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 8px;
|
||||
img{
|
||||
width: 0.22rem;
|
||||
height: 0.22rem;
|
||||
@ -195,78 +280,59 @@ img, picture {
|
||||
z-index:3;
|
||||
}
|
||||
}
|
||||
.rc-age{
|
||||
.ts-scrollable-container{
|
||||
margin-bottom:1.25rem;
|
||||
&:last-child{
|
||||
margin-bottom:0;
|
||||
}
|
||||
h2{
|
||||
font-size: 16px;
|
||||
margin-right:.1rem;
|
||||
}
|
||||
ol{
|
||||
font-size: 12px;
|
||||
}
|
||||
li{
|
||||
width: .64rem;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border-radius: 100px;
|
||||
margin-left: 9px;
|
||||
}
|
||||
}
|
||||
.ts-scrollable{
|
||||
.active{
|
||||
border: 2px solid #E2001A;
|
||||
}
|
||||
.unactive{
|
||||
border: 2px solid #d7d7d7;
|
||||
.ts-scrollable{
|
||||
li{
|
||||
width: 4.125rem;
|
||||
height: 1.625rem;
|
||||
margin-left: .5rem;
|
||||
font-size:.75rem;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
/* pc端 */
|
||||
@media screen and (min-width: 769px)
|
||||
{
|
||||
/deep/.van-tabs__wrap
|
||||
{
|
||||
max-width: 768px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
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;
|
||||
.ts-product-list{
|
||||
text-align: left;
|
||||
display:block;
|
||||
li{
|
||||
max-width:20rem;
|
||||
margin-right:.9rem;
|
||||
margin-left:.9rem;
|
||||
.rc-column{
|
||||
span{
|
||||
font-size:1.875rem;
|
||||
height: 5.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
img{
|
||||
width:20rem;
|
||||
}
|
||||
}
|
||||
.rc-main {
|
||||
width:100%;
|
||||
@ -282,9 +348,6 @@ img, picture {
|
||||
}
|
||||
.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;
|
||||
@ -348,20 +411,24 @@ img, picture {
|
||||
}
|
||||
}
|
||||
|
||||
.ts-scrollable{
|
||||
.rc-age{
|
||||
h2
|
||||
{
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
}
|
||||
.ts-scrollable-container
|
||||
{
|
||||
margin-top:1.25rem;
|
||||
&:last-child{
|
||||
margin-bottom:0;
|
||||
}
|
||||
h2{
|
||||
font-size:20px;
|
||||
}
|
||||
.ts-scrollable
|
||||
{
|
||||
li
|
||||
{
|
||||
margin-left: 40px;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
width: 8.125rem;
|
||||
height: 2.5rem;
|
||||
line-height: 40px;
|
||||
font-size: 18px;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,16 @@
|
||||
/deep/.van-swipe__indicator {
|
||||
width:.5rem;
|
||||
height:.5rem;
|
||||
}
|
||||
/deep/.van-swipe__indicator--active{
|
||||
background-color: #E1001A;
|
||||
}
|
||||
@media screen and (max-width:768px){
|
||||
.searchBara{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top:70px;
|
||||
top:66px;
|
||||
background: white;
|
||||
z-index: 9999;
|
||||
overflow-x: auto;
|
||||
@ -67,46 +74,11 @@
|
||||
z-index: 2;
|
||||
}
|
||||
.rc-usermessage{
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
em{
|
||||
font-style: normal;
|
||||
font-size: 0.3rem;
|
||||
display: block;
|
||||
padding-top: 0.8rem;
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
span{
|
||||
font-size: 1rem;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.rc-video{
|
||||
display: none;
|
||||
@ -119,7 +91,7 @@
|
||||
|
||||
.van-swipe-item {
|
||||
color: #fff;
|
||||
height: 3.75rem;
|
||||
height: 26.31rem;
|
||||
width: 100%;
|
||||
font-size: 0.20px;
|
||||
line-height: 1.50rem;
|
||||
@ -127,23 +99,15 @@
|
||||
position: relative;
|
||||
}
|
||||
.rc-lunbo{
|
||||
width: 100%;
|
||||
margin-top: 0.46rem;
|
||||
.rc-selection{
|
||||
display: none;
|
||||
}
|
||||
h2{
|
||||
text-align: center;
|
||||
font-size: 0.26rem;
|
||||
color: #E2001A;
|
||||
}
|
||||
#xxxFullScreen {
|
||||
background-color: white;
|
||||
margin-top: 0.40rem;
|
||||
#swiper1 {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0 0 0.10rem 0;
|
||||
}
|
||||
.swiper-container{
|
||||
height: 6.45rem;
|
||||
@ -155,7 +119,7 @@
|
||||
position: relative;
|
||||
}
|
||||
#swiper1 .swiper-container .swiper-wrapper .swiper-slide {
|
||||
width: 3rem;
|
||||
width: 17.25rem;
|
||||
//height: 6.45rem !important; //Auto adaption
|
||||
}
|
||||
|
||||
@ -176,9 +140,14 @@
|
||||
|
||||
}
|
||||
.uservideo{
|
||||
width: 100%;
|
||||
height: 2.51rem;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height:auto;
|
||||
max-height: 15.68rem;
|
||||
display: block;
|
||||
video{
|
||||
max-width:100%;
|
||||
max-height:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sw-center{
|
||||
@ -197,21 +166,20 @@
|
||||
align-items: center;
|
||||
}
|
||||
img{
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
margin-top: 0.40rem;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
span{
|
||||
font-size: 0.18rem;
|
||||
font-size: 1.125rem;
|
||||
color: #E2001A;
|
||||
display: block;
|
||||
margin-top: 0.20rem;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
p{
|
||||
font-size: 0.14rem;
|
||||
color: #666666;
|
||||
font-size: .875rem;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -219,37 +187,13 @@
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
width: 60%;
|
||||
max-width: 60%;
|
||||
text-align: center;
|
||||
line-height:.24rem;
|
||||
}
|
||||
em{
|
||||
font-style: normal;
|
||||
font-size: 0.20rem;
|
||||
color: #666666;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.sw-cen{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
padding-bottom: 0.2rem;
|
||||
i{
|
||||
font-style: normal;
|
||||
width: 1.30rem;
|
||||
height: 0.40rem;
|
||||
border: 2px solid #E2001A;
|
||||
border-radius: 0.30rem;
|
||||
line-height: 0.40rem;
|
||||
text-align: center;
|
||||
color: #E2001A;
|
||||
font-size: 0.14rem;
|
||||
margin-top: 0.32rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -329,100 +273,6 @@
|
||||
}
|
||||
width: 100%;
|
||||
margin-top: 0.45rem;
|
||||
h2{
|
||||
text-align: center;
|
||||
font-size: 0.26rem;
|
||||
color: #E2001A;
|
||||
}
|
||||
.rc-contair{
|
||||
margin-top: 0.24rem;
|
||||
.rc-rccontair{
|
||||
height:1.60rem;display:flex;align-items: center
|
||||
}
|
||||
ul{
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
li{
|
||||
|
||||
width: 43%;
|
||||
margin-top: 0.16rem;
|
||||
flex-direction: column;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-flex;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #D7D7D7;
|
||||
margin-left: 0.15rem;
|
||||
border-radius: 0.03rem;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
height:100%;
|
||||
}
|
||||
i{
|
||||
font-style: normal;
|
||||
font-size: 0.18rem;
|
||||
margin-top: 0.08rem;
|
||||
color: #666666;
|
||||
display: block;
|
||||
|
||||
}
|
||||
}
|
||||
span{
|
||||
font-size: 0.16rem;
|
||||
color: #666666;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
height: 0.25rem;
|
||||
margin-top: 0.08rem;
|
||||
|
||||
}
|
||||
strong{
|
||||
width: 1.30rem;
|
||||
height: 0.40rem;
|
||||
border: 2px solid #E2001A;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 30px;
|
||||
margin: 0 auto;
|
||||
font-size: 0.14rem;
|
||||
color: #E2001A;
|
||||
margin-top: 0.2rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.userserlect{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 0.40rem;
|
||||
span{
|
||||
width: 1.30rem;
|
||||
height: 0.40rem;
|
||||
background: #E2001A;
|
||||
text-align: center;
|
||||
line-height: 0.40rem;
|
||||
border-radius: 0.30rem;
|
||||
font-size: 0.14rem;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.active {
|
||||
@ -465,11 +315,6 @@ object-fit: cover;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
margin-top: 9.375rem;
|
||||
h2{
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
color: #E2001A;
|
||||
}
|
||||
#xxxFullScreen {
|
||||
background-color: white;
|
||||
margin-top: 100px;
|
||||
@ -508,7 +353,7 @@ object-fit: cover;
|
||||
justify-content: space-evenly;
|
||||
.rc-right
|
||||
{
|
||||
width: 4.40rem;
|
||||
width: 27.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -545,18 +390,8 @@ object-fit: cover;
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
strong
|
||||
.ts-standard-btn
|
||||
{
|
||||
font-style: normal;
|
||||
width: 8.125rem;
|
||||
height: 2.5rem;
|
||||
border: 2px solid #E2001A;
|
||||
border-radius: 1.875rem;
|
||||
display: block;
|
||||
line-height: 2.5rem;
|
||||
text-align: center;
|
||||
color:#E2001A;
|
||||
font-size: .875rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
@ -630,7 +465,8 @@ img{
|
||||
.rc-max-width--xl {
|
||||
.rc-ma
|
||||
{
|
||||
padding-bottom:28px;
|
||||
padding:60px 0;
|
||||
|
||||
.ul-zhuan{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -638,12 +474,12 @@ img{
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
span{
|
||||
margin-top: .5rem;
|
||||
margin-top: 2.5rem;
|
||||
display: block;
|
||||
}
|
||||
img{
|
||||
width: 9.875rem;
|
||||
height: 9.875rem;
|
||||
width: 9.5rem;
|
||||
height: 9.5rem;
|
||||
display: block;
|
||||
}
|
||||
li{
|
||||
@ -666,12 +502,6 @@ img{
|
||||
display: none;
|
||||
}
|
||||
.selectionswitch{
|
||||
width: 100%;
|
||||
h2{
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
color: #E2001A;
|
||||
}
|
||||
.van-tabs{
|
||||
display: none;
|
||||
}
|
||||
@ -691,93 +521,6 @@ margin-left: 2.5rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.rc-contair
|
||||
{
|
||||
margin-top: 1.25rem;
|
||||
ul{
|
||||
text-align: center;
|
||||
margin-top: 4.8rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
li
|
||||
{
|
||||
border-radius: 3px;
|
||||
display: inline-flex;
|
||||
background: #FFFFFF;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #D7D7D7;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 320px;
|
||||
height:auto;
|
||||
object-fit: contain;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
}
|
||||
i{
|
||||
font-style: normal;
|
||||
font-size: 1.125rem;
|
||||
margin-top: .5rem;
|
||||
color: #666666;
|
||||
display: block;
|
||||
font-size: 1.375rem;
|
||||
|
||||
color: #666666;
|
||||
|
||||
}
|
||||
}
|
||||
span{
|
||||
font-size: 1.875rem;
|
||||
color: #E2001A;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
margin-top:1rem;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
}
|
||||
strong{
|
||||
width: 8.125rem;
|
||||
height: 2.5rem;
|
||||
border: 2px solid #E2001A;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 1.875rem;
|
||||
margin: 0 auto;
|
||||
font-size: .875rem;
|
||||
color: #E2001A;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.userserlect{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 5.5rem;
|
||||
padding-top: 5rem;
|
||||
span{
|
||||
width: 8.125rem;
|
||||
height: 2.5rem;
|
||||
background: #E2001A;
|
||||
text-align: center;
|
||||
line-height: 2.5rem;
|
||||
border-radius: 1.875rem;
|
||||
font-size: .875rem;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.active {
|
||||
@ -833,39 +576,10 @@ color: #E2001A;
|
||||
|
||||
}
|
||||
.rc-usermessage{
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
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;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -230,84 +230,6 @@ ul li ol li em strong i {
|
||||
}
|
||||
}
|
||||
*/
|
||||
.rc-contair{
|
||||
.rc-rccontair{
|
||||
height:160px;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
}
|
||||
ul{
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
&:after{
|
||||
content:"";
|
||||
width:154px;
|
||||
}
|
||||
li{
|
||||
margin-bottom: .16rem;
|
||||
border: 1px solid #D7D7D7;
|
||||
display: inline-flex;
|
||||
border-radius: 4px;
|
||||
flex-direction: column;
|
||||
max-width:1.6rem;
|
||||
.rc-column
|
||||
{
|
||||
text-align:center;
|
||||
padding:0 .15rem;
|
||||
box-sizing: border-box;
|
||||
span{
|
||||
height:.44rem;
|
||||
font-size: 0.16rem;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
color:#E2001A;
|
||||
}
|
||||
}
|
||||
}
|
||||
img{
|
||||
max-width:1.6rem;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
height: auto;
|
||||
}
|
||||
i{
|
||||
font-style: normal;
|
||||
font-size: .18rem;
|
||||
margin-top: 8px;
|
||||
color: #666666;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.rc-click{
|
||||
/*
|
||||
max-height: 1.9rem;
|
||||
min-height: 1.9rem;
|
||||
*/
|
||||
}
|
||||
strong{
|
||||
width: 1.2rem;
|
||||
height: 40px;
|
||||
border: 2px solid #E2001A;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 30px;
|
||||
margin: 0 auto;
|
||||
font-size: 14px;
|
||||
color: #E2001A;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//pc端
|
||||
@ -439,7 +361,6 @@ border-radius: 30px;
|
||||
}
|
||||
}
|
||||
.rc-product {
|
||||
margin-top: 30px;
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
@ -451,25 +372,24 @@ border-radius: 30px;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
.rc-cat {
|
||||
width: 108px;
|
||||
width: 327px;
|
||||
height: 48px;
|
||||
border-radius: 30px;
|
||||
background: #ffffff;
|
||||
border-radius: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
&:last-child{
|
||||
margin-left: 16px;
|
||||
}
|
||||
span {
|
||||
margin-left: 0px;
|
||||
font-size: 18px;
|
||||
}
|
||||
img {
|
||||
/*
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
*/
|
||||
display:none;
|
||||
}
|
||||
|
||||
}
|
||||
@ -521,75 +441,4 @@ border-radius: 30px;
|
||||
}
|
||||
}
|
||||
*/
|
||||
.rc-contair{
|
||||
margin-top: 40px;
|
||||
ul{
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
li{
|
||||
border: 1px solid #D7D7D7;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.09);
|
||||
margin-bottom:40px;
|
||||
margin-right:16px;
|
||||
max-width: 320px;
|
||||
.rc-column
|
||||
{
|
||||
text-align:center;
|
||||
padding:0 .15rem;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 32px;
|
||||
span
|
||||
{
|
||||
height:80px;
|
||||
font-size: 30px;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
color:#E2001A;
|
||||
}
|
||||
i{
|
||||
font-style: normal;
|
||||
font-size: 22px;
|
||||
margin-top: 8px;
|
||||
color: #666666;
|
||||
display: block;
|
||||
}
|
||||
strong{
|
||||
width: 1.2rem;
|
||||
height: 40px;
|
||||
border: 2px solid #E2001A;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 30px;
|
||||
margin: 0 auto;
|
||||
font-size: 14px;
|
||||
color: #E2001A;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
img{
|
||||
width: 320px;
|
||||
height:auto;
|
||||
object-fit: contain;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rc-rccontair{
|
||||
height:320px;display:flex;align-items: center
|
||||
}
|
||||
}
|
||||
}
|
||||
1934
rc-busness/assets/css/royalcanin-custom.css
Normal file
1934
rc-busness/assets/css/royalcanin-custom.css
Normal file
File diff suppressed because it is too large
Load Diff
23308
rc-busness/assets/css/royalcanin-standard.css
Normal file
23308
rc-busness/assets/css/royalcanin-standard.css
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<header class="rc-header" data-js-header-scroll="" data-activated="true">
|
||||
<nav class="rc-header__nav rc-header__nav--primary">
|
||||
<ul class="rc-list rc-list--blank rc-list--inline rc-list--align" role="menubar">
|
||||
@ -13,7 +14,7 @@
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="/" class="rc-header__brand">
|
||||
<a href="#" class="rc-header__brand">
|
||||
<h1>
|
||||
<span class="rc-screen-reader-text">translations.feature.headerbar.alternatelogotext</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 223 83.75" class="rc-header__logo">
|
||||
@ -25,29 +26,35 @@
|
||||
</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--inline rc-list--align rc-header__right" role="menubar">
|
||||
<li class="rc-list__item rc-inline-flex" role="menubar">
|
||||
<a href="https://weibo.com/chinaroyalcanin?topnav=1&wvr=6&topsug=1&is_all=1" target="_blank" class="rc-lg-up rc-btn rc-btn--icon rc-icon ts-weibo--xs rc-iconography rc-interactive" aria-label="weibo">
|
||||
<a href="https://weibo.com/chinaroyalcanin?topnav=1&wvr=6&topsug=1&is_all=1" target='_blank' class="rc-lg-up rc-btn rc-btn--icon rc-icon ts-weibo--xs rc-iconography rc-interactive" aria-label="weibo">
|
||||
<span class="rc-screen-reader-text">
|
||||
微博
|
||||
</span>
|
||||
</a>
|
||||
<a href="javascript:;" @mouseenter="bindTracking(this)" evt-name="页内弹窗" evt-cat="headerBtnClick" evt-val="微信扫一扫" class="rc-lg-up rc-btn rc-btn--icon rc-icon ts-wechat--xs rc-iconography rc-interactive" aria-label="wechat">
|
||||
<a href="javascript:;" onmouseenter='bindTracking(this)' evt-name='页内弹窗' evt-cat='headerBtnClick' evt-val='微信扫一扫' class="rc-lg-up rc-btn rc-btn--icon rc-icon ts-wechat--xs rc-iconography rc-interactive" aria-label="wechat">
|
||||
<span class="rc-screen-reader-text">
|
||||
微信
|
||||
</span>
|
||||
<div class="ts-hover-show">
|
||||
<span class="rc-text--center">微信扫一扫</span>
|
||||
<img src="../assets/image/royalcanincn-qrcode.jpg">
|
||||
<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/royalcanincn-qrcode.jpg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" data-modal-trigger="modal-whereToBuy" onclick="bindTracking(this)" evt-name="页内弹窗" evt-cat="headerBtnClick" evt-val="在哪购买" class="rc-btn rc-btn--icon rc-icon rc-pin--xs rc-iconography rc-interactive rc-xs-up" aria-label="pin">
|
||||
<!--
|
||||
<button href="#" onclick='bindTracking(this)' evt-name='页内弹窗' evt-cat='headerBtnClick' evt-val='地理位置选择' class="rc-btn rc-btn--icon rc-icon rc-language--xs rc-iconography rc-interactive rc-md-up" aria-label="language" data-modal-trigger="country-lang-selector" role="menuitem">
|
||||
<span class="rc-screen-reader-text">
|
||||
Language
|
||||
</span>
|
||||
</button>
|
||||
-->
|
||||
<a href="#" data-modal-trigger="modal-whereToBuy" onclick='bindTracking(this)' evt-name='页内弹窗' evt-cat='headerBtnClick' evt-val='在哪购买' class="rc-btn rc-btn--icon rc-icon rc-pin--xs rc-iconography rc-interactive rc-xs-up" aria-label="pin">
|
||||
<span class="rc-screen-reader-text">
|
||||
translations.feature.headerbar.pin
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<nuxt-link :to="`../../productdetails/userdetails/`" @click="bindTracking(this)" evt-name="页内弹窗" evt-cat="headerBtnClick" evt-val="全文搜索" class="rc-btn rc-btn--icon rc-icon rc-search--xs rc-iconography rc-interactive" role="menuitem">
|
||||
<button data-js-trigger="search-bar" onclick='bindTracking(this)' evt-name='页内弹窗' evt-cat='headerBtnClick' evt-val='全文搜索' class="rc-btn rc-btn--icon rc-icon rc-search--xs rc-iconography rc-interactive" aria-label="Search" role="menuitem" data-click-modifier=".rc-hidden">
|
||||
<span class="rc-screen-reader-text">translations.feature.headerbar.search</span>
|
||||
</nuxt-link>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -57,16 +64,16 @@
|
||||
<div class="rc-container">
|
||||
<ul class="rc-list rc-list--blank rc-list--inline rc-list--align rc-header__center">
|
||||
<li class="rc-list__item">
|
||||
<a href="/cats" class="rc-list__header" data-ref="nav-link" role="menuitem" title="猫">猫</a>
|
||||
<a href="#cats" class="rc-list__header" data-ref="nav-link" role="menuitem" title="猫">猫</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="/dogs" class="rc-list__header" data-ref="nav-link" role="menuitem" title="犬">犬</a>
|
||||
<a href="#dogs" class="rc-list__header" data-ref="nav-link" role="menuitem" title="犬">犬</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="/tailored-nutrition" class="rc-list__header" data-ref="nav-link" role="menuitem" title="定制营养方案">定制营养方案</a>
|
||||
<a href="#tailored-nutrition" class="rc-list__header" data-ref="nav-link" role="menuitem" title="定制营养方案">定制营养方案</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="/about" class="rc-list__header" data-ref="nav-link" role="menuitem" title="关于我们">关于我们</a>
|
||||
<a href="#about" class="rc-list__header" data-ref="nav-link" role="menuitem" title="关于我们">关于我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="submenu rc-layout-container rc-one-column rc-margin--none rc-xl-up">
|
||||
@ -74,69 +81,83 @@
|
||||
<div class="rc-full-width rc-max-width--xl rc-padding--sm">
|
||||
<ul class="rc-list rc-list--blank rc-list--align ts-list--four-column" role="menubar">
|
||||
<li class="rc-list__item rc-list__item--group">
|
||||
<img src="../assets/image/sub-nav/sub-nav-1.jpg" class="ts-head-img rc-margin-bottom--xs">
|
||||
<a href="/cats" class="rc-list__header rc-margin--none" role="menuitem">猫</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align test" role="menu">
|
||||
<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/sub-nav/sub-nav-1.jpg" class="ts-head-img rc-margin-bottom--xs">
|
||||
<a href="#cats" class="rc-list__header rc-margin--none" role="menuitem">猫</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align test" role="menu">
|
||||
<li class="rc-list__item">
|
||||
<a href="/cats/products" class="rc-list__link" role="menuitem">产品</a>
|
||||
<a href="#cats/products" class="rc-list__link" role="menuitem">产品</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="/cats/breeds" class="rc-list__link" role="menuitem">品种</a>
|
||||
<a href="#cats/breeds" class="rc-list__link" role="menuitem">品种</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="/cats/getting-a-kitten" class="rc-list__link" role="menuitem">想养猫吗</a>
|
||||
<a href="#cats/getting-a-kitten" class="rc-list__link" role="menuitem">想养猫吗</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="/cats/kitten" class="rc-list__link" role="menuitem">幼猫</a>
|
||||
<a href="#cats/kitten" class="rc-list__link" role="menuitem">幼猫</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="/cats/kitten/health" class="rc-list__link" role="menuitem">健康和心情</a>
|
||||
<a href="#cats/kitten/health" class="rc-list__link" role="menuitem">健康和心情</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="rc-list__item rc-list__item--group">
|
||||
<img src="../assets/image/sub-nav/sub-nav-2.jpg" class="ts-head-img rc-margin-bottom--xs">
|
||||
<a href="/dogs" class="rc-list__header rc-margin--none" role="menuitem">犬</a>
|
||||
<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/sub-nav/sub-nav-2.jpg" class="ts-head-img rc-margin-bottom--xs">
|
||||
<a href="#dogs" class="rc-list__header rc-margin--none" role="menuitem">犬</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align test" role="menu">
|
||||
<li class="rc-list__item">
|
||||
<a href="/dogs/products" class="rc-list__link" role="menuitem">产品</a>
|
||||
<a href="#dogs/products" class="rc-list__link" role="menuitem">产品</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="/dogs/breeds" class="rc-list__link" role="menuitem">品种</a>
|
||||
<a href="#dogs/breeds" class="rc-list__link" role="menuitem">品种</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="/dogs/getting-a-puppy" class="rc-list__link" role="menuitem">想养只狗</a>
|
||||
<a href="#dogs/getting-a-puppy" class="rc-list__link" role="menuitem">想养只狗</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="/dogs/puppy" class="rc-list__link" role="menuitem">幼犬</a>
|
||||
<a href="#dogs/puppy" class="rc-list__link" role="menuitem">幼犬</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="/dogs/puppy/health" class="rc-list__link" role="menuitem">健康和心情</a>
|
||||
<a href="#dogs/puppy/health" class="rc-list__link" role="menuitem">健康和心情</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="rc-list__item rc-list__item--group">
|
||||
<img src="../assets/image/sub-nav/sub-nav-3.jpg" class="ts-head-img rc-margin-bottom--xs">
|
||||
<a href="/tailored-nutrition" class="rc-list__header rc-margin--none" role="menuitem">定制营养方案</a>
|
||||
<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/sub-nav/sub-nav-3.jpg" class="ts-head-img rc-margin-bottom--xs">
|
||||
<a href="#tailored-nutrition" class="rc-list__header rc-margin--none" role="menuitem">定制营养方案</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align test" role="menu">
|
||||
<li class="rc-list__item">
|
||||
<a href="/cats/products" class="rc-list__link" role="menuitem">猫系列</a>
|
||||
<a href="#cats/products" class="rc-list__link" role="menuitem">猫系列</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="/dogs/products" class="rc-list__link" role="menuitem">狗系列</a>
|
||||
<a href="#dogs/products" class="rc-list__link" role="menuitem">狗系列</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="rc-list__item rc-list__item--group">
|
||||
<img src="../assets/image/sub-nav/sub-nav-4.jpg" class="ts-head-img rc-margin-bottom--xs">
|
||||
<a href="/about" class="rc-list__header rc-margin--none" role="menuitem">关于我们</a>
|
||||
<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/sub-nav/sub-nav-4.jpg" class="ts-head-img rc-margin-bottom--xs">
|
||||
<a href="#about" class="rc-list__header rc-margin--none" role="menuitem">关于我们</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align test" role="menu">
|
||||
<li class="rc-list__item">
|
||||
<a href="/about#growth-phase1" class="rc-list__link" role="menuitem">我们的历史</a>
|
||||
<a href="#about#growth-phase1" class="rc-list__link" role="menuitem">我们的历史</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="/about" class="rc-list__link" role="menuitem">我们的价值观</a>
|
||||
<a href="#about" class="rc-list__link" role="menuitem">我们的价值观</a>
|
||||
</li>
|
||||
<!--
|
||||
<li class="rc-list__item">
|
||||
<a href="#about/future" class="rc-list__link" role="menuitem">可持续发展</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#about/quality" class="rc-list__link" role="menuitem">致力提供优质产品</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#about/news" class="rc-list__link" role="menuitem">新闻</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#about/frequently-asked-questions" class="rc-list__link" role="menuitem">常见问题解答</a>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -145,8 +166,205 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu section end-->
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
|
||||
<!-- Popup menu -->
|
||||
<div data-js-modal-menu>
|
||||
<header class="rc-modal__header rc-md-up">
|
||||
<button class="rc-modal__close rc-btn rc-btn--icon-label rc-icon rc-close--xs rc-iconography" data-modal-trigger="main-nav-modal">关闭</button>
|
||||
<a href="/">
|
||||
<span class="rc-screen-reader-text">Royal Canin Logo</span>
|
||||
<object id="main-logo" data="/images/logo--crown.svg?v=8-11-2" type="image/svg+xml" class="rc-modal__logo" data-js-import-interactive-svg>
|
||||
<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/1x1.gif" style="background-image: url(#profiles/custom/royal_canin_profile/themes/royal_canin/images/logo--crown.png?v=8-11-2)" width="150" height="100" alt="Royal Canin logo" />
|
||||
</object>
|
||||
</a>
|
||||
</header>
|
||||
<section class="rc-max-width--xl">
|
||||
<div class="rc-column rc-lg-up rc-padding--lg">
|
||||
<h1 class="rc-gamma rc-padding-x--md">帮助猫狗过最健康的生活。</h1>
|
||||
<img class="rc-padding--sm" src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/yorkshire-terrier-sacred-birman-b-w-brand-emblematic-tailored-nutrition-hero.jpg" alt="Royal Canin China" />
|
||||
</div>
|
||||
<nav class="rc-nav rc-hidden" data-toggle-group="mobile" data-toggle-effect="rc-expand--horizontal" data-js-target="mobile-push-nav">
|
||||
<div class="rc-layout-container rc-three-column">
|
||||
<div class="rc-column rc-double-width rc-padding-x--none--mobile rc-padding-right--none">
|
||||
<ul class="rc-list rc-list--blank rc-list--align rc-list--two-column" role="menubar">
|
||||
<li class="rc-list__item rc-list__item--group">
|
||||
<a href="#cats" class="rc-list__header" id="mega-nav-header-1" data-toggle="nav-list-1" role="menuitem">猫</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-1" aria-labelledby="mega-nav-menu-1" role="menu">
|
||||
<li class="rc-list__item rc-md-down">
|
||||
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-1" role="button">返回</button>
|
||||
</li>
|
||||
<li class="rc-list__item rc-md-down">
|
||||
<a href="#cats" class="rc-list__header" title="Cat" role="menuitem">猫</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#cats/products" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#cats/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#cats/getting-a-kitten" class="rc-list__link ca" role="menuitem" title="Thinking of getting a cat">想养只猫</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#cats/kitten" class="rc-list__link ca" role="menuitem" title="Kitten">幼猫</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#cats/kitten/health" class="rc-list__link ca" role="menuitem" title="Health and wellbeing">健康和心情</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="rc-list__item rc-list__item--group">
|
||||
<a href="#dogs" class="rc-list__header" role="menuitem" id="mega-nav-header-2" data-toggle="nav-list-2">犬</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-2" aria-labelledby="mega-nav-menu-2" role="menu">
|
||||
<li class="rc-list__item rc-md-down">
|
||||
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-2" role="button">返回</button>
|
||||
</li>
|
||||
<li class="rc-list__item rc-md-down">
|
||||
<a href="#dogs" class="rc-list__header" title="Dog" role="menuitem">犬</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#dogs/products" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#dogs/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#dogs/getting-a-puppy" class="rc-list__link ca" role="menuitem" title="Thinking of getting a dog">想养只犬</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#dogs/puppy" class="rc-list__link ca" role="menuitem" title="Puppy">幼犬</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#dogs/puppy/health" class="rc-list__link ca" role="menuitem" title="Health and wellbeing">健康和心情</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="rc-list__item rc-list__item--group">
|
||||
<a href="#tailored-nutrition" class="rc-list__header" role="menuitem" id="mega-nav-header-3" data-toggle="nav-list-3">定制营养方案</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-3" aria-labelledby="mega-nav-menu-3" role="menu">
|
||||
<li class="rc-list__item rc-md-down">
|
||||
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-3" role="button">返回</button>
|
||||
</li>
|
||||
<li class="rc-list__item rc-md-down">
|
||||
<a href="#tailored-nutrition" class="rc-list__header" title="Nutrition" role="menuitem">定制营养方案</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#cats/products" class="rc-list__link ca" role="menuitem">猫系列</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#dogs/products" class="rc-list__link ca" role="menuitem">狗系列</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="rc-list__item rc-list__item--group">
|
||||
<a href="#about" class="rc-list__header" role="menuitem" id="mega-nav-header-4" data-toggle="nav-list-4">关于我们</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-4" aria-labelledby="mega-nav-menu-4" role="menu">
|
||||
<li class="rc-list__item rc-md-down">
|
||||
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-4" role="button">返回</button>
|
||||
</li>
|
||||
<li class="rc-list__item rc-md-down">
|
||||
<a href="#about" class="rc-list__header" title="About" role="menuitem">关于我们</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#about#growth-phase1" class="rc-list__link ca" role="menuitem" title="Our history">我们的历史</a>
|
||||
</li>
|
||||
<!--
|
||||
<li class="rc-list__item">
|
||||
<a href="#about" class="rc-list__link ca" role="menuitem" title="Our values">我们的价值观</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#about/future" class="rc-list__link ca" role="menuitem" title="Sustainability">可持续发展</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#about/quality" class="rc-list__link ca" role="menuitem" title="Quality and food safety">质量和食品安全</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#about/news" class="rc-list__link ca" role="menuitem" title="News">新闻</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#about/frequently-asked-questions" class="rc-list__link ca" role="menuitem" title="FAQs">常见问题解答</a>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="rc-column rc-padding-x--none">
|
||||
<ul class="rc-list rc-list--blank rc-list--align rc-btn-offset--top" role="menu">
|
||||
<li class="rc-list__item">
|
||||
<a class="rc-list__link rc-icon rc-email--xs rc-iconography--xs" role="menuitem" href="#about/contact">
|
||||
与我们联系
|
||||
</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a class="rc-list__link rc-icon rc-pin--xs rc-iconography--xs" data-modal-trigger="modal-whereToBuy" onclick='bindTracking(this)' evt-name='页内弹窗' evt-cat='headerBtnClick' evt-val='在哪购买' role="menuitem" href="#">
|
||||
在哪里购买
|
||||
</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a class="rc-list__link rc-icon rc-language--xs ts-weibo--xs" role="menuitem" target='_blank' href="https://weibo.com/chinaroyalcanin?topnav=1&wvr=6&topsug=1&is_all=1">
|
||||
微博
|
||||
</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a onclick='bindTracking(this)' evt-name='页内弹窗' evt-cat='mobNavBtnClick' evt-val='微信扫一扫' class="rc-list__link rc-icon ts-wechat--xs rc-iconography--xs" role="menuitem" href="#">
|
||||
微信公众号
|
||||
<div class="ts-hover-show">
|
||||
<span class="rc-text--center">微信长按识别</span>
|
||||
<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/royalcanincn-qrcode.jpg">
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<!--
|
||||
<li class="rc-list__item">
|
||||
<a onclick='bindTracking(this)' evt-name='页内弹窗' evt-cat='mobNavBtnClick' evt-val='地理位置选择' class="rc-list__link rc-icon rc-language--xs rc-iconography--xs" role="menuitem" aria-label="language" data-modal-trigger="country-lang-selector" href="#">
|
||||
Language
|
||||
</a>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Popup menu end-->
|
||||
|
||||
<!-- Where to buy modal -->
|
||||
<aside role="modal" class="rc-modal rc-hidden" data-modal-target="modal-whereToBuy">
|
||||
<div class="rc-modal__container">
|
||||
<header class="rc-modal__header">
|
||||
<button class="rc-btn rc-icon rc-btn--icon-label rc-modal__close rc-close--xs rc-iconography" data-modal-trigger="modal-whereToBuy">关闭</button>
|
||||
</header>
|
||||
<section class="rc-modal__content rc-scroll--y">
|
||||
<div class="rc-margin-top--md">
|
||||
<h2 class="rc-gamma rc-text--center">我能在哪买到Royal Canin 的产品</h2>
|
||||
<p class='rc-text--center'>
|
||||
您可以点击下面的链接进入到我们的电商店铺
|
||||
<br />
|
||||
</p>
|
||||
</div>
|
||||
<div class="rc-btn-group">
|
||||
<a href="https://royalcanin.tmall.com/shop/view_shop.htm?spm=a1z10.3-b-s.w5001-17212536142.3.1284526cyHC5If&scene=taobao_shop" target='_blank' class="rc-btn rc-btn--one ts-flex-center">
|
||||
<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/tm-logo.png" alt="天猫旗舰店" />
|
||||
</a>
|
||||
<a href="https://mall.jd.com/index-650686.html" class="rc-btn rc-btn--one ts-flex-center ts-btn-img--70" target='_blank'>
|
||||
<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/jd-logo.png" alt="京东旗舰店" />
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Where to buy modal end -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
@ -168,8 +386,4 @@ export default {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../assets/css/global.less");
|
||||
@import url("../assets/css/clip.less");
|
||||
</style>
|
||||
</script>
|
||||
@ -1,541 +1,255 @@
|
||||
<template>
|
||||
<footer class="rc-footer">
|
||||
<div class="rc-max-width">
|
||||
<div class="rc-padding-left">
|
||||
<div class="rc-list--inverse">
|
||||
<img src="../assets/image/address.png" alt="">
|
||||
<span>在哪里购买</span>
|
||||
</div>
|
||||
<div class="rc-text--right">
|
||||
<img src="../assets/image/turn-top.png" alt="">
|
||||
<span @click="usertop">回到顶部</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-md-up">
|
||||
<!-- <div class="rc-list__header">
|
||||
<span v-for="(item,index) in titlelist" :key="index">
|
||||
{{item.title}}
|
||||
|
||||
</span>
|
||||
</div> -->
|
||||
<div class="rc-list">
|
||||
<div class="rc-center" @click="chanemenu(0)">
|
||||
<span>猫</span>
|
||||
<img :src="istrue?require('../assets/image/onbottom.png'):require('../assets/image/ontop.png')" alt="" >
|
||||
</div>
|
||||
<ul ref="variety">
|
||||
<li>产品</li>
|
||||
<li>品种</li>
|
||||
<li>想养只猫</li>
|
||||
<li>幼猫</li>
|
||||
<li>健康和心情</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="rc-list">
|
||||
<div class="rc-center" @click="chanemenu(1)">
|
||||
<span>犬</span>
|
||||
<img :src="istruea?require('../assets/image/onbottom.png'):require('../assets/image/ontop.png')" alt="" >
|
||||
</div>
|
||||
<ul ref="varietyt">
|
||||
<li>产品</li>
|
||||
<li>品种</li>
|
||||
<li>想养只犬</li>
|
||||
<li>幼犬</li>
|
||||
<li>健康和心情</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="rc-list">
|
||||
<div class="rc-center" @click="chanemenu(2)">
|
||||
<span>定制营养方案</span>
|
||||
<img :src="istrueb?require('../assets/image/onbottom.png'):require('../assets/image/ontop.png')" alt="" >
|
||||
</div>
|
||||
<ul ref="varietytt">
|
||||
<li>猫系列</li>
|
||||
<li>狗系列</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="rc-list">
|
||||
<div class="rc-center" @click="chanemenu(3)">
|
||||
<span>关于我们</span>
|
||||
<img :src="istruec?require('../assets/image/onbottom.png'):require('../assets/image/ontop.png')" alt="" >
|
||||
</div>
|
||||
<ul ref="varietyttt">
|
||||
<li>我们的历史</li>
|
||||
<li>我们的价值观</li>
|
||||
<li>可持续发展</li>
|
||||
<li>致力提供优质产品</li>
|
||||
<li>新闻</li>
|
||||
<li>常见问题解答</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="rc-bottom">
|
||||
<ul>
|
||||
<li>
|
||||
<img src="../assets/image/shopmessage.png" alt="">
|
||||
<span>在哪购买</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../assets/image/ontop.png" alt="" @click="usertop">
|
||||
<span>回到顶部</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="rc-columnm">
|
||||
<ol>
|
||||
<li>
|
||||
联系我们
|
||||
</li>
|
||||
<li>致电客服热线</li>
|
||||
<li>
|
||||
<i>
|
||||
+86400-688-1527
|
||||
</i>
|
||||
<span>
|
||||
办公时间为 09:00 - 18:00 周一至周五
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li>关注我们</li>
|
||||
<li>爱宠荟</li>
|
||||
<li>皇家兽医精英荟</li>
|
||||
<li>产品验证</li>
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fin-column">
|
||||
|
||||
<span>法律声明 ©2021 ROYAL CANIN, Inc.</span>
|
||||
|
||||
<div>
|
||||
<em>隐私声明</em> | <em>法律声明</em>
|
||||
</div>
|
||||
<strong>沪ICP备08000779号-2</strong>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="rc-column">
|
||||
<ul>
|
||||
<span>
|
||||
联系皇家宠物
|
||||
</span>
|
||||
<li>办公时间为8.00am 至4.30pm</li>
|
||||
<li>+8612456789</li>
|
||||
<li>与我们联系</li>
|
||||
</ul>
|
||||
<ol>
|
||||
<span>关注我们</span>
|
||||
<li>爱宠荟</li>
|
||||
<li>皇家兽医精英荟</li>
|
||||
<li>产品验证</li>
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="rc-padding-bottom">
|
||||
<span>法律声明 ©2021 ROYAL CANIN, Inc.</span>
|
||||
<i>沪ICP备08000779号-2</i>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<footer class="rc-bg-colour--interface-dark rc-padding-bottom--sm" role="contentinfo">
|
||||
<div class="rc-max-width--lg rc-scroll--y">
|
||||
<div class="footer-block1 rc-layout-container rc-five-column rc-padding-x--xs rc-border-colour--interface rc-md-up rc-padding-left--none">
|
||||
<div class="rc-column rc-padding-left--none" data-component="nav-track" data-nav-name="Footer navigation">
|
||||
<nav class="rc-menubar">
|
||||
<ul class="rc-list rc-list--blank rc-list--inverse" style="background-color: transparent;">
|
||||
<li class="rc-list__item">
|
||||
<a href="javascript:;" class="rc-list__link rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-pin--xs rc-brand3" data-ref="nav-link" role="menuitem" title="Where to buy" data-modal-trigger="modal-whereToBuy" onclick='bindTracking(this)' evt-name='页内弹窗' evt-cat='footerBtnClick' evt-val='在哪购买'>在哪里购买</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rc-divider rc-md-up"></div>
|
||||
|
||||
<div class="footer-block2 rc-layout-container rc-three-column rc-padding-x--xs rc-border-colour--interface">
|
||||
<div class="rc-column rc-double-width rc-padding-x--xs">
|
||||
<nav class="rc-padding-x--xs" data-toggle-group="mobile" data-toggle-effect="rc-expand--vertical" role="navigation" data-component="nav-track" data-nav-name="Footer navigation">
|
||||
<ul class="rc-list ts-list--four-column rc-list--blank rc-list--align rc-list--inverse" role="menubar">
|
||||
<li class="rc-list__item rc-list__item--group" role="none">
|
||||
<a href="#cats" class="rc-list__header" role="menuitem" id="nav-footer-top-1" data-toggle="nav-footer-1">猫</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align" role="menu" id="nav-footer-1" aria-labelledby="nav-footer-top-1">
|
||||
<li class="rc-list__item">
|
||||
<a href="#cats/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Products">产品</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#cats/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Breeds">品种</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#cats/getting-a-kitten" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Thinking of getting a cat">想养只猫</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#cats/kitten" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Kitten">幼猫</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#cats/kitten/health" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Health and wellbeing">健康和心情</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="rc-list__item rc-list__item--group" role="none">
|
||||
<a href="#dogs" class="rc-list__header" role="menuitem" id="nav-footer-top-2" data-toggle="nav-footer-2">
|
||||
犬
|
||||
</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-2" aria-labelledby="nav-footer-top-2" role="menu">
|
||||
<li class="rc-list__item">
|
||||
<a href="#dogs/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Products">产品</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#dogs/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Breeds">品种</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#dogs/getting-a-puppy" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Thinking of getting a dog">想养只犬</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#dogs/puppy" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Puppy">幼犬</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#dogs/puppy/health" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Health and wellbeing">健康和心情</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="rc-list__item rc-list__item--group" role="none">
|
||||
<a href="#tailored-nutrition" class="rc-list__header" role="menuitem" id="nav-footer-top-3" data-toggle="nav-footer-3">
|
||||
定制营养方案
|
||||
</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-3" aria-labelledby="nav-footer-top-3" role="menu">
|
||||
<li class="rc-list__item">
|
||||
<a href="#cats/products" class="rc-list__link" data-ref="nav-link" role="menuitem">猫系列</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#dogs/products" class="rc-list__link" data-ref="nav-link" role="menuitem">狗系列</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="rc-list__item rc-list__item--group" role="none">
|
||||
<a href="#about" class="rc-list__header" id="nav-footer-top-4" data-toggle="nav-footer-4" role="menuitem">
|
||||
关于我们
|
||||
</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-4" aria-labelledby="nav-footer-top-4" role="menu">
|
||||
<li class="rc-list__item">
|
||||
<a href="#about#growth-phase1" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Our history">我们的历史</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#about" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Our values">我们的价值观</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="rc-column rc-md-up">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rc-layout-container rc-one-column rc-md-down">
|
||||
<div class="rc-column rc-padding-x--none">
|
||||
<a href="javascript:;" data-modal-trigger="modal-whereToBuy" onclick='bindTracking(this)' evt-name='页内弹窗' evt-cat='footererBtnClick' evt-val='在哪购买' class="rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-bag--xs rc-brand3" title="Where to buy" role="menuitem">
|
||||
在哪购买
|
||||
</a>
|
||||
<!--
|
||||
<a class="rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-language--xs rc-brand3" role="menuitem" data-modal-trigger="country-lang-selector">
|
||||
Language
|
||||
</a>
|
||||
-->
|
||||
<a class="rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-up--xs rc-brand3" role="menuitem" href="#">
|
||||
回到顶部
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rc-divider"></div>
|
||||
|
||||
<!-- Bottom SNS section -->
|
||||
<div class="ts-footer-sns rc-layout-container rc-four-column rc-padding--xs rc-text-colour--brand3">
|
||||
<div class="rc-column">
|
||||
<div class="ts-row-head">
|
||||
<span>联系我们</span>
|
||||
</div>
|
||||
<div class="ts-row-body">
|
||||
<p>致电客服热线：</p>
|
||||
<p>
|
||||
<a class="" role="menuitem" href="tel:+86 4006881527">+86 400-688-1527</a>
|
||||
<span class="rc-md-up">
|
||||
<br/>
|
||||
09:00 - 18:00 周一至周五
|
||||
</span>
|
||||
|
||||
<span class="rc-md-down">
|
||||
<br/>
|
||||
办公时间为 09:00 - 18:00 周一至周五
|
||||
</span>
|
||||
</p>
|
||||
<!--
|
||||
<p>
|
||||
<a href="#about/contact" class="" title="" role="menuitem">或给我们留言</a>
|
||||
</p>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rc-column">
|
||||
<div class="ts-row-head">
|
||||
<span>关注我们</span>
|
||||
</div>
|
||||
<div class="ts-row-body">
|
||||
<p>
|
||||
<a href="https://weibo.com/chinaroyalcanin" target='_blank' class="rc-img--round rc-img--round--sm rc-margin-right--xs">
|
||||
<img src='#profiles/custom/royal_canin_profile/themes/royal_canin/images/ico-weibo.png'>
|
||||
</a>
|
||||
|
||||
<a href="https://www.zhihu.com/org/huang-jia-chong-wu-shi-pin" target='_blank' class="rc-img--round rc-img--round--sm rc-margin-right--xs">
|
||||
<img src='#profiles/custom/royal_canin_profile/themes/royal_canin/images/ico-zhihu.png'>
|
||||
</a>
|
||||
|
||||
<a href="https://space.bilibili.com/2136859062" target='_blank' class="rc-img--round rc-img--round--sm rc-margin-right--xs">
|
||||
<img src='#profiles/custom/royal_canin_profile/themes/royal_canin/images/ico-bilibili.png'>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rc-column rc-double-width">
|
||||
<div class="ts-row-head rc-text--right rc-md-up">
|
||||
CHINA
|
||||
<!--
|
||||
<a href='javascript:;' class="" data-modal-trigger="country-lang-selector" role="menuitem">
|
||||
CHINA
|
||||
</a>
|
||||
-->
|
||||
</div>
|
||||
<div class="ts-row-body">
|
||||
<div class="rc-four-column rc-layout-container">
|
||||
<div class="rc-column ts-qr-container rc-text--center">
|
||||
<a href="weixin://dl/business/?t=xjjEG3b5Ycu" target='_blank' onclick='return bindTracking(this,2000)' evt-name='页脚跳转' evt-cat='footerLinkClick' evt-val='产品验证'>
|
||||
<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/qrcode-chanpin.jpg">
|
||||
<span>
|
||||
产品验证
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="rc-column ts-qr-container rc-text--center">
|
||||
<a href="weixin://dl/business/?t=BE1OA2AngRs" target='_blank' onclick='return bindTracking(this,2000)' evt-name='页脚跳转' evt-cat='footerLinkClick' evt-val='皇家爱宠荟会员中心'>
|
||||
<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/qrcode-aichong.jpg">
|
||||
<span>
|
||||
皇家爱宠荟会员中心
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="rc-column ts-qr-container rc-text--center">
|
||||
<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/qrcode-royal-elite.jpg">
|
||||
<span class='rc-text-center'>
|
||||
皇家兽医精英荟
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="rc-column ts-qr-container rc-text--center">
|
||||
<a href="https://v.douyin.com/e12mtGA/" target='_blank'>
|
||||
<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/qrcode-douyin.jpg">
|
||||
<span>
|
||||
皇家宠物食品抖音官方账号
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rc-column rc-content-v-right rc-md-down">
|
||||
CHINA
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-block8 rc-layout-container rc-one-column rc-text-colour--brand3">
|
||||
<div class="rc-column rc-text--center rc-padding-y--none">
|
||||
<span class="">法律声明 ©2021 ROYAL CANIN, Inc.</span>
|
||||
<br/>
|
||||
<a target='_blank' href='#privacy'><span class="">隐私声明</span></a>
|
||||
|
|
||||
<a target='_blank' href='#declaration'><span class="">法律声明</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-block9 rc-layout-container rc-one-column rc-text-colour--brand3">
|
||||
<div class="rc-column rc-text--center rc-padding-top--none">
|
||||
<a target='_blank' href='https://beian.miit.gov.cn'><span class="">沪ICP备08000779号-2</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
activeindex:0,
|
||||
titlelist:[
|
||||
{
|
||||
title:'猫'
|
||||
},
|
||||
{
|
||||
title:'犬'
|
||||
},
|
||||
{
|
||||
title:'定制营养方案'
|
||||
},
|
||||
{
|
||||
title:'关于我们'
|
||||
}
|
||||
],
|
||||
istrue:true,
|
||||
istruea:true,
|
||||
istrueb:true,
|
||||
istruec:true
|
||||
|
||||
}
|
||||
},
|
||||
components:{
|
||||
|
||||
},
|
||||
methods:{
|
||||
usertop(){
|
||||
this.$emit("litentop",'1')
|
||||
|
||||
},
|
||||
chanemenu(ordem){
|
||||
if(ordem==0){
|
||||
this.istrue=!this.istrue;
|
||||
}else if(ordem==1){
|
||||
this.istruea=!this.istruea;
|
||||
}else if(ordem==2){
|
||||
this.istrueb=!this.istrueb;
|
||||
}
|
||||
else if(ordem==3){
|
||||
this.istruec=!this.istruec;
|
||||
}
|
||||
if(ordem==0){
|
||||
this.istrue?this.$refs.variety.style.display='block': this.$refs.variety.style.display='none'
|
||||
}
|
||||
if(ordem==1){
|
||||
this.istruea?this.$refs.varietyt.style.display='block': this.$refs.varietyt.style.display='none'
|
||||
}
|
||||
if(ordem==2){
|
||||
this.istrueb?this.$refs.varietytt.style.display='block': this.$refs.varietytt.style.display='none'
|
||||
}
|
||||
if(ordem==3){
|
||||
this.istruec?this.$refs.varietyttt.style.display='block': this.$refs.varietyttt.style.display='none'
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
mounted(){
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 小于768 手机端*/
|
||||
@media screen and (max-width:768px){
|
||||
.rc-footer{
|
||||
width: 100%;
|
||||
background-color: #333;
|
||||
.rc-padding-left{
|
||||
display: none;
|
||||
}
|
||||
.rc-max-width{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
|
||||
|
||||
.rc-md-up{
|
||||
width: 100%;
|
||||
// border-bottom: 1px solid #d7d7d7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.rc-list__header{
|
||||
margin-top: 0.20rem;
|
||||
display: flex;
|
||||
width: 52%;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
font-size: 0.18rem;
|
||||
}
|
||||
.rc-list{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span{
|
||||
display: block;
|
||||
font-size: 0.18rem;
|
||||
color:#ffffff;
|
||||
font-weight: bold;
|
||||
margin-top: 0.08rem;
|
||||
height: 0.6rem;
|
||||
line-height: 0.6rem;
|
||||
}
|
||||
ul{
|
||||
|
||||
color: #F6F6F6;
|
||||
font-size: 0.18rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 0.04rem;
|
||||
line-height: 0.34rem;
|
||||
display: none;
|
||||
li{
|
||||
height: 0.6rem;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
line-height: 0.6rem;
|
||||
}
|
||||
|
||||
}
|
||||
.rc-center{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
img{
|
||||
width: 0.24rem;
|
||||
height: 0.32rem;
|
||||
display: block;
|
||||
margin-left: 0.08rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
.rc-column{
|
||||
display: flex;
|
||||
display: none;
|
||||
ul{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.18rem;
|
||||
color: #ffffff;
|
||||
span{
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rc-padding-bottom{
|
||||
display: none;
|
||||
}
|
||||
.rc-bottom{
|
||||
width: 100%;
|
||||
ul{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 0.56rem;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
li{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #F6F6F6;
|
||||
font-size: 0.16rem;
|
||||
|
||||
span{
|
||||
display: block;
|
||||
margin-left: 0.08rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img{
|
||||
width: 0.24rem;
|
||||
height: 0.32rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.rc-columnm{
|
||||
i{
|
||||
font-style: normal;
|
||||
display: block;
|
||||
}
|
||||
width: 100%;
|
||||
ol{
|
||||
display: flex;
|
||||
font-size: 0.16rem;
|
||||
flex-direction: column;
|
||||
margin-top: 0.1rem;
|
||||
color: #ffffff;
|
||||
li{
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fin-column{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.16rem;
|
||||
color: #ffffff;
|
||||
margin-top: 0.70rem;
|
||||
line-height: 0.32rem;
|
||||
padding-bottom: 0.30rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
i{
|
||||
font-style: normal;
|
||||
}
|
||||
em{
|
||||
font-style: normal;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
}
|
||||
strong{
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// /* 大于992小于1200 */
|
||||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
||||
.rc-footer{
|
||||
.rc-bottom{
|
||||
display: none;
|
||||
}
|
||||
.rc-columnm{
|
||||
display: none;
|
||||
}
|
||||
.fin-column{
|
||||
display: none;
|
||||
}
|
||||
width: 100%;
|
||||
background-color: #333;
|
||||
.rc-center img{
|
||||
display: none;
|
||||
}
|
||||
.rc-max-width{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
.rc-padding-left{
|
||||
height: 72px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #d7d7d7 ;
|
||||
font-size: 16px;
|
||||
color: #F6F6F6;
|
||||
img{
|
||||
width: 24px;
|
||||
height: 32px;
|
||||
display: block;
|
||||
}
|
||||
.rc-list--inverse{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span{
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
.rc-text--right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img{
|
||||
margin-right: 6px;
|
||||
}
|
||||
span{
|
||||
margin-right: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rc-md-up{
|
||||
width: 100%;
|
||||
height: 246px;
|
||||
border-bottom: 1px solid #d7d7d7;
|
||||
display: flex;
|
||||
|
||||
.rc-list__header{
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
width: 52%;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
}
|
||||
.rc-list{
|
||||
width: 52%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span{
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
color:#ffffff;
|
||||
font-weight: bold;
|
||||
margin-top: 8px;
|
||||
}
|
||||
ul{
|
||||
|
||||
color: #F6F6F6;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 4px;
|
||||
line-height: 34px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.rc-column{
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
width: 35%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
ul{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
line-height: 34px;
|
||||
cursor: pointer;
|
||||
span{
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
ol{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
line-height: 34px;
|
||||
cursor: pointer;
|
||||
|
||||
span{
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.rc-padding-bottom{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
line-height: 32px;
|
||||
margin-top: 45px;
|
||||
cursor: pointer;
|
||||
|
||||
i{
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@ -1,4 +1,5 @@
|
||||
const trackingScript = 'var dataLayer = window.dataLayer = window.dataLayer || [];dataLayer.push({"user":{"sitecoreId":"00000000-0000-0000-0000-000000000000","locale":"zh-HK"},"session":{"id":"vvfwez43vfoomct4y3yqneqy"},"site":{"country":"HK","id":"RCGlobalMC1","environment":"prd"},"page":{"type":"Start of Life Page","hitTimestamp":"2020-10-16T16:26:21.7350880+00:00","topic":"Collecting your kitten and their first week with you","theme":"Cat"},"pet":{"specieId":"2"}});';
|
||||
const assetsUrl = 'var assetsUrl="/royalcanin-cdn-assets-new/css_js/";';
|
||||
export default {
|
||||
|
||||
// Global page headers: https://go.nuxtjs.dev/config-head
|
||||
@ -7,15 +8,18 @@ export default {
|
||||
|
||||
htmlAttrs: {
|
||||
lang: 'en',
|
||||
class:'rc-baseline'
|
||||
},
|
||||
script: [
|
||||
//{ 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' },
|
||||
{ innerHTML: trackingScript, type: 'text/javascript', charset: 'utf-8'}
|
||||
],
|
||||
{ innerHTML: trackingScript, type: 'text/javascript', charset: 'utf-8'},
|
||||
{ innerHTML: assetsUrl, type: 'text/javascript', charset: 'utf-8'},
|
||||
{ src: '/royalcanin-cdn-assets-new/css_js/royal-canin.min.bundle.js' },
|
||||
|
||||
],
|
||||
__dangerouslyDisableSanitizers: ['script', 'innerHTML'],
|
||||
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
@ -26,6 +30,7 @@ export default {
|
||||
link: [
|
||||
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
|
||||
{ rel: 'stylesheet', id:'royal-canin' ,href: '/royalcanin-cdn-assets-new/css_js/royal-canin.styles.prefix.min.critical.css?v=8-10-0'},
|
||||
//{ rel: 'stylesheet', id:'royal-canin' ,href: '/royalcanin-cdn-assets-new/css_js/royal-canin.styles.prefix.min.css?v=8-10-0'},
|
||||
]
|
||||
},
|
||||
|
||||
@ -33,6 +38,7 @@ export default {
|
||||
css: [
|
||||
'vant/lib/index.css',
|
||||
'element-ui/lib/theme-chalk/index.css',
|
||||
{src:'@/assets/css/royalcanin-custom.css'},
|
||||
{ src: "swiper/css/swiper.css" }
|
||||
|
||||
],
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
|
||||
<div class="online" id="fixed-catbar-seperator"></div>
|
||||
<div class="online bold rc-md-down" id="fixed-catbar-seperator"></div>
|
||||
<!-- <div v-swiper:mySwiper="swiperOption" class="swiperWrap">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" v-for="(banner,index ) in banners" :key="index">
|
||||
@ -25,6 +25,7 @@
|
||||
<div class="rc-max-width--xl">
|
||||
<div class="usermain">
|
||||
<div :class="searchBar?'rc-ma':'rc-ma searchBara'">
|
||||
<div v-if="!searchBar" class="online bold rc-md-down"></div>
|
||||
<ul class="ul-zhuan">
|
||||
<li
|
||||
v-for="(item, index) in discountlist"
|
||||
@ -36,18 +37,19 @@
|
||||
<span>{{ item.title }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="online bold rc-md-down"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="online"></div>
|
||||
<div class="online bold rc-md-up"></div>
|
||||
|
||||
<div class="rc-main">
|
||||
<div class="rc-lunbo">
|
||||
<div class="rc-full-width">
|
||||
<div class="rc-lunbo rc-full-width">
|
||||
<!-- <h2>明星猫粮</h2> -->
|
||||
<div class="pageFullScreen" id="xxxFullScreen" v-show="catproduct">
|
||||
<!-- 内容 -->
|
||||
<div class="swiper-container" id="swiper1">
|
||||
<h2>明星猫粮</h2>
|
||||
<div class="swiper-container rc-full-width rc-padding-y--md" id="swiper1">
|
||||
<h2 class="rc-beta rc-text--center">明星猫粮</h2>
|
||||
<!-- 轮播图 -->
|
||||
<swiper :options="swiperOption">
|
||||
<swiper-slide class="swiper-slide" v-for="(item, key) in catlistvideo" :key="key" >
|
||||
@ -61,7 +63,7 @@
|
||||
<span>{{item.title}}</span>
|
||||
<p>{{item.detail}}</p>
|
||||
<em>{{item.price}}</em>
|
||||
<strong @click="userbuy(item,index)">立即购买</strong>
|
||||
<strong class="ts-standard-btn ts-standard-btn--two center" @click="userbuy(item,index)">立即购买</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sw-center" >
|
||||
@ -77,8 +79,8 @@
|
||||
<p>{{item.detail}}</p>
|
||||
<em>{{item.price}}</em>
|
||||
</div>
|
||||
<div class="sw-cen">
|
||||
<i @click="userbuy(item,index)">立即购买</i>
|
||||
<div class="rc-full-width rc-margin-y--md">
|
||||
<i @click="userbuy(item,index)" class="ts-standard-btn ts-standard-btn--two center">立即购买</i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -92,31 +94,35 @@
|
||||
|
||||
|
||||
|
||||
<div class="online"></div>
|
||||
<div class="selectionswitch">
|
||||
<h2>全价猫湿粮</h2>
|
||||
<div class="online bold"></div>
|
||||
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md">
|
||||
<h2 class="rc-beta rc-text--center">全价猫湿粮</h2>
|
||||
<van-tabs @change='userclick' class="van-tabs">
|
||||
<van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
|
||||
<div class="rc-contair">
|
||||
<ul>
|
||||
<li v-for="(item,index) in catshi" :key="index">
|
||||
<div class="rc-conta" @click="selectproduce(item,index)" >
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.picture alt="">
|
||||
</div>
|
||||
<span>{{item.name}}</span>
|
||||
<i>{{item.price}}</i>
|
||||
</div>
|
||||
<strong @click="selectproduce(item,index)">立即购买</strong>
|
||||
<ul class="ts-product-list rc-margin-bottom--lg">
|
||||
<li v-for="(item,index) in catshi" :key="index" class="rc-margin-top--md">
|
||||
<div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.picture alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-column">
|
||||
<div class="rc-click" @click="selectproduce(item,index)">
|
||||
<span>{{item.name}}</span>
|
||||
<i>0.001{{item.price}}</i>
|
||||
</div>
|
||||
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<nuxt-link :to="`/productdetails/productlist/`">
|
||||
<div class="userserlect">
|
||||
<span>查看更多</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
<span class="ts-standard-btn center">查看更多</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
|
||||
|
||||
|
||||
@ -124,20 +130,18 @@
|
||||
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
<div class="rc-selection">
|
||||
|
||||
<div class="rc-selection">
|
||||
<ol>
|
||||
<li
|
||||
v-for="(item, index) in selection"
|
||||
:key="index"
|
||||
@click="selectGo(item, index)"
|
||||
:class="activeInde2 == index ? 'userselection' : 'unselection'"
|
||||
>
|
||||
|
||||
<span>{{ item.title }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="rc-maa">
|
||||
<li
|
||||
v-for="(item, index) in selection"
|
||||
:key="index"
|
||||
@click="selectGo(item, index)"
|
||||
:class="activeInde2 == index ? 'userselection' : 'unselection'"
|
||||
>
|
||||
<span>{{ item.title }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="rc-maa">
|
||||
<ul>
|
||||
<li
|
||||
v-for="(item, index) in doglist"
|
||||
@ -148,24 +152,29 @@
|
||||
<img :src="item.catimage" alt="">
|
||||
<span>{{ item.title }}</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="rc-contair">
|
||||
<ul>
|
||||
<li v-for="(item,index) in rccontair" :key="index">
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.catimage alt="">
|
||||
</div>
|
||||
<span>{{item.title}}</span>
|
||||
<i>{{item.price}}</i>
|
||||
<strong @click="userbuy(item,index)">立即购买</strong>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="">
|
||||
<ul class="ts-product-list rc-margin-bottom--lg">
|
||||
<li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md">
|
||||
<div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.catimage alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-column">
|
||||
<div class="rc-click" @click="selectproduce(item,index)">
|
||||
<span>{{item.title}}</span>
|
||||
<i>0.001{{item.price}}</i>
|
||||
</div>
|
||||
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<nuxt-link :to="`/productdetails/productlist/`">
|
||||
<div class="userserlect">
|
||||
<span>查看更多</span>
|
||||
<span class="ts-standard-btn center">查看更多</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
|
||||
@ -174,29 +183,33 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="online"></div>
|
||||
<div class="selectionswitch">
|
||||
<h2>全价猫干粮</h2>
|
||||
<div class="online bold"></div>
|
||||
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md">
|
||||
<h2 class="rc-beta rc-text--center">全价猫干粮</h2>
|
||||
<van-tabs @change='userclick' class="van-tabs">
|
||||
<van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
|
||||
<div class="rc-contair">
|
||||
<ul>
|
||||
<li v-for="(item,index) in catgan" :key="index">
|
||||
<div class="rc-conta" @click="selectproduce(item,index)" >
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.picture alt="">
|
||||
</div>
|
||||
<span>{{item.name}}</span>
|
||||
<i>{{item.price}}</i>
|
||||
</div>
|
||||
<strong @click="selectproduce(item,index)">立即购买</strong>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ts-product-list rc-margin-bottom--lg">
|
||||
<li v-for="(item,index) in catgan" :key="index" class="rc-margin-top--md">
|
||||
<div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.picture alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-column">
|
||||
<div class="rc-click" @click="selectproduce(item,index)">
|
||||
<span>{{item.name}}</span>
|
||||
<i>0.001{{item.price}}</i>
|
||||
</div>
|
||||
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<nuxt-link :to="`/productdetails/productlist/`">
|
||||
<div class="userserlect">
|
||||
<span>查看更多</span>
|
||||
<span class="ts-standard-btn center">查看更多</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
@ -233,20 +246,25 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="rc-contair">
|
||||
<ul>
|
||||
<li v-for="(item,index) in rccontair" :key="index">
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.catimage alt="">
|
||||
</div>
|
||||
<span>{{item.title}}</span>
|
||||
<i>{{item.price}}</i>
|
||||
<strong @click="userbuy(item,index)">立即购买</strong>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ts-product-list rc-margin-bottom--lg">
|
||||
<li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md">
|
||||
<div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.catimage alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-column">
|
||||
<div class="rc-click" @click="selectproduce(item,index)">
|
||||
<span>{{item.title}}</span>
|
||||
<i>0.001{{item.price}}</i>
|
||||
</div>
|
||||
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<nuxt-link :to="`/productdetails/productlist/`">
|
||||
<div class="userserlect">
|
||||
<span>查看更多</span>
|
||||
<span class="ts-standard-btn center">查看更多</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
|
||||
@ -258,30 +276,34 @@
|
||||
|
||||
|
||||
</div>
|
||||
<div class="online"></div>
|
||||
<div class="online bold"></div>
|
||||
|
||||
<div class="selectionswitch">
|
||||
<h2>全价犬湿粮</h2>
|
||||
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md">
|
||||
<h2 class="rc-beta rc-text--center">全价犬湿粮</h2>
|
||||
<van-tabs @change='userdog' class="van-tabs">
|
||||
<van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
|
||||
<div class="rc-contair">
|
||||
<ul>
|
||||
<li v-for="(item,index) in dogshi" :key="index">
|
||||
<div class="rc-conta" @click="selectproduce(item,index)" >
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.picture alt="">
|
||||
</div>
|
||||
<span>{{item.name}}</span>
|
||||
<i>{{item.price}}</i>
|
||||
</div>
|
||||
<strong @click="selectproduce(item,index)">立即购买</strong>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ts-product-list rc-margin-bottom--lg">
|
||||
<li v-for="(item,index) in dogshi" :key="index" class="rc-margin-top--md">
|
||||
<div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.picture alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-column">
|
||||
<div class="rc-click" @click="selectproduce(item,index)">
|
||||
<span>{{item.name}}</span>
|
||||
<i>0.001{{item.price}}</i>
|
||||
</div>
|
||||
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<nuxt-link :to="`/productdetails/productlist/`">
|
||||
<div class="userserlect">
|
||||
<span>查看更多</span>
|
||||
<span class="ts-standard-btn center">查看更多</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
|
||||
@ -321,20 +343,27 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="rc-contair">
|
||||
<ul>
|
||||
<li v-for="(item,index) in rccontair" :key="index">
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.catimage alt="">
|
||||
</div>
|
||||
<span>{{item.title}}</span>
|
||||
<i>{{item.price}}</i>
|
||||
<strong @click="userbuy(item,index)">立即购买</strong>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ts-product-list rc-margin-bottom--lg">
|
||||
<li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md">
|
||||
<div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.catimage alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-column">
|
||||
<div class="rc-click" @click="selectproduce(item,index)">
|
||||
<span>{{item.title}}</span>
|
||||
<i>0.001{{item.price}}</i>
|
||||
</div>
|
||||
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<nuxt-link :to="`/productdetails/productlist/`">
|
||||
<div class="userserlect">
|
||||
<span>查看更多</span>
|
||||
<span class="ts-standard-btn center">查看更多</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
|
||||
@ -346,28 +375,32 @@
|
||||
|
||||
|
||||
</div>
|
||||
<div class="online"></div>
|
||||
<div class="selectionswitch">
|
||||
<h2>全价犬干粮</h2>
|
||||
<div class="online bold"></div>
|
||||
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md">
|
||||
<h2 class="rc-beta rc-text--center">全价犬干粮</h2>
|
||||
<van-tabs @change='userdog' class="van-tabs">
|
||||
<van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
|
||||
<div class="rc-contair">
|
||||
<ul>
|
||||
<li v-for="(item,index) in doggan" :key="index">
|
||||
<div class="rc-conta" @click="selectproduce(item,index)" >
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.picture alt="">
|
||||
</div>
|
||||
<span>{{item.name}}</span>
|
||||
<i>{{item.price}}</i>
|
||||
</div>
|
||||
<strong @click="selectproduce(item,index)">立即购买</strong>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ts-product-list rc-margin-bottom--lg">
|
||||
<li v-for="(item,index) in doggan" :key="index" class="rc-margin-top--md">
|
||||
<div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.picture alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-column">
|
||||
<div class="rc-click" @click="selectproduce(item,index)">
|
||||
<span>{{item.name}}</span>
|
||||
<i>0.001{{item.price}}</i>
|
||||
</div>
|
||||
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<nuxt-link :to="`/productdetails/productlist/`">
|
||||
<div class="userserlect">
|
||||
<span>查看更多</span>
|
||||
<span class="ts-standard-btn center">查看更多</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
|
||||
@ -407,20 +440,26 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="rc-contair">
|
||||
<ul>
|
||||
<li v-for="(item,index) in rccontair" :key="index">
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.catimage alt="">
|
||||
</div>
|
||||
<span>{{item.title}}</span>
|
||||
<i>{{item.price}}</i>
|
||||
<strong @click="selectproduce(item,index)">立即购买</strong>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ts-product-list rc-margin-bottom--lg">
|
||||
<li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md">
|
||||
<div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.catimage alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-column">
|
||||
<div class="rc-click" @click="selectproduce(item,index)">
|
||||
<span>{{item.title}}</span>
|
||||
<i>0.001{{item.price}}</i>
|
||||
</div>
|
||||
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<nuxt-link :to="`/productdetails/productlist/`">
|
||||
<div class="userserlect">
|
||||
<span>查看更多</span>
|
||||
<span class="ts-standard-btn center">查看更多</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
|
||||
@ -432,30 +471,32 @@
|
||||
|
||||
|
||||
</div>
|
||||
<div class="online"></div>
|
||||
<div class="online bold"></div>
|
||||
|
||||
<div class="selectionswitch">
|
||||
<h2>处方用粮</h2>
|
||||
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md">
|
||||
<h2 class="rc-beta rc-text--center">处方用粮</h2>
|
||||
<van-tabs @change='userclick' class="van-tabs">
|
||||
<van-tab v-for="(item,index) in discounchufang" :key="index" :title="item.title">
|
||||
<div class="rc-contair">
|
||||
<ul>
|
||||
<li v-for="(item,index) in processinformation" :key="index">
|
||||
<div class="rc-conta" @click="selectproduce(item,index)" >
|
||||
<div class="rc-rccontair">
|
||||
<img :src="`${usersetting}/${item.picFile}`">
|
||||
</div>
|
||||
<span>{{item.productName}}</span>
|
||||
<!-- <i>￥{{item.basePrice}}</i> -->
|
||||
</div>
|
||||
<strong @click="selectproduce(item,index)">立即购买</strong>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ts-product-list rc-margin-bottom--lg">
|
||||
<li v-for="(item,index) in processinformation" :key="index" class="rc-margin-top--md rc-padding-bottom--lg">
|
||||
<div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
|
||||
<div class="rc-rccontair">
|
||||
<img :src="`${usersetting}/${item.picFile}`">
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-column">
|
||||
<div class="rc-click" @click="selectproduce(item,index)">
|
||||
<span>{{item.productName}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<nuxt-link :to="`/productdetails/productlist/`">
|
||||
<div class="userserlect">
|
||||
<span>查看更多</span>
|
||||
<span class="ts-standard-btn center">查看更多</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
|
||||
@ -494,21 +535,25 @@
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="rc-contair">
|
||||
<ul>
|
||||
<li v-for="(item,index) in rccontair" :key="index">
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.catimage alt="">
|
||||
</div>
|
||||
<span>{{item.title}}</span>
|
||||
<i>{{item.price}}</i>
|
||||
<strong @click="selectproduce(item,index)">立即购买</strong>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="rc-contair">
|
||||
<ul class="ts-product-list rc-margin-bottom--lg">
|
||||
<li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md rc-padding-bottom--lg">
|
||||
<div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.catimage alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-column">
|
||||
<div class="rc-click" @click="selectproduce(item,index)">
|
||||
<span>{{item.title}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<nuxt-link :to="`/productdetails/productlist/`">
|
||||
<div class="userserlect">
|
||||
<span>查看更多</span>
|
||||
<span class="ts-standard-btn center">查看更多</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
|
||||
@ -517,16 +562,16 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="online"></div>
|
||||
<div class="online bold"></div>
|
||||
|
||||
<div class="rc-usermessage">
|
||||
<em>为每一种健康需求度身定制</em>
|
||||
<span>每一只猫、每一只狗都是独一无二的，而他们的健康所需亦一样，需要专门度身定制。不过，这些健康需求
|
||||
<div class="rc-usermessage rc-padding--md rc-full-width rc-max-width--md">
|
||||
<h2 class="rc-beta rc-text--center">为每一种健康需求度身定制</h2>
|
||||
<span class="rc-text--center">每一只猫、每一只狗都是独一无二的，而他们的健康所需亦一样，需要专门度身定制。不过，这些健康需求
|
||||
通常是他们体型、品种或生活方式上的特征。邀请您探索我们的营养系列，了解我们如何协助每一只爱宠过
|
||||
得更健康。
|
||||
</span>
|
||||
<a href="https://royalcanin.com.cn/tailored-nutrition/details">
|
||||
<i>了解更多</i>
|
||||
<a href="https://royalcanin.com.cn/tailored-nutrition/details" class="ts-standard-btn ts-standard-btn--two center rc-margin-y--md">
|
||||
了解更多
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,11 +3,10 @@
|
||||
<Myheader></Myheader>
|
||||
|
||||
<div class="rc-top"></div>
|
||||
<div class="online"></div>
|
||||
<div class="rc-main">
|
||||
<div class="rc-max-width--xl rc-main">
|
||||
<div class="usersearch">
|
||||
<div class="usercontentshow" ref="usercontent">
|
||||
<div class="rc-product">
|
||||
<div class="rc-product ts-scrollable-container">
|
||||
<div class="rc-productcat ts-scrollable">
|
||||
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" >
|
||||
<img :src="item.catimage" alt="" />
|
||||
@ -15,8 +14,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rc-age">
|
||||
<div class="online rc-md-up"></div>
|
||||
<div class="ts-scrollable-container">
|
||||
<h2>专区:</h2>
|
||||
<ol class="ts-scrollable">
|
||||
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
||||
@ -24,8 +23,8 @@
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="rc-age">
|
||||
<div class="online rc-md-up"></div>
|
||||
<div class="ts-scrollable-container">
|
||||
<h2>年龄:</h2>
|
||||
<ol class="ts-scrollable">
|
||||
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
||||
@ -33,8 +32,8 @@
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="rc-age">
|
||||
<div class="online rc-md-up"></div>
|
||||
<div class="ts-scrollable-container">
|
||||
<h2>功能:</h2>
|
||||
<ol class="ts-scrollable">
|
||||
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
|
||||
@ -42,8 +41,8 @@
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="rc-age">
|
||||
<div class="online rc-md-up"></div>
|
||||
<div class="ts-scrollable-container">
|
||||
<h2>品种:</h2>
|
||||
<ol class="ts-scrollable">
|
||||
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
|
||||
@ -57,24 +56,24 @@
|
||||
<!-- rc-main end -->
|
||||
<div class="online"></div>
|
||||
<!-- rc-main start -->
|
||||
<div class="rc-main">
|
||||
<div class="rc-max-width--xl">
|
||||
<div class="usersearch">
|
||||
<div class="rc-contair">
|
||||
<ul>
|
||||
<li v-for="(item,index) in rccontair" :key="index">
|
||||
<div class="rc-click" @click="selectproduce(item)">
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.picture alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-column">
|
||||
<div class="rc-click" @click="selectproduce(item)">
|
||||
<span>{{item.categoryName}}</span>
|
||||
<i>0.001{{item.price}}</i>
|
||||
</div>
|
||||
<strong @click="userbuy()">立即购买</strong>
|
||||
</div>
|
||||
</li>
|
||||
<div class="rc-contair">
|
||||
<ul class="ts-product-list">
|
||||
<li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md">
|
||||
<div class="rc-click rc-margin-bottom--md" @click="selectproduce(item)">
|
||||
<div class="rc-rccontair">
|
||||
<img :src=item.picture alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-column">
|
||||
<div class="rc-click" @click="selectproduce(item)">
|
||||
<span>{{item.categoryName}}</span>
|
||||
<i>0.001{{item.price}}</i>
|
||||
</div>
|
||||
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="userbuy()">立即购买</strong>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="usershow" v-if="openshow">
|
||||
@ -105,7 +104,7 @@
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="rc-age">
|
||||
<div class="ts-scrollable-container rc-margin-y--md">
|
||||
<h2>年龄:</h2>
|
||||
<ol class="ts-scrollable">
|
||||
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
||||
@ -113,7 +112,7 @@
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="rc-age">
|
||||
<div class="ts-scrollable-container rc-margin-y--md">
|
||||
<h2>功能:</h2>
|
||||
<ol class="ts-scrollable">
|
||||
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
|
||||
@ -122,7 +121,7 @@
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="rc-age">
|
||||
<div class="ts-scrollable-container">
|
||||
<h2>品种:</h2>
|
||||
<ol class="ts-scrollable">
|
||||
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
|
||||
@ -165,7 +164,7 @@
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="rc-age">
|
||||
<div class="ts-scrollable-container rc-margin-y--md">
|
||||
<h2>年龄:</h2>
|
||||
<ol>
|
||||
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
||||
@ -173,7 +172,7 @@
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="rc-age">
|
||||
<div class="ts-scrollable-container rc-margin-y--md">
|
||||
<h2>功能:</h2>
|
||||
<ol>
|
||||
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
|
||||
@ -182,7 +181,7 @@
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="rc-age">
|
||||
<div class="ts-scrollable-container">
|
||||
<h2>品种:</h2>
|
||||
<ol>
|
||||
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<Myheader></Myheader>
|
||||
<div class="rc-top">
|
||||
|
||||
<div class="rc-main">
|
||||
<div class="rc-max-width--xl rc-main">
|
||||
<div class="usersearch">
|
||||
<div class="form-search">
|
||||
<van-search
|
||||
@ -33,6 +33,7 @@
|
||||
<div class="usercontentshow" ref="usercontent">
|
||||
<div class="rc-product">
|
||||
<h2>我想搜</h2>
|
||||
<div class="ts-scrollable-container">
|
||||
<div class="rc-productcat ts-scrollable">
|
||||
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" >
|
||||
<img :src="item.catimage" alt="" />
|
||||
@ -43,9 +44,10 @@
|
||||
<span @click="usershow()">筛选</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rc-age">
|
||||
<div class="ts-scrollable-container">
|
||||
<h2>专区:</h2>
|
||||
<ol class="ts-scrollable">
|
||||
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
||||
@ -54,7 +56,7 @@
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="rc-age">
|
||||
<div class="ts-scrollable-container">
|
||||
<h2>年龄:</h2>
|
||||
<ol class="ts-scrollable">
|
||||
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
||||
|
||||
BIN
rc-busness/static/images/.DS_Store
vendored
Normal file
BIN
rc-busness/static/images/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
rc-busness/static/images/1.png
Normal file
BIN
rc-busness/static/images/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
rc-busness/static/images/1x1.gif
Normal file
BIN
rc-busness/static/images/1x1.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
rc-busness/static/images/1x1.png
Normal file
BIN
rc-busness/static/images/1x1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 B |
BIN
rc-busness/static/images/Screen Shot 2020-10-02 at 15.42.17.png
Normal file
BIN
rc-busness/static/images/Screen Shot 2020-10-02 at 15.42.17.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
BIN
rc-busness/static/images/Screen Shot 2020-10-02 at 15.57.41.png
Normal file
BIN
rc-busness/static/images/Screen Shot 2020-10-02 at 15.57.41.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
rc-busness/static/images/homepage-video-cropped_.mp4
Normal file
BIN
rc-busness/static/images/homepage-video-cropped_.mp4
Normal file
Binary file not shown.
BIN
rc-busness/static/images/ico-bilibili.png
Normal file
BIN
rc-busness/static/images/ico-bilibili.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
rc-busness/static/images/ico-weibo.png
Normal file
BIN
rc-busness/static/images/ico-weibo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
rc-busness/static/images/ico-zhihu.png
Normal file
BIN
rc-busness/static/images/ico-zhihu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
rc-busness/static/images/jd-logo.png
Normal file
BIN
rc-busness/static/images/jd-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
28
rc-busness/static/images/logo--crown.svg
Normal file
28
rc-busness/static/images/logo--crown.svg
Normal file
@ -0,0 +1,28 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 190.7 104" style="enable-background:new 0 0 190.7 104;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#E2001A;}
|
||||
</style>
|
||||
<title>Royal Canin logo - crown</title>
|
||||
<g id="Crown">
|
||||
<path class="st0" d="M38.3,93.9c-3.1,0-5.6-2.4-5.6-5.5c0-1.8,0.8-3.5,2.3-4.5c14.7-11,37.2-17.6,60.2-17.6l0,0
|
||||
c22.9,0,45.4,6.6,60.1,17.6c2.4,1.8,2.9,5.3,1.1,7.8c-1.8,2.4-5.3,2.9-7.8,1.1c-9.9-7.4-29.2-15.4-53.5-15.4l0,0
|
||||
c-24.4,0-43.7,7.9-53.6,15.4C40.7,93.5,39.5,93.9,38.3,93.9z M43.4,103.3c0.9,0,1.7-0.3,2.4-0.9c11.2-9.2,30.2-15,49.4-15
|
||||
c19.4,0,37.9,5.6,49.3,15c1.6,1.3,4,1.1,5.3-0.5c1.3-1.6,1.1-4-0.5-5.3l0,0c-12.7-10.5-33-16.7-54.1-16.7S53.7,86.2,41,96.6
|
||||
c-1.6,1.3-1.9,3.7-0.5,5.3C41.2,102.8,42.3,103.3,43.4,103.3L43.4,103.3z M13.7,23.5C6.7,23.5,1,29.2,1,36.2
|
||||
c0,7,5.7,12.7,12.7,12.7h0.1c7,0,12.7-5.8,12.6-12.8c0-2.2-0.6-4.4-1.7-6.3C22.4,25.9,18.2,23.5,13.7,23.5z M95.2,33.3
|
||||
c-7,0-12.7,5.7-12.7,12.7s5.7,12.7,12.7,12.7c7,0,12.7-5.7,12.7-12.7c0,0,0,0,0,0C107.9,39,102.2,33.3,95.2,33.3z M95.2,1.5
|
||||
c-7,0-12.7,5.7-12.7,12.7s5.7,12.7,12.7,12.7s12.7-5.7,12.7-12.7c0,0,0,0,0,0C107.9,7.2,102.2,1.5,95.2,1.5z M61.4,37.8
|
||||
c-1.1,0-2.3,0.1-3.4,0.4C51.2,40,47.2,46.9,49,53.7c1.5,5.6,6.6,9.5,12.4,9.5h0.3c1.1,0,2.1-0.2,3.1-0.5c6.8-1.8,10.8-8.7,9.1-15.5
|
||||
C72.3,41.6,67.2,37.7,61.4,37.8L61.4,37.8z M29.9,50.9c-7,0-12.7,5.7-12.7,12.7c0,2.3,0.6,4.5,1.8,6.5c2.3,3.8,6.4,6.2,10.9,6.2
|
||||
h0.1c2.3,0,4.5-0.6,6.5-1.8c6-3.6,8-11.4,4.5-17.4C38.5,53.3,34.4,51,29.9,50.9z M132.3,38.2c-6.8-1.9-13.8,2.1-15.6,8.9
|
||||
s2.1,13.8,8.9,15.6c6.8,1.9,13.8-2.1,15.6-8.9c0,0,0,0,0,0c1.9-6.7-2.1-13.7-8.8-15.6C132.4,38.2,132.4,38.2,132.3,38.2z
|
||||
M140.7,7.5c-6.8-1.8-13.8,2.1-15.6,8.9s2.1,13.8,8.9,15.6c6.8,1.8,13.8-2.1,15.6-8.9C151.5,16.4,147.5,9.4,140.7,7.5z M166.9,52.7
|
||||
c-6-3.6-13.8-1.6-17.4,4.4s-1.6,13.8,4.4,17.4s13.8,1.6,17.4-4.4c1.7-2.9,2.2-6.4,1.4-9.6C171.9,57.2,169.8,54.4,166.9,52.7
|
||||
L166.9,52.7z M188.9,33.1c-1.4-5.6-6.5-9.6-12.3-9.6c-4.5,0-8.7,2.4-10.9,6.2c-3.6,6.1-1.6,13.8,4.5,17.4c1.9,1.1,4.2,1.8,6.4,1.8
|
||||
c4.5,0,8.7-2.4,11-6.2C189.3,39.8,189.8,36.3,188.9,33.1L188.9,33.1z M53,32.5c7,0,12.7-5.7,12.7-12.7S60,7.1,53,7.1
|
||||
c-1.1,0-2.3,0.1-3.4,0.4c-6.8,1.8-10.8,8.7-9.1,15.5C42,28.6,47.1,32.5,53,32.5L53,32.5z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
BIN
rc-busness/static/images/logo-royal-canin.png
Normal file
BIN
rc-busness/static/images/logo-royal-canin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
rc-busness/static/images/other-logo.png
Normal file
BIN
rc-busness/static/images/other-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
rc-busness/static/images/qrcode-aichong.jpg
Normal file
BIN
rc-busness/static/images/qrcode-aichong.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
rc-busness/static/images/qrcode-chanpin.jpg
Normal file
BIN
rc-busness/static/images/qrcode-chanpin.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
rc-busness/static/images/qrcode-douyin.jpg
Normal file
BIN
rc-busness/static/images/qrcode-douyin.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
rc-busness/static/images/qrcode-royal-elite.jpg
Normal file
BIN
rc-busness/static/images/qrcode-royal-elite.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
rc-busness/static/images/royal-canin-logo.png
Normal file
BIN
rc-busness/static/images/royal-canin-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 40 KiB |
1
rc-busness/static/images/royal-canin.sprite--brand1.svg
Normal file
1
rc-busness/static/images/royal-canin.sprite--brand1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 62 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 40 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 54 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 54 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 40 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 62 KiB |
BIN
rc-busness/static/images/royalcanincn-qrcode.jpg
Normal file
BIN
rc-busness/static/images/royalcanincn-qrcode.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
BIN
rc-busness/static/images/tm-logo.png
Normal file
BIN
rc-busness/static/images/tm-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Loading…
Reference in New Issue
Block a user