123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- <template>
- <div class="header-container" :class="{'offset':isOffset}">
- <div class="inner-container">
- <img class="brand" :src="isOffset?require('../assets/logo-rev.png'):require('../assets/mainLogo.png')"/>
- <ul class="header-tab">
- <li class="header-tab-item active">首页</li>
- <li class="header-tab-item">申请代理</li>
- </ul>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: "headerComponent",
- data(){
- return{
- isOffset:false,
- }
- },
- mounted(){
- window.addEventListener('scroll',this.scrollListener)
- },
- methods:{
- scrollListener(e){
- this.isOffset=!!window.pageYOffset;
- // console.log(window.pageYOffset);
- }
- }
- }
- </script>
- <style scoped lang="less">
- @import "../assets/less/_variable.less";
- .header-container{
- transition: all 0.25s ease;
- position: fixed;
- width: 100%;
- height: 80px;
- background-color: rgba(0, 0, 0, 0.2);
- z-index: 9;
- }
- .inner-container{
- position: relative;
- width: 1200px;
- margin: 0 auto;
- display: flex;
- flex-direction: row;
- & .brand{
- position: absolute;
- width: 100px;
- height: 33px;
- top: 50%;
- transform: translateY(-50%);
- }
- & .header-tab{
- margin-left: 135px;
- display: flex;
- flex-direction: row;
- & .header-tab-item{
- font-size: 14px;
- width: 100px;
- height: 80px;
- line-height: 80px;
- cursor: pointer;
- color: white;
- &.active{
- color: @primaryBlue;
- background-color: white;
- }
- }
- }
- }
- .header-container.offset{
- background-color: white;
- & .header-tab .header-tab-item {
- color: black;
- &.active {
- background-color: @primaryBlue;
- color: white;
- }
- }
- }
- </style>
|