diff --git a/src/assets/img/course1.png b/src/assets/img/course1.png
new file mode 100644
index 0000000..bb1276a
Binary files /dev/null and b/src/assets/img/course1.png differ
diff --git a/src/assets/img/course2.png b/src/assets/img/course2.png
new file mode 100644
index 0000000..237112b
Binary files /dev/null and b/src/assets/img/course2.png differ
diff --git a/src/assets/img/exts/ppt.png b/src/assets/img/exts/ppt.png
new file mode 100644
index 0000000..2315b3b
Binary files /dev/null and b/src/assets/img/exts/ppt.png differ
diff --git a/src/assets/img/exts/video.png b/src/assets/img/exts/video.png
new file mode 100644
index 0000000..1b52375
Binary files /dev/null and b/src/assets/img/exts/video.png differ
diff --git a/src/assets/img/record7.png b/src/assets/img/record7.png
new file mode 100644
index 0000000..909e580
Binary files /dev/null and b/src/assets/img/record7.png differ
diff --git a/src/components/breadcrumb/index.vue b/src/components/breadcrumb/index.vue
new file mode 100644
index 0000000..85a3754
--- /dev/null
+++ b/src/components/breadcrumb/index.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="breadcrumb">
+        <el-breadcrumb separator=">">
+            <el-breadcrumb-item v-for="(item, index) in pages" :key="index" :to="{ path: index == pages.length - 1 ? curRoute : route }">{{item}}</el-breadcrumb-item>
+        </el-breadcrumb>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+      data: {
+        type: String,
+        required: true
+      },
+      route: {
+        type: String,
+        default: 'list'
+      }
+    },
+    data() {
+      return {
+        pages: this.data.split('/'),
+        curRoute: this.$route.path
+      };
+    },
+    methods: {
+      update(data){
+        console.log(2222,data)
+        this.pages = data.split('/')
+      }
+    }
+};
+</script>
+<style lang="scss" scoped>
+  .breadcrumb {
+    margin: 4px 0 16px;
+    /deep/.el-breadcrumb__item {
+      .is-link, .el-breadcrumb__separator {
+        font-weight: 400;
+        color: $main-color;
+      }
+      &:last-child {
+        .is-link {
+          color: #0B1D30;
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/course/details/index.vue b/src/pages/course/details/index.vue
index d734a67..df2c5d7 100644
--- a/src/pages/course/details/index.vue
+++ b/src/pages/course/details/index.vue
@@ -1,73 +1,67 @@
 <template>
-    <div style="padding: 24px">
-        <el-card shadow="hover" class="m-b-20">
-            <div class="flex-between">
-                <el-page-header @back="goBack" :content="'课程详情'"></el-page-header>
-            </div>
-        </el-card>
-        <el-card shadow="hover" class="m-b-20" style="background: none;">
-            <div class="flex">
-                <div class="cover" :class="{'is-word': showMask1}">
-                    <img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%">
-                    <template v-else-if="iframeSrc">
-                        <iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
-                        <template v-if="showMask">
-                            <div class="mask" style="width: 500px;height: 30px;top: 53px;right: 320px"></div>
-                            <div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div>
-                        </template>
-                        <template v-if="showMask1">
-                            <div class="word-mask" style="height: 40px;"></div>
-                            <div class="word-mask2" style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
-                        </template>
-                        <template v-if="showMask2">
-                            <div class="excel-mask1" style="height: 48px;"></div>
-                        </template>
+    <div class="wrap pb">
+        <breadcrumb :data="'课程学习/' + courseName"></breadcrumb>
+        <div class="flex">
+            <div class="cover" :class="{'is-word': showMask1}">
+                <img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%">
+                <template v-else-if="iframeSrc">
+                    <iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
+                    <template v-if="showMask">
+                        <div class="mask" style="width: 500px;height: 30px;top: 53px;right: 320px"></div>
+                        <div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div>
                     </template>
-                    <div class="pdf inner" v-else-if="pdfSrc">
-                        <p class="arrow">
-                            <span @click="changePdfPage(0)" class="turn el-icon-arrow-left" :class="{grey: currentPage==1}"></span>
-                            {{currentPage}} / {{pageCount}}
-                            <span @click="changePdfPage(1)" class="turn el-icon-arrow-right" :class="{grey: currentPage==pageCount}"></span>
-                        </p>
-                        <pdf
-                            class="pdf-wrap"
-                            :src="pdfSrc"
-                            :page="currentPage"
-                            @num-pages="pageCount=$event"
-                            @page-loaded="currentPage=$event"
-                            @loaded="loadPdfHandler">
-                        </pdf>
-                    </div>
-                    <div class="inner" v-else-if="playAuth">
-                        <div class="video_wid" id="player"></div>
-                    </div>
+                    <template v-if="showMask1">
+                        <div class="word-mask" style="height: 40px;"></div>
+                        <div class="word-mask2" style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
+                    </template>
+                    <template v-if="showMask2">
+                        <div class="excel-mask1" style="height: 48px;"></div>
+                    </template>
+                </template>
+                <div class="pdf inner" v-else-if="pdfSrc">
+                    <p class="arrow">
+                        <span @click="changePdfPage(0)" class="turn el-icon-arrow-left" :class="{grey: currentPage==1}"></span>
+                        {{currentPage}} / {{pageCount}}
+                        <span @click="changePdfPage(1)" class="turn el-icon-arrow-right" :class="{grey: currentPage==pageCount}"></span>
+                    </p>
+                    <pdf
+                        class="pdf-wrap"
+                        :src="pdfSrc"
+                        :page="currentPage"
+                        @num-pages="pageCount=$event"
+                        @page-loaded="currentPage=$event"
+                        @loaded="loadPdfHandler">
+                    </pdf>
+                </div>
+                <div class="inner" v-else-if="playAuth">
+                    <div class="video_wid" id="player"></div>
                 </div>
-                <div class="catalog flex-1">
-                    <div class="list">
-                        <h4 class="title">{{courseName}}</h4>
-                        <div class="desc-wrap">
-                            <div class="desc" :class="{active: desShrink}" v-html="description"></div>
-                            <i class="arrow" :class="{active: desShrink}" v-if="description && description.length > 40">
-                                <span>...</span>
-                                <img src="@/assets/img/arrow-down.png" alt="" @click="desShrink = !desShrink">
-                            </i>
-                        </div>
-                        <div class="chapters">
-                            <template v-if="videoList && videoList.length">
-                                <div class="chapter" v-for="(item,index) in videoList" :key="index">
-                                    <div class="chapterName">{{item.name}}</div>
-                                    <div class="section" v-if="item.subsectionList.length">
-                                        <div v-for="(section,i) in item.subsectionList" :key="i" @click="preview(section, item.name)">
-                                            <p class="sectionName" :class="{active: curLink === `${item.name}${section.name}`}">{{ section.name }}</p>
-                                        </div>
+            </div>
+            <div class="catalog">
+                <div class="list">
+                    <h4 class="title">{{courseName}}</h4>
+                    <div class="desc-wrap">
+                        <div class="desc" :class="{active: desShrink}" v-html="description"></div>
+                        <i class="arrow" :class="{active: desShrink}" v-if="description && description.length > 40">
+                            <span>...</span>
+                            <img src="@/assets/img/arrow-down.png" alt="" @click="desShrink = !desShrink">
+                        </i>
+                    </div>
+                    <div class="chapters">
+                        <template v-if="videoList && videoList.length">
+                            <div class="chapter" v-for="(item,index) in videoList" :key="index">
+                                <div class="chapterName">{{item.name}}</div>
+                                <div class="section" v-if="item.subsectionList.length">
+                                    <div v-for="(section,i) in item.subsectionList" :key="i" @click="preview(section, item.name)">
+                                        <p class="sectionName" :class="{active: curLink === `${item.name}${section.name}`}">{{ section.name }}</p>
                                     </div>
                                 </div>
-                            </template>
-                        </div>
+                            </div>
+                        </template>
                     </div>
                 </div>
             </div>
-        </el-card>
+        </div>
     </div>
 </template>
 
@@ -78,6 +72,7 @@ import 'quill/dist/quill.core.css';
 import 'quill/dist/quill.snow.css';
 import 'quill/dist/quill.bubble.css';
 import bus from '@/libs/bus'
+import breadcrumb from '@/components/breadcrumb'
 export default {
     data() {
         return {
@@ -115,7 +110,7 @@ export default {
             classId: state => state.classId,
         }),
     },
-    components: { pdf },
+    components: { pdf, breadcrumb },
     mounted() {
         bus.$emit('setBg','none')
         this.insertScript()
@@ -267,10 +262,16 @@ $height: 700px;
     height: $height !important;
     border: 0;
 }
-.cover{
-    img{
-        border-radius: 8px;
+.page {
+    margin: 12px 0;
+    .intro {
+        font-size: 16px;
+        color: #333;
+        line-height: 24px;
     }
+}
+.cover{
+    flex: 1;
     &.is-word{
         overflow: hidden;
     }
@@ -294,26 +295,29 @@ $height: 700px;
     outline: none;
 }
 .catalog{
-    margin-left: 40px;
-    max-width: 500px;
+    width: 296px;
+    padding: 16px;
+    margin-left: 12px;
+    background-color: #252528;
+    .entry {
+        width: 100%;
+        padding: 10px 15px;
+        margin-bottom: 16px;
+    }
 }
-
 .list{
-    height: $height;
+    height: calc(700px - 82px) ;
     overflow-y: auto;
-    padding: 24px 16px;
-    background: #fff;
     .title{
-        margin-bottom: 8px;
-        color: rgba(0, 0, 0, 0.85);
-        font-size: 20px;
+        margin-bottom: 11px;
+        color: #fff;
+        font-size: 16px;
     }
     .desc-wrap{
-        max-width: 500px;
         position: relative;
         .desc{
             font-size: 14px;
-            color: rgba(0, 0, 0, 0.65);
+            color: #fff;
             line-height: 22px;
             @include mul-ellipsis(2);
             &.active{
@@ -355,21 +359,24 @@ $height: 700px;
     .chapter{
         margin-bottom: 20px;
         .chapterName{
-            color: rgba(0, 0, 0, 0.85);
-            font-size: 16px;
+            color: #fff;
+            font-size: 14px;
         }
         .section{
             padding: 5px 15px;
-            margin-top: 8px;
-            background: rgba(0, 0, 0, 0.02);
+            margin-top: 12px;
+            background-color: #121214;
             .sectionName{
-                margin: 10px 0;
+                margin: 12px 0;
                 font-size: 14px;
-                color: rgba(0, 0, 0, 0.65);
+                color: #999;
                 cursor: pointer;
                 @include ellipsis;
+                img {
+                    margin-right: 8px;
+                }
                 &.active{
-                    color: #9278FF;
+                    color: #fff;
                 }
             }
         }
diff --git a/src/pages/info/details/index.vue b/src/pages/info/details/index.vue
index f09f6fa..62ad201 100644
--- a/src/pages/info/details/index.vue
+++ b/src/pages/info/details/index.vue
@@ -1,45 +1,36 @@
 <template>
-    <div>
-        <div class="banner-con"></div>
-        <div style="padding: 24px">
-            <div class="article">
-                <el-card shadow="hover" class="m-b-20">
-                    <div class="flex-between">
-                        <el-page-header @back="goBack" :content="'资讯详情'"></el-page-header>
-                    </div>
-                </el-card>
-                <el-card shadow="hover" class="m-b-20">
-                    <div class="page">
-                        <h6 class="title">{{title}}</h6>
-                        <div class="metas">
-                            <span>作者： {{author}}</span>
-                            <span>{{date.replace(' 00:00:00','')}}</span>
-                            <span>浏览量：{{viewCount}}</span>
-                        </div>
+    <div class="wrap">
+        <breadcrumb :data="breadcrumbTitle"></breadcrumb>
+        <div class="page">
+            <h6 class="title">{{title}}</h6>
+            <div class="metas">
+                <span>作者： {{author}}</span>
+                <el-divider direction="vertical"></el-divider>
+                <span>{{date.replace(' 00:00:00','')}}</span>
+                <el-divider direction="vertical"></el-divider>
+                <span>浏览量：{{viewCount}}</span>
+            </div>
 
-                        <div class="cover">
-                            <img :src="coverUrl" alt="">
-                        </div>
-                        <div class="content ql-editor" v-html="content"></div>
-                    </div>
-                </el-card>
+            <div class="cover">
+                <img :src="coverUrl" alt="">
             </div>
+            <div class="content ql-editor" v-html="content"></div>
         </div>
     </div>
-
 </template>
-
 <script>
 import { Loading } from 'element-ui';
 import 'quill/dist/quill.core.css';
 import 'quill/dist/quill.snow.css';
 import 'quill/dist/quill.bubble.css';
+import breadcrumb from '@/components/breadcrumb'
 export default {
     data() {
         return {
             firstName: this.$route.query.first,
             secondName: this.$route.query.second,
             id: this.$route.query.id,
+            breadcrumbTitle: this.$route.query.first + '/',
             coverUrl: '',
             author: '',
             date: '',
@@ -49,13 +40,13 @@ export default {
             loadIns: null
         }
     },
+    components: {
+        breadcrumb
+    },
     mounted() {
         this.getData()
     },
     methods: {
-        goBack() {
-            this.$router.back();
-        },
         getData() {
             this.loadIns = Loading.service()
             this.$get(`${this.api.getArticle}/${this.id}`)
@@ -67,6 +58,9 @@ export default {
                     this.title = data.title
                     this.content = data.content
                     this.viewCount = data.viewCount
+                    this.breadcrumbTitle = this.firstName + '/' + this.title
+                    this.$forceUpdate()
+                    console.log(33, this.breadcrumbTitle)
                     this.loadIns.close()
                 })
                 .catch(err => {
@@ -78,63 +72,50 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.banner-con{
-    width: 100%;
-    height: 200px;
-    background-image: url('../../../assets/img/match-banner.jpg');
-    background-size: 100vw 200px;
-    background-repeat: no-repeat;
-}
-.article{
-    //width: 70%;
-    margin: 0 auto;
-    .page{
-        padding: 40px;
-        border-radius: 8px;
-        background-color: #fff;
-        .title{
-            text-align: center;
-            font-size: 24px;
-            font-weight: 500;
-            color: rgba(0, 0, 0, 0.85);
-        }
-        .metas{
-            display: flex;
-            justify-content: center;
+.wrap {
+    .title{
+        margin-top: 30px;
+        text-align: center;
+        font-size: 28px;
+        font-weight: 500;
+        color: #0B1D30;
+    }
+    .metas{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-bottom: 32px;
+        margin: 16px 0 32px;
+        span{
+            display: inline-flex;
             align-items: center;
-            padding-bottom: 32px;
-            margin: 16px 0 32px;
-            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-            span{
-                display: inline-flex;
-                align-items: center;
-                margin-left: 20px;
-                color: rgba(0, 0, 0, 0.45);
-                font-size: 12px;
-                img{
-                    width: 18px;
-                    margin-right: 5px;
-                }
-            }
-        }
-        .cover{
-            margin: 20px 0;
-            text-align: center;
+            color: #999;
+            font-size: 12px;
             img{
-                width: 800px;
+                width: 18px;
+                margin-right: 5px;
             }
         }
-
-        .content{
-            line-height: 1.8;
-            font-size: 16px;
-            text-indent: 2em;
-            /deep/img{
-                display: block;
-                width: 600px;
-                margin-left: auto;
-                margin-right: auto;
-            }
+        .el-divider {
+            margin: 0 16px;
+        }
+    }
+    .cover{
+        margin: 20px 0;
+        text-align: center;
+        img{
+            width: 800px;
+        }
+    }
+    .content{
+        line-height: 1.8;
+        font-size: 16px;
+        text-indent: 2em;
+        /deep/img{
+            display: block;
+            width: 600px;
+            margin-left: auto;
+            margin-right: auto;
         }
     }
 }
diff --git a/src/pages/match/details/index.vue b/src/pages/match/details/index.vue
index aa1a8e1..0e47f86 100644
--- a/src/pages/match/details/index.vue
+++ b/src/pages/match/details/index.vue
@@ -1,47 +1,39 @@
 <template>
-    <div>
-        <div class="banner-con" :style="{backgroundImage: coverUrlComputed}"></div>
-        <div class="main">
-            <div class="nav">
-                <div class="sub-title">赛事报名</div>
+    <div class="wrap index">
+        <div class="banner" :style="{backgroundImage: coverUrlComputed}"></div>
+        <div class="center-wrap">
+            <breadcrumb :data="'全部赛事/' + title"></breadcrumb>
+            <!-- <div class="nav">
                 <div class="sidebar">
                     <div class="item" :class="{ active: curType === item.id }" v-for="(item, index) in typeList" :key="index" @click="tabChange(item.id)">{{item.name}}</div>
                 </div>
-            </div>
-
-            <div class="content-wrap">
-                <el-card shadow="hover" style="margin: 24px 0">
-                    <div class="flex-between">
-                        <el-page-header @back="goBack"></el-page-header>
-                    </div>
-                </el-card>
-                <el-card shadow="hover">
-                    <div class="content">
-                        <h6 class="title">{{title}}</h6>
-                        <div class="meta">最近编辑时间：{{gmtModified}}</div>
-                        <div class="right">
-                            <p class="status"
-                               :class="{wait: status == 0 || status == 4,signing: status == 2,signed: status == 1,finish: status == 3 || status == 5}"
-                               @click.stop="signup">{{ statusList[status] }}</p>
-                        </div>
-                        <div class="texts ql-editor" v-html="description" v-if="curType == 1"></div>
-                        <div v-else>
-                            <ul class="progress" v-if="progress.length">
-                                <li v-for="(item,index) in progress" :key="index">
-                                    <i class="dot" :class="[item.status == 0 ? 'not' : (item.status == 1 ? 'ing' : 'done el-icon-circle-check')]"></i>
-                                    <p class="name">{{item.title}}</p>
-                                    <p class="desc">{{item.description}}</p>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </el-card>
+            </div> -->
+            <div class="content">
+                <div class="flex-between">
+                    <el-tabs v-model="curType">
+                        <el-tab-pane v-for="(item, index) in typeList" :key="index" :label="item.name" :name="item.id"></el-tab-pane>
+                    </el-tabs>
+                    <a class="status" :class="{wait: status == 0 || status == 4,signing: status == 2,signed: status == 1,finish: status == 3 || status == 5}" @click.stop="signup">{{ statusList[status] }}</a>
+                </div>
+                <h6 class="title">{{title}}</h6>
+                <div class="meta">最近编辑时间：{{gmtModified}}</div>
+                <div class="texts ql-editor" v-html="description" v-if="curType == 1"></div>
+                <div v-else>
+                    <ul class="progress" v-if="progress.length">
+                        <li v-for="(item,index) in progress" :key="index">
+                            <i class="dot" :class="[item.status == 0 ? 'not' : (item.status == 1 ? 'ing' : 'done el-icon-circle-check')]"></i>
+                            <p class="name">{{item.title}}</p>
+                            <p class="desc">{{item.description}}</p>
+                        </li>
+                    </ul>
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
+import breadcrumb from '@/components/breadcrumb'
 export default {
     name: 'matchdetail',
     data() {
@@ -50,15 +42,15 @@ export default {
             showSignup: this.$store.state.match.matchSignupStatus,
             coverUrl: '',
             title: '',
-            curType: 1,
+            curType: '1',
             typeList: [
                 {
-                    id: 1,
+                    id: '1',
                     icon: 'el-icon-document',
                     name: '竞赛信息'
                 },
                 {
-                    id: 2,
+                    id: '2',
                     icon: 'el-icon-setting',
                     name: '竞赛进展'
                 }
@@ -70,14 +62,19 @@ export default {
             statusList: ["等待报名", "已报名", "立即报名", "报名截止", "比赛中", "已结束"],
         };
     },
+    components: {
+        breadcrumb
+    },
+    computed: {
+        coverUrlComputed() {
+            return this.coverUrl? 'url(' + this.coverUrl +  ')' : "url('../../../assets/img/info-banner.png')"
+        }
+    },
     mounted() {
         this.getData()
         this.getProgress()
     },
     methods: {
-        goBack() { // 返回
-            this.$router.back();
-        },
         getData() { // 获取竞赛信息
             this.$get(this.api.getContest + '/' + this.id).then(res => {
                 let data = res.contest
@@ -92,9 +89,6 @@ export default {
                 this.progress = res.contestProgressList
             }).catch(err => {});
         },
-        tabChange(index){ // 切换菜单
-            this.curType = index
-        },
         signup(){ // 立即报名
             if (this.status == 2) {
                 let data = {
@@ -106,254 +100,190 @@ export default {
                 }).catch(res => {})
             }
         }
-    },
-    computed: {
-        coverUrlComputed() {
-            return this.coverUrl? 'url(' + this.coverUrl +  ')' : "url('../../../assets/img/info-banner.png')"
-        }
     }
 };
 </script>
 
 <style lang="scss" scoped>
-.banner-con{
+.banner{
     width: 100%;
     height: 400px;
-    // background-image: url('../../../assets/img/info-banner.png');
     background-size: 100vw 400px;
     background-repeat: no-repeat;
 }
-.main{
-    display: flex;
-    justify-content: center;
-    align-items:flex-start;
-    padding-bottom: 40px;
-    .nav{
-        width: 220px;
-        border-radius: 8px;
-        overflow: hidden;
-        margin-top: -44px;
-        .sub-title{
-            line-height: 88px;
-            color: #fff;
-            font-size: 24px;
-            text-align: center;
-            background: #9076FF;
+.main .center-wrap {
+    margin-top: 30px;
+}
+.content{
+    position: relative;
+    padding: 20px 40px;
+    margin-top: 30px;
+    background-color: #fff;
+    .title{
+        width: 67%;
+        margin: 0 auto;
+        font-size: 28px;
+        text-align: center;
+        color: #0B1D30;
+    }
+    .meta{
+        padding: 16px 0;
+        font-size: 12px;
+        color: #999;
+        text-align: center;
+    }
+    .status {
+        padding: 0 23px;
+        line-height: 34px;
+        font-size: 14px;
+        color: #fff;
+        background-color: #52C41A;
+        border-radius: 4px;
+        cursor: pointer;
+        &.wait {
+            background-color: #FAAD14;
         }
-        /deep/.sidebar{
-            background-color: #fff;
-            .item{
-                padding: 15px 0;
-                color: rgba(0,0,0,.85);
-                font-size: 18px;
-                text-align: center;
-                cursor: pointer;
-                &.active{
-                    color: #9076FF;
-                }
-                &:hover{
-                    background-color: #f4f1ff;
-                }
-            }
+        &.signing {
+            background-color: #9076FF;
+        }
+        &.signed {
+            background-color: #52C41A;
+        }
+        &.finish {
+            background-color: #ccc;
         }
     }
-    .content-wrap{
-        width: 950px;
-        margin-left: 40px;
-        @media(max-width: 1300px){
-            width: 700px;
+    .texts{
+        margin: 20px 0 50px;
+        font-size: 16px;
+        line-height: 1.6;
+        text-indent: 2em;
+        overflow: hidden;
+        /deep/img{
+            max-width: 100%;
         }
-
-        /deep/.el-page-header__left::after{
-            width: 0;
+    }
+    .progress{
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        padding: 50px 0;
+        margin: 40px 0 20px;
+        &:before{
+            content: '';
+            position: absolute;
+            left: 413px;
+            width: 1px;
+            height: 100%;
+            background-color: #E6E6E6;
+            @media(max-width: 1300px){
+                left: 289px;
+            }
         }
-
-        .content{
+        li{
             position: relative;
-            padding: 20px 40px;
-            background-color: #fff;
-            border-radius: 8px;
+            display: inline-flex;
+            align-items: center;
+            width: 90%;
+            margin-bottom: 40px;
+            .dot{
+                position: absolute;
+                left: 366px;
+                width: 13px;
+                height: 13px;
+                background-color: #fff;
 
-            .title{
-                width: 67%;
-                margin: 0 auto;
-                font-size: 24px;
-                text-align: center;
-                color: rgba(0, 0, 0, 0.85);
-            }
-            .meta{
-                padding: 16px 0;
-                font-size: 12px;
-                color: rgba(0, 0, 0, 0.45);
-                text-align: center;
-            }
-            .right{
-                padding: 16px 0 32px;
-                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: flex-end;
-                flex: 1;
-                .status {
-                    padding: 0 15px;
-                    line-height: 32px;
-                    font-size: 12px;
-                    color: #fff;
-                    background-color: #52C41A;
-                    border-radius: 4px;
-                    cursor: pointer;
-
-                    &.wait {
-                        background-color: #FAAD14;
-                    }
-
-                    &.signing {
-                        background-color: #9076FF;
-                    }
-
-                    &.signed {
-                        background-color: #52C41A;
-                    }
-
-                    &.finish {
-                        background-color: rgba(0, 0, 0, .45);
+                &.not{
+                    border-radius: 50%;
+                    background-color: #fff;
+                    border: 1px solid #cb221c;
+                }
+                &.ing{
+                    width: 13px;
+                    height: 13px;
+                    padding: 1px;
+                    border: 1px solid #cb221c;
+                    border-radius: 50%;
+                    background-color: #cb221c;
+                    background-clip: content-box;
+                }
+                &.done{
+                    left: 365px;
+                    color: #cb221c;
+                    font-size: 16px;
+                }
+                @media(max-width: 1300px){
+                    left: 254px;
+                    &.done{
+                        left: 253px;
                     }
                 }
             }
-            .texts{
-                margin: 20px 0 50px;
-                font-size: 16px;
-                line-height: 1.6;
-                text-indent: 2em;
-                overflow: hidden;
-                /deep/img{
-                    max-width: 100%;
-                }
+            .name{
+                width: 43%;
+                font-size: 24px;
+                color: rgba(0, 0, 0, 0.85);
             }
-            .progress{
+            .desc{
                 position: relative;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                flex-direction: column;
-                padding: 50px 0;
-                margin: 40px 0 20px;
+                padding: 24px 30px;
+                text-align: center;
+                color: rgba(0, 0, 0, 0.85);
+                font-size: 16px;
+                background-color: #fff;
+                border: 1px solid #E6E6E6;
+                border-radius: 8px;
                 &:before{
                     content: '';
+                    z-index: 2;
                     position: absolute;
-                    left: 413px;
-                    width: 1px;
-                    height: 100%;
-                    background-color: #E6E6E6;
-                    @media(max-width: 1300px){
-                        left: 289px;
-                    }
+                    top: 28px;
+                    left: -16px;
+                    border: 8px solid transparent;
+                    border-right-color: #fff;
                 }
-                li{
-                    position: relative;
-                    display: inline-flex;
-                    align-items: center;
-                    width: 90%;
-                    margin-bottom: 40px;
-                    .dot{
-                        position: absolute;
-                        left: 366px;
-                        width: 13px;
-                        height: 13px;
-                        background-color: #fff;
-
-                        &.not{
-                            border-radius: 50%;
-                            background-color: #fff;
-                            border: 1px solid #cb221c;
-                        }
-                        &.ing{
-                            width: 13px;
-                            height: 13px;
-                            padding: 1px;
-                            border: 1px solid #cb221c;
-                            border-radius: 50%;
-                            background-color: #cb221c;
-                            background-clip: content-box;
-                        }
-                        &.done{
-                            left: 365px;
-                            color: #cb221c;
-                            font-size: 16px;
-                        }
-                        @media(max-width: 1300px){
-                            left: 254px;
-                            &.done{
-                                left: 253px;
-                            }
-                        }
-                    }
-                    .name{
-                        width: 43%;
-                        font-size: 24px;
-                        color: rgba(0, 0, 0, 0.85);
-                    }
-                    .desc{
-                        position: relative;
-                        padding: 24px 30px;
-                        text-align: center;
-                        color: rgba(0, 0, 0, 0.85);
-                        font-size: 16px;
-                        background-color: #fff;
-                        border: 1px solid #E6E6E6;
-                        border-radius: 8px;
-                        &:before{
-                            content: '';
-                            z-index: 2;
-                            position: absolute;
-                            top: 28px;
-                            left: -16px;
-                            border: 8px solid transparent;
-                            border-right-color: #fff;
-                        }
-                        &:after{
-                            content: '';
-                            z-index: 1;
-                            position: absolute;
-                            top: 27px;
-                            left: -18px;
-                            border: 9px solid transparent;
-                            border-right-color: #E6E6E6;
-                        }
-                    }
-                    &:nth-child(even){
-                        flex-direction: row-reverse;
-                        .name{
-                            margin-left: 16%;
-                            text-align: left;
-                        }
-                        .desc{
-                            &:before{
-                                left: auto;
-                                right: -16px;
-                                border: 8px solid transparent;
-                                border-left-color: #fff;
-                            }
-                            &:after{
-                                left: auto;
-                                right: -18px;
-                                border: 9px solid transparent;
-                                border-left-color: #E6E6E6;
-                            }
-                        }
-                    }
-                    &:nth-child(odd){
-                        .name{
-                            margin-right: 16%;
-                            text-align: right;
-                        }
+                &:after{
+                    content: '';
+                    z-index: 1;
+                    position: absolute;
+                    top: 27px;
+                    left: -18px;
+                    border: 9px solid transparent;
+                    border-right-color: #E6E6E6;
+                }
+            }
+            &:nth-child(even){
+                flex-direction: row-reverse;
+                .name{
+                    margin-left: 16%;
+                    text-align: left;
+                }
+                .desc{
+                    &:before{
+                        left: auto;
+                        right: -16px;
+                        border: 8px solid transparent;
+                        border-left-color: #fff;
                     }
-                    &:last-child{
-                        margin-bottom: 0;
+                    &:after{
+                        left: auto;
+                        right: -18px;
+                        border: 9px solid transparent;
+                        border-left-color: #E6E6E6;
                     }
                 }
             }
+            &:nth-child(odd){
+                .name{
+                    margin-right: 16%;
+                    text-align: right;
+                }
+            }
+            &:last-child{
+                margin-bottom: 0;
+            }
         }
     }
 }
diff --git a/src/pages/record/details/index.vue b/src/pages/record/details/index.vue
index 6819144..d3ac795 100644
--- a/src/pages/record/details/index.vue
+++ b/src/pages/record/details/index.vue
@@ -1,16 +1,15 @@
 <template>
     <!--实验情况-->
-    <div style="padding: 24px">
-        <el-card shadow="hover" class="m-b-20">
-            <div class="flex-between">
-                <el-page-header @back="goBack" :content="'实验情况'"></el-page-header>
-            </div>
-        </el-card>
-        <el-card shadow="hover" class="m-b-20">
+    <div class="wrap">
+        <breadcrumb data="实验记录/实验情况"></breadcrumb>
+        <div class="page">
             <div class="flex-between m-b-20">
-                <div></div>
+                <h6 class="l-title">
+                    <img src="@/assets/img/record7.png" alt="">
+                    实验报告列表
+                </h6>
                 <div>
-                    <el-button round type="primary" @click="exportData">导出</el-button>
+                    <el-button type="primary" @click="exportData">导出数据</el-button>
                 </div>
             </div>
             <el-table
@@ -49,7 +48,7 @@
                     @current-change="handleCurrentChange"
                 ></el-pagination>
             </div>
-        </el-card>
+        </div>
     </div>
 </template>
 
@@ -57,6 +56,7 @@
 import axios from 'axios'
 import Setting from "@/setting";
 import util from "@/libs/util";
+import breadcrumb from '@/components/breadcrumb'
 export default {
     data() {
         return {
@@ -70,6 +70,9 @@ export default {
             token:util.local.get(Setting.tokenKey),
         }
     },
+    components: {
+        breadcrumb
+    },
     mounted() {
         this.getData();
     },
diff --git a/src/pages/record/list/index.vue b/src/pages/record/list/index.vue
index 9f46486..9b6a663 100644
--- a/src/pages/record/list/index.vue
+++ b/src/pages/record/list/index.vue
@@ -50,7 +50,7 @@
                                 :value="item.cid"
                             ></el-option>
                         </el-select>
-                        <el-button style="width: 88px;margin-left: 20px;" type="primary" @click="exportData">导出数据</el-button>
+                        <el-button style="margin-left: 20px;" type="primary" @click="exportData">导出数据</el-button>
                     </li>
                 </ul>
             </div>
@@ -156,16 +156,6 @@ export default {
     padding: 16px;
     margin-bottom: 20px;
     background: #fff;
-    .l-title {
-        display: flex;
-        align-items: center;
-        margin-bottom: 20px;
-        font-size: 16px;
-        font-weight: 400;
-        img {
-            margin-right: 5px;
-        }
-    }
 }
 .overview {
     .nums {
diff --git a/src/pages/station/preview/index.vue b/src/pages/station/preview/index.vue
index cdc2f74..90a2f8a 100644
--- a/src/pages/station/preview/index.vue
+++ b/src/pages/station/preview/index.vue
@@ -1,90 +1,83 @@
 <template>
-    <div style="padding: 24px">
-        <el-card shadow="hover" class="m-b-20">
-            <div class="flex-between">
-                <el-page-header @back="goBack" :content="curriculumName"></el-page-header>
-            </div>
-        </el-card>
-        <el-card shadow="hover" class="m-b-20" style="background: none;">
-            <div class="flex">
-                <div class="cover" :class="{'is-word': showMask1}">
-                    <!--实验台不显示课程封面-->
-                    <img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%">
-                    <template v-else-if="iframeSrc">
-                        <iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
-                        <template v-if="showMask">
-                            <div class="mask" style="width:100%;background: #393A3D;height: 30px;top: 53px;"></div>
-                            <div class="mask" style="width:100%;background: #393A3D;height: 30px;top: 53px;"></div>
-                        </template>
-                        <template v-if="showMask1">
-                            <div class="word-mask" style="height: 40px;"></div>
-                            <div class="word-mask2"
-                                 style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
-                        </template>
-                        <template v-if="showMask2">
-                            <div class="excel-mask1" style="height: 48px;"></div>
-                        </template>
+    <div class="wrap">
+        <breadcrumb :data="'实验台/' + curriculumName"></breadcrumb>
+        <div class="flex">
+            <div class="cover" :class="{'is-word': showMask1}">
+                <!--实验台不显示课程封面-->
+                <img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%">
+                <template v-else-if="iframeSrc">
+                    <iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
+                    <template v-if="showMask">
+                        <div class="mask" style="width:100%;background: #393A3D;height: 30px;top: 53px;"></div>
+                        <div class="mask" style="width:100%;background: #393A3D;height: 30px;top: 53px;"></div>
                     </template>
-                    <div class="pdf inner" v-else-if="pdfSrc">
-                        <p class="arrow">
-                            <span @click="changePdfPage(0)" class="turn el-icon-arrow-left"
-                                  :class="{grey: currentPage==1}"></span>
-                            {{ currentPage }} / {{ pageCount }}
-                            <span @click="changePdfPage(1)" class="turn el-icon-arrow-right"
-                                  :class="{grey: currentPage==pageCount}"></span>
-                        </p>
-                        <div style='color:#393A3D;height: 30px;
-background: #393A3D;'></div>
-                        <pdf
-                            class="pdf-wrap"
-                            :src="pdfSrc"
-                            :page="currentPage"
-                            @num-pages="pageCount=$event"
-                            @page-loaded="currentPage=$event"
-                            @loaded="loadPdfHandler">
-                        </pdf>
-                    </div>
-                    <div class="inner" v-else-if="playAuth">
-                        <div class="video_wid" id="player"></div>
-                    </div>
+                    <template v-if="showMask1">
+                        <div class="word-mask" style="height: 40px;"></div>
+                        <div class="word-mask2"
+                                style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
+                    </template>
+                    <template v-if="showMask2">
+                        <div class="excel-mask1" style="height: 48px;"></div>
+                    </template>
+                </template>
+                <div class="pdf inner" v-else-if="pdfSrc">
+                    <p class="arrow">
+                        <span @click="changePdfPage(0)" class="turn el-icon-arrow-left"
+                                :class="{grey: currentPage==1}"></span>
+                        {{ currentPage }} / {{ pageCount }}
+                        <span @click="changePdfPage(1)" class="turn el-icon-arrow-right"
+                                :class="{grey: currentPage==pageCount}"></span>
+                    </p>
+                    <div style='color:#393A3D;height: 30px;background: #393A3D;'></div>
+                    <pdf
+                        class="pdf-wrap"
+                        :src="pdfSrc"
+                        :page="currentPage"
+                        @num-pages="pageCount=$event"
+                        @page-loaded="currentPage=$event"
+                        @loaded="loadPdfHandler">
+                    </pdf>
                 </div>
-                <div class="catalog flex-1">
-                    <div class="m-b-20">
-                        <el-button type="primary" @click="goSystem" style="width: 100%; height: 50px; font-size: 18px">进 入 实 验</el-button>
-                    </div>
-                    <div class="list">
-                        <h4 class="title">{{ courseName }}</h4>
-                        <div class="chapters">
-                            <template v-if="chapterList.length">
-                                <div class="chapter" v-for="(item,index) in chapterList" :key="index">
-                                    <div class="chapterName">{{ item.name }}</div>
-                                    <div class="section" v-if="item.subsectionList.length">
-                                        <div v-for="(section,i) in item.subsectionList" :key="i" @click="preview(section, item.name)">
-                                            <p class="sectionName" :class="{active: curLink === `${item.name}${section.name}`}">{{ section.name }}</p>
-                                        </div>
-                                    </div>
+                <div class="inner" v-else-if="playAuth">
+                    <div class="video_wid" id="player"></div>
+                </div>
+            </div>
+            <div class="catalog">
+                <el-button class="entry" type="primary" @click="goSystem">进 入 实 验</el-button>
+                <div class="list">
+                    <h4 class="title">{{ courseName }}</h4>
+                    <div class="chapters">
+                        <template v-if="chapterList.length">
+                            <div class="chapter" v-for="(item,index) in chapterList" :key="index">
+                                <div class="chapterName">{{ item.name }}</div>
+                                <div class="section" v-if="item.subsectionList.length">
+                                    <p class="sectionName" :class="{active: curLink === `${item.name}${section.name}`}" v-for="(section,i) in item.subsectionList" :key="i" @click="preview(section, item.name)">
+                                        <img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt="">
+                                        <img v-else src="@/assets/img/exts/video.png" alt="">
+                                        {{ section.name }}
+                                    </p>
                                 </div>
-                            </template>
-                        </div>
+                            </div>
+                        </template>
                     </div>
                 </div>
             </div>
-        </el-card>
+        </div>
 
-        <el-card shadow="hover" class="m-b-20">
-            <h4 style="margin-bottom: 10px">课程简介</h4>
-            <p>{{ briefIntroduction }}</p>
-        </el-card>
-        <el-card shadow="hover" class="m-b-20">
-            <h4 style="margin-bottom: 10px">课程目标</h4>
-            <p>{{ teachingObjectives }}</p>
-        </el-card>
-        <!--
-        <el-card shadow="hover" class="m-b-20">
-            <h4 style="margin-bottom: 10px">课程进度</h4>
-            <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress>
-        </el-card>
-        -->
+        <div class="page">
+            <h6 class="l-title">
+                <img src="@/assets/img/course1.png" alt="">
+                课程简介
+            </h6>
+            <p class="intro">{{ briefIntroduction }}</p>
+        </div>
+        <div class="page">
+            <h6 class="l-title">
+                <img src="@/assets/img/course2.png" alt="">
+                课程目标
+            </h6>
+            <p class="intro">{{ teachingObjectives }}</p>
+        </div>
     </div>
 </template>
 
@@ -97,9 +90,9 @@ import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
 import bus from "@/libs/bus";
-
+import breadcrumb from '@/components/breadcrumb'
 export default {
-    components: { pdf },
+    components: { pdf, breadcrumb },
     data() {
         return {
             courseId: this.$route.query.courseId,
@@ -159,8 +152,8 @@ export default {
         async getChapter() {
             let res = await this.$get(`${this.api.curriculumChapter}/${this.courseId}`);
             this.chapterList = res.chapterList;
+                console.log(res.chapterList);
             if (this.chapterList.length && this.chapterList[0].subsectionList && this.chapterList[0].subsectionList.length) {
-                // console.log(this.chapterList[0].subsectionList[0]);
                 this.preview(this.chapterList[0].subsectionList[0], this.chapterList[0].name);
             }
         },
@@ -328,7 +321,16 @@ $height: 700px;
     height: $height !important;
     border: 0;
 }
+.page {
+    margin: 12px 0;
+    .intro {
+        font-size: 16px;
+        color: #333;
+        line-height: 24px;
+    }
+}
 .cover{
+    flex: 1;
     img{
         border-radius: 8px;
     }
@@ -355,17 +357,23 @@ $height: 700px;
     outline: none;
 }
 .catalog{
-    margin-left: 40px;
+    width: 296px;
+    padding: 16px;
+    margin-left: 12px;
+    background-color: #252528;
+    .entry {
+        width: 100%;
+        padding: 10px 15px;
+        margin-bottom: 16px;
+    }
 }
 .list{
-    height: calc(700px - 70px) ;
+    height: calc(700px - 82px) ;
     overflow-y: auto;
-    padding: 24px 16px;
-    background: #fff;
     .title{
-        margin-bottom: 8px;
-        color: rgba(0, 0, 0, 0.85);
-        font-size: 20px;
+        margin-bottom: 11px;
+        color: #fff;
+        font-size: 16px;
     }
     .desc-wrap{
         position: relative;
@@ -413,21 +421,24 @@ $height: 700px;
     .chapter{
         margin-bottom: 20px;
         .chapterName{
-            color: rgba(0, 0, 0, 0.85);
-            font-size: 16px;
+            color: #fff;
+            font-size: 14px;
         }
         .section{
             padding: 5px 15px;
-            margin-top: 8px;
-            background: rgba(0, 0, 0, 0.02);
+            margin-top: 12px;
+            background-color: #121214;
             .sectionName{
-                margin: 10px 0;
+                margin: 12px 0;
                 font-size: 14px;
-                color: rgba(0, 0, 0, 0.65);
+                color: #999;
                 cursor: pointer;
                 @include ellipsis;
+                img {
+                    margin-right: 8px;
+                }
                 &.active{
-                    color: #9278FF;
+                    color: #fff;
                 }
             }
         }
@@ -529,5 +540,4 @@ $height: 700px;
         margin: 0 auto;
     }
 }
-
 </style>
\ No newline at end of file
diff --git a/src/styles/common.scss b/src/styles/common.scss
index f5fe11c..f3a48a7 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -14,6 +14,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  .l-title {
+    margin-bottom: 0;
+  }
 }
 
 ::-webkit-scrollbar {
@@ -24,7 +27,7 @@
 ::-webkit-scrollbar-thumb {
   width: 5px;
   border-radius: 6px;
-  background: rgba(142, 123, 253, .75);
+  background: $main-color;
 }
 .main {
   .view {
@@ -36,6 +39,9 @@
     &.no-pd {
       padding-top: 0;
     }
+    &.pb {
+      padding-bottom: 20px;
+    }
   }
   .wrap-inner {
     min-width: $min-width;
@@ -45,7 +51,18 @@
   }
   .center-wrap {
     width: 1000px;
-    margin: 40px auto 0;
+    margin: 40px auto 20px;
+  }
+}
+.l-title{
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: #333;
+  img{
+    width: 24px;
+    margin-right: 5px;
   }
 }
 .p-title {
@@ -94,9 +111,8 @@
 
 .page {
   position: relative;
-  padding: 24px;
+  padding: 24px 16px;
   background-color: #fff;
-  border-radius: 8px;
 
   .tool {
     display: flex;
@@ -168,18 +184,6 @@
 
 .el-table{
   border-radius: 4px;
-  .cell{
-      font-size: 12px;
-      .el-checkbox{
-          &:before{
-              content: '全选';
-              margin-right: 5px;
-              color: #222326;
-              font-size: 12px;
-              opacity: 0;
-          }
-      }
-  }
   th{
       background: #E8F0FF !important;
       .cell{