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

首页推荐页面

Browse Source
This commit is contained in:
zhaofang
2022-11-08 16:59:08 +08:00
parent ba340fe9b3
commit 5683042cb3
25 changed files with 363 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

331
components/recommend-index/recommend-index.vue Normal file
View File

@@ -0,0 +1,331 @@
<template>
<view class="recommend-index">
<view class="index-banner">
<image style="width: 100%;height:301upx" src="../../static/images/banner-index.png" mode=""></image>
</view>
<view class="course-re">
<view class="recommend-index-title">
<text class="title-line"></text>
热门课程推荐
<text class="tetle-text">查看更多</text>
</view>
<view class="course-re-list">
<view class="course-re-index" v-for="course in 6">
<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>
4.9分</text>
<image style="width: 100%;height:100%;border-radius: 16upx;" src="../../static/images/course.png" mode=""></image>
</view>
<view class="course-title">
零基础后期课程
</view>
<view class="course-text">
京小方 | 800+人已学
</view>
<view class="course-type">
<text class="type-index">通用力</text>
<text class="type-index">产品经理</text>
</view>
</view>
</view>
</view>
<view style="margin:30upx 0 60upx 0">
<image style="width: 100%;height:220upx" src="../../static/images/banner-tow.png" mode=""></image>
</view>
<view class="ranking-list">
<view class="recommend-index-title">
<text class="title-line"></text>
排行榜
</view>
<view class="list-box">
<view class="list-box-index">
<view class="list-box-title">
课程排行榜
</view>
<view class="list-box-text" v-for="(list,index) in 3">
<image v-if="index == 0" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue01.png" mode=""></image>
<image v-if="index == 1" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue02.png" mode=""></image>
<image v-if="index == 2" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue03.png" mode=""></image>
<text>BOE京东方位列世界知识产权组织202…</text>
</view>
</view>
<view class="list-box-index">
<view class="list-box-title">
热门文章排行榜
</view>
<view class="list-box-text" v-for="(list,index) in 3">
<image v-if="index == 0" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue01.png" mode=""></image>
<image v-if="index == 1" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue02.png" mode=""></image>
<image v-if="index == 2" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue03.png" mode=""></image>
<text>BOE京东方位列世界知识产权组织202…</text>
</view>
</view>
<view class="list-box-index">
<view class="list-box-title">
热门问答排行榜
</view>
<view class="list-box-text" v-for="(list,index) in 3">
<image v-if="index == 0" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue01.png" mode=""></image>
<image v-if="index == 1" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue02.png" mode=""></image>
<image v-if="index == 2" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue03.png" mode=""></image>
<text>BOE京东方位列世界知识产权组织202…</text>
</view>
</view>
</view>
</view>
<view class="articl-recommend">
<view class="recommend-index-title">
<text class="title-line"></text>
热门文章推荐
<text class="tetle-text">查看更多</text>
</view>
<view class="articl-box">
<view class="articl-box-index" v-for="ar in 4">
<image style="width: 560upx;height: 314upx;border-radius: 24upx 24upx 0 0;" src="../../static/images/course.png" mode=""></image>
<view class="box-index">
<view class="box-index-title">
这里是标题字节显示效果图片放大至120，卡片浮影加深展示最多字…
</view>
<view class="box-index-authr">
<image style="width: 64upx;height:64upx;vertical-align: middle;margin-right: 24upx;" src="../../static/images/woman.png" mode=""></image>
学习小助手
</view>
</view>
</view>
</view>
</view>
<view class="qa-recommend">
<view class="recommend-index-title">
<text class="title-line"></text>
热门问答推荐
<text class="tetle-text">查看更多</text>
</view>
<view class="qa-box" style="display: flex;overflow-x: auto;">
<view class="qa-box-index" v-for="ar in 4">
<view class="box-index-title">
大家最近看了哪些好书，可以推荐一下吗？
</view>
<view class="box-index-authr">
<image style="width: 64upx;height:64upx;vertical-align: middle;margin-right: 24upx;" src="../../static/images/woman.png" mode=""></image>
<text style="font-size: 28upx;color: #39424C;">学习小助手</text>
<text style="font-size: 28upx;color: #6E7B84;">「最热答案」</text>
</view>
<view class="box-index-text">
智慧物联是利用互联网进行的运营方式,还是其他用互联网进行的运，2021年…
</view>
</view>
</view>
</view>
<u-divider text="没有更多了"></u-divider>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
.recommend-index{
background-color: #fff;
padding:8upx 30upx;
padding-bottom: 100upx;
.recommend-index-title{
font-size: 36upx;
font-weight: 600;
height: 40upx;
line-height: 40upx;
color: #04243C;
margin-top: 50upx;
.title-line{
display: inline-block;
width: 8upx;
height: 28upx;
background: #387DF7;
border-radius: 8upx;
margin-right: 12upx;
}
.tetle-text{
float: right;
font-size: 24upx;
color: #6E7B84;
font-weight: 400;
}
}
.course-re-list{
display: flex;
flex-wrap: wrap;
.course-re-index{
padding: 15upx 0;
&:nth-child(2n-1){
margin-right: 20upx;
}
.course-img{
width: 335upx;
height: 188upx;
border-radius: 16upx;
position: relative;
.img-score{
display: inline-block;
padding: 7upx 15upx;
box-sizing: border-box;
position: absolute;
right:0;
bottom: 0;
color: #FFFFFF;
font-size: 28upx;
z-index: 99999;
width: 136upx;
height: 44upx;
// background: ;
background: rgba($color: #181818, $alpha: 0.2);
border-radius: 24upx 0px 0px 0px;
backdrop-filter: blur(20px);
}
}
.course-title{
margin-top: 20upx;
font-size: 28upx;
color: #39424C;
}
.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: 2upx 6upx;
}
}
}
}
.ranking-list{
.list-box{
// width: 1720upx;
margin-top: 30upx;
display: flex;
overflow-x: auto;
}
.list-box-index{
width: 560upx;
min-width: 560upx;
height: 332upx;
box-sizing: border-box;
border-radius: 24upx;
border: 2upx solid #E4EAEF;
padding: 34upx 30upx;
background: url(../../static/images/ranking/qa-box.png) no-repeat 100% / 100%;
background-position: 0 0;
margin-right: 20upx;
.list-box-title{
font-size: 32upx;
font-weight: 600;
color: #04243C;
margin-bottom: 4upx;
}
.list-box-text{
margin-top: 26upx;
font-size: 28upx;
color: #39424C;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;-webkit-line-clamp: 1;
word-break:break-all;
}
}
}
.articl-recommend{
.articl-box{
margin-top: 28upx;
display: flex;
overflow-x: auto;
.articl-box-index{
width: 560upx;
border-radius: 24upx;
border: 2upx solid #E4EAEF;
margin-right: 20upx;
.box-index{
padding: 30upx;
.box-index-title{
font-size: 32upx;
font-weight: 600;
color: #39424C;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;-webkit-line-clamp: 2;
word-break:break-all;
}
.box-index-authr{
margin-top: 30upx;
font-size: 28upx;
color: #6E7B84;
}
}
}
}
}
.qa-recommend{
.qa-box{
margin-top: 32upx;
margin-bottom: 60upx;
.qa-box-index{
background: url(../../static/images/ranking/qa-bg.png) no-repeat 100% / 100%;
background-position: 0 0;
margin-right: 20upx;
width: 560upx;
min-width: 560upx;
border: 2upx solid #E4EAEF;
border-radius: 24upx;
padding: 30upx;
box-sizing: border-box;
.box-index-title{
font-size: 32upx;
font-weight: 600;
color: #02233C;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;-webkit-line-clamp: 2;
word-break:break-all;
}
.box-index-authr{
margin-top: 30upx;
margin-bottom: 20upx;
}
.box-index-text{
font-size: 28upx;
color: #6E7B84;
margin-bottom: 10upx;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;-webkit-line-clamp: 2;
word-break:break-all;
}
}
}
}
}
</style>

