Skip to content

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

update

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