hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-07 09:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

课程详细页面的修改提交

Browse Source
This commit is contained in:
daihh
2022-10-09 10:56:47 +08:00
parent 9547d07244
commit e24e8a57f1
2 changed files with 105 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/assets/styles/portal.scss
View File

@@ -2,7 +2,11 @@
* 门户页面的一些通用样式定义在这里面
*/
body {margin: 0px;padding: 0px;}
//定义全局的核心区域宽度
.xcontent{
min-width: 1100px;
margin: 0px auto;
}
//[文章，案例，问答]详细页面内容部分
.xpage-detail-content{
padding: 50px;
@@ -24,6 +28,35 @@ body {margin: 0px;padding: 0px;}
color:#3d3d3d;
}
}
//课程详细页面banner部分
.xpage-coures-banner{
width: 100%;
height: 200px;
background-image: url('../../../public/images/couresdetail.png');
background-size: cover;
.bcourse-title{
color: #fff;
margin-top: 20px;
font-size: 20px;
}
.bcourse-score{
margin-left: 30px;
font-size: 16px;
}
.banner-crumbs{
color: #fff;
margin-top:50px;
.crumbs-first{
font-size: 16px;
}
.crumbs-line{
margin: 0px 10px;
}
.crumbs-last{
font-size: 18px;
}
}
}
//原样式，未修改
.portal-model-btn{// 写文章，发课程等按钮
@@ -274,6 +307,7 @@ body {margin: 0px;padding: 0px;}
}
//以下是多分辨率的控制，注意，只是一些样式的高度，宽度，大小控制，非大小控制不要在这里写
@media screen and (max-width: 1366px){
.xcontent{width: 1100px;}
.xcontent2{
width: 1100px;
}
@@ -304,6 +338,7 @@ body {margin: 0px;padding: 0px;}
}
@media screen and (max-width: 1680px) and (min-width:1367px){
.xcontent{width: 1366px;}
.xcontent2{
width: 1366px;
}
@@ -329,6 +364,7 @@ body {margin: 0px;padding: 0px;}
}
@media screen and (max-width: 1920px) and (min-width: 1681px){
.xcontent{width: 1690px;}
.xcontent2{
width: 1690px;
}
@@ -354,6 +390,7 @@ body {margin: 0px;padding: 0px;}
}
@media screen and (min-width: 1921px){
.xcontent{width: 1880px;}
.xcontent2{
width: 1880px;
}

130
src/views/portal/course/Detail.vue
View File

@@ -1,67 +1,70 @@
<template>
<div>
<portal-header current="course" :goSearch="1"></portal-header>
<div class="portal-content xcontent">
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb-nav">
<el-breadcrumb-item :to="{ path: '/course' }">课程列表</el-breadcrumb-item>
<el-breadcrumb-item>课程详情</el-breadcrumb-item>
</el-breadcrumb>
<!-- <div class="course-title">
<div class="title">{{courseInfo.name}}</div>
<div class="course-title-right">
<interactBar :readonly="!stuStusts || stuStusts==0" :type="1" :data="courseInfo" :comments="false" :views="false"></interactBar>
<div class="xpage-coures-banner">
<portal-header current="course" textColor="#fff" :goSearch="1"></portal-header>
<div class="xcontent">
<div class="banner-crumbs">
<router-link to="/course"><span class="crumbs-first">课程列表</span></router-link>
<span class="crumbs-line"> &gt; </span>
<span class="crumbs-last">课程详情</span>
</div>
<div class="bcourse-title">
<!-- <span>{{courseInfo.name}}</span> -->
<!-- <span>{{courseInfo.summary}}</span> -->
<!-- <span class="bcourse-score">{{toScore(courseInfo.score)}}分</span> -->
</div>
</div>
</div> -->
<el-row :gutter="10">
<el-col :span="24">
<el-card :body-style="{ padding: '0px' }">
<div class="detail">
<div class="image">
<course-image :course="courseInfo"></course-image>
</div>
<div class="detail-info">
<div class="course-title">
<div class="title"> {{courseInfo.name}}</div>
<interactBar :readonly="!stuStusts || stuStusts==0" :type="1" :data="courseInfo" :praises="false" :comments="false" :views="false"></interactBar>
</div>
<!-- <div class="course-title-right"> -->
<!-- <interactBar :readonly="!stuStusts || stuStusts==0" :type="1" :data="courseInfo" :comments="false" :views="false"></interactBar> -->
<!-- </div> -->
<div>
<div class="study-count">{{courseInfo.studys}}人学习</div>
<!-- <div><span style="font-size:20px;color:#ff8e00">{{courseInfo.score ? courseInfo.score.toFixed(1) : 0}}</span><span style="font-size:12px;color:#ff8e00">分</span></div> -->
</div>
<div class="label-div">
<el-tag class="label-item" effect="plain" v-for="(item,tagIdx) in tagArray" :key="tagIdx">{{item}}</el-tag>
</div>
<!-- <div style="width:160px;height:50px"> -->
<!-- </div> -->
<!-- <div class="label-div">
<el-tag class="label-item" effect="plain">{{courseType(courseInfo.type)}}</el-tag>
</div> -->
<div class="score-div">
<!-- colors="[#FF8E00]" -->
<div v-if="courseInfo.score">
<el-rate disabled v-model="courseInfo.score"></el-rate>
<span class="score-text">{{courseInfo.score ? courseInfo.score.toFixed(1) : 0}}<span style="font-size: 14px;">分</span></span>
</div>
<div v-else class="score-no">未评分</div>
</div>
<div class="btn-div" style="height:30px;margin-top: 15px;">
<el-button v-if="stuStusts == 0" type="primary" @click="startSigningUp()" >立即报名</el-button>
<el-button v-if="stuStusts == 1" type="primary" @click="jumpJearning">{{btnName}}</el-button>
</div>
</div>
<div class="erweima" v-if="courseInfo.device == 2 || courseInfo.device == 3">
<img class="detail-img" v-show="!showQrcode" @click="showQrcode = true" src="../../../assets/images/qr.png">
<div v-show="showQrcode" class="qrcode" @click="showQrcode = false">
<div id="qrcode" ref="qrcode"></div>
<!-- <div class="qrcode-title">手机扫码观看</div> -->
</div>
<div class="portal-content xcontent">
<div class="detail">
<div class="image">
<course-image :course="courseInfo"></course-image>
</div>
<div class="detail-info">
<div class="course-title">
<div class="title"> {{courseInfo.name}}</div>
<interactBar :readonly="!stuStusts || stuStusts==0" :type="1" :data="courseInfo" :praises="false" :comments="false" :views="false"></interactBar>
</div>
<!-- <div class="course-title-right"> -->
<!-- <interactBar :readonly="!stuStusts || stuStusts==0" :type="1" :data="courseInfo" :comments="false" :views="false"></interactBar> -->
<!-- </div> -->
<div>
<div class="study-count">{{courseInfo.studys}}人学习</div>
<!-- <div><span style="font-size:20px;color:#ff8e00">{{courseInfo.score ? courseInfo.score.toFixed(1) : 0}}</span><span style="font-size:12px;color:#ff8e00">分</span></div> -->
</div>
<div class="label-div">
<el-tag class="label-item" effect="plain" v-for="(item,tagIdx) in tagArray" :key="tagIdx">{{item}}</el-tag>
</div>
<!-- <div style="width:160px;height:50px"> -->
<!-- </div> -->
<!-- <div class="label-div">
<el-tag class="label-item" effect="plain">{{courseType(courseInfo.type)}}</el-tag>
</div> -->
<div class="score-div">
<!-- colors="[#FF8E00]" -->
<div v-if="courseInfo.score">
<el-rate disabled v-model="courseInfo.score"></el-rate>
<span class="score-text">{{courseInfo.score ? courseInfo.score.toFixed(1) : 0}}<span style="font-size: 14px;">分</span></span>
</div>
<div v-else class="score-no">未评分</div>
</div>
<div class="btn-div" style="height:30px;margin-top: 15px;">
<el-button v-if="stuStusts == 0" type="primary" @click="startSigningUp()" >立即报名</el-button>
<el-button v-if="stuStusts == 1" type="primary" @click="jumpJearning">{{btnName}}</el-button>
</div>
<div class="erweima" v-if="courseInfo.device == 2 || courseInfo.device == 3">
<img class="detail-img" v-show="!showQrcode" @click="showQrcode = true" src="../../../assets/images/qr.png">
<div v-show="showQrcode" class="qrcode" @click="showQrcode = false">
<div id="qrcode" ref="qrcode"></div>
<!-- <div class="qrcode-title">手机扫码观看</div> -->
</div>
</div>
</div>
</el-card>
</div>
<el-row :gutter="10">
<el-col :span="18">
<el-card :body-style="{ padding: '0px' }" class="info" style="margin-top: 10px;">
@@ -121,8 +124,7 @@
</el-card>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
<portal-footer></portal-footer>
</div>
@@ -220,10 +222,10 @@ export default {
})
this.catalogTree=treeList;
}
this.showQrimage();
this.isSignUp();
}else{
@@ -411,6 +413,8 @@ export default {
.detail {
display: flex;
margin-top: 20px;
background-color: #fff;
.image {
width: 500px;
height: 280px;