4
pages.json
View File

@@ -72,9 +72,7 @@
{"path" : "pages/login/nickName","style" : {"navigationBarTitleText": "修改昵称"}},
{"path" : "pages/login/newBirt","style" : {"navigationBarTitleText": "修改生日"}},
{"path" : "pages/login/indLabels","style" : {"navigationBarTitleText": "修改个人标签"}},
{"path" : "pages/study/audioTest","style" : {"navigationBarTitleText": "音频测试"}}
{"path" : "pages/study/audioTest","style" : {"navigationBarTitleText": "音频测试"}}
],
"globalStyle": {
"navigationBarTextStyle": "black",

55
pages/index/index.vue
View File

@@ -4,18 +4,18 @@
<!--页面头部-->
<view class="top" style="padding-top: 6px;">
<view class="top-bar">
<view style="position: relative" @click="toMessage()" >
<!-- <view style="position: relative" @click="toMessage()" >
<view v-if="msgNum>0" style="position: absolute;top:12px;right: 16px;z-index: 999;">
<u-badge :isDot="true" :offset="[30,30]" type="error"></u-badge>
</view>
<u-icon class="top-bar-icon" :size="26" name="bell"></u-icon>
</view>
</view> -->
<view class="top-bar-center">
<u-search
placeholder="请输入关键字"
placeholder="搜索"
:clearabled="true"
:showAction="false"
shape="round"
:height="36"
@focus="toSearch()"
bgColor="#F7F7F7">
</u-search>
@@ -37,9 +37,12 @@
</view>
</view>
</view>
<view style="line-height: 40upx;height: 40upx; padding-top: 14upx;font-size: 16px; ">
<!-- <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> -->
</view>
<view class="" v-show="conType == 0">
<recommend-index></recommend-index>
</view>
<!--内容列表区域,采用同一个列表，只是根据不同的选项来查询内容的结果不一样-->
@@ -186,7 +189,7 @@
</view>
</view>
</view>
<view >
<view v-show="conType != 0">
<uni-load-more :status="loadStatus"></uni-load-more>
</view>
<u-overlay :show="signInShow">
@@ -229,7 +232,7 @@
pageSize:20,//统一每页多少条
converToScore:toScore,
conTypeList: [
//{type: 0,con: '全部'},
{type: 0,con: '推荐'},
{type: 1,con: '课程'},
{type: 2,con: '文章'},
{type: 4,con: '问答'},
@@ -612,7 +615,7 @@
this.changeList();
},
changeConType(item) {
this.conType = item.type;
this.conType = item.type;
this.changeList();
},
loadCouserTeacher(list,ids){ //临时解决方案，单独的查询课程教师
@@ -1055,7 +1058,8 @@
/deep/ .top-bar-center {
display: flex;
font-size: 35upx;
flex: 1;
flex: 1;
padding: 0 30upx;
// margin-right: 15px;
margin-top: 18rpx;
.top-bar-tab {
@@ -1081,40 +1085,43 @@
position: relative;
justify-content: space-between;
height: 50upx;
line-height: 50upx;
line-height: 50upx;
padding: 20upx 0upx;
background-color: #fff;
background-color: #fff;
.con-tab{
display: flex;
display: flex;
padding: 5upx 40upx;
.con-tab-item {
font-size: 32upx;
padding: 0upx 0upx;
margin: 0 20rpx;
color: #666666;
text-align: center;
margin: 0 20rpx;
color: #0D233A;
text-align: center;
font-weight: 500;
// height: 45px;
// line-height: 45px;
// height: 33px;
box-sizing: border-box;
position: relative;
}
.active {
.active {
font-weight: 600;
padding-bottom: 5rpx;
font-size: 37rpx;
padding-bottom: 5rpx;
font-size: 44upx;
height: 80upx;
box-sizing: border-box;
color: #666666;
box-sizing: border-box;
color: #387DF7;
// border-bottom: 2px solid #007AFF;
}
.border-dw{
height: 2px;
.border-dw{
height: 6upx;
width: 32upx;
position: absolute;
// position: relative;
left: 25%;
top: 86%;
top: 86%;
background-color: #387DF7;
border-radius: 4upx;
}
}

BIN
static/images/banner-index.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 522 KiB

BIN
static/images/banner-tow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 766 KiB

BIN
static/images/icon/index-start.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
static/images/ranking/list-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
static/images/ranking/list-or.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
static/images/ranking/list-pink.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
static/images/ranking/list02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
static/images/ranking/list03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
static/images/ranking/listblue01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/images/ranking/listblue02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/images/ranking/listblue03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
static/images/ranking/listred01 .png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 957 B

BIN
static/images/ranking/listred02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/images/ranking/listred03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
static/images/ranking/qa-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

BIN
static/images/ranking/qa-box.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
static/images/tabbar/home0.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
static/images/tabbar/home1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 802 B

BIN
static/images/tabbar/my0.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 806 B

BIN
static/images/tabbar/my1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 673 B

BIN
static/images/tabbar/new0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
static/images/tabbar/study0.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB