mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
541 lines
16 KiB
Vue
541 lines
16 KiB
Vue
<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>
|
|
|
|
</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> |