<template>


    <header class="rc-home-header">
      <div class="rc-main">
          <nuxt-link :to="`../../productdetails/userdetails/`">
      <div class="c-left">
    <img src="../assets/image/rc-icon.png" alt="">
      </div>
        </nuxt-link>

       <nuxt-link :to="`/userseach/search/`">
     <div class="c-right">
            <img src="../assets/image/rc-logo.png" alt=""  class="flex-center">
   
      </div>
      </nuxt-link>
       <nuxt-link :to="`../../usersearch/search/`">
          <div class="rc-search">
             <img src="../assets/image/rc-search.png" alt="">
          </div>
             </nuxt-link>
             <div class="rc-center">

               <ul>
                 <li>猫</li>
                  <li>犬</li>
                   <li>定制营养方案</li>
                    <li>关于我们</li>
               </ul>
             </div>
          </div>
    </header>
</template>

<script>

export default {
  data() {
    return {
  headerScroll:false

    };
  },
  mounted() {
 
  },

  methods: {

 
  },
};
</script>
<style lang="less" scoped>
/* 手机端 */
@media screen and (max-width: 768px) {
   .rc-home-header{

     .rc-main{
       width: 92%;
       margin: 0 auto;
      //  position: fixed;
       top: 0;
       left: 4%;
            display: flex;
     justify-content: space-between;
     align-items: center;
     height: 70px;
     background-color: white;
   z-index: 994;
     .rc-center{
       display: none;
     }
     }
     .c-left img{
        width: 19px;
        height: 14px;
        display: block;
     }
     .c-right img{
        width: 97px;
        height: 35px;
        display: block;
     }
     .rc-search img{
       width: 19px;
       height: 19px;
       display: block;
     }
   }

  }
  /* pc端 */
  @media screen and (min-width: 768px) and (max-width: 1920px) {
 .rc-home-header{
    height:120px ;
     .rc-main{
       width: 92%;
       margin: 0 auto;
      //  position: fixed;
       top: 0;
       z-index: 989;
       background: white;
            display: flex;
     justify-content: space-between;
     align-items: center;
     flex-direction: column;
     height: 120px;
     ul{
       display: flex;
       align-items: center;
       margin-bottom: 20px;
        li{
          margin-right: 25px;
          color: #666666;
          cursor: pointer;
          font-size: 16px;
        }
     }
     }
     .c-left{
       display: none;
     }
     .rc-search{
       display: none;
     }
     .c-left img{
        width: 19px;
        height: 14px;
        display: block;
     }
     .c-right img{
        width: 120px;
       height: 45px;
       display: block;
     }
 
   }

    }

  
</style>