mobile-official/src/views/user/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="top">
          <span v-if="active == 0">
            <question></question>
          </span>
          <span v-else-if="active == 1">
            <notice></notice>
          </span>
          <span v-else-if="active == 2">
            <news></news>
          </span>
        </el-col>
        <el-col :span="24" class="foot">
          <van-tabbar v-model="active" @change="chageAcieve">
            <van-tabbar-item icon="question-o">调查问卷</van-tabbar-item>
            <van-tabbar-item icon="info-o">通知通告</van-tabbar-item>
            <van-tabbar-item icon="label-o">新闻资讯</van-tabbar-item>
            <van-tabbar-item icon="manager-o">账号管理</van-tabbar-item>
          </van-tabbar>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import question from './index/question.vue';
import notice from './index/notice.vue';
import news from './index/news.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'index',
  props: {},
  components: { question, notice, news },
  data: function() {
    return {
      active: 0,
    };
  },
  created() {},
  methods: {
    chageAcieve(index) {
      if (index == 3) this.$router.push({ path: '/account/index' });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  .foot {
    height: 50px;
    overflow: hidden;
  }
}
</style>