|
|
|
|
@ -1,8 +1,6 @@
|
|
|
|
|
<template> |
|
|
|
|
|
|
|
|
|
<div class="style-page"> |
|
|
|
|
<div class="wrapper"> |
|
|
|
|
|
|
|
|
|
<div class="top-title"> |
|
|
|
|
<span class="line left"></span> |
|
|
|
|
<p>我参加的学习班</p> |
|
|
|
|
@ -17,62 +15,94 @@
|
|
|
|
|
|
|
|
|
|
<div v-if="!com_user_token" style=" background-color: #fff; border-radius: 8px"> |
|
|
|
|
<el-empty :image-size="150" description=" "> |
|
|
|
|
<div class="col617">登录后才能查看您参加的学习班哦， |
|
|
|
|
<div class="col617"> |
|
|
|
|
登录后才能查看您参加的学习班哦， |
|
|
|
|
<a :href="com_login_url" class="col008">马上登录</a> |
|
|
|
|
</div> |
|
|
|
|
</el-empty> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-skeleton :loading="loading" animated v-if="com_user_token"> |
|
|
|
|
|
|
|
|
|
<template #template> |
|
|
|
|
<div class="w1200 flex-1" style="height: 230px; background-color: #fff; border-radius: 8px;"> |
|
|
|
|
<el-skeleton-item variant="image" |
|
|
|
|
style="width: 276px; height:184px; margin-left: 24px; border-radius: 8px;" /> |
|
|
|
|
<el-skeleton :rows="2" variant="text" style="margin-left: 30px; width: 60%; height: 40px;" animated /> |
|
|
|
|
<div class="mine-wrapper"> |
|
|
|
|
<ul class="mine"> |
|
|
|
|
<li class="item"> |
|
|
|
|
<div class="thumb"> |
|
|
|
|
<el-skeleton-item variant="image" class="img" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="content"><el-skeleton :rows="2" variant="text" style="margin-top: 30px;" animated /></div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template #default> |
|
|
|
|
|
|
|
|
|
<div class="mine-wrapper" v-if="com_user_token"> |
|
|
|
|
<ul class="mine"> |
|
|
|
|
<li class="item" v-for="(item, i) in personalStudyList" :key="i"> |
|
|
|
|
<div v-if="isPc"> |
|
|
|
|
<div class="thumb"> |
|
|
|
|
<el-image class="img" :src="item.class_img" :alt="item.class_title"></el-image> |
|
|
|
|
</div> |
|
|
|
|
<div class="content"> |
|
|
|
|
<div class="left-content"> |
|
|
|
|
<h4 class="title">{{item.class_title}}</h4> |
|
|
|
|
<h4 class="title hide-txt">{{ item.class_title }}</h4> |
|
|
|
|
<div class="meta flex-1"> |
|
|
|
|
<span class="one">已更新{{ item.class_update }}节课(共{{ item.class_total }}课时)</span> |
|
|
|
|
<span> |
|
|
|
|
<span class="sp-my-average"> |
|
|
|
|
<em>我的作业平均</em> <strong>{{ item.average }}</strong> |
|
|
|
|
</span> |
|
|
|
|
<span> |
|
|
|
|
<span class="sp-class-rank"> |
|
|
|
|
<em>班级排名</em> <strong>{{ item.class_rank }}</strong> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="study-progress"> |
|
|
|
|
<p>我的学习进度 ({{ item.progress_learning.progress }} / {{ item.progress_learning.total }} )</p> |
|
|
|
|
<el-progress class="progress" :stroke-width="8" :show-text="false" color="#409eff" |
|
|
|
|
:percentage="item.proLearning"> |
|
|
|
|
</el-progress> |
|
|
|
|
<el-progress class="progress" :stroke-width="8" :show-text="false" color="#409eff" :percentage="item.proLearning"> </el-progress> |
|
|
|
|
</div> |
|
|
|
|
<div class="task-progress"> |
|
|
|
|
<p>我的作业进度 ({{ item.progress_homework.progress }} / {{ item.progress_homework.total }} )</p> |
|
|
|
|
<el-progress class="progress" :stroke-width="8" :show-text="false" color="#5cb87a" |
|
|
|
|
:percentage="item.proHomework"> |
|
|
|
|
</el-progress> |
|
|
|
|
<el-progress class="progress" :stroke-width="8" :show-text="false" color="#5cb87a" :percentage="item.proHomework"> </el-progress> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right-content"> |
|
|
|
|
<div class="btn gray"> <i class="iconfont icon-icon_icon-23 ico-lf col-23"></i>{{item.end_time}} |
|
|
|
|
</div> |
|
|
|
|
<div class="right-content m-dn"> |
|
|
|
|
<div class="btn gray"><i class="iconfont icon-icon_icon-23 ico-lf col-23"></i>{{ item.end_time }}</div> |
|
|
|
|
<router-link class="btn-008 primary" :to="'/class/' + item.class_id">进入班级</router-link> |
|
|
|
|
<div class="btn-fff primary"><a :href="item.course_url" target="_blank">课程介绍</a></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- 移动端需要整块加链接 所以只能拆分成两块 --> |
|
|
|
|
<div v-else> |
|
|
|
|
<router-link :to="'/class/' + item.class_id"> |
|
|
|
|
<div class="thumb"> |
|
|
|
|
<el-image class="img" :src="item.class_img" :alt="item.class_title"></el-image> |
|
|
|
|
</div> |
|
|
|
|
<div class="content"> |
|
|
|
|
<div class="left-content"> |
|
|
|
|
<h4 class="title hide-txt">{{ item.class_title }}</h4> |
|
|
|
|
<div class="meta flex-1"> |
|
|
|
|
<span class="one">已更新{{ item.class_update }}节课(共{{ item.class_total }}课时)</span> |
|
|
|
|
<span class="sp-my-average"> |
|
|
|
|
<em>我的作业平均</em> <strong>{{ item.average }}</strong> |
|
|
|
|
</span> |
|
|
|
|
<span class="sp-class-rank"> |
|
|
|
|
<em>班级排名</em> <strong>{{ item.class_rank }}</strong> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="study-progress"> |
|
|
|
|
<p>我的学习进度 ({{ item.progress_learning.progress }} / {{ item.progress_learning.total }} )</p> |
|
|
|
|
<el-progress class="progress" :stroke-width="6" :show-text="false" color="#409eff" :percentage="item.proLearning"> </el-progress> |
|
|
|
|
</div> |
|
|
|
|
<div class="task-progress"> |
|
|
|
|
<p>我的作业进度 ({{ item.progress_homework.progress }} / {{ item.progress_homework.total }} )</p> |
|
|
|
|
<el-progress class="progress" :stroke-width="6" :show-text="false" color="#5cb87a" :percentage="item.proHomework"> </el-progress> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</router-link> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
@ -80,7 +110,6 @@
|
|
|
|
|
</el-skeleton> |
|
|
|
|
|
|
|
|
|
<el-skeleton :loading="loading_course" animated> |
|
|
|
|
|
|
|
|
|
<template #template> |
|
|
|
|
<div class="course-wrapper"> |
|
|
|
|
<div class="top-title"> |
|
|
|
|
@ -100,7 +129,6 @@
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template #default> |
|
|
|
|
|
|
|
|
|
<div class="course-wrapper"> |
|
|
|
|
<div class="top-title"> |
|
|
|
|
<span class="line left"></span> |
|
|
|
|
@ -120,7 +148,6 @@
|
|
|
|
|
<span class="week">{{ item.semester }}周</span> |
|
|
|
|
<span class="week">{{ item.num_people }}人学习</span> |
|
|
|
|
</el-space> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
<div class="description">{{ item.description }}</div> |
|
|
|
|
<div class="price"> |
|
|
|
|
@ -135,27 +162,22 @@
|
|
|
|
|
<small>（{{ item.start_day }}开课）</small> |
|
|
|
|
</a> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-skeleton> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="adinfo"> |
|
|
|
|
|
|
|
|
|
<div class="w1200"> |
|
|
|
|
|
|
|
|
|
<div class="top-title"> |
|
|
|
|
<span class="line left"></span> |
|
|
|
|
<p>学员认可的服务模式</p> |
|
|
|
|
<span class="line right"></span> |
|
|
|
|
</div> |
|
|
|
|
<div class="service flex-6" style="margin-bottom: 40px;"> |
|
|
|
|
<li> |
|
|
|
|
<div class="service"> |
|
|
|
|
<li class="itemli"> |
|
|
|
|
<p class="icon flex-5"> |
|
|
|
|
<i class="iconfont icon-icon_icon-29"></i> |
|
|
|
|
</p> |
|
|
|
|
@ -163,7 +185,7 @@
|
|
|
|
|
<p class="txt">支持电脑和APP、可自由安排学习时间<br />每周完成老师布置的课时和作业</p> |
|
|
|
|
</li> |
|
|
|
|
|
|
|
|
|
<li> |
|
|
|
|
<li class="itemli"> |
|
|
|
|
<p class="icon flex-5"> |
|
|
|
|
<i class="iconfont icon-icon_icon-10"></i> |
|
|
|
|
</p> |
|
|
|
|
@ -174,65 +196,59 @@
|
|
|
|
|
</p> |
|
|
|
|
</li> |
|
|
|
|
|
|
|
|
|
<li> |
|
|
|
|
<li class="itemli"> |
|
|
|
|
<p class="icon flex-5"> |
|
|
|
|
<i class="iconfont icon-book"></i> |
|
|
|
|
</p> |
|
|
|
|
<h5>认证考试辅导</h5> |
|
|
|
|
<p class="txt">帆软职业资格认证考试考前辅导<br /> |
|
|
|
|
助你考试通过率直线飙升</p> |
|
|
|
|
<p class="txt"> |
|
|
|
|
帆软职业资格认证考试考前辅导<br /> |
|
|
|
|
助你考试通过率直线飙升 |
|
|
|
|
</p> |
|
|
|
|
</li> |
|
|
|
|
|
|
|
|
|
<li> |
|
|
|
|
<li class="itemli"> |
|
|
|
|
<p class="icon flex-5"> |
|
|
|
|
<i class="iconfont icon-icon_icon"></i> |
|
|
|
|
</p> |
|
|
|
|
<h5>人才就业服务</h5> |
|
|
|
|
<p class="txt">考试通过即可进入数据人才库<br /> |
|
|
|
|
升职加薪、换工作更easy</p> |
|
|
|
|
<p class="txt"> |
|
|
|
|
考试通过即可进入数据人才库<br /> |
|
|
|
|
升职加薪、换工作更easy |
|
|
|
|
</p> |
|
|
|
|
</li> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="top-title"> |
|
|
|
|
<span class="line left"></span> |
|
|
|
|
<p>学员上课流程</p> |
|
|
|
|
<span class="line right"></span> |
|
|
|
|
</div> |
|
|
|
|
<div class=" txt-c" style="margin-bottom: 40px;"> |
|
|
|
|
<img src="@/assets/img/liucheng.png" style="width: 90%;"> |
|
|
|
|
<img src="@/assets/img/liucheng.png" style="width: 90%;" /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="top-title"> |
|
|
|
|
<span class="line left"></span> |
|
|
|
|
<p>备受行业认可的职业资格证书</p> |
|
|
|
|
<span class="line right"></span> |
|
|
|
|
</div> |
|
|
|
|
<div class="cere"> |
|
|
|
|
<div class="fcrp"></div> |
|
|
|
|
<img class="fcrp" src="@/assets/img/fcrp2022.png" /> |
|
|
|
|
<div class="ibox"> |
|
|
|
|
<p>通过认证可以充分展示您的知识和技能， |
|
|
|
|
充实您的职业生涯</p> |
|
|
|
|
<p>通过认证可以充分展示您的知识和技能， 充实您的职业生涯</p> |
|
|
|
|
<a class="el-btn mypd" href="https://bbs.fanruan.com/certification" target="_blank">点击了解详情</a> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { getPersonalStudyList, getStudyList } from "@/api/study"; |
|
|
|
|
import { defineComponent, reactive, toRefs } from "vue"; |
|
|
|
|
import dateFormat from '@/utils/dateFormat'; |
|
|
|
|
import dateFormat from "@/utils/dateFormat"; |
|
|
|
|
export default defineComponent({ |
|
|
|
|
setup() { |
|
|
|
|
const state = reactive({ |
|
|
|
|
@ -241,6 +257,10 @@
|
|
|
|
|
loading: true, |
|
|
|
|
nodata: false, |
|
|
|
|
loading_course: true, |
|
|
|
|
isPc: document.body.clientWidth > 1200, |
|
|
|
|
}); |
|
|
|
|
window.addEventListener("resize", function() { |
|
|
|
|
state.isPc = document.body.clientWidth > 1200; |
|
|
|
|
}); |
|
|
|
|
const fetchPersonalSudyList = async () => { |
|
|
|
|
const res = await getPersonalStudyList(); |
|
|
|
|
@ -254,7 +274,7 @@
|
|
|
|
|
}, 500); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
if (res.status == '-1') { |
|
|
|
|
if (res.status == "-1") { |
|
|
|
|
state.nodata = true; |
|
|
|
|
state.loading = false; |
|
|
|
|
} |
|
|
|
|
@ -278,10 +298,9 @@
|
|
|
|
|
}; |
|
|
|
|
fetchStydyList(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const createSetInterVal = (item, i) => { |
|
|
|
|
const { end_time } = item; |
|
|
|
|
state.studyList[i].time = dateFormat(end_time, 'f16', 'f20'); |
|
|
|
|
state.studyList[i].time = dateFormat(end_time, "f16", "f20"); |
|
|
|
|
setTimeout(() => { |
|
|
|
|
createSetInterVal(item, i); |
|
|
|
|
}, 1000); |
|
|
|
|
@ -295,6 +314,473 @@
|
|
|
|
|
}); |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
|
/*响应式-移动端*/ |
|
|
|
|
@import "~@/assets/css/m.css"; |
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 1200px) { |
|
|
|
|
html, |
|
|
|
|
body { |
|
|
|
|
background-color: #fff; |
|
|
|
|
} |
|
|
|
|
.wrapper { |
|
|
|
|
width: 100% !important; |
|
|
|
|
padding: 0 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.adinfo { |
|
|
|
|
.service { |
|
|
|
|
margin-bottom: 0 !important; |
|
|
|
|
.itemli { |
|
|
|
|
width: 48% !important; |
|
|
|
|
margin-bottom: 44px; |
|
|
|
|
h5 { |
|
|
|
|
font-size: 16px !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.cere { |
|
|
|
|
width: auto !important; |
|
|
|
|
height: 220px !important; |
|
|
|
|
background: rgb(238, 243, 250, 0.6); |
|
|
|
|
border-radius: 8px; |
|
|
|
|
margin-top: 40px; |
|
|
|
|
margin-bottom: 100px; |
|
|
|
|
margin-left: 40px !important; |
|
|
|
|
margin-right: 30px !important; |
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
.fcrp { |
|
|
|
|
margin: -38px 0 0 -16px; |
|
|
|
|
} |
|
|
|
|
.ibox { |
|
|
|
|
height: 100%; |
|
|
|
|
margin-left: 24px !important; |
|
|
|
|
margin-right: 24px; |
|
|
|
|
p { |
|
|
|
|
width: 100% !important; |
|
|
|
|
font-size: 16px !important; |
|
|
|
|
line-height: 26px; |
|
|
|
|
padding: 20px 0 30px !important; |
|
|
|
|
} |
|
|
|
|
.mypd { |
|
|
|
|
padding: 14px 80px !important; |
|
|
|
|
font-size: 16px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.top-title { |
|
|
|
|
position: relative; |
|
|
|
|
text-align: center; |
|
|
|
|
padding: 40px 0; |
|
|
|
|
font-size: 16px !important; |
|
|
|
|
color: #333; |
|
|
|
|
|
|
|
|
|
.line { |
|
|
|
|
display: inline-block; |
|
|
|
|
vertical-align: middle; |
|
|
|
|
width: 30px; |
|
|
|
|
height: 1px !important; |
|
|
|
|
top: 50%; |
|
|
|
|
line-height: 30px; |
|
|
|
|
background-color: #555; |
|
|
|
|
|
|
|
|
|
&.left { |
|
|
|
|
margin-left: 0 !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.right { |
|
|
|
|
margin-right: 0 !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
p { |
|
|
|
|
display: inline-block; |
|
|
|
|
padding: 0 18px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 我参加的学习班 */ |
|
|
|
|
.mine-wrapper { |
|
|
|
|
.mine { |
|
|
|
|
position: relative; |
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
|
.item { |
|
|
|
|
position: relative; |
|
|
|
|
height: 176px !important; |
|
|
|
|
margin-bottom: 46px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
box-shadow: 0px 1px 12px 0px #ccd5f0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.thumb { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 0; |
|
|
|
|
width: 288px !important; |
|
|
|
|
height: 176px !important; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
|
|
|
|
.img { |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
width: 288px !important; |
|
|
|
|
height: 176px !important; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
margin-top: -16px; |
|
|
|
|
margin-left: 16px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.content { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
margin-left: 304px !important; |
|
|
|
|
height: 100%; |
|
|
|
|
padding: 0 20px; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
|
|
.left-content { |
|
|
|
|
flex: 1; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
font-size: 15px !important; |
|
|
|
|
margin: 10px 0 8px !important; |
|
|
|
|
font-weight: 500 !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.meta { |
|
|
|
|
margin: 8px 0 16px !important; |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #617288; |
|
|
|
|
margin-right: 15px; |
|
|
|
|
|
|
|
|
|
&.one { |
|
|
|
|
padding-top: 0 !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
strong { |
|
|
|
|
padding-left: 4px; |
|
|
|
|
font-weight: normal; |
|
|
|
|
font-size: 16px !important; |
|
|
|
|
padding-top: 4px; |
|
|
|
|
color: #ff3c23; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.study-progress, |
|
|
|
|
.task-progress { |
|
|
|
|
margin-top: 14px !important; |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
font-size: 12px !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.progress { |
|
|
|
|
width: auto !important; |
|
|
|
|
margin: 4px 0 10px !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 即将开班的课程 */ |
|
|
|
|
.course-wrapper { |
|
|
|
|
padding-bottom: 20px; |
|
|
|
|
|
|
|
|
|
> .title { |
|
|
|
|
position: relative; |
|
|
|
|
text-align: center; |
|
|
|
|
padding: 15px 0; |
|
|
|
|
font-weight: 600; |
|
|
|
|
font-size: 24px; |
|
|
|
|
color: #333; |
|
|
|
|
|
|
|
|
|
.line { |
|
|
|
|
position: absolute; |
|
|
|
|
width: 30px; |
|
|
|
|
height: 1px; |
|
|
|
|
top: 27px; |
|
|
|
|
line-height: 30px; |
|
|
|
|
background-color: #000; |
|
|
|
|
|
|
|
|
|
&.left { |
|
|
|
|
left: 50%; |
|
|
|
|
margin-left: 95px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.right { |
|
|
|
|
right: 50%; |
|
|
|
|
margin-right: 95px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.course-list { |
|
|
|
|
width: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
|
|
.course-item { |
|
|
|
|
width: 360px !important; |
|
|
|
|
height: 690px; |
|
|
|
|
background: #ffffff; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
margin-bottom: 28px; |
|
|
|
|
/* margin-right: 31px; */ |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
margin: 0 10px 24px 10px; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
box-shadow: 0px 1px 12px 0px #ccd5f0; |
|
|
|
|
|
|
|
|
|
.enroll { |
|
|
|
|
background: linear-gradient(-45deg, #eb443e, #f12f59, #fc9550, #ff4b72, #eb443e); |
|
|
|
|
background-size: 400% 400%; |
|
|
|
|
animation: gradientBG 4s ease infinite; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.thumb .img { |
|
|
|
|
margin-top: -10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.btbox { |
|
|
|
|
padding: 0 24px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.thumb { |
|
|
|
|
width: 360px !important; |
|
|
|
|
height: 230px; |
|
|
|
|
border-radius: 8px 8px 0 0; |
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
.img { |
|
|
|
|
position: absolute; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
position: relative; |
|
|
|
|
padding: 15px 0 10px; |
|
|
|
|
font-weight: 600; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.meta { |
|
|
|
|
width: 328px; |
|
|
|
|
color: #617288; |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #617288; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.description { |
|
|
|
|
height: 110px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
line-height: 1.5; |
|
|
|
|
margin: 20px 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.price::before { |
|
|
|
|
content: ""; |
|
|
|
|
position: absolute; |
|
|
|
|
top: -15px; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 1px; |
|
|
|
|
background-color: #ceddf2; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.enroll { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 44px !important; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
color: #fff; |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
margin: 22px auto 0 auto; |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
font-size: 16px !important; |
|
|
|
|
line-height: 22px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
small { |
|
|
|
|
font-size: 16px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
width: 96%; |
|
|
|
|
height: 40px !important; |
|
|
|
|
margin-top: 24px !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
|
@media screen and (max-width: 700px) { |
|
|
|
|
.cere { |
|
|
|
|
width: auto !important; |
|
|
|
|
height: auto !important; |
|
|
|
|
background: rgb(238, 243, 250, 0.6); |
|
|
|
|
border-radius: 8px; |
|
|
|
|
margin-top: 0 !important; |
|
|
|
|
margin-bottom: 100px; |
|
|
|
|
margin-left: 20px !important; |
|
|
|
|
margin-right: 20px !important; |
|
|
|
|
display: block !important; |
|
|
|
|
padding: 20px; |
|
|
|
|
|
|
|
|
|
.fcrp { |
|
|
|
|
width: 100% !important; |
|
|
|
|
margin: 0 !important; |
|
|
|
|
} |
|
|
|
|
.ibox { |
|
|
|
|
height: 100%; |
|
|
|
|
margin: 0 !important; |
|
|
|
|
p { |
|
|
|
|
width: 100% !important; |
|
|
|
|
font-size: 16px !important; |
|
|
|
|
line-height: 26px; |
|
|
|
|
margin: 10px 0px !important; |
|
|
|
|
padding: 0 !important; |
|
|
|
|
} |
|
|
|
|
.mypd { |
|
|
|
|
display: block; |
|
|
|
|
text-align: center; |
|
|
|
|
width: 100% !important; |
|
|
|
|
padding: 12px 0 !important; |
|
|
|
|
font-size: 16px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.mine-wrapper { |
|
|
|
|
.mine { |
|
|
|
|
position: relative; |
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
|
.item { |
|
|
|
|
position: relative; |
|
|
|
|
height: 104px !important; |
|
|
|
|
margin-bottom: 46px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
box-shadow: 0px 1px 12px 0px #ccd5f0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.thumb { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 0; |
|
|
|
|
width: 152px !important; |
|
|
|
|
height: 92px !important; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
|
|
|
|
.img { |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
width: 152px !important; |
|
|
|
|
height: 100px !important; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
margin-top: -16px !important; |
|
|
|
|
margin-left: 10px !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.content { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
margin-left: 156px !important; |
|
|
|
|
height: 100%; |
|
|
|
|
padding: 0 20px; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
|
|
.left-content { |
|
|
|
|
flex: 1; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
font-size: 14px !important; |
|
|
|
|
margin: 10px 0 0px !important; |
|
|
|
|
font-weight: 500 !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.meta { |
|
|
|
|
margin: 6px 0 12px !important; |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #617288; |
|
|
|
|
margin-right: 15px; |
|
|
|
|
|
|
|
|
|
&.one { |
|
|
|
|
padding-top: 0 !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
strong { |
|
|
|
|
padding-left: 4px; |
|
|
|
|
font-weight: normal; |
|
|
|
|
font-size: 16px !important; |
|
|
|
|
padding-top: 4px; |
|
|
|
|
color: #ff3c23; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.sp-my-average, |
|
|
|
|
.sp-class-rank { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.study-progress, |
|
|
|
|
.task-progress { |
|
|
|
|
margin-top: 0 !important; |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
font-size: 12px !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.progress { |
|
|
|
|
width: auto !important; |
|
|
|
|
margin: 4px 0 10px !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.task-progress { |
|
|
|
|
display: none !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
em { |
|
|
|
|
font-style: normal; |
|
|
|
|
@ -363,7 +849,7 @@
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
|
|
|
|
.img { |
|
|
|
|
transition: all .3s; |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
width: 376px; |
|
|
|
|
height: 230px; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
@ -386,7 +872,7 @@
|
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
font-size: 20px; |
|
|
|
|
margin: 20px 0 12px; |
|
|
|
|
margin: 20px 0 0; |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -407,7 +893,7 @@
|
|
|
|
|
font-weight: normal; |
|
|
|
|
font-size: 20px; |
|
|
|
|
padding-top: 4px; |
|
|
|
|
color: #FF3C23; |
|
|
|
|
color: #ff3c23; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -437,7 +923,7 @@
|
|
|
|
|
margin-top: 12px; |
|
|
|
|
|
|
|
|
|
.col-23 { |
|
|
|
|
color: #B3C1D3; |
|
|
|
|
color: #b3c1d3; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.primary { |
|
|
|
|
@ -458,8 +944,6 @@
|
|
|
|
|
border-radius: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&.ghost { |
|
|
|
|
width: 220px; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
@ -509,7 +993,6 @@
|
|
|
|
|
justify-content: center; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.course-item { |
|
|
|
|
width: 380px; |
|
|
|
|
height: 690px; |
|
|
|
|
@ -524,7 +1007,7 @@
|
|
|
|
|
box-shadow: 0px 1px 12px 0px #ccd5f0; |
|
|
|
|
|
|
|
|
|
.enroll { |
|
|
|
|
background: linear-gradient(-45deg, #eb443e, #f12f59, #fc9550, #ff4b72, #eb443e, ); |
|
|
|
|
background: linear-gradient(-45deg, #eb443e, #f12f59, #fc9550, #ff4b72, #eb443e); |
|
|
|
|
background-size: 400% 400%; |
|
|
|
|
animation: gradientBG 4s ease infinite; |
|
|
|
|
} |
|
|
|
|
@ -549,7 +1032,7 @@
|
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
transition: all .3s; |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -585,7 +1068,7 @@
|
|
|
|
|
top: -15px; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 1px; |
|
|
|
|
background-color: #CEDDF2; |
|
|
|
|
background-color: #ceddf2; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.price, |
|
|
|
|
@ -602,7 +1085,7 @@
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
color: #FF3D23; |
|
|
|
|
color: #ff3d23; |
|
|
|
|
font-size: 24px; |
|
|
|
|
|
|
|
|
|
em { |
|
|
|
|
@ -622,7 +1105,7 @@
|
|
|
|
|
background: linear-gradient(270deg, #ff7c6b 0%, #ff4b72 100%); |
|
|
|
|
border-radius: 8px; |
|
|
|
|
color: #fff; |
|
|
|
|
transition: all .3s; |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
margin: 22px auto 0 auto; |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
@ -664,9 +1147,12 @@
|
|
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
|
|
.service { |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
|
|
|
|
li { |
|
|
|
|
margin-bottom: 40px; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
.itemli { |
|
|
|
|
width: 25%; |
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
|
|
h5 { |
|
|
|
|
@ -683,7 +1169,7 @@
|
|
|
|
|
|
|
|
|
|
i { |
|
|
|
|
font-size: 50px; |
|
|
|
|
color: #0082FC; |
|
|
|
|
color: #0082fc; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -697,27 +1183,22 @@
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.cere { |
|
|
|
|
width: 1060px; |
|
|
|
|
height: 268px; |
|
|
|
|
width: 100%; |
|
|
|
|
background: rgb(238, 243, 250, 0.6); |
|
|
|
|
border-radius: 8px; |
|
|
|
|
margin-left: 76px; |
|
|
|
|
margin-top: 40px; |
|
|
|
|
margin-bottom: 100px; |
|
|
|
|
position: relative; |
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
.fcrp { |
|
|
|
|
position: absolute; |
|
|
|
|
background: url('~@/assets/img/FCRP.png'); |
|
|
|
|
width: 400px; |
|
|
|
|
height: 284px; |
|
|
|
|
margin: -38px 0 0 -16px; |
|
|
|
|
background-size: 100% auto; |
|
|
|
|
height: auto; |
|
|
|
|
margin: -38px 0 20px -16px; |
|
|
|
|
} |
|
|
|
|
.ibox { |
|
|
|
|
width: 630px; |
|
|
|
|
width: auto; |
|
|
|
|
height: 100%; |
|
|
|
|
margin-left: auto; |
|
|
|
|
margin-left: 45px; |
|
|
|
|
p { |
|
|
|
|
width: 450px; |
|
|
|
|
font-size: 24px; |
|
|
|
|
|
