xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-11-21 18:06:52 +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>