123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195 |
- <template>
- <div :class="'top'+' '+topchange">
- <div class="wrap">
- <div class="logo">
- <img :src="scrolled?src2:src1" alt="" class="fl">
- </div>
- <ul class="nav fl ">
- <li :class="{'active':index}" @click="goApply('')">
- <span>首页</span></li>
- <li :class="{'active':apply}" @click="goApply('apply')">
- <span>申请经纪商</span>
- <i class="hot">HOT</i>
- </li>
- </ul>
- <ul class="fr nav user" v-show="logined">
- <li><i class="iconfont icon-user"></i>{{username}}</li>
- <li @click="exit()"><i class="iconfont icon-tuichu"></i>退出</li>
- </ul>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'Top',
- data () {
- return {
- scrolled: false,
- topchange: 'topone',
- src1: '../../static/images/mainLogo.png',
- src2: '../../static/images/logo2.png',
- index:true,
- apply:false
- }
- },
- computed:{
- logined(){
- return this.$store.state.logined
- },
- username(){
- return this.$store.state.loginedUser.username
- }
- },
- methods: {
- goApply: function (route) {
- this.$router.push('/' + route);
- if(route == 'apply'){
- this.apply = true;
- this.index = false;
- this.topchange = 'toptwo'
- this.scrolled = true;
- }
- else{
- this.apply = false;
- this.index = true;
- }
- },
- handleScroll () {
- if(this.$route.path == '/apply'){
- this.topchange = 'toptwo'
- this.scrolled = true
- }else{
- if (window.scrollY > 0) {
- this.topchange = 'toptwo'
- this.scrolled = true
- } else {
- this.topchange = 'topone'
- this.scrolled = false
- }
- }
- },
- exit:function(){
- this.$store.dispatch('logout')
- localStorage.removeItem('userInfo');
- }
- },
- mounted () {
- window.addEventListener('scroll', this.handleScroll);
- if(this.$route.path == '/apply'){
- this.apply = true;
- this.index = false;
- this.topchange = 'toptwo'
- this.scrolled = true
- }
- else{
- this.apply = false;
- this.index = true;
- }
- }
- }
- </script>
- <style scoped>
- .top {
- height: 75px;
- width: 100%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 100;
- }
- .topone {
- background-color: rgba(0, 0, 0, 0.2);
- color: #fff;
- }
- .toptwo {
- background-color: #fff;
- color: #000;
- position: fixed;
- top: 0;
- .active {
- color: #fff;
- background-color: #1a6fa6;
- }
- }
- .logo {
- float: left;
- width: 98px;
- line-height: 75px;
- height: 75px;
- margin-right: 55px;
- display: flex;
- align-items: center;
- }
- .logo > img {
- width: 100%;
- }
- .nav li {
- float: left;
- width: 118px;
- line-height: 75px;
- font-size: 14px;
- position: relative;
- }
- .nav li:hover {
- cursor: pointer;
- }
- .topone .active {
- background-color: #fff;
- color: #1a6fa6;;
- }
- .hot {
- position: absolute;
- background-color: #ff4e00;
- color: #fff;
- display: block;
- width: 38px;
- height: 18px;
- line-height: 18px;
- font-size: 12px;
- border-radius: 2px;
- top: 8px;
- right: 0;
- }
- .hot:after {
- content: "";
- width: 0;
- height: 0;
- position: absolute;
- z-index: -1;
- bottom: 0;
- left: 30%;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-top: 14px solid #ff4e00;
- margin-bottom: -8px;
- transform: rotate(30deg);
- }
- .user{
- li{
- text-align: right;
- width: auto;
- }
- li:nth-child(2){
- margin-left: 30px;
- }
- i{
- font-size: 20px;
- }
- }
- </style>
|