更新

src/layout/common/footInfo.vue

@@ -0,0 +1,45 @@
+<template>
+  <div id="footInfo">
+    <el-row>
+      <el-col :span="24" class="footInfo">
+        <van-tabbar route>
+          <van-tabbar-item to="/">
+            <!-- <van-image width="60" height="60" :src="index" /> -->
+            <p class="text">直播大厅</p>
+          </van-tabbar-item>
+          <van-tabbar-item to="/two">
+            <!-- <van-image width="60" height="60" :src="question" /> -->
+            <p class="text">科技超市</p>
+          </van-tabbar-item>
+          <van-tabbar-item to="/three">
+            <!-- <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: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.footInfo {
+  height: 50px;
+  overflow: hidden;
+}
+</style>

src/layout/common/topInfo.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="topInfo">
+    <el-row>
+      <el-col :span="24" class="topInfos">
+        <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/views/index.vue

@@ -1,19 +1,58 @@
 <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>
+        <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';
 export default {
   name: 'index',
   props: {},
-  components: {},
-  data: () => ({}),
+  components: {
+    NavBar,
+    footInfo,
+  },
+  data: () => ({
+    title: '日程安排',
+    isleftarrow: '',
+    navShow: true,
+  }),
   created() {},
   computed: {},
   methods: {},
 };
 </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;
+}
+.foot {
+  position: absolute;
+  bottom: 0;
+}
+</style>