更新

src/layout/main-layout.vue

@@ -44,7 +44,11 @@ export default {
   methods: {
     toLogin() {
       let route = window.location.pathname;
-      return route.includes('login');
+      if (route == '/login') {
+        return route.includes('login');
+      } else {
+        return route.includes('liveIndex');
+      }
     },
   },
   mounted() {},

src/router/before.js

@@ -9,6 +9,13 @@ const checkLogin = (router, func) => {
       } else {
         next({ name: 'login' });
       }
+    } else if (to.name == 'liveIndex') {
+      let token = localStorage.getItem('token');
+      if (token) {
+        next();
+      } else {
+        next({ name: 'login' });
+      }
     }
     let res = await store.dispatch('login/toGetUser', func ? func : null);
     next();

src/router/index.js

@@ -11,6 +11,12 @@ const routes = [
     meta: { title: '首页' },
     component: () => import('../views/index.vue'),
   },
+  {
+    path: '/liveIndex',
+    name: 'liveIndex',
+    meta: { title: '直播页' },
+    component: () => import('../views/liveIndex.vue'),
+  },
   {
     path: '/anchor/index',
     meta: { title: '主播管理' },

src/views/liveIndex.vue

@@ -0,0 +1,210 @@
+<template>
+  <div id="liveIndex">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <el-col :span="20" class="left">
+            <el-image :src="logo"></el-image>
+            <span>腾讯实时音视频互动教室</span>
+            <span>教室ID:10001</span>
+            <span>用户:17319450324</span>
+          </el-col>
+          <el-col :span="4" class="right">
+            <el-button type="text"><i class="el-icon-close"></i>退出教师</el-button>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="down">
+          <el-col :span="18" class="left">
+            左侧
+          </el-col>
+          <el-col :span="5" class="right">
+            <el-col :span="24" class="title">
+              学生进入10001教室即可听课
+            </el-col>
+            <el-col :span="24" class="info">
+              <el-tabs v-model="activeName">
+                <el-tab-pane label="信息列表" name="first">
+                  <el-col :span="24" class="firstInfo">
+                    <el-col :span="24" class="firstInfoList">
+                      <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+                        <p>
+                          <span>[{{ item.date }}]</span>
+                          <span>{{ item.name }}：</span>
+                          <span>{{ item.content }}</span>
+                        </p>
+                      </el-col>
+                    </el-col>
+                    <el-col :span="24" class="firstInfoInout">
+                      <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
+                        <el-button slot="append">发送</el-button>
+                      </el-input>
+                    </el-col>
+                  </el-col>
+                </el-tab-pane>
+                <el-tab-pane label="成员列表" name="second">
+                  <el-col :span="24" class="secondInfoList">
+                    <el-table :data="personalList" border style="width: 100%" :highlight-current-row="false">
+                      <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
+                      <el-table-column label="姓名" align="center">
+                        <template slot-scope="scope">
+                          <el-image :src="scope.row.pic" style="width:20px;height:20px;top: 5px;margin: 0 10px 0 0;"></el-image>
+                          <span>{{ scope.row.name }}</span>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </el-col>
+                </el-tab-pane>
+              </el-tabs>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'liveIndex',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      logo: require('@a/logo.png'),
+      activeName: 'first',
+      // 聊天列表
+      list: [
+        {
+          date: '202-01-01',
+          name: '顾宏伟',
+          content: '信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容',
+        },
+      ],
+      // 发言
+      input: '',
+      // 成员列表
+      personalList: [
+        {
+          pic: require('@a/logo.png'),
+          name: '顾红伟',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  background-color: #222124;
+  height: 100vh;
+  overflow: hidden;
+  .top {
+    height: 60px;
+    line-height: 60px;
+    background-color: #34363b;
+    margin: 0 0 15px 0;
+    .left {
+      .el-image {
+        width: 40px;
+        height: 40px;
+        width: 40px;
+        height: 40px;
+        top: 10px;
+        left: 10px;
+        margin: 0 10px 0 0;
+      }
+      span {
+        color: #ccc;
+        padding: 0 15px;
+      }
+    }
+    .right {
+      text-align: right;
+      padding: 0 15px 0px 0;
+    }
+  }
+  .down {
+    height: 100vh;
+    .left {
+      width: 78%;
+      height: 100vh;
+      margin: 0 15px 0 0;
+      background-color: #2c2e32;
+    }
+    .right {
+      height: 100vh;
+      background-color: #2c2e32;
+      .title {
+        height: 50px;
+        line-height: 50px;
+        color: #ccc;
+        text-align: center;
+        border-bottom: 1px solid #cccccc5f;
+      }
+      .info {
+        .firstInfo {
+          padding: 0 10px;
+          .firstInfoList {
+            height: 740px;
+            overflow-y: auto;
+            color: #ccc;
+            .list {
+              margin: 0 0 5px 0;
+            }
+          }
+          .firstInfoInput {
+          }
+        }
+        .secondInfoList {
+          padding: 0 10px;
+          height: 775px;
+          overflow-y: auto;
+          .personalList {
+          }
+        }
+      }
+    }
+  }
+}
+/deep/.el-tabs__item {
+  color: #ccc;
+}
+/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+  padding-left: 20px;
+}
+/deep/.el-tabs--top .el-tabs__item.is-top:last-child {
+  padding-right: 20px;
+}
+/deep/.el-table td {
+  padding: 5px 0;
+  color: #ccc;
+}
+/deep/.el-table th {
+  padding: 5px 0;
+  background: #000;
+}
+/deep/.el-table tr {
+  background-color: transparent;
+}
+/deep/.el-table {
+  background-color: transparent;
+}
+.el-table {
+  /deep/tbody tr:hover > td {
+    background-color: #409eff;
+  }
+}
+</style>

src/views/login.vue

@@ -13,6 +13,10 @@
               </el-col>
               <el-col :span="24" class="form">
                 <el-form :model="form" :rules="rules" ref="form" class="demo-ruleForm">
+                  <el-form-item prop="roomid" class="roomid">
+                    <span slot="label"><el-image :src="image.roomid"></el-image></span>
+                    <el-input v-model="form.roomid" placeholder="请输入房间号"></el-input>
+                  </el-form-item>
                   <el-form-item prop="phone">
                     <span slot="label"><el-image :src="image.phone"></el-image></span>
                     <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11"></el-input>
@@ -46,10 +50,12 @@ export default {
     return {
       form: {},
       rules: {
+        roomid: [{ required: false, message: '请输入房间号', trigger: 'blur' }],
         phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
         passwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
       },
       image: {
+        roomid: require('@/assets/roomid.png'),
         phone: require('@/assets/user.png'),
         password: require('@/assets/password.png'),
       },
@@ -99,13 +105,13 @@ export default {
   position: absolute;
   top: 30%;
   left: 30%;
-  width: 630px;
-  height: 300px;
+  width: 660px;
+  height: 370px;
 }
 .main .left {
   float: left;
-  width: 300px;
-  height: 300px;
+  width: 330px;
+  height: 370px;
   text-align: center;
   background: #0000004f;
 }
@@ -120,8 +126,8 @@ export default {
 }
 .main .right {
   float: left;
-  width: 300px;
-  height: 300px;
+  width: 330px;
+  height: 370px;
   background: #ffffff5f;
   .title {
     text-align: center;
@@ -144,4 +150,7 @@ export default {
 /deep/.el-image {
   top: 5px;
 }
+/deep/.roomid .el-form-item__label {
+  padding: 0 13px 0 10px;
+}
 </style>