hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-10 19:36:47 +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> <template>
<view style="background-color: #fff;"> <view>
<u-toast ref="messager"></u-toast> <u-toast ref="messager"></u-toast>
<!--页面头部--> <!--页面头部-->
<view class="top" style="padding-top: 6px;"> <view class="top" style="padding-top: 6px;">
@@ -46,7 +46,7 @@
</view> </view>
<!--内容列表区域,采用同一个列表，只是根据不同的选项来查询内容的结果不一样--> <!--内容列表区域,采用同一个列表，只是根据不同的选项来查询内容的结果不一样-->
<view v-if="conType == 1"> <view v-if="conType == 1" style="background-color: #fff;">
<!-- <view class="tags" v-if="dataFilter.courseTags.length>0"> <!-- <view class="tags" v-if="dataFilter.courseTags.length>0">
<u-scroll-list :indicator="false"> <u-scroll-list :indicator="false">
<view v-for="(tag, tagIdx) in dataFilter.courseTags" :key="tagIdx" > <view v-for="(tag, tagIdx) in dataFilter.courseTags" :key="tagIdx" >
@@ -97,6 +97,10 @@
<!-- 文章 --> <!-- 文章 -->
<view> <view>
<view v-if="conType == 2"> <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)"> <view class="article" v-for="(item,irs) in articleList" :key="irs" @click="toArticleDetail(item)">
<div class="article-content"> <div class="article-content">
<div class="article-info"> <div class="article-info">
@@ -119,16 +123,10 @@
</view> </view>
</view> </view>
<view v-if="item.coverurl!=''" class="article-img"> <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> </view>
<view style="margin-top: 7upx;">
<interact-bar :data="item"></interact-bar>
</view>
</div> </div>
<!-- <div v-if="item.coverurl!=''" class="article-img">
<image :src="fileUrl+item.coverurl" style="width: 200rpx;height: 150rpx;"></image>
</div> -->
</div> </div>
</view> </view>
</view> </view>
@@ -853,36 +851,55 @@
} }
} }
} }
.con_box { // .con_box {
margin-bottom: 10px; // margin-bottom: 10px;
background-color: #FFFFFF; // background-color: #FFFFFF;
padding: 10px 15px; // padding: 10px 15px;
// margin-top: 10px; // // margin-top: 10px;
.tit { // .tit {
font-size: 32rpx; // font-size: 32rpx;
color: #4c4c4c; // color: #4c4c4c;
font-weight: 35upx; // 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; color: #fff;
} }
} }
.article { .article {
// height: 264upx;
margin-bottom: 20upx; margin-bottom: 20upx;
background-color: #FFFFFF; background-color: #FFFFFF;
padding: 20upx 28upx 10upx 28upx;
padding: 40upx 36upx 46upx 36upx; padding: 40upx 36upx 46upx 36upx;
.article-content{ .article-content{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.article-info{ .article-info{
flex: 1; flex: 1;
.article-title{ .article-title{
font-size: 30rpx; font-size: 36upx;
color: #040404; color: #333333;
font-weight: 610; font-weight: 600;
// letter-spacing: 0.5px; // letter-spacing: 0.5px;
//line-height: 42px; //line-height: 42px;
margin-bottom: 20rpx; margin-bottom: 20rpx;
word-break:break-all; word-break:break-all;
overflow: hidden; overflow: hidden;
@@ -895,10 +912,10 @@
padding-top: 0upx; padding-top: 0upx;
} }
.article-summary{ .article-summary{
word-break:break-all; word-break:break-all;
font-size: 28upx; font-size: 28upx;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
color: #454545; color: #666666;
line-height: 40upx; line-height: 40upx;
// height: 80upx; // height: 80upx;
overflow: hidden; overflow: hidden;