xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-11-17 16:13:48 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Homepage / Product list / Product Detail / header / footer / RoyalCanin css,js added

Browse Source
This commit is contained in:
Vion
2022-01-11 19:08:04 +08:00
parent 016080859d
commit b93b2f1180
41 changed files with 26240 additions and 1372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
rc-busness/components/header.vue
View File

@@ -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&amp;wvr=6&amp;topsug=1&amp;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>

758
rc-busness/components/rc-footer.vue
View File

@@ -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>
&nbsp; | &nbsp;
<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>