课程赛事详情等

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>

src/pages/course/details/index.vue

@@ -1,11 +1,6 @@
 <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="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%">
@@ -42,7 +37,7 @@
                     <div class="video_wid" id="player"></div>
                 </div>
             </div>
-                <div class="catalog flex-1">
+            <div class="catalog">
                 <div class="list">
                     <h4 class="title">{{courseName}}</h4>
                     <div class="desc-wrap">
@@ -67,7 +62,6 @@
                 </div>
             </div>
         </div>
-        </el-card>
     </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;
                 }
             }
         }

src/pages/info/details/index.vue

@@ -1,19 +1,13 @@
 <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="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>
 
@@ -22,24 +16,21 @@
             </div>
             <div class="content ql-editor" v-html="content"></div>
         </div>
-                </el-card>
-            </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,25 +72,13 @@ 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;
+.wrap {
     .title{
+        margin-top: 30px;
         text-align: center;
-            font-size: 24px;
+        font-size: 28px;
         font-weight: 500;
-            color: rgba(0, 0, 0, 0.85);
+        color: #0B1D30;
     }
     .metas{
         display: flex;
@@ -104,18 +86,19 @@ export default {
         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);
+            color: #999;
             font-size: 12px;
             img{
                 width: 18px;
                 margin-right: 5px;
             }
         }
+        .el-divider {
+            margin: 0 16px;
+        }
     }
     .cover{
         margin: 20px 0;
@@ -124,7 +107,6 @@ export default {
             width: 800px;
         }
     }
-
     .content{
         line-height: 1.8;
         font-size: 16px;
@@ -136,7 +118,6 @@ export default {
             margin-right: auto;
         }
     }
-    }
 }
 </style>
 

src/pages/match/details/index.vue

@@ -1,29 +1,22 @@
 <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> -->
+            <div class="content">
                 <div class="flex-between">
-                        <el-page-header @back="goBack"></el-page-header>
+                    <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>
-                </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">
@@ -35,13 +28,12 @@
                     </ul>
                 </div>
             </div>
-                </el-card>
-            </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,119 +100,57 @@ 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;
-        }
-        /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;
-                }
-            }
-        }
-    }
-    .content-wrap{
-        width: 950px;
-        margin-left: 40px;
-        @media(max-width: 1300px){
-            width: 700px;
-        }
-
-        /deep/.el-page-header__left::after{
-            width: 0;
-        }
-
-        .content{
+.main .center-wrap {
+    margin-top: 30px;
+}
+.content{
     position: relative;
     padding: 20px 40px;
+    margin-top: 30px;
     background-color: #fff;
-            border-radius: 8px;
-
     .title{
         width: 67%;
         margin: 0 auto;
-                font-size: 24px;
+        font-size: 28px;
         text-align: center;
-                color: rgba(0, 0, 0, 0.85);
+        color: #0B1D30;
     }
     .meta{
         padding: 16px 0;
         font-size: 12px;
-                color: rgba(0, 0, 0, 0.45);
+        color: #999;
         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;
+        padding: 0 23px;
+        line-height: 34px;
+        font-size: 14px;
         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);
-                    }
+            background-color: #ccc;
         }
     }
     .texts{
@@ -354,7 +286,5 @@ export default {
             }
         }
     }
-        }
-    }
 }
 </style>

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();
     },

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 {

src/pages/station/preview/index.vue

@@ -1,11 +1,6 @@
 <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="wrap">
+        <breadcrumb :data="'实验台/' + curriculumName"></breadcrumb>
         <div class="flex">
             <div class="cover" :class="{'is-word': showMask1}">
                 <!--实验台不显示课程封面-->
@@ -33,8 +28,7 @@
                         <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>
+                    <div style='color:#393A3D;height: 30px;background: #393A3D;'></div>
                     <pdf
                         class="pdf-wrap"
                         :src="pdfSrc"
@@ -48,10 +42,8 @@ background: #393A3D;'></div>
                     <div class="video_wid" id="player"></div>
                 </div>
             </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="catalog">
+                <el-button class="entry" type="primary" @click="goSystem">进 入 实 验</el-button>
                 <div class="list">
                     <h4 class="title">{{ courseName }}</h4>
                     <div class="chapters">
@@ -59,9 +51,11 @@ background: #393A3D;'></div>
                             <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>
+                                    <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>
                             </div>
                         </template>
@@ -69,22 +63,21 @@ background: #393A3D;'></div>
                 </div>
             </div>
         </div>
-        </el-card>
 
-        <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>

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{