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

修改课程推荐样式

Browse Source
This commit is contained in:
NiSen
2023-09-25 16:32:08 +08:00
parent 436f2e71a0
commit 63b0cf6810
5 changed files with 153 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/courseBanner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 222 KiB

BIN
src/assets/images/course/courserecommended.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

129
src/views/portal/course/CourseRecommended.vue
View File

@@ -3,6 +3,7 @@
<div class="case-banner">
<PortalHeader current="course" textColor="#fff" :keywords="keyword" @emitInput="emitInput" @showClass="showClass" />
</div>
<!-- 搜索和nav -->
<div class="xcontent2">
<div class="xcontent2-main">
<div class="left-div">
@@ -24,8 +25,15 @@
<el-button class="sear-but" @click="searchJump()" type="primary" size="mini">搜索</el-button>
</div>
</div>
</div>
</div>
</div>
<!-- 中心 -->
<div v-for="item in courseList.list" :key="item.id" style="margin-bottom: 30px;" class="xcontent2">
<div class="xcontent2-main">
<div class="left-div">
<div class="data-content">
<div v-for="item in courseList.list" :key="item.id" class="case-list" @click="handleClick(item.id)">
<div class="case-list" style="margin-top: 25px;" @click="handleClick(item.id)">
<div class="imgEntrance">
<img src="../../../assets//images/grateful/empBanner.png" alt="">
</div>
@@ -42,6 +50,10 @@
<div class="courseInfoSummary two-line-ellipsis">
{{ item.summary }}
</div>
<div class="recommendedAuthor">
<div>京东方大学推荐</div>
<div>共3门课程</div>
</div>
</div>
</div>
<div v-if="courseList.showPagCount > params.pageSize">
@@ -52,6 +64,35 @@
</div>
</div>
</div>
<!-- 评分 -->
<div class="float-tools" @click="() => (evaluateVisible = !evaluateVisible)">
<div class="content">
<img src="../../../assets/images/grateful/suggestion.png" alt="" />
<span>去评分</span>
</div>
</div>
<!-- 意见 -->
<el-dialog :close-on-click-modal="false" width="629px" :visible.sync="evaluateVisible" :append-to-body="true"
@closed="closeDlg">
<div class="dialogContent">
<div class="dialogTop">
<div class="words">
<div>我对本次推荐课程很满意</div>
</div>
</div>
<el-form >
<el-form-item>
哈哈哈
</el-form-item>
<el-form-item>
<div style="display: flex; justify-content: center">
<el-button style="width: 100px;" @click="closeDlg">取消</el-button>
<el-button style="width: 100px;" @click="submitNotice" type="primary">确认</el-button>
</div>
</el-form-item>
</el-form>
</div>
</el-dialog>
</div>
</template>
<script>
@@ -62,6 +103,7 @@ export default {
components: { PortalHeader, TimeShow },
data() {
return {
evaluateVisible:false,
keyword: "",
navTitle: [{
name: "课程",
@@ -86,6 +128,11 @@ export default {
title: "项目管理系列课程",
sysCreateTime: '2023-09-22',
summary: "哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊红i哈好哈啊哈好哈啊哈哈好哈哈啊哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊哈哈好哈哈啊"
}, {
id: 3,
title: "项目管理系列课程",
sysCreateTime: '2023-09-22',
summary: "哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊红i哈好哈啊哈好哈啊哈哈好哈哈啊哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊哈哈好哈哈啊"
}],
showPagCount: 0,
count: 0
@@ -102,6 +149,12 @@ export default {
},
methods: {
closeDlg() {
},
submitNotice() {
},
emitInput() {
},
@@ -119,7 +172,7 @@ export default {
<style scoped lang="scss">
.case-banner {
height: 240px;
background: url('../../../../public/images/case-banner.png');
background: url('../../../../public/images/courseBanner.png');
margin-bottom: 30px;
}
@@ -154,12 +207,9 @@ export default {
.data-content {
background-color: #fff;
padding: 5px 50px;
// .case-list:last-child {
// border-bottom: none;
// }
cursor: pointer;
.case-list {
// border-bottom: 1px solid rgba(153, 153, 153, .2);
margin-top: 10px;
margin-bottom: 25px;
padding-left: 5px;
@@ -167,8 +217,8 @@ export default {
display: flex;
.imgEntrance {
width: 200px;
height: 200px;
width: 350px;
height: 196px;
img {
width: 100%;
@@ -179,11 +229,17 @@ export default {
}
.courseTitle {
padding-top: 30px;
flex: 1;
.courseTop {
display: flex;
justify-content: space-between;
.case-tittext {
font-size: 18px;
color: #00253E;
}
}
.courseInfoSummary {
@@ -195,9 +251,64 @@ export default {
font-size: 14px;
color: #333330;
font-weight: 400;
color: #6E7B84;
}
.recommendedAuthor {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
color: #6E7B84;
font-size: 14px;
}
}
}
}
.float-tools {
position: fixed;
right: 0;
bottom: 40%;
z-index: 999;
cursor: pointer;
.content {
width: 152px;
height: 55px;
display: flex;
align-items: center;
background: linear-gradient(86deg, #00c8ff 0%, #167cff 100%);
border-radius: 100px 0px 0px 100px;
padding: 20px;
img {
width: 20px;
height: 20px;
}
span {
margin-left: 10px;
color: #fff;
font-size: 20px;
}
}
}
.dialogContent {
.dialogTop {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
.words {
font-size: 26px;
font-weight: 600;
color: #333333;
line-height: 37px;
}
}
}
</style>

55
src/views/portal/course/CourseSeries.vue
View File

@@ -32,15 +32,14 @@
<div class="xcontent2-main">
<div class="modules-list list" style="margin-top: 0">
<!--内容列表内容-->
<div v-for="(course, ccidx) in courseList" :key="'cc' + ccidx" class="xindex-course"
<div v-for="(course, ccidx) in courseList.list" :key="'cc' + ccidx" class="xindex-course"
style="position: relative">
<a @click="toCourseDetail(course)">
<div class="xindex-course-image">
<course-image :course="course"></course-image>
<span v-if="course.type == 20 || course.type == 10" class="course-type overType">录播课</span>
<span class="overType coursePosition">面授课</span>
<CourseImage :course="course"></CourseImage>
<span v-if="course.type == 20 || course.type == 10" class="course-type">录播课</span>
<span class="course-type">面授课</span>
<span v-if="course.type == 40" class="course-type">学习项目</span>
<span class="overType courseTime">2023-09-22</span>
</div>
<div style="width: 80%" :title="course.name" v-html="course.name"
class="course-title portal-title-tow two-line-ellipsis"></div>
@@ -49,14 +48,14 @@
{{ course.teacher }}
<span class="study-num">{{ formatNum(course.studies) }}人学习</span>
</div>
<!-- <div style="display: flex">
<div style="display: flex">
<div v-if="course.score != '0'">
<span class="course-score-value" style="margin-left: 10px">
{{ toScore(Number(course.score)) }}分
</span>
</div>
<div v-else class="course-score-no">未评分</div>
</div> -->
</div>
</div>
</a>
</div>
@@ -113,11 +112,13 @@ export default {
id: 1,
title: "项目管理系列课程",
sysCreateTime: '2023-09-22',
name: "哈哈哈",
summary: "哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊红i哈好哈啊哈好哈啊哈哈好哈哈啊哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊哈哈好哈哈啊"
}, {
id: 2,
title: "项目管理系列课程",
sysCreateTime: '2023-09-22',
ame: "哈哈哈",
summary: "哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊红i哈好哈啊哈好哈啊哈哈好哈哈啊哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊哈哈好哈哈啊"
}],
showPagCount: 0,
@@ -143,14 +144,26 @@ export default {
},
showClass() { },
loadData() { },
changePageSize() { }
}
};
</script>
<style scoped lang="scss">
.case-banner {
position: relative;
height: 240px;
background: url('../../../../public/images/case-banner.png');
background: url('../../../../public/images/courseBanner.png');
margin-bottom: 30px;
&::before {
content: '课程推荐';
position: absolute;
bottom: 25px;
left: 240px;
font-size: 64px;
color: #FFFFFF;
}
}
/* 标题 */
@@ -185,32 +198,8 @@ export default {
transition: all 0.6s;
}
.overType {
position: absolute;
height: 24px;
line-height: 24px;
text-align: center;
font-size: 12px;
color: #ffffff;
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/*早期浏览器*/
user-select: none;
}
.coursePosition {
bottom: 0px;
left: 0px;
width: 60px;
background-color: #f99000;
border-radius: 2px 8px 2px 3px;
}
.courseTime{
.courseTime {
bottom: 0px;
right: 0px;
padding: 0 20px;

13
src/views/portal/course/Index.vue
View File

@@ -21,9 +21,9 @@
<div class="xcontent2">
<!-- 左侧三级 -->
<div class="xcontent2-minor" style="margin-right:36px;">
<router-link to="/courseRecommended" style="margin-bottom: 20px;" class="course-title-style">
<router-link to="/courseRecommended" style="margin-bottom: 20px;" class="course-recommended-style">
<div class="imgTilte">
<div>课程推荐</div>
<!-- <div>课程推荐</div> -->
</div>
</router-link>
<div class="course-title-style">
@@ -1582,6 +1582,15 @@ export default {
}
// 三级背景高度
.course-recommended-style{
position: relative;
height: 142px;
background-image: url('../../../assets/images/course/courserecommended.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
}
.course-title-style {
position: relative;
height: 100px;