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:
zhaofang
2022-09-30 11:00:38 +08:00
parent 59ebb60dde
commit 3f9ee57170
2 changed files with 75 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/styles/uc.scss
View File

@@ -6,7 +6,7 @@
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
line-height: 36px; line-height: 36px;
margin-right: 44px; // margin-right: 44px;
} }
.uc-center-one-title{ .uc-center-one-title{
font-size: 18px; font-size: 18px;
@@ -62,3 +62,12 @@
.el-message-box__btns button:nth-child(2) { .el-message-box__btns button:nth-child(2) {
margin-left:20px; margin-left:20px;
} }
.search-btn{
background: #2C68FF;
}
.uc-input{
width: 210px;
}
.uc-select{
width: 125px;
}

94
src/views/study/Courses.vue
View File

@@ -2,9 +2,10 @@
<div> <div>
<div style="display: flex;justify-content:space-between; padding: 12px 32px 10px 22px;"> <div style="display: flex;justify-content:space-between; padding: 12px 32px 10px 22px;">
<div style="display: flex;justify-content: flex-start;"> <div style="display: flex;justify-content: flex-start;">
<div> <div class="uc-center-page">我的报名</div>
<el-select v-model="courseType" clearable placeholder="类型"> <div style="margin-left:32px">
<el-option label="全部" value='1'></el-option> <el-select v-model="courseType" class="uc-select" clearable placeholder="类型">
<el-option label="全部类型" value='1'></el-option>
<!-- <el-option label="微课" :value="10"></el-option> --> <!-- <el-option label="微课" :value="10"></el-option> -->
<el-option label="录播课" :value="20"></el-option> <el-option label="录播课" :value="20"></el-option>
<!-- <el-option label="在线课" value="online-course"></el-option> --> <!-- <el-option label="在线课" value="online-course"></el-option> -->
@@ -14,41 +15,57 @@
<el-option label="学习项目" :value="40"></el-option> <el-option label="学习项目" :value="40"></el-option>
</el-select> </el-select>
</div> </div>
<el-select style="margin-left:10px" v-model="status" clearable placeholder="学习进度"> <el-select style="margin-left:12px" class="uc-select" v-model="status" clearable placeholder="学习进度">
<el-option label="全部" value='0'></el-option> <el-option label="所有进度" value='0'></el-option>
<el-option label="未开始" :value="1"></el-option> <el-option label="未开始" :value="1"></el-option>
<el-option label="进行中" :value="2"></el-option> <el-option label="进行中" :value="2"></el-option>
<el-option label="已完成" :value="9"></el-option> <el-option label="已完成" :value="9"></el-option>
<!-- <el-option label="已停用" :value="3"></el-option> --> <!-- <el-option label="已停用" :value="3"></el-option> -->
</el-select> </el-select>
<div style="padding-left: 10px;"><el-input v-model="params.courseName" clearable placeholder="搜索名称"></el-input></div> <div style="padding-left: 12px;"><el-input class="uc-input" v-model="params.courseName" clearable placeholder="搜索名称"></el-input></div>
<div style="padding-left: 10px;"><el-button type="primary" icon="el-icon-search" @click="searchData()">搜索</el-button></div> <div style="padding-left: 12px;"><el-button type="primary" class="search-btn" icon="el-icon-search" @click="searchData()">搜索</el-button></div>
<div style="padding-left: 10px"><el-button type="primary" icon="el-icon-refresh-right" @click="reset()">重置</el-button></div> <div style="padding-left: 12px"><el-button type="primary" class="search-btn" icon="el-icon-refresh-right" @click="reset()">重置</el-button></div>
</div> </div>
</div> </div>
<div class="uc-list" v-loading="loading"> <div class="uc-list" v-loading="loading">
<div class="uc-course" v-for="(item,idx) in pageChange" @click="jumpRouter(item)" :key="idx"> <div class="uc-course" v-for="(item,idx) in pageChange" @click="jumpRouter(item)" :key="idx">
<div class="uc-course-img" style="width: 212px;height:119px"> <div class="uc-course-img" style="width: 260px;height:144px">
<course-image :course="item"></course-image> <course-image :course="item"></course-image>
<div class="uc-type">
<span v-if="item.courseType==10">录播</span>
<span v-if="item.courseType==20">录播</span>
<span v-if="item.courseType==30">线下课</span>
<span v-if="item.courseType==40">学习项目</span>
</div>
</div> </div>
<div class="uc-course-info"> <div class="uc-course-info">
<div class="uc-course-name" style="cursor: pointer;"> <div class="uc-course-name" style="cursor: pointer;">
<div>
<span v-if="item.courseType==10" class="uc-course-type2">录播</span>
<span v-if="item.courseType==20" class="uc-course-type2">录播</span>
<span v-if="item.courseType==30" class="uc-course-type3">线下课</span>
<span v-if="item.courseType==40" class="uc-course-type4">学习项目</span>
</div>
<div style="flex:1;"> <div style="flex:1;">
<a v-html="$keywordActiveShow(item.courseName,params.courseName)" class="uc-title two-line-ellipsis"></a> <a v-html="$keywordActiveShow(item.courseName,params.courseName)" class="uc-title two-line-ellipsis"></a>
</div> </div>
</div> </div>
<div style="width: 80%;margin-top:38px"><el-progress :percentage="item.progress"></el-progress></div> <div style="padding-top:6px" class="uc-course-text"><i class="el-icon-time" style="margin-right:4px"></i>报名时间：{{item.addTime}}</div>
<div class="uc-course-text">报名时间：{{item.addTime}}</div> <div style="width: 80%;margin-top: 20px;display: flex;">
<div style="color: #333333;font-size: 14px;">当前进度：</div>
<div style="width:170px;padding-top: 5px;">
<el-progress :percentage="item.progress" color="#FFA050"></el-progress>
</div>
</div>
</div> </div>
<div class="uc-course-btns"> <div class="uc-course-btns">
<div style="text-align: right;"> <div style="text-align: right;">
<el-button class="del" @click.stop="delItem(item,idx)" type="text" icon="el-icon-delete" size="mini" title="删除"></el-button> <!-- <el-button class="del" @click.stop="delItem(item,idx)" type="text" icon="el-icon-delete" size="mini" title="删除"></el-button> -->
<el-dropdown>
<span class="el-dropdown-link">
<svg-icon style="margin-right: 0;font-size:26px;" icon-class="spot"></svg-icon>
</span>
<el-dropdown-menu slot="dropdown" class="dropdown-box">
<el-dropdown-item command="a">
<el-button class="del" @click.stop="delItem(item,idx)" type="text" icon="el-icon-delete" size="mini" title="删除"></el-button>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> </div>
<span @click.stop="jumpRouter(item)"> <span @click.stop="jumpRouter(item)">
<el-button style="margin-top:30px" v-if="item.progress==0" type="primary" size="small">开始学习</el-button> <el-button style="margin-top:30px" v-if="item.progress==0" type="primary" size="small">开始学习</el-button>
@@ -73,9 +90,11 @@
<span v-if="dataList.length==0">正在加载数据...</span> <span v-if="dataList.length==0">正在加载数据...</span>
<span v-else>查询中...</span> <span v-else>查询中...</span>
</div> </div>
<div v-else > <div v-else class="home-no-list">
<span v-if="dataList.length==0">当前列表无数据</span> <!-- <span v-if="dataList.length==0">当前列表无数据</span>
<span v-else-if="couresList.length==0" >未找到您要搜索的内容</span> <span v-else-if="couresList.length==0" >未找到您要搜索的内容</span> -->
<img class="img" style="width:360px;height:226px" src="/images/homeWu/no-madel.png" alt="" srcset="">
<p class="text" style="color: #333333;margin-top:50px;font-size: 14px">你还没有报名课程哦～</p>
</div> </div>
</div> </div>
</div> </div>
@@ -413,6 +432,7 @@ computed: {
} }
.uc-list{ .uc-list{
padding-left: 22px; padding-left: 22px;
margin-top: 30px;
} }
.uc-course-type1{ .uc-course-type1{
width: 58px; width: 58px;
@@ -467,22 +487,38 @@ computed: {
.uc-course { .uc-course {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
border-bottom: 1px solid #E8E8E8; // border-bottom: 1px solid #E8E8E8;
margin-right: 32px; margin-right: 32px;
padding: 20px 0px 15px 0px ; padding: 20px 0px 25px 0px ;
cursor: pointer; cursor: pointer;
.uc-course-img { .uc-course-img {
width: 200px; position: relative;
img { width: 260px;
width: 200px; ::v-deep img {
border: 1px solid #f4f4f5; // width: 200px;
// border: 1px solid #f4f4f5;
border-radius: 8px;
}
.uc-type{
position: absolute;
top: 0;
right:0;
width: 60px;
height: 24px;
line-height: 24px;
text-align: center;
background: #F99000;
border-radius: 2px 4px 2px 16px;
color: #fff;
font-size: 12px;
font-weight: 600;
} }
} }
.uc-course-info { .uc-course-info {
flex: 1; flex: 1;
margin-top: -3px; margin-top: -3px;
line-height: 28px; line-height: 28px;
padding: 0px 10px; padding: 0px 25px;
.uc-course-name { .uc-course-name {
display: flex; display: flex;
span{ span{
@@ -491,7 +527,7 @@ computed: {
margin-right: 8px; margin-right: 8px;
} }
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 600;
color: #333; color: #333;
} }
.uc-course-text { .uc-course-text {