mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-06 17:36:45 +08:00
332 lines
9.6 KiB
Vue
332 lines
9.6 KiB
Vue
<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>
|