<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>