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

首页课程样式

Browse Source
This commit is contained in:
zhaofang
2022-11-08 18:13:37 +08:00
parent d7132efc22
commit 70b14ab53a
7 changed files with 256 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
pages/index/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view>
<view style="background-color: #fff;">
<u-toast ref="messager"></u-toast>
<!--页面头部-->
<view class="top" style="padding-top: 6px;">
@@ -37,9 +37,9 @@
</view>
</view>
</view>
<!-- <view style="line-height: 40upx;height: 40upx; padding-top: 14upx;font-size: 16px; ">
<data-filter v-if="conType!=2" :noOrder="false" :type="conType" @reset="resetFilters" @submit="submitFilters"></data-filter>
</view> -->
<view style="line-height: 40upx;height: 40upx; padding-top: 14upx;font-size: 16px; ">
<data-filter v-if="conType == 1" :noOrder="false" :type="conType" @reset="resetFilters" @submit="submitFilters"></data-filter>
</view>
</view>
<view class="" v-show="conType == 0">
<recommend-index></recommend-index>
@@ -47,15 +47,15 @@
<!--内容列表区域,采用同一个列表，只是根据不同的选项来查询内容的结果不一样-->
<view v-if="conType == 1">
<view class="tags" v-if="dataFilter.courseTags.length>0">
<!-- <view class="tags" v-if="dataFilter.courseTags.length>0">
<u-scroll-list :indicator="false">
<view v-for="(tag, tagIdx) in dataFilter.courseTags" :key="tagIdx" >
<view class="tag-item">{{tag.text}} </view>
</view>
</u-scroll-list>
</view>
</view> -->
<!-- u 选小课堂 -->
<view class="uxclass" @click="toNewLink">
<!-- <view class="uxclass" @click="toNewLink">
<view class="ux_tab">
<view class="ux-image">
<image src="../../static/images/utop-course.png" mode=""></image>
@@ -67,46 +67,32 @@
<view class="ux-cont">千门U选好课,涵盖：前沿趋势、商业财经、职场技能、专业提升，免费持续开放中！BOEer,快来学习吧！</view>
</view>
</view>
</view>
</view> -->
<!-- 课程列表 -->
<view v-for="(c,cidx) in courseList" :key="cidx" class="con_box">
<view class="course" @click="toCourseDetail(c)">
<view class="course-img">
<view class="course-left">
<text v-if="c.type==10" class="course-type">录播</text>
<text v-if="c.type==20" class="course-type">录播</text>
<text v-if="c.type=='online-course'" class="course-type">录播</text>
<text v-if="c.type=='face-course'" class="course-type">线下课</text>
<text v-if="c.type=='project'" class="course-type">学习项目</text>
<course-image :course="c" width="265upx" height="144upx"></course-image>
<view class="course-re-list">
<view v-for="(c,cidx) in courseList" :key="cidx" class="course-re-index" @click="toCourseDetail(c)">
<!-- <view @click="toCourseDetail(c)"> -->
<view class="course-img">
<text class="img-score">
<image style="width:28upx;height:28upx;margin-right: 6upx;" src="../../static/images/icon/index-start.png" mode=""></image>
{{converToScore(c.score)}}分</text>
<course-image :course="c" width="332upx" height="192upx"></course-image>
</view>
<view class="coures-conent">
<view class="conent-title" v-html="c.name">
<!-- <u-parse :content="c.name"></u-parse> -->
<view class="course-title">
<view v-html="c.name">
</view>
<view class="con-au">
<view v-if="c.type==10 || c.type==20" class="item-author" style="display: flex;">
<text style="font-size: 28upx; color: #666666;">{{c.teacher}}</text>
</view>
<view v-else style="font-size: 28upx; color: #666666;padding-top: 10upx;">
</view>
</view>
<view class="statuy-ren">
<view class="">
<text style="color: #FF8E00;">
{{c.studies}}
</text>
人学习
</view>
<view class="statuy-score">
<text >{{converToScore(c.score)}}分</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="course-text">
{{c.teacher}} | {{c.studies}}人已学
</view>
<view class="course-type">
<text class="type-index" v-if="sysTypeName(c.sysType1) != ''">{{sysTypeName(c.sysType1)}}</text>
<text class="type-tow" v-if="sysTypeName(c.sysType2) != ''">{{sysTypeName(c.sysType2)}}</text>
</view>
<!-- </view> -->
</view>
</view>
</view>
<!-- 文章 -->
<view>
@@ -215,6 +201,7 @@
import apiMessage from '@/api/system/message.js'
import {toScore} from '@/utils/tools.js'
import apiBoeCourse from '@/api/boe/course.js'
import { mapGetters,mapActions} from 'vuex';
export default {
data(){
return {
@@ -258,6 +245,9 @@
totalPages:1,
}
},
computed: {
...mapGetters(['userInfo','sysTypeMap'])
},
onPullDownRefresh() {
this.onReachBottom();
},
@@ -340,9 +330,21 @@
}
}
this.findCourseData();
this.getSysTypeTree();
this.findCourseData();
this.loadSysTypes();
},
methods: {
...mapActions({
// getResOwnerTree:'resOwner/getResOwnerTree',
// loadResOwners:'resOwner/loadResOwners',
getSysTypeTree:'sysType/getSysTypeTree',
loadSysTypes:'sysType/loadSysTypes'
}),
sysTypeName(code){
if(code=='' || code==0){return '';}
return this.sysTypeMap.get(code);
},
closeSignDlg(){
this.signInShow=false;
},
@@ -774,6 +776,83 @@
font-size: 32rpx;
text-align: center;
padding: 5upx 10upx 0upx 0upx;
}
.course-re-list{
padding: 30upx;
display: flex;
flex-wrap: wrap;
.course-re-index{
width: 335upx;
min-width: 335upx;
padding: 15upx 0;
&:nth-child(2n-1){
margin-right: 20upx;
}
.course-img{
width: 335upx;
height: 188upx;
border-radius: 16upx;
position: relative;
/deep/ uni-image {
border-radius: 8upx;
}
.img-score{
display: inline-block;
padding: 7upx 15upx;
box-sizing: border-box;
position: absolute;
right:2upx;
bottom: -2px;
color: #FFFFFF;
font-size: 28upx;
z-index: 99;
width: 136upx;
height: 44upx;
background: #1767FF;
// background: rgba($color: #1767FF, $alpha: 0.2);
border-radius: 24upx 0px 4upx 0px;
backdrop-filter: blur(20px);
}
}
.course-title{
margin-top: 20upx;
font-size: 28upx;
color: #39424C;
display: -webkit-box;
word-break:break-all;
// white-space:pre-wrap;
overflow: hidden;
// text-overflow:ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
box-sizing: border-box;
}
.course-text{
margin-top: 20upx;
font-size: 28upx;
color: #6E7B84;
}
.course-type{
margin-top: 20upx;
.type-index{
font-size: 22upx;
color: #6E7B84;
background: rgba($color: #387DF7, $alpha: 0.1);
border-radius: 8upx;
margin-right: 12upx;
padding: 4upx 12upx;
}
.type-tow{
font-size: 22upx;
color: #D98135;
background: rgba($color: #FF7900, $alpha: 0.1);
border-radius: 8upx;
margin-right: 12upx;
padding: 4upx 12upx;
}
}
}
}
.con_box {
margin-bottom: 10px;
@@ -786,125 +865,6 @@
font-weight: 35upx;
margin-bottom: 10upx;
}
}
.course {
.course-img {
display: flex;
align-items: center;
/deep/ .course-left{
width: 262upx;
height: 147upx;
margin-top: 4upx;
position: relative;
margin-right: 10rpx;
uni-image {
// width: 152upx;
// height: 88upx;
border-radius: 16upx;
}
}
.con-con {
// display: flex;
flex-direction: column;
font-size: 14px;
color: #444444;
padding-left: 10upx;
margin-top: 3px;
margin-bottom: 6px;
display: -webkit-box;
// white-space:pre-wrap;
overflow: hidden;
// text-overflow:ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
box-sizing: border-box;
}
.con-au {
display: flex;
justify-content: space-between;
// padding-top: 20upx;
image {
border-radius: 50%;
}
/deep/ .item-author{
>view:nth-of-type(1){
display:none
}
>view:nth-of-type(2){
padding-left:0!important;
}
}
}
.im {
width: 50upx;
height: 50upx;
margin-right: 8upx;
}
.tet {
font-size: 12px;
color: #666666;
padding-top: 10upx;
}
.coures-conent{
margin-left: 10px;
// padding: 10upx 10upx 0 15upx;
display: flex;
flex-direction:column;
justify-content: space-between;
flex: 1;
// overflow: hidden;
height: 147upx;
.conent-title{
width: 199px;
font-size: 32upx;
color: #333;
font-weight: bold;
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stu-f {
font-size: 28upx;
color: #FFB30F;
font-weight: 500;
// margin-top: 5upx;
}
.statuy-ren{
font-size: 24upx;
color: #999999;
display: flex;
justify-content: space-between;
align-items: center;
// font-size: 25upx;
.statuy-score{
color: #FFB30F;
font-weight: 500;
}
}
// height: 100%;
}
}
.stu_c {
display:flex;
justify-content: space-between;
.stu_e {
margin-top: 10upx;
display: flex;
font-size: 12px;
color: #666666;
}
.stu_e :nth-child(2) {
margin-left: 40upx;
}
.stu-f {
font-size: 20upx;
color: #FFB30F;
font-weight: 500;
}
}
}
.article {
// height: 264upx;
@@ -1181,20 +1141,6 @@
}
}
}
}
.course-type{
position:absolute;
bottom: 8px;
right: -1px;
text-align: center;
line-height: 15px;
background-color: #7f7f7f;
font-size: 10px;
opacity: 0.7;
color: #FFFFFF;
z-index: 88;
padding: 1px 5px;
border-radius: 10px 0px 0px 10px;
}
.empty{
text-align: center;