更新

src/layout/common/footInfo.vue

@@ -0,0 +1,61 @@
+<template>
+  <div id="footInfo">
+    <el-row>
+      <el-col :span="24">
+        <van-tabbar route>
+          <van-tabbar-item to="/home/index">
+            <van-image width="60" height="60" :src="index" />
+            <p class="text">首页</p>
+          </van-tabbar-item>
+
+          <van-tabbar-item to="/class/index">
+            <van-image width="60" height="60" :src="classes" />
+            <p class="text">班级名单</p>
+          </van-tabbar-item>
+
+          <van-tabbar-item to="/question/index">
+            <van-image width="60" height="60" :src="question" />
+            <p class="text">问卷调查</p>
+          </van-tabbar-item>
+          <van-tabbar-item to="/user/index">
+            <van-image width="60" height="60" :src="user" />
+            <p class="text">个人信息</p>
+          </van-tabbar-item>
+        </van-tabbar>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'footInfo',
+  props: {},
+  components: {},
+  data: () => ({
+    index: require('@/assets/index.png'),
+    classes: require('@/assets/class.png'),
+    question: require('@/assets/questions.png'),
+    user: require('@/assets/user.png'),
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+/deep/.van-tabbar {
+  height: 90px;
+}
+/deep/.van-tabbar-item {
+  text-align: center;
+}
+.text {
+  padding: 5px 0;
+}
+</style>

src/layout/common/topInfo.vue

@@ -0,0 +1,47 @@
+<template>
+  <div id="topInfo">
+    <el-row>
+      <el-col :span="24" class="topInfos">
+        <!-- <van-nav-bar title="日程安排" left-text="返回" left-arrow fixed @click-left="onClickLeft" /> -->
+        <van-nav-bar :title="title" :left-arrow="isleftarrow" @click-left="onClickLeft" fixed />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'topInfo',
+  props: {
+    title: null,
+    isleftarrow: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {
+    onClickLeft() {
+      // 点击回退的时候当做地址回退
+      this.$router.go(-1);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+// .topInfos {
+// }
+/deep/.van-nav-bar {
+  background: #2c69fe;
+}
+/deep/.van-nav-bar__title {
+  color: #fff;
+}
+/deep/.van-nav-bar__text {
+  color: #fff;
+}
+/deep/.van-nav-bar .van-icon {
+  color: #fff;
+}
+</style>

src/router/index.js

@@ -6,9 +6,38 @@ Vue.use(VueRouter);
 const routes = [
   {
     path: '/',
-    name: '',
+    name: 'index',
+    meta: { title: '班级首页', isleftarrow: false },
     component: () => import('../views/index.vue'),
   },
+  // 班级首页
+  {
+    path: '/home/index',
+    name: 'home_index',
+    meta: { title: '首页', isleftarrow: true },
+    component: () => import('../views/home/index.vue'),
+  },
+  // 班级名单
+  {
+    path: '/class/index',
+    name: 'class_index',
+    meta: { title: '班级名单', isleftarrow: true },
+    component: () => import('../views/class/index.vue'),
+  },
+  // 调查问卷
+  {
+    path: '/question/index',
+    name: 'question_index',
+    meta: { title: '调查问卷', isleftarrow: true },
+    component: () => import('../views/question/index.vue'),
+  },
+  // 个人中心
+  {
+    path: '/user/index',
+    name: 'user_index',
+    meta: { title: '个人中心', isleftarrow: true },
+    component: () => import('../views/user/index.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/class/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          班級名單
+        </el-col>
+        <el-col :span="24" class="foot">
+          <footInfo></footInfo>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    NavBar,
+    footInfo,
+  },
+  data: function() {
+    return {
+      title: '',
+      isleftarrow: '',
+      navShow: true,
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+  watch: {
+    $route(to, from) {
+      this.title = to.meta.title;
+      this.isleftarrow = to.meta.isleftarrow;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  min-height: 570px;
+}
+.foot {
+  height: 90px;
+  overflow: hidden;
+}
+</style>

src/views/home/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          主题偶
+        </el-col>
+        <el-col :span="24" class="foot">
+          <footInfo></footInfo>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    NavBar,
+    footInfo,
+  },
+  data: function() {
+    return {
+      title: '',
+      isleftarrow: '',
+      navShow: true,
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+  watch: {
+    $route(to, from) {
+      this.title = to.meta.title;
+      this.isleftarrow = to.meta.isleftarrow;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  min-height: 570px;
+}
+.foot {
+  height: 90px;
+  overflow: hidden;
+}
+</style>

src/views/index.vue

@@ -1,30 +1,79 @@
 <template>
   <div id="index">
-    <p>index</p>
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-col :span="24" v-for="(item, index) in list" :key="index">
+            <p @click="clickBtn(index)">{{ item.classname }}</p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import NavBar from '@/layout/common/topInfo.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    NavBar,
+  },
   data: function() {
-    return {};
+    return {
+      title: '',
+      isleftarrow: '',
+      navShow: true,
+      // 班級列表
+      list: [
+        {
+          classname: '班級一',
+        },
+        {
+          classname: '班級一',
+        },
+      ],
+    };
   },
   created() {},
-  methods: {},
+  methods: {
+    clickBtn(index) {
+      this.$router.push({ path: '/home/index', query: { id: index } });
+    },
+  },
   computed: {
     ...mapState(['user']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
   },
-  metaInfo() {
-    return { title: this.$route.meta.title };
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+  watch: {
+    $route(to, from) {
+      this.title = to.meta.title;
+      this.isleftarrow = to.meta.isleftarrow;
+    },
   },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  min-height: 570px;
+}
+</style>

src/views/question/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          調查問卷
+        </el-col>
+        <el-col :span="24" class="foot">
+          <footInfo></footInfo>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    NavBar,
+    footInfo,
+  },
+  data: function() {
+    return {
+      title: '',
+      isleftarrow: '',
+      navShow: true,
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+  watch: {
+    $route(to, from) {
+      this.title = to.meta.title;
+      this.isleftarrow = to.meta.isleftarrow;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  min-height: 570px;
+}
+.foot {
+  height: 90px;
+  overflow: hidden;
+}
+</style>

src/views/user/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          個人中心
+        </el-col>
+        <el-col :span="24" class="foot">
+          <footInfo></footInfo>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    NavBar,
+    footInfo,
+  },
+  data: function() {
+    return {
+      title: '',
+      isleftarrow: '',
+      navShow: true,
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+  watch: {
+    $route(to, from) {
+      this.title = to.meta.title;
+      this.isleftarrow = to.meta.isleftarrow;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  min-height: 570px;
+}
+.foot {
+  height: 90px;
+  overflow: hidden;
+}
+</style>