hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-06 09:26: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

58
components/course-image/course-image.vue
View File

@@ -7,10 +7,10 @@
mode="aspectFit "
:src="imageUrl"
@error="imageError"></image>
<text v-if="textShow && isTextShow == 1" class="text mid" style="color: #fff !important;" v-html="name"></text>
<!-- <text v-if="textShow && isTextShow == 1" class="text mid" style="color: #fff !important;" v-html="name"></text>
<text v-if="textShow && isTextShow ==2" class="text mini" style="color: #fff !important;" v-html="name"></text>
<text v-if="textShow && isTextShow ==3" class="text max" style="color: #fff !important;" v-html="name"></text>
<!-- <text v-if="textShow && isTextShow ==4" class="text end" style="color: #fff !important;" v-html="name"></text> -->
<text v-if="textShow && isTextShow ==3" class="text max" style="color: #fff !important;" v-html="name"></text> -->
<text class="text" style="color: #fff !important;" v-html="name"></text>
</view>
</template>
@@ -118,31 +118,35 @@
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1em;
top: 36%;
left: 7%;
-webkit-line-clamp: 2;
}
.mid{
font-size: 16upx;
top: 36%;
left: 7%;
-webkit-line-clamp: 1;
}
.mini{
font-size: 12upx;
top: 36%;
left: 7%;
-webkit-line-clamp: 2;
}
.max{
font-size: 38upx;
top: 36%;
left: 7%;
-webkit-line-clamp: 3;
}
.end{
font-size: 12upx;
top: 36%;
left: 7%;
-webkit-line-clamp: 2;
}
// .mid{
// font-size: 3em;
// top: 36%;
// left: 7%;
// -webkit-line-clamp: 1;
// }
// .mini{
// font-size: 3em;
// top: 36%;
// left: 7%;
// -webkit-line-clamp: 2;
// }
// .max{
// font-size: 3em;
// top: 36%;
// left: 7%;
// -webkit-line-clamp: 3;
// }
// .end{
// font-size: 3em;
// top: 36%;
// left: 7%;
// -webkit-line-clamp: 2;
// }
}
</style>

6
components/data-filter/data-filter.vue
View File

@@ -1,8 +1,8 @@
<template>
<view>
<view @click="showFilter()" style="line-height: 34upx;height: 35upx;padding-right: 20upx;font-size: 32upx;">
<text style="color: #666;font-size: 30rpx;">筛选</text>
<image src="../../static/images/filter.png" style="width: 38upx;height: 38upx;vertical-align: middle;"></image>
<view @click="showFilter()" style="line-height: 34upx;height: 35upx;padding-right: 40upx;font-size: 32upx;">
<!-- <text style="color: #666;font-size: 30rpx;">筛选</text> -->
<image src="../../static/images/filter.png" style="width: 36upx;height: 36upx;vertical-align: middle;"></image>
</view>
<u-popup :show="filterShow" mode="right" @close="closeFilter" :safeAreaInsetTop="true" :closeable="true">
<view :style="`width: ${filterWidth};padding-top: 5px;`" style="height: 100vh; overflow: auto;">

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;

BIN
static/images/filter.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 820 B

After

Width:  |  Height:  |  Size: 249 B

1
store/getters.js
View File

@@ -4,5 +4,6 @@ const getters = {
studyTab: state => state.study.studyTab,
userMsg:state => state.user.msg,
isOneStady:state => state.user.isOneStady,
sysTypeMap:state => state.sysType.sysTypeMap,
}
export default getters

4
store/index.js
View File

@@ -4,6 +4,7 @@ import user from './modules/user'
import resource from './modules/resource'
import study from './modules/study'
import getters from './getters'
import sysType from './modules/sysType'
Vue.use(Vuex)
@@ -12,7 +13,8 @@ const store = new Vuex.Store({
modules: {
user,
resource,
study
study,
sysType
},
getters
})

94
store/modules/sysType.js Normal file
View File

@@ -0,0 +1,94 @@
import {getToken} from '@/utils/token'
import apiType from '../../api/modules/type.js'
const state={
sysTypeTree: [], //内容类型
sysTypeMap:null
}
const mutations={
setSysTypeTree: (state, tree) => {
state.sysTypeTree = tree
},
setSysTypeMap: (state, map) => {
state.sysTypeMap = map
},
}
const actions={
getSysTypeTree({commit}) {
return new Promise((resolve,reject)=>{
if(state.sysTypeTree.length>0){
resolve(state.sysTypeTree);
}else{
let hasData = sessionStorage.getItem('sysTypeTree');
if(hasData){
let treeData = JSON.parse(hasData);
commit('setSysTypeTree', treeData);
resolve(treeData);
}else{
apiType.tree(1).then(res=>{
if(res.status === 200) {
sessionStorage.setItem('sysTypeTree',JSON.stringify(res.result));
commit('setSysTypeTree', res.result);
//转化为map放到状态中
let map=new Map();
res.result.forEach(item=>{
map.set(item.id, item.name);
if(item.children && item.children!=''){
item.children.forEach(child=>{
map.set(child.id, child.name);
if(child.children && child.children!=''){
child.children.forEach(last=>{
map.set(last.id, last.name);
})
}
})
}
});
commit('setSysTypeMap', map);
resolve(res.result)
} else {
reject('资源归属获取失败！');
}
})
}
}
});
},
loadSysTypes(context){
if(state.sysTypeMap==null){
let hasData = sessionStorage.getItem('sysTypeMap');
if(hasData){
hasData=JSON.parse(hasData);
}
if(hasData && hasData.length>10){
let map=new Map();
hasData.forEach(item=>{
map.set(item.id, item.name);
});
context.commit('setSysTypeMap',map);
}else{
apiType.list(1,'').then(res=>{
if(res.status === 200) {
let map=new Map();
res.result.forEach(item=>{
map.set(item.id, item.name);
});
//console.log(map,map);
sessionStorage.setItem('sysTypeMap',JSON.stringify(res.result));
context.commit('setSysTypeMap', map);
} else {
console.log('内容分类获取失败！');
}
});
}
}
}
}
export default {
namespaced: true,
state,
mutations,
actions
}