Style correction

This commit is contained in:
Vion 2022-01-18 17:18:39 +08:00
parent 5f8154bb63
commit 9115a4738d
24 changed files with 287 additions and 264 deletions

View File

@ -278,7 +278,7 @@ img, picture {
width:100%;
}
.rc-top{
margin-top: 74px;
margin-top: 90px;
}
.rc-list__header {
background: none;
@ -497,35 +497,40 @@ img, picture {
}
h2{
font-size:20px;
padding-bottom:1rem;
}
.ts-scrollable
{
padding-bottom:1rem;
scrollbar-width: thin;
li
{
margin-left: 30px;
width: 8.125rem;
height: 2.5rem;
line-height: 40px;
//line-height: 40px;
font-size: .875rem;
padding:.375rem;
}
/*
&::-webkit-scrollbar{
background:unset;
height:4px;
height: 6px;
width:50%;
background:transparent;
}
&::-webkit-scrollbar-thumb{
background-color:#d7d7d7;
height:2px;
border-radius:10px;
width:50%;
}
&::-webkit-scrollbar-track{
background-color:ddd;
height:2px;
//background-color:#ddd;
background-color:transparent;
}
&::-webkit-scrollbar-button{
background:unset;
}
*/
/* */
}
}

View File

@ -6,6 +6,19 @@
background-color: #E1001A;
}
.ts-carousel-indicator{
/deep/.swiper-pagination-bullet{
margin-left:.5rem;
}
/deep/.swiper-pagination-bullet-active{
background:#E2001A;
}
&.center{
width:100%;
text-align: center;
}
}
li{
background: unset;;
img{
@ -38,6 +51,9 @@ li{
.ul-dog{
display: none;
}
.ts-banner-swiper-container{
margin-bottom:2.5rem;
}
.searchBara{
width: 100%;
position: fixed;
@ -98,9 +114,6 @@ li{
}
}
.van-swipe{
z-index: 2;
}
.rc-usermessage{
span{
font-size: 1rem;
@ -116,7 +129,10 @@ li{
height: auto;
object-fit: cover;
}
.van-swipe{
z-index: 2;
}
.van-swipe-item {
color: #fff;
width: 100%;
@ -320,14 +336,21 @@ li{
.rc-selection{
display: none;
}
.sw-center{
display: none;
}
.useraimg{
width: 100%;
// height: 29.31rem;
object-fit: cover;
}
.sw-center{
display: none;
}
.useraimg{
width: 100%;
// height: 29.31rem;
object-fit: cover;
}
.ts-banner-swiper-container{
position:relative;
.ts-carousel-indicator{
position:absolute;
bottom:.4rem;
}
}
.van-swipe-item {
color: #fff;
height: 100%;
@ -346,15 +369,12 @@ object-fit: cover;
#xxxFullScreen {
background-color: white;
// margin-top: 100px;
#swiper1 {
width: 100%;
#swiper1,#swiper2 {
overflow: hidden;
margin-top: 2.31rem;
h2{
padding-bottom: 5rem;
}
}
h2{
padding-bottom: 5rem;
}
.swiper-container2 {
@ -363,10 +383,10 @@ object-fit: cover;
// overflow: visible !important;
position: relative;
}
#swiper1 .swiper-container .swiper-wrapper .swiper-slide {
width: 100%;
//height: 6.18rem;
}
#swiper1 .swiper-container .swiper-wrapper .swiper-slide {
width: 100%;
//height: 6.18rem;
}
/* 上一张 */
#swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev {

View File

@ -1,7 +1,9 @@
.container{
min-height:80vh;
min-height:100vh;
height:100%;
background-color:#f6f6f6;
display: flex;
flex-direction: column;
}
.ts-max-width--460{
border-radius: 3px;

View File

@ -58,11 +58,6 @@
</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-xl-up" aria-label="pin">
<span class="rc-screen-reader-text">
translations.feature.headerbar.pin
</span>
</a>
<button data-js-trigger="search-bar" @click='searchturn' 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>
</button>
@ -75,16 +70,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="https://royalcanin.com.cn/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="https://royalcanin.com.cn/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="https://royalcanin.com.cn/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">
@ -94,49 +89,49 @@
<li class="rc-list__item rc-list__item--group">
<img src="../assets/showimage/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>
<a href="https://royalcanin.com.cn/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="https://royalcanin.com.cn/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="https://royalcanin.com.cn/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="https://royalcanin.com.cn/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="https://royalcanin.com.cn/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/showimage/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>
<a href="https://royalcanin.com.cn/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>
</li>
<li class="rc-list__item">
<a href="#dogs/breeds" class="rc-list__link" role="menuitem">品种</a>
<a href="https://royalcanin.com.cn/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="https://royalcanin.com.cn/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="https://royalcanin.com.cn/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="https://royalcanin.com.cn/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/showimage/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>
<a href="/" 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>
@ -148,13 +143,13 @@
</li>
<li class="rc-list__item rc-list__item--group">
<img src="../assets/showimage/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>
<a href="https://royalcanin.com.cn/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="https://royalcanin.com.cn/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="https://royalcanin.com.cn/about" class="rc-list__link" role="menuitem">我们的价值观</a>
</li>
<!--
<li class="rc-list__item">
@ -203,67 +198,67 @@
<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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
@ -275,16 +270,16 @@
</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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/about#growth-phase1" class="rc-list__link ca" role="menuitem" title="Our history">我们的历史</a>
</li>
<!--
<li class="rc-list__item">
@ -311,15 +306,10 @@
<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 class="rc-list__link rc-icon rc-email--xs rc-iconography--xs" role="menuitem" href="https://royalcanin.com.cn/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">
微博
@ -349,39 +339,9 @@
</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>
</div>
</template>
<script>
const isReload={
needload:false
};
export default {
data() {
return {
@ -404,10 +364,10 @@ export default {
this.usermessage=usernot;
}
//debugger;
if(isReload.needload)
if(isInitialized)
location.reload();
if(isReload.needload==false)
isReload.needload=true;
if(!isInitialized)
isInitialized=true;
//console.log(this.loginornot);
/*
if(RCDL && RCDL.utilities && RCDL.navigation && RCDL.navigation.rebuild)

View File

@ -1,69 +1,55 @@
<template>
<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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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 href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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 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">
@ -75,15 +61,15 @@
</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 href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/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>
<a href="https://royalcanin.com.cn/about" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Our values">我们的价值观</a>
</li>
</ul>
@ -98,9 +84,6 @@
<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
@ -220,9 +203,9 @@
<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='https://royalcanin.com.cn/#privacy'><span class="">隐私声明</span></a>
&nbsp; | &nbsp;
<a target='_blank' href='#declaration'><span class="">法律声明</span></a>
<a target='_blank' href='https://royalcanin.com.cn/declaration'><span class="">法律声明</span></a>
</div>
</div>

View File

@ -1,5 +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/";';
const assetsUrl = 'var assetsUrl="/royalcanin-cdn-assets-new/css_js/";var isInitialized=false;';
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
@ -23,7 +23,7 @@ export default {
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1,target-densitydpi =1' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
@ -38,7 +38,8 @@ export default {
css: [
'vant/lib/index.css',
'element-ui/lib/theme-chalk/index.css',
{src:'@/assets/css/royalcanin-custom.css'},
{ src:'@/assets/css/global.less'},
{ src:'@/assets/css/royalcanin-custom.css'},
{ src: "swiper/css/swiper.css" }
],
@ -49,6 +50,7 @@ export default {
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
'@/plugins/vant',
'@/plugins/swiper',
'@/plugins/ElementUI',
{ src: '@/plugins/localStorage', ssr: false },

View File

@ -1,17 +1,18 @@
<template>
<div>
<Myheader></Myheader>
<div class="rc-top"></div>
<unlogin></unlogin>
<!-- Suppose in header end -->
<van-swipe :autoplay="3000" class="" touchable>
<van-swipe-item v-for="(banner, index) in showingBanners" :key="index">
<img :src="banner.src" class="useraimg"/>
</van-swipe-item>
</van-swipe>
<div class="ts-banner-swiper-container">
<swiper :options="headerSwiperOption">
<swiper-slide v-for="(banner, index) in showingBanners" :key="index">
<a :href="banner.link" target="_blank">
<img :src="banner.src" class="useraimg"/>
</a>
</swiper-slide>
</swiper>
<div id="homeBannerSwiperPagnation" class="swiper-pagination ts-carousel-indicator center"></div>
</div>
<div class="online bold rc-md-down"></div>
<div id="fixed-catbar-seperator"></div>
@ -40,11 +41,12 @@
<!-- <h2>明星猫粮</h2> -->
<div class="pageFullScreen" id="xxxFullScreen" v-show="catproduct" ref="mingxing">
<!-- 内容 -->
<div class="swiper-container rc-full-width rc-padding-y--md" id="swiper1">
<div class="rc-full-width rc-padding-y--md" id="swiper1">
<h2 class="rc-beta rc-text--center">{{usertitle}}</h2>
<!-- 轮播图 -->
<van-swipe class="rc-padding-bottom--md" touchable>
<van-swipe-item v-for="(item, index) in catlistvideo" :key="index">
<div class="ts-carousel-container">
<swiper class="rc-padding-bottom--md" :options="catStarProductswiperOption">
<swiper-slide v-for="(item, index) in catlistvideo" :key="index">
<div class="rc-video">
<div class="uservideo">
<video controls="" :poster=item.catimage>
@ -53,7 +55,7 @@
</div>
<div class="rc-right">
<img :src=item.catimage alt="">
<img :src=item.productimage alt="">
<span>{{item.title}}</span>
<p>{{item.detail}}</p>
<em>{{item.price}}</em>
@ -68,7 +70,7 @@
</video>
</div>
<img :src=item.catimage alt="">
<img :src=item.productimage alt="">
<span>{{item.title}}</span>
<p>{{item.detail}}</p>
<em>{{item.price}}</em>
@ -77,23 +79,20 @@
<i @click="userbuy(item,index)" class="ts-standard-btn ts-standard-btn--two center">立即购买</i>
</div>
</div>
</van-swipe-item>
</van-swipe>
</swiper-slide>
</swiper>
<div id="catStarSwiperPagnation" class="swiper-pagination ts-carousel-indicator center"></div>
</div>
</div>
</div>
<div class="online bold" v-show="onemao"></div>
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" ref="usercontent" v-show="onemao">
<h2 class="rc-beta rc-text--center" >全价猫湿粮</h2>
<van-tabs @change='catclick' class="van-tabs">
<van-tabs @change='catclick' class="van-tabs" v-if="onemao">
<van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
<div class="rc-contair">
<ul class="ts-product-list rc-margin-bottom--lg">
@ -160,7 +159,7 @@
<div class="rc-column">
<div class="rc-click" @click="selectproduce(item,index)">
<span>{{item.title}}</span>
<i>0.001{{item.price}}</i>
<i>{{item.ecprice}}</i>
</div>
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
</div>
@ -181,7 +180,7 @@
<div class="online bold" v-show="twomao"></div>
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="twomao" ref="catgan">
<h2 class="rc-beta rc-text--center">全价猫干粮</h2>
<van-tabs @change='catclick' class="van-tabs">
<van-tabs @change='catclick' class="van-tabs" v-if="twomao">
<van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
<div class="rc-contair">
<ul class="ts-product-list rc-margin-bottom--lg">
@ -194,7 +193,7 @@
<div class="rc-column">
<div class="rc-click" @click="selectproduce(item,index)">
<span>{{item.name}}</span>
<i>0.001{{item.price}}</i>
<i>{{item.ecprice}}</i>
</div>
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
</div>
@ -279,8 +278,9 @@
<h2 class="rc-beta rc-text--center">{{dogtitle}}</h2>
</div>
<!-- 轮播图 -->
<van-swipe class="rc-padding-bottom--md">
<van-swipe-item v-for="(item, key) in doglistvideo" :key="key">
<div class="ts-carousel-container">
<swiper class="rc-padding-bottom--md" :options="dogStarProductswiperOption" v-if="dogshow">
<swiper-slide v-for="(item, key) in doglistvideo" :key="key">
<div class="rc-video">
<div class="uservideo">
<video controls="" :poster=item.catimage>
@ -289,7 +289,7 @@
</div>
<div class="rc-right">
<img :src=item.catimage alt="">
<img :src=item.productimage alt="">
<span>{{item.title}}</span>
<p>{{item.detail}}</p>
<em>{{item.price}}</em>
@ -304,7 +304,7 @@
</video>
</div>
<img :src=item.catimage alt="">
<img :src=item.productimage alt="">
<span>{{item.title}}</span>
<p>{{item.detail}}</p>
<em>{{item.price}}</em>
@ -314,8 +314,10 @@
</div>
</div>
</van-swipe-item>
</van-swipe>
</swiper-slide>
</swiper>
<div id="dogStarSwiperPagnation" class="swiper-pagination ts-carousel-indicator center"></div>
</div>
</div>
@ -327,7 +329,7 @@
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="threemao" ref="doggshi">
<h2 class="rc-beta rc-text--center">全价犬湿粮</h2>
<van-tabs @change='userdog' class="van-tabs">
<van-tabs @change='userdog' class="van-tabs" v-if="threemao">
<div class="online bold rc-md-down" v-show="threemao"></div>
<van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
<div class="online bold" v-show="threemao"></div>
@ -444,7 +446,7 @@
<div class="online bold" v-show="fourmao"></div>
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="fourmao" ref="dogan">
<h2 class="rc-beta rc-text--center">全价犬干粮</h2>
<van-tabs @change='userdog' class="van-tabs">
<van-tabs @change='userdog' class="van-tabs" v-if="fourmao">
<div class="online bold" v-show="fourmao"></div>
<van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
<div class="usermain">
@ -555,7 +557,7 @@
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="fivemao" ref="chufang">
<h2 class="rc-beta rc-text--center">处方用粮</h2>
<van-tabs @change='userclick' class="van-tabs">
<van-tabs @change='userclick' class="van-tabs" v-if="fivemao">
<van-tab v-for="(item,index) in discounchufang" :key="index" :title="item.title">
<div class="rc-contair">
<ul class="ts-product-list rc-margin-bottom--lg">
@ -792,22 +794,24 @@
],
'pc':[
{src:"/images/banner/pc-banner1.png",link:""},
{src:"/images/banner/pc-banner2.png",link:""}
{src:"/images/banner/pc-banner2.png",link:""},
{src:"/images/banner/pc-banner3.png",link:""},
{src:"/images/banner/pc-banner4.png",link:""}
]
},
showingBanners:[],
userdoglist: [
{
title: "小型犬",
catimage: require("../assets/cat.png"),
catimage: "/images/dog/small.png",
},
{
title: "中型犬",
catimage: require("../assets/four.png"),
catimage: "/images/dog/medium.png",
},
{
title: "大型犬",
catimage: require("../assets/one.png"),
catimage: "/images/dog/big.png",
},
],
@ -836,10 +840,10 @@
discountlist: [
{
title: "明星猫粮",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
catimage: require("../assets/star-cat.png"),
price:'¥2'
title: "明星猫粮",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
catimage: require("../assets/star-cat.png"),
price:'¥2'
},
{
title: "猫湿粮",
@ -913,64 +917,72 @@
],
catlistvideo: [
{
title: "明星猫粮",
title: "主食级猫湿粮",
video:"/images/cat/one.mp4",
catimage: "/images/cat/one.jpg",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
price:'¥123.45',
productimage: "/images/cat/star-1.png",
detail:'为10柔软细腻慕斯 适合离乳期幼猫舔食',
price:'¥77',
},
{
title: "猫湿粮",
video:"/images/cat/two.mp4",
catimage: "/images/cat/two.jpg",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
price:'¥123.45',
title: "幼猫成长专属",
video:"/images/cat/two.mp4",
catimage: "/images/cat/two.jpg",
productimage: "/images/cat/star-2.png",
detail:'支持幼猫自身保护力 为快速生长提供足够能量',
price:'¥147',
},
{
title: "猫干粮",
title: "室内成猫专属",
video:"/images/cat/three.mp4",
catimage: "/images/cat/three.jpg",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
price:'¥123.45',
productimage: "/images/cat/star-3.png",
detail:'高易消化蛋白 减少粪便量和异味',
price:'¥140',
},
{
title: "猫干粮",
title: "英短成猫专属",
video:"/images/cat/four.mp4",
catimage: "/images/cat/four.jpg",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
price:'¥123.45',
productimage: "/images/cat/star-4.png",
detail:'增强肌肉质量 支持骨骼与关节健康',
price:'¥183',
},
],
doglistvideo: [
{
title: "明星犬粮",
video:"/images/dog/one.mp4",
catimage: "/images/dog/one.jpg",
detail:'为10月龄及以上成犬量身打造的精准营养',
price:'¥123.45',
title: "主食级狗湿粮",
video:"/images/dog/one.mp4",
catimage: "/images/dog/one.jpg",
productimage: "/images/cat/star-1.png",
detail:'柔软细腻慕斯 适合离乳期幼犬舔食',
price:'¥77',
},
{
title: "狗湿粮",
video:"/images/dog/two.mp4",
catimage: "/images/dog/two.jpg",
detail:'为10月龄及以上英国成犬量身打造的精准营养',
price:'¥123.45',
title: "贵宾成犬专属",
video:"/images/dog/two.mp4",
catimage: "/images/dog/two.jpg",
productimage: "/images/cat/star-2.png",
detail:'护肤靓毛 理想体态',
price:'¥241',
},
{
title: "狗干粮",
video:"/images/dog/three.mp4",
catimage: "/images/dog/three.jpg",
detail:'为10月龄及以上英国犬成犬量身打造的精准营养',
price:'¥123.45',
title: "小型犬成犬专属",
video:"/images/dog/three.mp4",
catimage: "/images/dog/three.jpg",
productimage: "/images/cat/star-3.png",
detail:'亮泽被毛 呵护牙齿',
price:'¥121',
},
{
title: "狗干粮",
video:"/images/dog/four.mp4",
catimage: "/images/dog/four.jpg",
detail:'为10月龄及以上英国成犬量身打造的精准营养',
price:'¥123.45',
{
title: "离乳期全价奶糕",
video:"/images/dog/four.mp4",
catimage: "/images/dog/four.jpg",
productimage: "/images/cat/star-4.png",
detail:'高易再水合颗粒 帮助增强保护健康成长',
price:'¥88',
},
],
@ -1044,39 +1056,74 @@
// },
],
swiperOption: {
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
speed:1000,
spaceBetween: 30,
// autoplay: true,
loopAdditionalSlides: 100,
pagination: {
el: '.swiper-pagination',
dynamicBullets: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
headerSwiperOption: {
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
speed:1000,
spaceBetween: 0,
autoplay: true,
pagination: {
el: '#homeBannerSwiperPagnation'
},
paginationClickable: true,
loopAdditionalSlides: 100,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
on: {
slideChange(Swiper) {
},
on: {
slideChange(Swiper) {
//console.log('onSlideChangeEnd',this);
// vm.ifadroind('','',this.realIndex);
vm.useraindex=this.realIndex;
},
tap() {
//console.log('onTap', this);
}
// slideChange() {
// console.log('onSlideChangeEnd', this);
// },
// tap() {
// console.log('onTap', this);
// }
}
},
tap() {
}
}
},
catStarProductswiperOption: {
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
speed:1000,
spaceBetween: 30,
// autoplay: true,
loopAdditionalSlides: 100,
pagination: {
el: '#catStarSwiperPagnation',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
on: {
slideChange(Swiper) {
vm.useraindex=this.realIndex;
},
tap() {
}
}
},
dogStarProductswiperOption: {
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
speed:1000,
spaceBetween: 30,
// autoplay: true,
loopAdditionalSlides: 100,
pagination: {
el: '#dogStarSwiperPagnation',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
on: {
slideChange(Swiper) {},
tap() {}
}
},
}
},
components:{

View File

@ -0,0 +1,4 @@
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 300 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 154 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.