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