Skip to content

L
learn-fdc
提交 1d4ddfd1 authored 作者: lhh's avatar lhh
浏览文件
操作

update

上级 1de80579
隐藏空白字符变更
内嵌 并排
正在显示 包含 946 行增加 和 223 行删除
index.html
浏览文件 @ 1d4ddfd1
......@@ -9,6 +9,27 @@
<link rel="stylesheet" href="//at.alicdn.com/t/font_2173492_ctgt96uojqw.css" />
</head>
<body>
<script>
;(function (win, doc) {
const userAgent = navigator.userAgent.toLowerCase()
if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)) {
var resize = 'orientationchange' in window ? 'orientationchange' : 'resize'
/* 使用rem 动态计算跟font-size值 */
function resizeRoot() {
var wWidth =
win.screen.width > 0
? win.innerWidth >= win.screen.width || win.innerWidth === 0
? win.screen.width
: win.innerWidth
: win.innerWidth
var fontSize = ((wWidth > 750 ? 750 : wWidth) / 750) * 100
doc.documentElement.style.fontSize = fontSize + 'px'
}
win.addEventListener(resize, resizeRoot, false)
doc.addEventListener('DOMContentLoaded', resizeRoot, false)
}
})(window, document)
</script>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<script src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"></script>
......
src/assets/css/base.css
浏览文件 @ 1d4ddfd1
......@@ -83,6 +83,13 @@ body {
background-color: #f9f9f9;
}
@media screen and (max-width: 767px) {
/* 移动端的样式 */
body {
background-color: #f2f2f2;
}
}
:root {
--main-color: #c01540;
}
......
src/components/CourseList.vue
浏览文件 @ 1d4ddfd1
<template>
<div>
<div style="" class="course-top">
<el-button type="primary" @click="getCourseList('learn-time')"
>最近学习<i class="el-icon-caret-bottom el-icon--right"></i
></el-button>
<el-button type="primary" @click="getCourseList('updated_time')"
>最近更新<i class="el-icon-caret-bottom el-icon--right"></i
></el-button>
</div>
<div class="course-top-text">您的课程有效期为：{{ createdTime }}-{{ endTime }}，请在有效期内完成学习及考试。</div>
<app-container>
<div class="course-list" element-loading-text="加载中..." v-loading="!loaded">
<template v-if="currentList.length">
<course-list-item v-for="item in currentList" :data="item" :key="item.id" v-bind="$attrs" v-on="$listeners" />
</template>
<template v-else>
<slot name="empty">
<div class="empty">暂无相关课程</div>
</slot>
</template>
<template v-if="!isMobile">
<div style="" class="course-top">
<el-button type="primary" @click="getCourseList('learn-time')"
>最近学习<i class="el-icon-caret-bottom el-icon--right"></i
></el-button>
<el-button type="primary" @click="getCourseList('updated_time')"
>最近更新<i class="el-icon-caret-bottom el-icon--right"></i
></el-button>
</div>
</app-container>
<div class="course-top-text">您的课程有效期为：{{ createdTime }}-{{ endTime }}，请在有效期内完成学习及考试。</div>
<app-container>
<div class="course-list" element-loading-text="加载中..." v-loading="!loaded">
<template v-if="currentList.length">
<course-list-item
v-for="item in currentList"
:data="item"
:key="item.id"
v-bind="$attrs"
v-on="$listeners"
/>
</template>
<template v-else>
<slot name="empty">
<div class="empty">暂无相关课程</div>
</slot>
</template>
</div>
</app-container>
</template>
<template v-else>
<div class="is-mobile">
<div style="" class="course-top">
<el-button size="small" type="primary" @click="getCourseList('learn-time')"
>最近学习<i class="el-icon-caret-bottom el-icon--right"></i
></el-button>
<el-button size="small" type="primary" @click="getCourseList('updated_time')"
>最近更新<i class="el-icon-caret-bottom el-icon--right"></i
></el-button>
</div>
<div class="course-top-text">
您的课程有效期为：{{ createdTime }}-{{ endTime }}，请在有效期内完成学习及考试。
</div>
<div style="margin-top: 0.2rem" class="course-list" element-loading-text="加载中..." v-loading="!loaded">
<template v-if="currentList.length">
<div class="new-item-box" v-for="item in currentList" :key="item.id">
<course-list-item :data="item" v-bind="$attrs" v-on="$listeners" />
</div>
</template>
<template v-else>
<slot name="empty">
<div class="empty">暂无相关课程</div>
</slot>
</template>
</div>
</div>
</template>
</div>
</template>
......@@ -42,6 +77,10 @@ export default {
}
},
computed: {
isMobile() {
const userAgent = navigator.userAgent.toLowerCase()
return /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)
},
createdTime() {
const year = this.$store.state.user.student_info.created_time.slice(0, 4)
const month = this.$store.state.user.student_info.created_time.slice(5, 7)
......@@ -98,4 +137,20 @@ export default {
font-size: 14px;
font-weight: 500;
}
.is-mobile {
margin-top: 1.3rem;
padding: 0 0.3rem;
.course-top-text {
font-size: 0.22rem;
color: #333333;
line-height: 0.34rem;
margin-bottom: 0;
}
.new-item-box {
padding: 0 0.3rem 0 0.2rem;
background-color: #fff;
border-radius: 0.16rem;
margin-bottom: 0.3rem;
}
}
</style>
src/components/CourseListItem.vue
浏览文件 @ 1d4ddfd1
<template>
<div class="course-item" @click="$emit('on-click', data)">
<img class="course-item-pic" :src="data.curriculum.curriculum_picture" />
<div class="course-item-content">
<div class="course-item__title">{{ data.curriculum.curriculum_name }}</div>
<div class="course-top__tips" v-if="data.times">第{{ data.times }}次重修</div>
<div class="course-item__tools">
<div class="course-item__progress">
<span>视频观看进度</span>
<el-progress :percentage="data.video_progress"></el-progress>
</div>
<div class="course-item__buttons">
<el-button type="primary" size="small" round v-permission="'menu_course_view'">查看课程</el-button>
<div :class="isMobile ? 'course-item mobile' : 'course-item pc'">
<div class="course-item" @click="$emit('on-click', data)">
<img class="course-item-pic" :src="data.curriculum.curriculum_picture" />
<div class="course-item-content">
<div class="course-item__title">{{ data.curriculum.curriculum_name }}</div>
<div class="course-top__tips" v-if="data.times">第{{ data.times }}次重修</div>
<div class="course-item__tools">
<div class="course-item__progress">
<span>视频观看进度</span>
<el-progress :percentage="data.video_progress"></el-progress>
</div>
<div class="course-item__buttons">
<el-button class="btn" type="primary" size="small" round v-permission="'menu_course_view'"
>查看课程</el-button
>
</div>
</div>
</div>
</div>
......@@ -27,6 +31,12 @@ export default {
data() {
return {}
},
computed: {
isMobile() {
const userAgent = navigator.userAgent.toLowerCase()
return /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)
}
},
filters: {
progressText(value) {
value = parseInt(value)
......@@ -43,48 +53,109 @@ export default {
</script>
<style lang="scss" scoped>
.course-item {
display: flex;
padding: 14px 0;
cursor: pointer;
}
.course-item + .course-item {
border-top: 1px solid #ccc;
}
.course-item-pic {
width: 160px;
height: 90px;
margin-right: 20px;
border-radius: 2px;
overflow: hidden;
cursor: pointer;
}
.course-item-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.course-item__title {
font-size: 18px;
font-weight: bold;
color: #222;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.course-item__tools {
display: flex;
align-items: center;
.pc {
.course-item {
display: flex;
padding: 14px 0;
cursor: pointer;
}
.course-item + .course-item {
border-top: 1px solid #ccc;
}
.course-item-pic {
width: 160px;
height: 90px;
margin-right: 20px;
border-radius: 2px;
overflow: hidden;
cursor: pointer;
}
.course-item-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.course-item__title {
font-size: 18px;
font-weight: bold;
color: #222;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.course-item__tools {
display: flex;
align-items: center;
}
.course-item__progress {
display: flex;
flex: 1;
.el-progress {
margin: 0 10px;
width: 50%;
}
}
}
.course-item__progress {
display: flex;
flex: 1;
.el-progress {
margin: 0 10px;
width: 50%;
.mobile {
.course-item {
display: flex;
padding: 0.3rem 0;
cursor: pointer;
span {
font-size: 0.2rem;
}
}
.course-item + .course-item {
border-top: 1px solid #ccc;
}
.course-item-pic {
width: 2.2rem;
height: 1.24rem;
margin-right: 0.2rem;
border-radius: 0.02rem;
overflow: hidden;
cursor: pointer;
}
.course-item-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.course-item__title {
font-size: 0.28rem;
font-weight: bold;
color: #222;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.course-item__tools {
// display: block;
// align-items: center;
}
.course-item__progress {
display: flex;
flex: 1;
.el-progress {
margin: 0 0.1rem;
width: 50%;
}
}
.course-item__buttons {
display: flex;
margin-top: 0.3rem;
.btn {
margin-left: auto;
line-height: 100%;
padding: 0.1rem 0.27rem;
font-size: 0.22rem;
}
}
}
</style>
src/components/base/AppContainer.vue
浏览文件 @ 1d4ddfd1
<template>
<div class="app-container">
<div class="app-container-hd" v-if="title">
<div class="app-container-hd__title">{{ title }}</div>
<div class="app-container-hd__right">
<slot name="header-right"></slot>
<div :class="isMobile ? 'is-mobile' : 'is-pc'">
<div class="app-container">
<div class="app-container-hd" v-if="title">
<div class="app-container-hd__title">{{ title }}</div>
<div class="app-container-hd__right">
<slot name="header-right"></slot>
</div>
</div>
<div class="app-container-bd">
<slot></slot>
</div>
<slot name="footer"></slot>
</div>
<div class="app-container-bd">
<slot></slot>
</div>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {
name: 'AppContainer',
props: { title: { type: String } }
props: { title: { type: String } },
computed: {
isMobile() {
const userAgent = navigator.userAgent.toLowerCase()
return /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)
}
}
}
</script>
<style lang="scss">
.app-container {
display: flex;
flex-direction: column;
height: 100%;
padding: 30px;
background-color: #fff;
border-radius: 3px;
box-sizing: border-box;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.17);
}
.app-container-hd {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 8px;
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.app-container-hd__title {
font-size: 18px;
line-height: 1;
font-weight: bold;
}
.app-container-bd {
flex: 1;
.is-pc {
.app-container {
display: flex;
flex-direction: column;
height: 100%;
padding: 30px;
background-color: #fff;
border-radius: 3px;
box-sizing: border-box;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.17);
}
.app-container-hd {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 8px;
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.app-container-hd__title {
font-size: 18px;
line-height: 1;
font-weight: bold;
}
.app-container-bd {
flex: 1;
}
.app-container-ft {
background-color: #fff;
position: sticky;
bottom: 0;
padding-top: 30px;
border-top: 1px solid #ccc;
}
}
.app-container-ft {
background-color: #fff;
position: sticky;
bottom: 0;
padding-top: 30px;
border-top: 1px solid #ccc;
.is-mobile {
.app-container {
padding: 0 0.2rem;
width: 6.9rem;
margin: 0 auto;
background-color: #fff;
border-radius: 3px;
box-sizing: border-box;
margin-top: 1.1rem;
}
}
</style>
src/components/layout/MobileAside.vue 0 → 100644
浏览文件 @ 1d4ddfd1
<template>
<div class="mobile-aside">
<div :class="isMenusActive(menus)" v-for="menus in menus" :key="menus.path" @click="handleClick(menus.path)">
{{ menus.title }}
</div>
</div>
</template>
<script>
export default {
name: '',
props: {},
data() {
return {
menus: [
{
title: '学员须知',
path: '/notice',
activeMenus: ['/notice']
},
{
title: '我的课程',
path: '/course/learn',
activeMenus: ['/course/learn', '/course/detail']
},
{
title: '我的考试',
path: '/exam/exam',
activeMenus: ['/exam/record', '/exam/exam']
},
{
title: '我的证书',
path: '/cert',
activeMenus: ['/cert']
},
{
title: '个人中心',
path: '/account',
activeMenus: ['/account']
}
]
}
},
computed: {},
methods: {
handleClick(path, item) {
if (item?.href) return
path && this.$router.push(path)
},
isMenusActive(item) {
return item.activeMenus.reduce((a, b) => {
if (this.$route.path === b) a = 'aside-item active'
return a
}, 'aside-item')
}
}
}
</script>
<style lang="scss">
.mobile-aside {
position: fixed;
top: 0;
left: 0;
background-color: #f2f2f2;
width: 100%;
padding: 0 0.3rem;
box-sizing: border-box;
display: flex;
justify-content: space-between;
z-index: 9999;
.aside-item {
font-size: 0.28rem;
font-weight: bold;
color: #666666;
line-height: 1.1rem;
position: relative;
&.active {
color: #eda023;
&::before {
content: '';
position: absolute;
left: 50%;
bottom: 0.3rem;
transform: translateX(-50%);
width: 80%;
height: 0.02rem;
background: #eda023;
border-radius: 0.02rem;
}
}
}
}
</style>
src/components/layout/index.vue
浏览文件 @ 1d4ddfd1
<template>
<div class="app-layout">
<app-header />
<div class="app-layout-bd">
<app-aside v-bind="$attrs" v-if="showAside" />
<div>
<div v-if="isMobile">
<MobileAside></MobileAside>
<app-main />
</div>
<div class="app-layout" v-else>
<app-header />
<div class="app-layout-bd">
<app-aside v-bind="$attrs" v-if="showAside" />
<app-main />
</div>
</div>
</div>
</template>
<script>
import MobileAside from './MobileAside.vue'
import AppHeader from './header.vue'
import AppAside from './aside.vue'
import AppMain from './main.vue'
export default {
components: { AppHeader, AppAside, AppMain },
props: { showAside: { type: Boolean, default: true } }
components: { AppHeader, AppAside, AppMain, MobileAside },
props: { showAside: { type: Boolean, default: true } },
computed: {
isMobile() {
const userAgent = navigator.userAgent.toLowerCase()
return /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)
}
}
}
</script>
......
src/components/layout/main.vue
浏览文件 @ 1d4ddfd1
......@@ -12,4 +12,10 @@ export default {}
.app-main {
padding: 20px;
}
@media screen and (max-width: 767px) {
/* 移动端的样式 */
.app-main {
padding: 0;
}
}
</style>
src/modules/account/views/checkPhone.vue
浏览文件 @ 1d4ddfd1
<template>
<app-container title="安全设置">
<app-container :title="!isMobile ? '安全设置' : ''">
<div class="mobile-account-tab" v-if="isMobile">
<router-link to="/account">
<div class="tab-item">个人信息</div>
</router-link>
<router-link to="/account/password">
<div class="tab-item">修改密码</div>
</router-link>
<router-link to="/account/safe">
<div class="tab-item active">安全设置</div>
</router-link>
</div>
<el-form :model="ruleForm" :rules="rules" label-width="82px" ref="ruleForm" class="form" hide-required-asterisk>
<el-form-item label="手机号码">
<el-input v-model="user.mobile" disabled></el-input>
......@@ -22,9 +33,12 @@
</template>
</el-form>
<template #footer v-if="isUpdate">
<div class="app-container-ft">
<div v-if="!isMobile" class="app-container-ft">
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
</div>
<div v-else class="app-container-ft-m">
<el-button style="width: 4rem" type="primary" :loading="submitLoading" @click="handleSubmit">保存</el-button>
</div>
</template>
</app-container>
</template>
......@@ -49,6 +63,10 @@ export default {
}
},
computed: {
isMobile() {
const userAgent = navigator.userAgent.toLowerCase()
return /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)
},
user() {
return this.$store.state.user || {}
},
......@@ -120,8 +138,35 @@ export default {
.form {
max-width: 400px;
}
@media screen and (max-width: 767px) {
.form {
width: 4.6rem;
padding-bottom: 0.5rem;
}
}
.button-change {
position: absolute;
right: -90px;
}
.mobile-account-tab {
border-bottom: 0.01rem solid #bfbfbf;
display: flex;
justify-content: space-between;
padding-top: 0.3rem;
margin-bottom: 0.8rem;
.tab-item {
font-size: 0.26rem;
color: #333333;
line-height: 0.45rem;
&.active {
font-weight: bold;
color: #a91f3b;
}
}
}
.app-container-ft-m {
display: flex;
justify-content: center;
padding: 0.5rem 0;
}
</style>
src/modules/account/views/index.vue
浏览文件 @ 1d4ddfd1
<template>
<app-container title="个人信息">
<app-container :title="isMobile ? '' : '个人信息'">
<div class="mobile-account-tab" v-if="isMobile">
<router-link to="/account">
<div class="tab-item active">个人信息</div>
</router-link>
<router-link to="/account/password">
<div class="tab-item">修改密码</div>
</router-link>
<router-link to="/account/safe">
<div class="tab-item">安全设置</div>
</router-link>
</div>
<el-form :model="ruleForm" :rules="rules" label-width="100px" ref="ruleForm" class="form" hide-required-asterisk>
<!-- <el-form-item label="所在院校" prop="school_name">
<el-input v-model="info.school_name" disabled></el-input>
......@@ -39,9 +50,12 @@
</el-form-item>
</el-form>
<template #footer>
<div class="app-container-ft">
<div v-if="!isMobile" class="app-container-ft">
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</el-button>
</div>
<div v-else class="app-container-ft-m">
<el-button style="width: 4rem" type="primary" :loading="submitLoading" @click="handleSubmit">保存</el-button>
</div>
</template>
</app-container>
</template>
......@@ -60,6 +74,10 @@ export default {
}
},
computed: {
isMobile() {
const userAgent = navigator.userAgent.toLowerCase()
return /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)
},
user() {
return this.$store.state.user || {}
},
......@@ -107,4 +125,25 @@ export default {
.form {
max-width: 340px;
}
.mobile-account-tab {
border-bottom: 0.01rem solid #bfbfbf;
display: flex;
justify-content: space-between;
padding-top: 0.3rem;
margin-bottom: 0.8rem;
.tab-item {
font-size: 0.26rem;
color: #333333;
line-height: 0.45rem;
&.active {
font-weight: bold;
color: #a91f3b;
}
}
}
.app-container-ft-m {
display: flex;
justify-content: center;
padding: 0.5rem 0;
}
</style>
src/modules/account/views/password.vue
浏览文件 @ 1d4ddfd1
<template>
<app-container title="修改密码">
<app-container :title="!isMobile ? '修改密码' : ''">
<div class="mobile-account-tab" v-if="isMobile">
<router-link to="/account">
<div class="tab-item">个人信息</div>
</router-link>
<router-link to="/account/password">
<div class="tab-item active">修改密码</div>
</router-link>
<router-link to="/account/safe">
<div class="tab-item">安全设置</div>
</router-link>
</div>
<el-form :model="ruleForm" :rules="rules" label-width="90px" ref="ruleForm" class="form" hide-required-asterisk>
<el-form-item label="旧密码" prop="old_password">
<el-input type="password" v-model="ruleForm.old_password" placeholder="请输入密码"></el-input>
......@@ -12,9 +23,12 @@
</el-form-item>
</el-form>
<template #footer>
<div class="app-container-ft">
<div v-if="!isMobile" class="app-container-ft">
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</el-button>
</div>
<div v-else class="app-container-ft-m">
<el-button style="width: 4rem" type="primary" :loading="submitLoading" @click="handleSubmit">保存</el-button>
</div>
</template>
</app-container>
</template>
......@@ -53,6 +67,12 @@ export default {
submitLoading: false
}
},
computed: {
isMobile() {
const userAgent = navigator.userAgent.toLowerCase()
return /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)
}
},
methods: {
handleSubmit() {
this.$refs.ruleForm.validate().then(this.handleSubmitRequest)
......@@ -78,4 +98,25 @@ export default {
.form {
max-width: 340px;
}
.mobile-account-tab {
border-bottom: 0.01rem solid #bfbfbf;
display: flex;
justify-content: space-between;
padding-top: 0.3rem;
margin-bottom: 0.8rem;
.tab-item {
font-size: 0.26rem;
color: #333333;
line-height: 0.45rem;
&.active {
font-weight: bold;
color: #a91f3b;
}
}
}
.app-container-ft-m {
display: flex;
justify-content: center;
padding: 0.5rem 0;
}
</style>
src/modules/course/learn/views/Item.vue
浏览文件 @ 1d4ddfd1
<template>
<app-container title="课程详情" element-loading-text="加载中..." v-loading="!loaded">
<div class="course-top" v-if="loaded">
<app-container :title="!isMobile ? '课程详情' : ''" element-loading-text="加载中..." v-loading="!loaded">
<div v-if="isMobile" class="mobile-title">课程详情</div>
<div class="course-top" v-if="loaded && !isMobile">
<div class="course-top-hd">
<div class="course-top-hd-left">
<div class="course-top__title">{{ detail.curriculum.curriculum_name }}</div>
......@@ -20,23 +21,47 @@
<div class="course-top__content" v-html="detail.curriculum.curriculum_represent"></div>
</div>
</div>
<div class="course-bottom">
<div class="course-bottom-left">
<el-tabs v-model="tabActive">
<el-tab-pane lazy label="课程内容">
<course-chapter :courseId="courseId" :showProgress="true" :data="detail.chapters"></course-chapter>
</el-tab-pane>
<el-tab-pane lazy label="学习进度">
<course-progress :data="detail"></course-progress>
</el-tab-pane>
</el-tabs>
<div class="mobile-top" v-else>
<div class="course-top" v-if="loaded">
<div class="course-top-bd">
<div class="course-top__pic"><img :src="detail.curriculum.curriculum_picture" /></div>
<div class="course-top-hd">
<div class="course-top-hd-left">
<div class="course-top__title">{{ detail.curriculum.curriculum_name }}</div>
<div class="course-top__tips">第{{ times }}次重修</div>
<div class="course-top__progress">
视频观看进度 <el-progress :percentage="detail.video_progress"></el-progress>
</div>
</div>
</div>
</div>
<div class="course-top-hd-right">
<el-button class="btn" type="primary" size="small" @click="onChapterClick(latestVideo)" v-if="latestVideo">
{{ buttonText }}
</el-button>
</div>
<div class="course-top__content" v-html="detail.curriculum.curriculum_represent"></div>
</div>
<div class="course-bottom-right">
<el-tabs>
<el-tab-pane label="课程讲师">
<course-teacher :data="detail.lecturers"></course-teacher>
</el-tab-pane>
</el-tabs>
</div>
<div :class="isMobile ? 'item-mobile' : 'item-pc'">
<div class="course-bottom">
<div class="course-bottom-left">
<el-tabs v-model="tabActive">
<el-tab-pane lazy label="课程内容">
<course-chapter :courseId="courseId" :showProgress="true" :data="detail.chapters"></course-chapter>
</el-tab-pane>
<el-tab-pane lazy label="学习进度">
<course-progress :data="detail"></course-progress>
</el-tab-pane>
</el-tabs>
</div>
<div class="course-bottom-right">
<el-tabs>
<el-tab-pane label="课程讲师">
<course-teacher :data="detail.lecturers"></course-teacher>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</app-container>
......@@ -63,6 +88,10 @@ export default {
}
},
computed: {
isMobile() {
const userAgent = navigator.userAgent.toLowerCase()
return /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)
},
courseId() {
return this.$route.query.id
},
......@@ -205,7 +234,61 @@ export default {
}
}
}
.course-top__tips{
margin-top: 15px
.course-top__tips {
margin-top: 15px;
}
.mobile-title {
font-size: 0.28rem;
font-weight: bold;
color: #333333;
line-height: 0.5rem;
border-bottom: 0.01px solid #bfbfbf;
padding-top: 0.4rem;
}
.mobile-top {
padding-top: 0.33rem;
.course-top__pic {
width: 2.2rem;
height: 1.24rem;
margin-right: 0.2rem;
}
.course-top__title {
font-size: 0.28rem;
}
.course-top__tips {
font-size: 0.2rem;
color: #999999;
line-height: 0.3rem;
margin-top: 0.1rem;
}
.course-top__progress {
font-size: 0.2rem;
color: #999999;
}
.course-top-hd {
flex: 1;
}
.course-top-hd-right {
display: flex;
margin-bottom: 0.1rem;
.btn {
margin-left: auto;
padding: 0;
width: 1.5rem;
line-height: 0.46rem;
background: #a91f3b;
border-radius: 0.4rem;
}
}
}
.item-mobile {
.course-bottom {
display: block;
}
.course-bottom-right {
width: 100%;
margin: 0.2rem 0 0;
}
}
</style>
src/modules/course/player/components/aside/index.vue
浏览文件 @ 1d4ddfd1
<template>
<aside class="course-viewer-aside">
<el-tabs v-model="activeName">
<el-tab-pane label="章节列表" name="0">
<div class="tab-pane">
<aside-chapter :data="data" :chapters="chapters" :active="active"></aside-chapter>
</div>
</el-tab-pane>
<el-tab-pane label="讲义" name="1" v-if="active && active.type === 2">
<div class="tab-pane">
<aside-lecture :ppts="ppts" :pptIndex="pptIndex" v-on="$listeners"></aside-lecture>
</div>
</el-tab-pane>
</el-tabs>
</aside>
<div :class="isMobile ? 'aside-mobile' : ''">
<aside class="course-viewer-aside">
<el-tabs v-model="activeName">
<el-tab-pane label="章节列表" name="0">
<div class="tab-pane">
<aside-chapter :data="data" :chapters="chapters" :active="active"></aside-chapter>
<aside-chapter :data="data" :chapters="chapters" :active="active"></aside-chapter>
<aside-chapter :data="data" :chapters="chapters" :active="active"></aside-chapter>
<aside-chapter :data="data" :chapters="chapters" :active="active"></aside-chapter>
</div>
</el-tab-pane>
<el-tab-pane label="讲义" name="1" v-if="active && active.type === 2">
<div class="tab-pane">
<aside-lecture :ppts="ppts" :pptIndex="pptIndex" v-on="$listeners"></aside-lecture>
</div>
</el-tab-pane>
</el-tabs>
</aside>
<i v-if="isMobile" @click="$emit('closeChapters')" class="mobile-close el-icon-error"></i>
</div>
</template>
<script>
......@@ -47,11 +53,39 @@ export default {
return {
activeName: '0'
}
},
computed: {
isMobile() {
const userAgent = navigator.userAgent.toLowerCase()
return /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)
}
}
}
</script>
<style lang="scss" scoped>
.aside-mobile {
.course-viewer-aside {
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100vh;
background-color: #232323;
z-index: 99999;
}
.mobile-close {
position: fixed;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
z-index: 999999;
font-size: 0.8rem;
color: #fff;
box-shadow: 0 0 20px #000;
border-radius: 50%;
}
}
.course-viewer-aside {
width: 350px;
min-height: 100vh;
......
src/modules/course/player/views/Index.vue
浏览文件 @ 1d4ddfd1
......@@ -35,6 +35,7 @@
:pptIndex="pptIndex"
@change-ppt="handleChangePPT(...arguments, true)"
v-if="detail.chapters"
@closeChapters="menuVisible = false"
v-show="menuVisible"
></v-aside>
</div>
......@@ -50,12 +51,16 @@ export default {
name: 'CourseViewer',
components: { VAside },
data() {
const userAgent = navigator.userAgent.toLowerCase()
const isMobile = /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)
return {
detail: {},
detail: {
chapters: false
},
ppts: [],
pptIndex: 0,
isSeek: false,
menuVisible: true,
menuVisible: !isMobile,
loaded: false
}
},
......
src/modules/exam/exam/views/Index.vue
浏览文件 @ 1d4ddfd1
<template>
<app-container title="试卷管理">
<div style="display: flex">
<div class="exam-card" v-for="(item, index) in data" :key="index">
<div class="exam-card__head">
<!-- 2022年第一期<br />
金融数据合规管理证书考试 -->
<div class="text">
{{ item.paper_title }}
<app-container :title="!isMobile ? '试卷管理' : ''">
<template v-if="!isMobile">
<div style="display: flex">
<div class="exam-card" v-for="(item, index) in data" :key="index">
<div class="exam-card__head">
<!-- 2022年第一期<br />
金融数据合规管理证书考试 -->
<div class="text">
{{ item.paper_title }}
</div>
</div>
</div>
<div class="card-body">
<div class="card-body__data">
试卷总分：<span>{{ item.total_score }}</span
>分
</div>
<div class="card-body__data">
及格分数：<span>{{ item.pass_score }}</span
>分
</div>
<div class="card-body__data">
考试时长：<span>{{ item.paper_times }}</span
>分钟
</div>
<div class="card-body__data red" v-if="item.remaining_times != undefined">
剩余时长：<span>{{ item.remaining_times }}</span
>分钟
</div>
<div
class="card-body__btn"
@click="startExam(item)"
v-if="item.status == 100 || item.status == 101 || item.status == 104">
开始考试
<div class="card-body">
<div class="card-body__data">
试卷总分：<span>{{ item.total_score }}</span
>分
</div>
<div class="card-body__data">
及格分数：<span>{{ item.pass_score }}</span
>分
</div>
<div class="card-body__data">
考试时长：<span>{{ item.paper_times }}</span
>分钟
</div>
<div class="card-body__data red" v-if="item.remaining_times != undefined">
剩余时长：<span>{{ item.remaining_times }}</span
>分钟
</div>
<div
class="card-body__btn"
@click="startExam(item)"
v-if="item.status == 100 || item.status == 101 || item.status == 104"
>
开始考试
</div>
<div class="card-body__btn2" @click="startExam(item)" v-if="item.status == 102">继续考试</div>
<div class="card-body__btn3" @click="startExam(item)" v-if="item.status == 103">已完成</div>
<!-- <div
class="card-body__btn2"
@click="reStartExam(item)"
v-if="item.status == 103 && item.is_multiple_exams === 1"
>
重新考试
</div> -->
</div>
<div class="card-body__btn2" @click="startExam(item)" v-if="item.status == 102">继续考试</div>
<div class="card-body__btn3" @click="startExam(item)" v-if="item.status == 103">已完成</div>
<!-- <div
class="card-body__btn2"
@click="reStartExam(item)"
v-if="item.status == 103 && item.is_multiple_exams === 1"
>
重新考试
</div> -->
</div>
</div>
</div>
<el-dialog title="考前须知" :visible.sync="dialogVisible" width="70%">
<div style="font-size: 18px">
请各位考生认真阅读以下内容，明确考试规则，遵守考试纪律。预祝大家考试顺利！<br />
<br />
1、请确保考试电脑网络稳定<br />
2、考试时长60分钟，考试时间结束仍未提交试卷的，系统将自动提交<br />
3、进入考试系统后系统随机抓屏，离开或退出考试页面超过5次后系统将强制交卷<br />
4、题库随机组题，题型为：单选+多选+判断<br />
5、提交试卷后即显示成绩，80分为通过，可获得本年度证书，低于80分则需重学重考<br />
6、考试通过后颁发电子证书， 10个工作日内进入我的证书查看下载
<el-dialog title="考前须知" :visible.sync="dialogVisible" width="70%">
<div style="font-size: 18px">
请各位考生认真阅读以下内容，明确考试规则，遵守考试纪律。预祝大家考试顺利！<br />
<br />
1、请确保考试电脑网络稳定<br />
2、考试时长60分钟，考试时间结束仍未提交试卷的，系统将自动提交<br />
3、进入考试系统后系统随机抓屏，离开或退出考试页面超过5次后系统将强制交卷<br />
4、题库随机组题，题型为：单选+多选+判断<br />
5、提交试卷后即显示成绩，80分为通过，可获得本年度证书，低于80分则需重学重考<br />
6、考试通过后颁发电子证书， 10个工作日内进入我的证书查看下载
</div>
<span slot="footer" class="dialog-footer">
<el-button :disabled="!isRead" type="primary" @click="goPage">{{ noticeText }}</el-button>
</span>
</el-dialog>
</template>
<div class="exam-mobile" v-else>
<div class="btn-box">
<router-link to="/exam/exam">
<el-button size="small" type="primary">试卷管理</el-button>
</router-link>
<router-link to="/exam/record">
<el-button size="small" type="primary">考试记录</el-button>
</router-link>
</div>
<span slot="footer" class="dialog-footer">
<el-button :disabled="!isRead" type="primary" @click="goPage">{{ noticeText }}</el-button>
</span>
</el-dialog>
<p>请在PC端完成考试</p>
</div>
<!-- 校验个人信息弹框 -->
<!-- <el-dialog :visible.sync="infoVisible" width="30%">
<el-form ref="form" :model="form" label-width="80px">
......@@ -101,6 +115,12 @@ export default {
this.data = response.data
})
},
computed: {
isMobile() {
const userAgent = navigator.userAgent.toLowerCase()
return /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)
}
},
methods: {
dataInit(callBack) {
api.getExamList().then(response => {
......@@ -356,4 +376,27 @@ export default {
text-align: center;
}
}
.exam-mobile {
line-height: 10rem;
font-size: 0.28rem;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
color: #333333;
text-align: center;
height: 90vh;
position: relative;
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn-box {
display: flex;
padding-top: 0.3rem;
line-height: 100%;
a {
margin-right: 0.2rem;
}
}
}
</style>
src/modules/exam/record/views/Index.vue
浏览文件 @ 1d4ddfd1
<template>
<app-container title="考试记录">
<app-container :title="!isMobile ? '考试记录' : ''">
<div class="btn-box">
<router-link to="/exam/exam">
<el-button size="small" type="primary">试卷管理</el-button>
</router-link>
<router-link to="/exam/record">
<el-button size="small" type="primary">考试记录</el-button>
</router-link>
</div>
<app-list v-bind="tableOptions" ref="tabList"> </app-list>
</app-container>
</template>
......@@ -21,9 +29,16 @@ export default {
{ prop: 'paper_title', label: '考卷名称' },
{ prop: 'score', label: '分数' },
{ prop: 'created_time', label: '考试时间' }
]
],
pagationLayout: 'prev, pager, next'
}
}
},
computed: {
isMobile() {
const userAgent = navigator.userAgent.toLowerCase()
return /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)
}
}
}
</script>
......@@ -71,4 +86,11 @@ export default {
}
}
}
.btn-box {
padding-top: 0.3rem;
line-height: 100%;
a {
margin-right: 0.2rem;
}
}
</style>
src/modules/notice/views/Index.vue
浏览文件 @ 1d4ddfd1
<template>
<app-container title="学员须知" class="notice-box">
<app-container :title="!isMobile ? '学员须知' : ''" :class="isMobile ? 'is-mobile' : 'is-pc'">
<!-- <div class="notice-title">
尊敬的学员：<br />
您好！欢迎参加金融数据合规管理课程及考试。请认真阅读以下须知。预祝大家学习愉快，考试顺利！
......@@ -13,11 +13,12 @@
<div class="item">
<img :src="item.img" />
<div class="text">
<span>0{{ index + 1 }} </span>{{ item.title }}
<span>0{{ index + 1 }}</span
>{{ item.title }}
</div>
</div>
</el-tooltip>
<div class="line" v-if="index !== applyList.length - 1">
<div class="line" v-if="index !== applyList.length - 1 && !isMobile">
<img src="https://webapp-pub.ezijing.com/project/fd/line.png" />
</div>
</div>
......@@ -45,6 +46,10 @@ export default {
return {}
},
computed: {
isMobile() {
const userAgent = navigator.userAgent.toLowerCase()
return /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)
},
user() {
return this.$store.state.user
},
......@@ -118,7 +123,7 @@ export default {
}
</script>
<style lang="scss">
.notice-box {
.is-pc {
.notice-title {
font-size: 16px;
line-height: 27px;
......@@ -241,4 +246,122 @@ export default {
}
}
}
.is-mobile {
.notice-title {
font-size: 0.28rem;
line-height: 27px;
color: #666666;
margin-left: 35px;
}
.apply {
padding-top: 0.54rem;
.apply__title {
font-size: 0.28rem;
color: #424242;
margin-bottom: 24px;
line-height: 100%;
font-weight: bold;
}
img {
display: block;
}
.apply__tips {
font-size: 14px;
color: #898989;
margin-left: 242px;
}
.list-box {
display: flex;
justify-content: space-between;
// justify-content: center;
// padding-left: .9rem;
}
.list {
// display: flex;
// width: 1.46rem;
.item {
img {
width: 0.8rem;
display: block;
margin: 0 auto;
}
.text {
margin-top: 0.18rem;
font-size: 0.2rem;
line-height: 100%;
color: #424242;
white-space: nowrap;
span {
font-size: 0.2rem;
color: #a81840;
font-weight: bold;
transform: translateY(-5px);
}
}
}
.line {
width: 0.4rem;
img {
width: 100%;
}
padding: 0.37rem 0;
}
}
}
.notice {
margin-top: 0.67rem;
padding-bottom: 0.3rem;
// img {
// margin-left: 20px;
// }
// padding-bottom: ;
.notice__title {
font-size: 0.28rem;
color: #424242;
margin-bottom: 0.28rem;
line-height: 100%;
font-weight: bold;
}
.notice__content {
font-size: 0.24rem;
line-height: 0.34rem;
color: rgba(137, 137, 137, 1);
margin-left: 0.46rem;
font-weight: bold;
span {
color: rgba(102, 102, 102, 1);
font-weight: normal;
}
}
}
.notice-list {
.notice-list_item {
display: flex;
align-items: center;
margin-bottom: 0.3rem;
.icon {
width: 0.2rem;
display: flex;
justify-content: center;
margin-left: 0;
}
// img {
// width: 13px;
// }
.text {
margin-left: 0.2rem;
font-size: 0.24rem;
color: rgba(102, 102, 102, 1);
span {
color: rgba(51, 51, 51, 1);
}
i {
color: rgba(9, 46, 143, 1);
font-size: 0.24rem;
}
}
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论