mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-11-21 18:06:52 +08:00
missing file
This commit is contained in:
Admin
Gitee
531
rc-busness/components/rc-footer.vue
Normal file
531
rc-busness/components/rc-footer.vue
Normal file
@@ -0,0 +1,531 @@
|
||||
<template>
|
||||
<footer class="rc-main">
|
||||
<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>
|
||||
</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>
|
||||
</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-main{
|
||||
width: 100%;
|
||||
background-color: #333;
|
||||
height: 700px;
|
||||
.rc-padding-left{
|
||||
display: none;
|
||||
}
|
||||
.rc-max-width{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
|
||||
|
||||
.rc-md-up{
|
||||
width: 100%;
|
||||
height: 2.46rem;
|
||||
// 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;
|
||||
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-main{
|
||||
width: 100%;
|
||||
background-color: #333;
|
||||
height: 700px;
|
||||
.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>
|
||||
Reference in New Issue
Block a user