|
|
|
|
@ -3,39 +3,54 @@
|
|
|
|
|
<div class="mainbox topbox"> |
|
|
|
|
<div class="infobox"> |
|
|
|
|
<div class="til flex-1"> |
|
|
|
|
<h1>{{topInfo.class_title}}</h1> |
|
|
|
|
<div class="end_time f12 colfff flex-1" v-if="topInfo.end_time">{{topInfo.end_time}}</div> |
|
|
|
|
<h1>{{ topInfo.class_title }}</h1> |
|
|
|
|
<div class="end_time f12 colfff flex-1" v-if="topInfo.end_time">{{ topInfo.end_time }}</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="ress flex-3" v-if="topInfo.progress_learning"> |
|
|
|
|
<div class="ressbox study-progress flex-2"> |
|
|
|
|
<p class="fw500">我的学习进度 {{topInfo.progress_learning.progress}}/{{topInfo.progress_learning.total}}</p> |
|
|
|
|
<el-progress class="progress" :show-text="false" color="#0082FC" :percentage="topInfo.proLearning"> |
|
|
|
|
</el-progress> |
|
|
|
|
<p class="fw500 my-progress-text">我的学习进度 {{ topInfo.progress_learning.progress }}/{{ topInfo.progress_learning.total }}</p> |
|
|
|
|
<el-progress class="progress" :show-text="false" color="#0082FC" :percentage="topInfo.proLearning"> </el-progress> |
|
|
|
|
<div class="last-class f12 flex-1"> |
|
|
|
|
<span class="col617">上次学至</span> |
|
|
|
|
|
|
|
|
|
<a class="last-til col008" :href="'play/'+classid+'/'+topInfo.last_study.lid"> |
|
|
|
|
<el-tooltip class="item" effect="dark" :content="'点击继续学习：'+topInfo.last_study.title" placement="bottom"> |
|
|
|
|
<span>{{topInfo.last_study.title}}</span> |
|
|
|
|
<a class="last-til col008" :href="'play/' + classid + '/' + topInfo.last_study.lid"> |
|
|
|
|
<el-tooltip class="item" effect="dark" :content="'点击继续学习：' + topInfo.last_study.title" placement="bottom"> |
|
|
|
|
<span>{{ topInfo.last_study.title }}</span> |
|
|
|
|
</el-tooltip> |
|
|
|
|
</a> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="ressbox task-progress flex-2"> |
|
|
|
|
<p class="fw500">我的作业进度 {{topInfo.progress_homework.progress}}/{{topInfo.progress_homework.total}}</p> |
|
|
|
|
<el-progress class="progress" :show-text="false" color="#27C346" :percentage="topInfo.proHomework"> |
|
|
|
|
</el-progress> |
|
|
|
|
<p class="fw500 my-progress-text">我的作业进度 {{ topInfo.progress_homework.progress }}/{{ topInfo.progress_homework.total }}</p> |
|
|
|
|
<el-progress class="progress" :show-text="false" color="#27C346" :percentage="topInfo.proHomework"> </el-progress> |
|
|
|
|
<div class="meta flex-1"> |
|
|
|
|
<div class="li col617 flex-1" style="margin-right: 38px;"><span>我的作业平均分</span> |
|
|
|
|
<strong>{{topInfo.average}}</strong> |
|
|
|
|
<div class="li col617 flex-1" style="margin-right: 38px;"> |
|
|
|
|
<span>我的作业平均分</span> |
|
|
|
|
<strong>{{ topInfo.average }}</strong> |
|
|
|
|
</div> |
|
|
|
|
<div class="li col617 flex-1"> |
|
|
|
|
<span>班级排名</span> <strong>{{ topInfo.class_rank }}</strong> |
|
|
|
|
</div> |
|
|
|
|
<div class="li col617 flex-1"><span>班级排名</span> <strong>{{topInfo.class_rank}}</strong></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<div></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="mainbox mian-news-box" v-if="isAuth && com_user_token && classNews.length > 0"> |
|
|
|
|
<div class="m-bd-box dn m-db"> |
|
|
|
|
<div class="clss-news-box"> |
|
|
|
|
<h3 class="til">课程须知</h3> |
|
|
|
|
<ul class="flex-7 ul-box"> |
|
|
|
|
<li class="item" v-for="(item, i) in classNews" :key="i"> |
|
|
|
|
<a v-if="item.url" :href="item.url" target="_blank" class="col008 f12"> |
|
|
|
|
<div v-html="item.title" class="hide-txt"></div> |
|
|
|
|
</a> |
|
|
|
|
<div v-else><span v-html="item.title" class="hide-txt"></span></div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -47,43 +62,28 @@
|
|
|
|
|
<div class="listbox flex-3"> |
|
|
|
|
<!-- 左侧布局 --> |
|
|
|
|
<div class="lf-box"> |
|
|
|
|
<div v-if="topInfo.teacher===1"> |
|
|
|
|
<el-menu :router="true" :default-active=" $route.name === 'class_lesson' ? `/class/${classid}` : 0" |
|
|
|
|
class="el-menu-demo" mode="horizontal" text-color="#617288" active-text-color="#0082fc"> |
|
|
|
|
<!-- |
|
|
|
|
<el-menu-item><a :href="'https://bbs.fanruan.com/classroom/'+classid+'/student'" target="_blank">学生管理</a></el-menu-item> |
|
|
|
|
<el-menu-item><a :href="'https://bbs.fanruan.com/classroom/'+classid+'/homework'" target="_blank">批改作业</a></el-menu-item> |
|
|
|
|
<el-menu-item><a :href="'https://bbs.fanruan.com/classroom/'+classid+'/schedule'" target="_blank">教学进度管理</a></el-menu-item> |
|
|
|
|
<el-menu-item><a :href="'https://bbs.fanruan.com/classroom/'+classid+'/board'" target="_blank">公告栏管理</a></el-menu-item> --> |
|
|
|
|
<el-menu-item :index="'/class/'+classid" :class="$route.name === 'class_lesson' ? 'is-active':'' ">课程章节 |
|
|
|
|
</el-menu-item> |
|
|
|
|
<el-menu-item :index="'/class/admin/student/'+classid" |
|
|
|
|
:class="$route.name === 'student_admin_class' ? 'is-active':'' ">学生管理</el-menu-item> |
|
|
|
|
<el-menu-item :index="'/class/admin/homework/'+classid" |
|
|
|
|
:class="$route.name === 'homework_admin_class' ? 'is-active':'' ">批改作业</el-menu-item> |
|
|
|
|
<el-menu-item :index="'/class/admin/schedule/'+classid" |
|
|
|
|
:class="$route.name === 'schedule_admin_class' ? 'is-active':'' ">教学进度管理</el-menu-item> |
|
|
|
|
<el-menu-item :index="'/class/admin/notice/'+classid" |
|
|
|
|
:class="$route.name === 'notice_admin_class' ? 'is-active':'' ">公告栏管理</el-menu-item> |
|
|
|
|
<div v-if="topInfo.teacher === 1"> |
|
|
|
|
<el-menu :router="true" :default-active="$route.name === 'class_lesson' ? `/class/${classid}` : 0" class="el-menu-demo" mode="horizontal" text-color="#617288" active-text-color="#0082fc"> |
|
|
|
|
<el-menu-item :index="'/class/' + classid" :class="$route.name === 'class_lesson' ? 'is-active' : ''">课程章节 </el-menu-item> |
|
|
|
|
<el-menu-item :index="'/class/admin/student/' + classid" :class="$route.name === 'student_admin_class' ? 'is-active' : ''" v-if="isPc">学生管理</el-menu-item> |
|
|
|
|
<el-menu-item :index="'/class/admin/homework/' + classid" :class="$route.name === 'homework_admin_class' ? 'is-active' : ''" v-if="isPc">批改作业</el-menu-item> |
|
|
|
|
<el-menu-item :index="'/class/admin/schedule/' + classid" :class="$route.name === 'schedule_admin_class' ? 'is-active' : ''" v-if="isPc">教学进度管理</el-menu-item> |
|
|
|
|
<el-menu-item :index="'/class/admin/notice/' + classid" :class="$route.name === 'notice_admin_class' ? 'is-active' : ''" v-if="isPc">公告栏管理</el-menu-item> |
|
|
|
|
</el-menu> |
|
|
|
|
</div> |
|
|
|
|
<div v-else> |
|
|
|
|
<el-menu :router="true" :default-active=" $route.name === 'class_lesson' ? `/class/${classid}` : 0" |
|
|
|
|
class="el-menu-demo" mode="horizontal" text-color="#617288" active-text-color="#0082fc"> |
|
|
|
|
<el-menu-item :index="'/class/'+classid" :class="$route.name === 'class_lesson' ? 'is-active':'' ">课程章节 |
|
|
|
|
</el-menu-item> |
|
|
|
|
<el-menu-item :index="'/class/homework/'+classid" |
|
|
|
|
:class="$route.name === 'class_homework' ? 'is-active':'' ">我的作业</el-menu-item> |
|
|
|
|
<el-menu-item index="4"><a :href="certId? com_cert_url+'/detail/'+certId : com_cert_url" target="_blank" style="vertical-align: top;">相关认证</a></el-menu-item> |
|
|
|
|
<el-menu :router="true" :default-active="$route.name === 'class_lesson' ? `/class/${classid}` : 0" class="el-menu-demo" mode="horizontal" text-color="#617288" active-text-color="#0082fc"> |
|
|
|
|
<el-menu-item :index="'/class/' + classid" :class="$route.name === 'class_lesson' ? 'is-active' : ''">课程章节 </el-menu-item> |
|
|
|
|
<el-menu-item :index="'/class/homework/' + classid" :class="$route.name === 'class_homework' ? 'is-active' : ''">我的作业</el-menu-item> |
|
|
|
|
<li class="el-menu-item"><a :href="certId ? com_cert_url + '/detail/' + certId : com_cert_url" target="_blank" style="vertical-align: top;">相关认证</a></li> |
|
|
|
|
</el-menu> |
|
|
|
|
</div> |
|
|
|
|
<router-view /> |
|
|
|
|
</div> |
|
|
|
|
<!-- 右侧布局 --> |
|
|
|
|
<div class="rt-box"> |
|
|
|
|
<classRight @getCertId="getCertId"/> |
|
|
|
|
<div class="rt-box m-dn"> |
|
|
|
|
<classRight @getCertId="getCertId" /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -91,88 +91,133 @@
|
|
|
|
|
<div v-else> |
|
|
|
|
<el-empty :image-size="200" :description="msg" v-if="empty"></el-empty> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { useRoute } from 'vue-router' |
|
|
|
|
import { getPublicTop } from "@/api/study"; |
|
|
|
|
import { reactive, toRefs } from "vue"; |
|
|
|
|
import classRight from "@/views/class/classRight.vue"; |
|
|
|
|
import msgLogin from "@/components/msgLogin"; |
|
|
|
|
export default { |
|
|
|
|
components: { |
|
|
|
|
classRight, |
|
|
|
|
msgLogin, |
|
|
|
|
}, |
|
|
|
|
setup() { |
|
|
|
|
const route = useRoute() |
|
|
|
|
const classid = route.params.classid; |
|
|
|
|
const state = reactive({ |
|
|
|
|
topInfo: [], |
|
|
|
|
isAuth: false, |
|
|
|
|
msg: 0, |
|
|
|
|
empty: false, |
|
|
|
|
certId: undefined, // 学习班绑定的认证id |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const resPublicTop = async () => { |
|
|
|
|
const res = await getPublicTop(classid); |
|
|
|
|
if (res.code === 200) { |
|
|
|
|
state.topInfo = res.data; |
|
|
|
|
// 鉴权 |
|
|
|
|
state.msg = res.message; |
|
|
|
|
if (res.status === -1) { |
|
|
|
|
state.isAuth = false; |
|
|
|
|
state.empty = true; |
|
|
|
|
} else { |
|
|
|
|
state.isAuth = true; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
setTimeout(function () { |
|
|
|
|
state.topInfo.proLearning = calcProgress(res.data.progress_learning.progress, res.data.progress_learning.total); |
|
|
|
|
state.topInfo.proHomework = calcProgress(res.data.progress_homework.progress, res.data.progress_homework.total); |
|
|
|
|
}, 500); |
|
|
|
|
import { useRoute } from "vue-router"; |
|
|
|
|
import { getPublicTop, getClassInfo } from "@/api/study"; |
|
|
|
|
import { reactive, toRefs } from "vue"; |
|
|
|
|
import classRight from "@/views/class/classRight.vue"; |
|
|
|
|
import msgLogin from "@/components/msgLogin"; |
|
|
|
|
export default { |
|
|
|
|
components: { |
|
|
|
|
classRight, |
|
|
|
|
msgLogin, |
|
|
|
|
}, |
|
|
|
|
setup() { |
|
|
|
|
const route = useRoute(); |
|
|
|
|
const classid = route.params.classid; |
|
|
|
|
const state = reactive({ |
|
|
|
|
topInfo: [], |
|
|
|
|
isAuth: false, |
|
|
|
|
msg: 0, |
|
|
|
|
empty: false, |
|
|
|
|
certId: undefined, // 学习班绑定的认证id |
|
|
|
|
isPc: document.body.clientWidth > 1200, |
|
|
|
|
classNews: [], |
|
|
|
|
needResNews: true, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
window.addEventListener("resize", function() { |
|
|
|
|
state.isPc = document.body.clientWidth > 1200; |
|
|
|
|
if (!state.isPc && state.needResNews && state.classNews.length <= 0) { |
|
|
|
|
resPublicRight(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const resPublicRight = async () => { |
|
|
|
|
const res = await getClassInfo(classid); |
|
|
|
|
if (res.code === 200) { |
|
|
|
|
state.classNews = res.data["classNews"]; |
|
|
|
|
if (state.classNews.length <= 0) { |
|
|
|
|
state.needResNews = false; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
resPublicTop(); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
if (!state.isPc) { |
|
|
|
|
resPublicRight(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const calcProgress = (progress, total) => { |
|
|
|
|
const curProgress = (progress * 100) / total; |
|
|
|
|
return parseInt(curProgress); |
|
|
|
|
}; |
|
|
|
|
const resPublicTop = async () => { |
|
|
|
|
const res = await getPublicTop(classid); |
|
|
|
|
if (res.code === 200) { |
|
|
|
|
state.topInfo = res.data; |
|
|
|
|
// 鉴权 |
|
|
|
|
state.msg = res.message; |
|
|
|
|
if (res.status === -1) { |
|
|
|
|
state.isAuth = false; |
|
|
|
|
state.empty = true; |
|
|
|
|
} else { |
|
|
|
|
state.isAuth = true; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const getCertId = (res) => { |
|
|
|
|
state.certId = res; |
|
|
|
|
setTimeout(function() { |
|
|
|
|
state.topInfo.proLearning = calcProgress(res.data.progress_learning.progress, res.data.progress_learning.total); |
|
|
|
|
state.topInfo.proHomework = calcProgress(res.data.progress_homework.progress, res.data.progress_homework.total); |
|
|
|
|
}, 500); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
resPublicTop(); |
|
|
|
|
|
|
|
|
|
const calcProgress = (progress, total) => { |
|
|
|
|
const curProgress = (progress * 100) / total; |
|
|
|
|
return parseInt(curProgress); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const getCertId = (res) => { |
|
|
|
|
state.certId = res; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
classid, |
|
|
|
|
getCertId, |
|
|
|
|
calcProgress, |
|
|
|
|
...toRefs(state), |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
|
/*响应式-移动端*/ |
|
|
|
|
@import "~@/assets/css/m.css"; |
|
|
|
|
@media screen and (max-width: 1200px) { |
|
|
|
|
.listbox { |
|
|
|
|
padding: 0 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
classid, |
|
|
|
|
getCertId, |
|
|
|
|
calcProgress, |
|
|
|
|
...toRefs(state), |
|
|
|
|
.lf-box { |
|
|
|
|
width: 100% !important; |
|
|
|
|
.otile { |
|
|
|
|
height: 36px !important; |
|
|
|
|
h2 { |
|
|
|
|
font-size: 14px !important; |
|
|
|
|
font-weight: 500 !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.main { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 204px; |
|
|
|
|
background: #F1F8FF; |
|
|
|
|
margin-bottom: 24px; |
|
|
|
|
.el-menu-item { |
|
|
|
|
height: 44px !important; |
|
|
|
|
line-height: 46px !important; |
|
|
|
|
font-size: 16px !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.topbox { |
|
|
|
|
height: 204px; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
background: #F1F8FF url("~@/assets/class/classtop.png") right center no-repeat; |
|
|
|
|
background-size: auto 100%; |
|
|
|
|
.mian-news-box { |
|
|
|
|
margin-bottom: 12px; |
|
|
|
|
} |
|
|
|
|
.clss-news-box { |
|
|
|
|
padding: 12px; |
|
|
|
|
.til { |
|
|
|
|
font-size: 14px; |
|
|
|
|
margin-bottom: 6px; |
|
|
|
|
} |
|
|
|
|
.ul-box { |
|
|
|
|
.item { |
|
|
|
|
width: 48%; |
|
|
|
|
padding: 6px 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.infobox { |
|
|
|
|
@ -182,32 +227,40 @@
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
|
.til { |
|
|
|
|
padding: 16px 0 16px; |
|
|
|
|
padding: 6px 0 12px !important; |
|
|
|
|
|
|
|
|
|
h1 { |
|
|
|
|
font-size: 28px; |
|
|
|
|
font-size: 18px !important; |
|
|
|
|
line-height: 20px; |
|
|
|
|
margin-right: 18px; |
|
|
|
|
margin-right: 4px !important; |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.end_time { |
|
|
|
|
height: 24px; |
|
|
|
|
padding: 0 10px; |
|
|
|
|
height: 22px !important; |
|
|
|
|
padding: 0 8px !important; |
|
|
|
|
border-radius: 4px; |
|
|
|
|
background: linear-gradient(90deg, #00B8FE 0%, #0082FC 100%); |
|
|
|
|
background: linear-gradient(90deg, #00b8fe 0%, #0082fc 100%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.ress { |
|
|
|
|
width: 620px; |
|
|
|
|
width: 100% !important; |
|
|
|
|
display: block !important; |
|
|
|
|
|
|
|
|
|
.ressbox { |
|
|
|
|
width: 280px; |
|
|
|
|
height: 68px; |
|
|
|
|
height: 60px !important; |
|
|
|
|
|
|
|
|
|
.el-progress-bar__outer { |
|
|
|
|
background-color: #BBD8FA; |
|
|
|
|
background-color: #bbd8fa; |
|
|
|
|
} |
|
|
|
|
&.study-progress { |
|
|
|
|
margin-bottom: 12px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.my-progress-text { |
|
|
|
|
font-size: 12px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.last-til { |
|
|
|
|
@ -232,53 +285,162 @@
|
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
.rt-box { |
|
|
|
|
margin-top: 56px; |
|
|
|
|
<style lang="scss"> |
|
|
|
|
@media screen and (max-width: 600px) { |
|
|
|
|
.topbox { |
|
|
|
|
background: #f1f8ff right center no-repeat !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
::v-deep .edu-nav-box { |
|
|
|
|
box-shadow: none; |
|
|
|
|
.clss-news-box { |
|
|
|
|
.ul-box { |
|
|
|
|
.item { |
|
|
|
|
width: 98% !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* menu */ |
|
|
|
|
.el-menu-item { |
|
|
|
|
height: 56px; |
|
|
|
|
line-height: 56px; |
|
|
|
|
font-size: 20px; |
|
|
|
|
border-bottom: none !important; |
|
|
|
|
.lf-box { |
|
|
|
|
width: 100% !important; |
|
|
|
|
.otile { |
|
|
|
|
height: 36px !important; |
|
|
|
|
h2 { |
|
|
|
|
display: inline-block; |
|
|
|
|
width: 100%; |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
font-size: 14px !important; |
|
|
|
|
font-weight: 500 !important; |
|
|
|
|
} |
|
|
|
|
.til-rt-info { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
.el-menu-item.is-active::after { |
|
|
|
|
content: ""; |
|
|
|
|
position: absolute; |
|
|
|
|
width: 50%; |
|
|
|
|
left: 50%; |
|
|
|
|
margin-left: -25%; |
|
|
|
|
bottom: -1px; |
|
|
|
|
background-color: #0082fc; |
|
|
|
|
height: 2px; |
|
|
|
|
} |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.main { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 204px; |
|
|
|
|
background: #f1f8ff; |
|
|
|
|
margin-bottom: 24px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.topbox { |
|
|
|
|
height: 204px; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
background: #f1f8ff url("~@/assets/class/classtop.png") right center no-repeat; |
|
|
|
|
background-size: auto 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.infobox { |
|
|
|
|
height: 160px; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-around; |
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
|
.til { |
|
|
|
|
padding: 16px 0 16px; |
|
|
|
|
|
|
|
|
|
h1 { |
|
|
|
|
font-size: 28px; |
|
|
|
|
line-height: 20px; |
|
|
|
|
margin-right: 18px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__nav-wrap::after { |
|
|
|
|
background-color: #CEDDF2; |
|
|
|
|
height: 1px; |
|
|
|
|
.end_time { |
|
|
|
|
height: 24px; |
|
|
|
|
padding: 0 10px; |
|
|
|
|
border-radius: 4px; |
|
|
|
|
background: linear-gradient(90deg, #00b8fe 0%, #0082fc 100%); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-menu.el-menu--horizontal { |
|
|
|
|
border-bottom: solid 1px #CEDDF2; |
|
|
|
|
.ress { |
|
|
|
|
width: 620px; |
|
|
|
|
|
|
|
|
|
.ressbox { |
|
|
|
|
width: 280px; |
|
|
|
|
height: 68px; |
|
|
|
|
|
|
|
|
|
.el-progress-bar__outer { |
|
|
|
|
background-color: #bbd8fa; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.last-til { |
|
|
|
|
display: inline-block; |
|
|
|
|
padding-left: 8px; |
|
|
|
|
width: 230px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.meta { |
|
|
|
|
.li { |
|
|
|
|
span { |
|
|
|
|
padding-right: 10px; |
|
|
|
|
font-size: 12px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
strong { |
|
|
|
|
font-weight: 500; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.rt-box { |
|
|
|
|
margin-top: 56px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
::v-deep .edu-nav-box { |
|
|
|
|
box-shadow: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* menu */ |
|
|
|
|
.el-menu-item { |
|
|
|
|
height: 56px; |
|
|
|
|
line-height: 56px; |
|
|
|
|
font-size: 20px; |
|
|
|
|
border-bottom: none !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-menu-item.is-active::after { |
|
|
|
|
content: ""; |
|
|
|
|
position: absolute; |
|
|
|
|
width: 50%; |
|
|
|
|
left: 50%; |
|
|
|
|
margin-left: -25%; |
|
|
|
|
bottom: -1px; |
|
|
|
|
background-color: #0082fc; |
|
|
|
|
height: 2px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__nav-wrap::after { |
|
|
|
|
background-color: #ceddf2; |
|
|
|
|
height: 1px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-menu.el-menu--horizontal { |
|
|
|
|
border-bottom: solid 1px #ceddf2; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
.ressbox .el-progress-bar__outer { |
|
|
|
|
background-color: #BBD8FA; |
|
|
|
|
} |
|
|
|
|
.ressbox .el-progress-bar__outer { |
|
|
|
|
background-color: #bbd8fa; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
