chat/_src/pages/h5/App.vue

<template>
  <div id="app">
    <div class="router-wrap" :class="{'has-pub-nav': navShow,'inputing':chatInputFocus}">
      <router-view></router-view>
    </div>
    <div class="pub-nav" v-show="navShow">
      <div :class="['nav-item',{'active':$route.name == 'chatList'}]" @click="$router.replace('/')">
        <i class="chat-icon"></i>
        <span class="title">{{$t('h5.chat')}}</span>
      </div>
      <div :class="['nav-item',{'active':$route.name == 'discover'}]" @click="$router.replace('/discover')">
        <i class="dis-icon"></i>
        <span class="title">{{$t('h5.discover')}}</span>
      </div>
      <div :class="['nav-item',{'active':$route.name == 'aboutMe'}]" @click="$router.replace('/me')">
        <i class="me-icon"></i>
        <span class="title">{{$t('h5.mine')}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { accountLoginMixin } from '@/mixins/login'
import { mapState } from 'vuex'

export default {
  name: 'App',
  mixins: [accountLoginMixin],
  computed: {
    ...mapState({
      toApp: state => state.chat.toApp,
      chatInputFocus: state => state.group.chatInputFocus
    }),
    navShow () {
      return this.$route.name == 'discover' || this.$route.name == 'chatList' || this.$route.name == 'aboutMe'
    }
  },
  methods: {},
  async created () {
    this.checkLocalLogin()
  }
}
</script>

<style lang="scss">
@import "@/style/base.scss";
@import "@/style/h5.scss";

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  background: #f2f2f2;
}
.router-wrap {
  padding-bottom: px2rem(104);
  background-color: #f2f2f2;
  @media #{$iphonex} {
    height: px2rem(146);
  }
}
.inputing {
  .box-ft{
    padding-bottom: 0 !important;
  }
}
.pub-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  height: px2rem(106);
  background-color: #fafafa;
  border-top: 1px solid #e5e5e5;
  display: flex;
  @media #{$iphonex} {
    height: px2rem(146);
  }

  .dis-icon {
    background: url("../../assets/h5/nav-dis-icon1.png") no-repeat;
    width: px2rem(45);
    height: px2rem(44);
    background-size: 100%;
  }
  .chat-icon {
    background: url("../../assets/h5/nav-chat-icon1.png") no-repeat;
    width: px2rem(48);
    height: px2rem(41);
    background-size: 100%;
  }
  .me-icon {
    background: url("../../assets/h5/nav-me-icon1.png") no-repeat;
    width: px2rem(37);
    height: px2rem(41);
    background-size: 100%;
  }
  .title {
    display: block;
    text-align: center;
    font-size: px2rem(20);
    color: #a5b5ce;
    margin-top: px2rem(10);
  }
  .nav-item {
    flex: 1;
    box-sizing: border-box;
    padding-top: px2rem(22);
    text-decoration: none;
    &.active {
      .dis-icon {
        background: url("../../assets/h5/nav-dis-icon.png") no-repeat;
        background-size: 100%;
      }
      .chat-icon {
        background: url("../../assets/h5/nav-chat-icon.png") no-repeat;
        background-size: 100%;
      }
      .me-icon {
        background: url("../../assets/h5/nav-me-icon.png") no-repeat;
        background-size: 100%;
      }
      .title {
        color: #32a1f7;
      }
    }
    i {
      display: block;
      margin: 0 auto;
    }
  }
}
</style>