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

首页文章样式

Browse Source
This commit is contained in:
zhaofang
2022-11-08 18:47:47 +08:00
parent 70b14ab53a
commit 07528364d2
1 changed files with 48 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
pages/index/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view style="background-color: #fff;">
<view>
<u-toast ref="messager"></u-toast>
<!--页面头部-->
<view class="top" style="padding-top: 6px;">
@@ -46,7 +46,7 @@
</view>
<!--内容列表区域,采用同一个列表，只是根据不同的选项来查询内容的结果不一样-->
<view v-if="conType == 1">
<view v-if="conType == 1" style="background-color: #fff;">
<!-- <view class="tags" v-if="dataFilter.courseTags.length>0">
<u-scroll-list :indicator="false">
<view v-for="(tag, tagIdx) in dataFilter.courseTags" :key="tagIdx" >
@@ -97,6 +97,10 @@
<!-- 文章 -->
<view>
<view v-if="conType == 2">
<view class="tab-article">
<text class="article-tab-text" :class="{'article-active':tabIndex==1}" @click="clicktab(1)">最热</text>
<text class="article-tab-text" :class="{'article-active':tabIndex==0}" @click="clicktab(0)">最新</text>
</view>
<view class="article" v-for="(item,irs) in articleList" :key="irs" @click="toArticleDetail(item)">
<div class="article-content">
<div class="article-info">
@@ -119,16 +123,10 @@
</view>
</view>
<view v-if="item.coverurl!=''" class="article-img">
<image :src="fileUrl+item.coverurl" style="width: 157rpx;height: 118rpx;border-radius: 15rpx;"></image>
<image :src="fileUrl+item.coverurl" style="width: 184rpx;height: 124rpx;border-radius: 15rpx;"></image>
</view>
</view>
<view style="margin-top: 7upx;">
<interact-bar :data="item"></interact-bar>
</view>
</div>
<!-- <div v-if="item.coverurl!=''" class="article-img">
<image :src="fileUrl+item.coverurl" style="width: 200rpx;height: 150rpx;"></image>
</div> -->
</div>
</view>
</view>
@@ -853,36 +851,55 @@
}
}
}
.con_box {
margin-bottom: 10px;
background-color: #FFFFFF;
padding: 10px 15px;
// margin-top: 10px;
.tit {
font-size: 32rpx;
color: #4c4c4c;
font-weight: 35upx;
}
// .con_box {
// margin-bottom: 10px;
// background-color: #FFFFFF;
// padding: 10px 15px;
// // margin-top: 10px;
// .tit {
// font-size: 32rpx;
// color: #4c4c4c;
// font-weight: 35upx;
// margin-bottom: 10upx;
// }
// }
.tab-article{
padding: 30upx;
padding-bottom: 10upx;
background-color: #fff;
.article-tab-text{
display: inline-block;
font-size: 28upx;
font-weight: 500;
color: #666666;
margin-right: 36upx;
}
.article-active{
width: 88upx;
height: 48upx;
background: linear-gradient(180deg, #FC635C 0%, #EF4844 100%);
border-radius: 8upx;
line-height: 48upx;
text-align: center;
color: #fff;
}
}
.article {
// height: 264upx;
.article {
margin-bottom: 20upx;
background-color: #FFFFFF;
padding: 20upx 28upx 10upx 28upx;
background-color: #FFFFFF;
padding: 40upx 36upx 46upx 36upx;
.article-content{
display: flex;
justify-content: space-between;
.article-info{
flex: 1;
.article-title{
font-size: 30rpx;
color: #040404;
font-weight: 610;
.article-title{
font-size: 36upx;
color: #333333;
font-weight: 600;
// letter-spacing: 0.5px;
//line-height: 42px;
//line-height: 42px;
margin-bottom: 20rpx;
word-break:break-all;
overflow: hidden;
@@ -895,10 +912,10 @@
padding-top: 0upx;
}
.article-summary{
word-break:break-all;
word-break:break-all;
font-size: 28upx;
font-family: Source Han Sans CN;
color: #454545;
font-family: Source Han Sans CN;
color: #666666;
line-height: 40upx;
// height: 80upx;
overflow: hidden;