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

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>