huoran
/
FE_occupationlab_client
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

课程赛事详情等

Browse Source
UI_2022-02-10
yujialong 3 years ago
parent 8967fb311f
commit ea0b858d06
13 changed files with 535 additions and 560 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/img/course1.png
  2. BIN
      src/assets/img/course2.png
  3. BIN
      src/assets/img/exts/ppt.png
  4. BIN
      src/assets/img/exts/video.png
  5. BIN
      src/assets/img/record7.png
  6. 50
      src/components/breadcrumb/index.vue
  7. 175
      src/pages/course/details/index.vue
  8. 143
      src/pages/info/details/index.vue
  9. 452
      src/pages/match/details/index.vue
  10. 23
      src/pages/record/details/index.vue
  11. 12
      src/pages/record/list/index.vue
  12. 204
      src/pages/station/preview/index.vue
  13. 36
      src/styles/common.scss

BIN
src/assets/img/course1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 341 B

BIN
src/assets/img/course2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 584 B

BIN
src/assets/img/exts/ppt.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 331 B

BIN
src/assets/img/exts/video.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 380 B

BIN
src/assets/img/record7.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 288 B

50
src/components/breadcrumb/index.vue
Unescape View File

@ -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>

175
src/pages/course/details/index.vue
Unescape View File

@ -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;
}
}
}

143
src/pages/info/details/index.vue
Unescape View File

@ -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;
}
}
}

452
src/pages/match/details/index.vue
Unescape View File

@ -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;
}
}
}
}

23
src/pages/record/details/index.vue
Unescape View File

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

12
src/pages/record/list/index.vue
Unescape View File

@ -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 {

204
src/pages/station/preview/index.vue
Unescape View File

@ -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>

36
src/styles/common.scss
Unescape View File

@ -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{

Write Preview
Loading…
Cancel
Save