submit

src/router/index.js

@@ -34,7 +34,21 @@ export const constantRoutes = [
     component: () => import('@/views/login/auth-redirect'),
     hidden: true
   },
-
+  {
+    path: '/auth-test',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/test',
+        component: () => import('@/views/test')
+      },
+      {
+        path: '/test/detail',
+        component: () => import('@/views/test/detail')
+      }
+    ]
+  },
   {
     path: '/profile',
     component: Layout,

src/views/test/detail.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-card header="详情页面">
+    <el-card>
+      <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls />
+    </el-card>
+    <el-card>
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="标题一" name="1">内容一</el-tab-pane>
+        <el-tab-pane label="标题二" name="2">内容二</el-tab-pane>
+        <el-tab-pane label="标题三" name="3">内容三</el-tab-pane>
+      </el-tabs>
+      <h3>{{ id }}</h3>
+    </el-card>
+  </el-card>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      activeName: '1',
+      id: ''
+    }
+  },
+  created() {
+    this.id = this.$route.query
+  },
+  methods: {
+    handleClick() {
+
+    }
+  }
+}
+</script>

src/views/test/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <el-card class="train-container" header="安全培训">
+    <el-collapse accordion>
+      <el-collapse-item class="tag-list">
+        <template slot="title">
+          <div class="tag-header">
+            <span class="lable">类别一：</span>
+            <el-tag @click="changeTag(-1)">全部</el-tag>
+            <el-tag v-for="tag in 10" :key="tag" type="info" @click="changeTag(tag)">标签标题-{{ tag }}</el-tag>
+          </div>
+        </template>
+        <div class="tag-cont">
+          <el-tag v-for="tagcont in 10" :key="tagcont" type="info">标签内容-{{ tagcont }}</el-tag>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+    <el-row class="train-list" :gutter="15" justify>
+      <el-col v-for="(item, index) in 10" :key="index" :span="4">
+        <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 10px;" @click="showDetail(item)">
+          <div @click="showDetail(item)">
+            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
+            <div style="padding: 14px;">
+              <span>好吃的汉堡</span>
+              <div class="bottom clearfix">
+                <time class="time">{{ new Date() }}</time>
+                <el-button type="text" class="button">操作按钮</el-button>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-card>
+
+</template>
+<script>
+export default {
+  name: 'TrainComponent',
+  components: {},
+  data() {
+    return {}
+  },
+  methods: {
+    changeTag(tag) {
+
+    },
+    showDetail(item) {
+      this.$router.push({
+        path: '/test/detail',
+        query: {
+          id: item
+        }
+      })
+    }
+  }
+}
+</script>
+  <style lang="scss" scoped>
+  .train-container{
+    .tag-list{
+        .lable{
+            display: inline-block;
+            width: 80px;
+            line-height: 1;
+            font-size: 12px;
+            padding-left:10px ;
+            box-sizing: border-box;
+        }
+        .tag-header{
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        .tag-cont{
+            padding-left: 80px;
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        .el-tag{
+            margin-right: 10px;
+        }
+    }
+    .train-list{
+        padding-top: 10px;
+        .image {
+            width: 100%;
+            display: block;
+        }
+    }
+  }
+    </style>
+