18 changed files with 1886 additions and 1580 deletions
@ -0,0 +1,108 @@
|
||||
<template> |
||||
<view class="article-list"> |
||||
<view class="article-item" v-for="(item,index) in list" :key="index" @click="toArticleDetail(item.id)"> |
||||
<image :src="item.imageInput" mode="aspectFill"></image> |
||||
<view class="article-content"> |
||||
<view class="article-title line1">{{item.title}}</view> |
||||
<view class="article-desc line1">{{item.synopsis}}</view> |
||||
<view class="author-box acea-row row-between"> |
||||
<view class="acea-row"> |
||||
<view class="author">{{item.author}}</view> |
||||
<view class="time">{{item.addTime.split(' ')[0]}}</view> |
||||
<view>{{item.visit}}人阅读</view> |
||||
</view> |
||||
<view class="tips" |
||||
:class="item.chargeType == 0 ? 'free-bg' : item.chargeType == 1 ? '' : 'jifen'"> |
||||
{{item.chargeType == 0 ? '免费' : item.chargeType == 1 ? '收费' : '积分'}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default{ |
||||
props:{ |
||||
list: { |
||||
type: Array, |
||||
default: [] |
||||
} |
||||
}, |
||||
methods:{ |
||||
toArticleDetail(id){ |
||||
this.$yrouter.push({ |
||||
path: '/pages/knowledge/detail', |
||||
query: { |
||||
id:id, |
||||
}, |
||||
}) |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.article-list{ |
||||
width: 100%; |
||||
margin-top: 20rpx; |
||||
.article-item{ |
||||
width: 100%; |
||||
background: #fff; |
||||
box-sizing: border-box; |
||||
margin-bottom: 52rpx; |
||||
box-shadow: 0px 2rpx 8rpx rgba(0, 0, 0, 0.16); |
||||
image{ |
||||
width: 100%; |
||||
height: 266rpx; |
||||
border-radius: 10rpx; |
||||
margin-bottom: 20rpx; |
||||
} |
||||
.article-content{ |
||||
padding: 28rpx 32rpx; |
||||
} |
||||
.article-title{ |
||||
font-size: 36rpx; |
||||
font-weight: 500; |
||||
color: #333333; |
||||
line-height: 50rpx; |
||||
margin-bottom: 8rpx; |
||||
} |
||||
.article-desc{ |
||||
font-size: 24rpx; |
||||
font-weight: 400; |
||||
color: #999999; |
||||
line-height: 40rpx; |
||||
margin-bottom: 30rpx; |
||||
} |
||||
.author-box{ |
||||
font-size: 24rpx; |
||||
color: #999; |
||||
.author{ |
||||
color: #EA533E; |
||||
} |
||||
.time{ |
||||
margin: 0 12rpx; |
||||
} |
||||
.tips{ |
||||
width: 100rpx; |
||||
font-size: 20rpx; |
||||
color: #FFAD3A; |
||||
height: 34rpx; |
||||
text-align: center; |
||||
line-height: 34rpx; |
||||
background: #fcd391; |
||||
border-radius: 44rpx; |
||||
} |
||||
.free-bg{ |
||||
background: #8FB85B; |
||||
color: #D7FFA4; |
||||
} |
||||
.jifen{ |
||||
background: #AAC8FA; |
||||
color: #5693F9; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,124 @@
|
||||
<template> |
||||
<view class="recommend-list-box acea-row row-between"> |
||||
<view class="recommend-item" v-for="(item,index) in list" :key="index" @click="toCourseDetail(item.id)"> |
||||
<view class="img-box"><image :src="item.coverImg" mode="aspectFill"></image></view> |
||||
<view class="course-content"> |
||||
<view class="course-title line1">{{item.courseName}}</view> |
||||
<view class="course-tips-box acea-row"> |
||||
<view class="course-tip-item blue">{{item.categoryName}}</view> |
||||
</view> |
||||
<!-- <view class="price" v-if="item.level > 2">{{item.level}}级课程</view> |
||||
<view class="price" v-if="item.level == 2">￥{{item.courseCharge}}</view> |
||||
<view class="price colG" v-if="item.chargeType == 0 || item.level == 1">免费</view> --> |
||||
<view class="course-address acea-row row-between-wrapper"> |
||||
<view class="address">{{item.coursePlace}}</view> |
||||
<view class="course-time">{{item.enterStartTime}}-{{item.enterEndTime}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default{ |
||||
props: { |
||||
list: { |
||||
type: Array, |
||||
default: [] |
||||
} |
||||
}, |
||||
data(){ |
||||
return { |
||||
titImg: '../../../static/tit1.png', |
||||
titleWord: '查看更多课程' |
||||
} |
||||
}, |
||||
methods:{ |
||||
toCourseDetail(id){ |
||||
this.$yrouter.push({ |
||||
path: '/pages/course/detail', |
||||
query: { |
||||
id:id, |
||||
}, |
||||
}) |
||||
}, |
||||
seeMoreClick(){ |
||||
uni.switchTab({ |
||||
url: "/pages/course/index" |
||||
}) |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.recommend-list-box{ |
||||
width: 100%; |
||||
.recommend-item{ |
||||
width: 334rpx; |
||||
background: #fff; |
||||
border-radius: 10rpx; |
||||
font-size: 28rpx; |
||||
color: #333; |
||||
margin-right: 22rpx; |
||||
margin-bottom: 22rpx; |
||||
box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.16); |
||||
image{ |
||||
width: 334rpx; |
||||
height: 216rpx; |
||||
border-top-left-radius: 10rpx; |
||||
border-top-right-radius: 10rpx; |
||||
} |
||||
.course-content{ |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
padding:0 10rpx 20rpx; |
||||
} |
||||
.course-title{ |
||||
line-height: 40rpx; |
||||
} |
||||
.course-tips-box{ |
||||
margin: 12rpx 0 24rpx; |
||||
font-size: 24rpx; |
||||
color: #999; |
||||
.course-tip-item{ |
||||
min-width: 60rpx; |
||||
height: 34rpx; |
||||
line-height: 32rpx; |
||||
text-align: center; |
||||
background: #EDEFF8; |
||||
border-radius: 4rpx; |
||||
border: 1px solid #6E85EB; |
||||
padding: 0 6rpx; |
||||
font-size: 22rpx; |
||||
margin-right: 20rpx; |
||||
box-sizing: border-box; |
||||
margin-right: 10rpx; |
||||
} |
||||
.blue{ |
||||
color: #6E85EB; |
||||
background: #EDEFF8; |
||||
border-color: #6E85EB; |
||||
} |
||||
.yellow{ |
||||
color: #F99C10; |
||||
background: #FFEDCC; |
||||
border-color: #F99C10; |
||||
} |
||||
} |
||||
.price{ |
||||
font-size: 32rpx; |
||||
color: #EA533E; |
||||
font-weight: 500; |
||||
margin: 16rpx 0; |
||||
} |
||||
.course-address{ |
||||
font-size: 24rpx; |
||||
color: #999999; |
||||
} |
||||
} |
||||
.recommend-item:nth-child(2n){ |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,54 @@
|
||||
<template> |
||||
<view class="title-box acea-row row-between-wrapper"> |
||||
<view class="title"><image :src="titImg"></image></view> |
||||
<view class="more" @click="seeMoreClick">{{titWord}}</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default{ |
||||
name: 'ListTitleBox', |
||||
props:{ |
||||
// 标题图片 |
||||
titImg:{ |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
// 标题内容 |
||||
titWord: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
// 图片尺寸 |
||||
width: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
height: { |
||||
type: String, |
||||
default: '' |
||||
} |
||||
}, |
||||
|
||||
methods:{ |
||||
seeMoreClick(){ |
||||
this.$emit('seeMoreClick') |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.title-box{ |
||||
width: 100%; |
||||
margin-bottom: 28rpx; |
||||
image{ |
||||
width: 206rpx; |
||||
height: 58rpx; |
||||
} |
||||
.more{ |
||||
font-size: 28rpx; |
||||
color: #999; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,95 @@
|
||||
<template> |
||||
<view class="study-list uni-padding-wrap uni-common-mt"> |
||||
<scroll-view class="scroll-view_H" scroll-x="true"> |
||||
<view class="study-item scroll-view-item_H" v-for="(item,index) in list" :key="index" @click="toStudyDetail(item.id)"> |
||||
<view class="day-box acea-row row-middle"> |
||||
<image src="../../../static/date-icon.png" v-if="index%2 == 0"></image> |
||||
<image src="../../../static/date-icon2.png" v-if="index%2 != 0"></image> |
||||
<text>{{item.clockTimes}}</text> |
||||
</view> |
||||
<view class="study-content"> |
||||
<view class="study-title line1">{{item.listName}}</view> |
||||
<view class="study-time acea-row-nowrap row-between-wrapper"> |
||||
<view>{{item.listStartTime}}开始</view> |
||||
<view>{{item.enterNum}}人已参与</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</scroll-view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default{ |
||||
props:{ |
||||
list: { |
||||
type: Array, |
||||
default: [] |
||||
} |
||||
}, |
||||
methods:{ |
||||
toStudyDetail(id){ |
||||
this.$yrouter.push({ |
||||
path: '/pages/study/detail', |
||||
query: { |
||||
id:id, |
||||
}, |
||||
}) |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.study-list{ |
||||
width: 100%; |
||||
.scroll-view_H{ |
||||
white-space: nowrap; |
||||
width: 100%; |
||||
} |
||||
.study-item{ |
||||
width: 334rpx; |
||||
height: 180rpx; |
||||
display: inline-block; |
||||
background: linear-gradient(143deg, #FDAF97 0%, #ED5E48 100%); |
||||
box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32); |
||||
border-radius: 10rpx; |
||||
margin-right: 20rpx; |
||||
.day-box{ |
||||
color: #E73D21; |
||||
font-size: 48rpx; |
||||
line-height: 58rpx; |
||||
margin-left: 10rpx; |
||||
image{ |
||||
width: 34rpx; |
||||
height: 34rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
} |
||||
.study-content{ |
||||
width: calc(100% - 12rpx); |
||||
background: #fff; |
||||
font-size: 24rpx; |
||||
color: #999; |
||||
box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32); |
||||
border-radius: 10rpx; |
||||
margin: 2rpx auto; |
||||
padding:16rpx 10rpx 10rpx; |
||||
box-sizing: border-box; |
||||
.study-title{ |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
color: #222222; |
||||
line-height: 40rpx; |
||||
margin-bottom: 12rpx; |
||||
} |
||||
} |
||||
} |
||||
.study-item:nth-child(2n){ |
||||
background: linear-gradient(143deg, #C4DBFF 0%, #7FAAF2 100%); |
||||
.day-box{ |
||||
color: #557AB3; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
Loading…
Reference in new issue