You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
525 lines
11 KiB
525 lines
11 KiB
<template> |
|
<view class="information-box"> |
|
<skeleton v-if="showSkeleton" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton> |
|
<view class="search-box acea-row row-middle skeleton-rect"> |
|
<image src="../../static/images/search-icon.png" mode=""></image> |
|
<input type="text" value="" placeholder="请输入相关关键词" /> |
|
<view class="search acea-row row-center-wrapper">搜一下</view> |
|
</view> |
|
<swiper class="vote-box skeleton-rect"> |
|
<swiper-item v-for="(item,index) in hotList" :key="index" @click="toDetail(item.id)"> |
|
<image :src="item.imageInput" mode="aspectFill" class="vote-img"></image> |
|
<view class="news"> |
|
<view class="news-title-h line1">{{item.title}}</view> |
|
<view class="news-title-s line1">{{item.createTime}}</view> |
|
</view> |
|
</swiper-item> |
|
</swiper> |
|
<scroll-view class="scroll-view_N skeleton-rect" scroll-x="true"> |
|
<view class="rotaion-box" @click="toCategoryList(item.id)" v-for="(item,index) in categoryList" :key="index"> |
|
<view class="acea-row rotaion row-center"> |
|
<image :src="item.img" mode="aspectFill"></image> |
|
<view class="rotaion-h">{{item.name}}</view> |
|
<view class="rotaion-s">{{item.description}}</view> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
<!-- 最新资讯 --> |
|
<view class="newInfo-box skeleton-rect" v-if="newList.length > 0"> |
|
<image src="../../static/images/newInfo.png" mode="" class="newInfo-title-img"></image> |
|
<view class="newInfo"> |
|
<view class="modular acea-row row-between" v-for="(item,index) in newList" :key="index" |
|
@click="toDetail(item.id)"> |
|
<view class="acea-row title"> |
|
<view class="modular-h line2">{{item.title}}</view> |
|
<view class="title-l acea-row row-between"> |
|
<view>{{item.author}}</view> |
|
<view>{{item.createTime.split(' ')[0]}}</view> |
|
<view class="acea-row row-middle">{{item.visit}} |
|
<image src="../../static/images/eye.png" mode="aspectFill"></image> |
|
</view> |
|
</view> |
|
</view> |
|
<image :src="item.imageInput" mode="aspectFill"></image> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- 热点精选 --> |
|
<view class="hotspot-box skeleton-rect"> |
|
<image src="../../static/images/user/hotspot.png" mode="" class="title-h-img"></image> |
|
<scroll-view class="scroll-view_H acea-row" scroll-x="true"> |
|
<view class="slide-box" v-for="(item,index) in hotList" :key="index" @click="toDetail(item.id)"> |
|
<image :src="item.imageInput" mode="aspectFill"></image> |
|
<view class="hotspot-con"> |
|
<view class="hotspot-icon">热点</view> |
|
<view class="hotspot-title-h line2">{{item.title}}</view> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
</view> |
|
<!-- 值得关注 --> |
|
<view class="follow-box skeleton-rect"> |
|
<image src="../../static/images/follow-title.png" mode="" class="title-h-img"></image> |
|
<view class="follow-con" v-for="(item,index) in concernList" :key="index" @click="toDetail(item.id)"> |
|
<view class="follow-top acea-row row-between"> |
|
<view class="acea-row follow-title"> |
|
<view class="follow-h line2">{{item.title}}</view> |
|
<view class="follow-title-l acea-row row-between"> |
|
<view>{{item.author}}</view> |
|
<view>{{item.createTime.split(' ')[0]}}</view> |
|
<view class="acea-row row-middle"> |
|
<text>{{item.visit}}</text> |
|
<image src="../../static/images/eye.png" mode="aspectFill"></image> |
|
</view> |
|
</view> |
|
</view> |
|
<image :src="item.imageInput" mode="aspectFill"></image> |
|
</view> |
|
<view class="follow-bottom acea-row row-middle"> |
|
<image :src="item.imageInput" mode=""></image> |
|
<view class="follow-title-b acea-row row-column-between"> |
|
<view class="title-s line1">{{item.author}}</view> |
|
<view class="title-con line1">{{item.title}}</view> |
|
</view> |
|
<!-- <view class="follow-btn">关注+</view> --> |
|
</view> |
|
</view> |
|
<!-- <LoadStatus :loadStatus="loadstatus"></LoadStatus> --> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { getArticle } from "@/api/home"; |
|
import { articleIndex } from "@/api/article" |
|
import LoadStatus from "@/components/LoadStatus" |
|
import skeleton from '@/components/quick-skeleton/quick-skeleton' |
|
export default { |
|
components:{ |
|
LoadStatus, |
|
skeleton |
|
}, |
|
data() { |
|
return { |
|
categoryList: [], |
|
newList: [], |
|
hotList: [], |
|
concernList: [], |
|
articleList: [], |
|
page: 0, |
|
size: 10, |
|
loadstatus: '上拉加载更多...', |
|
showSkeleton: true |
|
} |
|
}, |
|
mounted() { |
|
// this.getArticleList() |
|
this.getArticleIndex() |
|
}, |
|
onReachBottom() { |
|
this.page = this.page + 1 |
|
// this.getArticleList() |
|
}, |
|
computed:{ |
|
|
|
}, |
|
onPullDownRefresh() { |
|
this.getArticleIndex() |
|
}, |
|
onReady: function() { |
|
const that = this; |
|
that.$refs.skeleton.attachedAction(); |
|
that.$refs.skeleton.readyAction(); |
|
}, |
|
methods: { |
|
getArticleIndex(){ |
|
uni.showLoading({ |
|
title: '正在加载中...', |
|
}) |
|
articleIndex().then((res)=>{ |
|
this.categoryList = res.data.categoryList |
|
this.concernList = res.data.concernList |
|
this.hotList = res.data.hotList |
|
this.newList = res.data.newList |
|
uni.hideLoading() |
|
uni.stopPullDownRefresh() |
|
this.showSkeleton = false |
|
}) |
|
}, |
|
getArticleList() { |
|
this.loadstatus = '正在加载中...' |
|
getArticle({ |
|
page: this.page, |
|
size: this.size, |
|
isHot: 0 |
|
}).then((res) => { |
|
if(res.data.content.length < this.size){ |
|
this.loadstatus = '没有更多了...' |
|
} |
|
this.articleList = this.articleList.concat(res.data.content) |
|
}) |
|
}, |
|
toDetail(id) { |
|
this.$yrouter.push({ |
|
path: '/pages/life/articleDetail/index', |
|
query: { |
|
id: id |
|
} |
|
}) |
|
}, |
|
toCategoryList(id){ |
|
uni.navigateTo({ |
|
url: '/pages/life/articleList/index?active=' + id |
|
}); |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less"> |
|
.information-box { |
|
width: 100%; |
|
height: auto; |
|
margin-bottom: 50rpx; |
|
position: relative; |
|
} |
|
|
|
.search-box { |
|
width: 670rpx; |
|
height: 68rpx; |
|
border: 2rpx solid #FF5100; |
|
border-radius: 8rpx; |
|
margin: 24rpx auto 52rpx; |
|
font-size: 28rpx; |
|
position: relative; |
|
} |
|
|
|
.search-box image { |
|
width: 35rpx; |
|
height: 35rpx; |
|
margin: 0 29rpx 0 52rpx; |
|
} |
|
|
|
.search { |
|
position: absolute; |
|
right: -2rpx; |
|
width: 132rpx; |
|
height: 68rpx; |
|
background: linear-gradient(39deg, #FF5100 0%, #FFA074 100%); |
|
border-radius: 8rpx; |
|
color: #fff; |
|
|
|
} |
|
|
|
.vote-box { |
|
width: 670rpx; |
|
height: 358rpx; |
|
box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16); |
|
border-radius: 16rpx; |
|
margin: 0 auto; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.vote-img { |
|
position: absolute; |
|
width: 670rpx; |
|
height: 358rpx; |
|
} |
|
|
|
.news { |
|
width: 590rpx; |
|
height: 94rpx; |
|
background: rgba(0, 0, 0, 0.2); |
|
border-radius: 14rpx; |
|
position: absolute; |
|
bottom: 6rpx; |
|
left: 50%; |
|
margin-left: -295rpx; |
|
color: #fff; |
|
padding: 14rpx; |
|
} |
|
|
|
.news-title-h { |
|
font-size: 28rpx; |
|
} |
|
|
|
.news-title-s { |
|
font-size: 20rpx; |
|
} |
|
|
|
/* .vote { |
|
width: 100%; |
|
height: 110rpx; |
|
position: absolute; |
|
bottom: 0; |
|
border: 1rpx solid #000000; |
|
} */ |
|
|
|
.scroll-view_N { |
|
width: 100%; |
|
height: 238rpx; |
|
margin: 30rpx 0rpx 34rpx 0rpx; |
|
white-space: nowrap; |
|
} |
|
|
|
.rotaion-box { |
|
width: 168rpx; |
|
height: 208rpx; |
|
background: #FFFFFF; |
|
box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16); |
|
border-radius: 16rpx; |
|
margin: 10rpx 32rpx 10rpx 0rpx; |
|
display: inline-block; |
|
} |
|
|
|
.rotaion-box:nth-child(1) { |
|
margin-left: 40rpx; |
|
} |
|
|
|
.rotaion { |
|
width: 100%; |
|
height: 208rpx; |
|
padding: 36rpx 0 16rpx 0; |
|
} |
|
|
|
.rotaion image { |
|
width: 80rpx; |
|
height: 80rpx; |
|
border-radius: 50%; |
|
} |
|
|
|
.rotaion-h { |
|
height: 34rpx; |
|
font-size: 24rpx; |
|
color: #333333; |
|
font-weight: 600; |
|
} |
|
|
|
.rotaion-s { |
|
height: 26rpx; |
|
font-size: 18rpx; |
|
color: #9D9D9D; |
|
} |
|
|
|
/* 最新资讯 */ |
|
.newInfo-box { |
|
overflow: hidden; |
|
} |
|
|
|
.newInfo-title-img { |
|
width: 160rpx; |
|
height: 52rpx; |
|
margin: 0 0 18rpx 38rpx; |
|
} |
|
|
|
.newInfo { |
|
width: 100%; |
|
height: 528rpx; |
|
overflow-y: scroll; |
|
border-top: 2rpx solid #EFEFEF; |
|
} |
|
|
|
.modular { |
|
width: 100%; |
|
height: 176rpx; |
|
border-bottom: 2rpx solid #EFEFEF; |
|
padding: 20rpx 40rpx 22rpx 40rpx; |
|
} |
|
|
|
.modular-h { |
|
width: 400rpx; |
|
height: 80rpx; |
|
font-size: 28rpx; |
|
color: #4A4A4A; |
|
font-weight: 600; |
|
} |
|
|
|
.modular image { |
|
width: 204rpx; |
|
height: 134rpx; |
|
border-radius: 8px; |
|
} |
|
|
|
.title { |
|
width: 400rpx; |
|
height: 134rpx; |
|
} |
|
|
|
.title-l { |
|
width: 400rpx; |
|
height: 34rpx; |
|
font-size: 24rpx; |
|
color: #707070; |
|
} |
|
|
|
.title-l image { |
|
width: 24rpx; |
|
height: 24rpx; |
|
margin-left: 5rpx; |
|
} |
|
|
|
/* 热点精选 */ |
|
.hotspot-box { |
|
width: 100%; |
|
height: 456rpx; |
|
} |
|
|
|
.title-h-img { |
|
width: 162rpx; |
|
height: 62rpx; |
|
margin: 32rpx 0 5rpx 40rpx; |
|
} |
|
|
|
.scroll-view_H { |
|
width: 100%; |
|
height: 344rpx; |
|
white-space: nowrap; |
|
} |
|
|
|
.scroll-view_H image { |
|
width: 670rpx; |
|
height: 344rpx; |
|
border-radius: 10rpx; |
|
position: absolute; |
|
} |
|
|
|
.slide-box { |
|
position: relative; |
|
width: 670rpx; |
|
height: 100%; |
|
display: inline-block; |
|
margin-right: 16rpx; |
|
} |
|
|
|
.hotspot-con { |
|
width: 670rpx; |
|
height: 94rpx; |
|
background: rgba(0, 0, 0, 0.2); |
|
border-radius: 0px 0px 8rpx 8rpx; |
|
padding: 8rpx 32rpx; |
|
color: #fff; |
|
position: absolute; |
|
bottom: 0; |
|
} |
|
|
|
.hotspot-icon { |
|
width: 72rpx; |
|
height: 32rpx; |
|
background: #FE3737; |
|
border-radius: 12rpx 2rpx 12rpx 0; |
|
position: absolute; |
|
top:-46rpx; |
|
font-size: 22rpx; |
|
color: #fff; |
|
text-align: center; |
|
margin-bottom: 16rpx; |
|
} |
|
|
|
.hotspot-title-h { |
|
max-width: 588rpx; |
|
max-height: 80rpx; |
|
font-size: 28rpx; |
|
color: #FFFFFF; |
|
white-space: pre-wrap; |
|
} |
|
|
|
/* 值得关注 */ |
|
.follow-box { |
|
width: 100%; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.follow-con { |
|
width: 670rpx; |
|
height: 250rpx; |
|
margin: 0 auto; |
|
background: #FFFFFF; |
|
box-shadow: 0rpx 4rpx 10rpx rgba(0, 0, 0, 0.16); |
|
border-radius: 16rpx; |
|
margin-bottom: 32rpx; |
|
} |
|
|
|
.follow-top { |
|
width: 100%; |
|
height: 170rpx; |
|
padding: 20rpx 20rpx 26rpx 20rpx; |
|
border-bottom: 1rpx solid #DCDCDC; |
|
} |
|
|
|
.follow-top image { |
|
width: 232rpx; |
|
height: 130rpx; |
|
border-radius: 16rpx; |
|
} |
|
|
|
.follow-title { |
|
width: 370rpx; |
|
height: 100%; |
|
} |
|
|
|
.follow-h { |
|
width: 100%; |
|
height: 80rpx; |
|
font-size: 28rpx; |
|
color: #000000; |
|
font-weight: 600; |
|
} |
|
|
|
.follow-title-l { |
|
width: 290rpx; |
|
height: 28rpx; |
|
font-size: 20rpx; |
|
color: #707070; |
|
} |
|
|
|
.follow-title-l image { |
|
width: 24rpx; |
|
height: 24rpx; |
|
margin-left: 5rpx; |
|
} |
|
|
|
.follow-bottom { |
|
width: 100%; |
|
height: 80rpx; |
|
padding: 14rpx 20rpx 14rpx 20rpx; |
|
} |
|
|
|
.follow-bottom image { |
|
width: 52rpx; |
|
height: 52rpx; |
|
border-radius: 50%; |
|
margin-right: 8rpx; |
|
} |
|
|
|
.follow-title-b { |
|
width: 230rpx; |
|
height: 52rpx; |
|
.title-s { |
|
height: 25rpx; |
|
line-height: 25rpx; |
|
font-size: 20rpx; |
|
font-weight: 600; |
|
} |
|
.title-con { |
|
height: 20rpx; |
|
font-size: 16rpx; |
|
color: #707070; |
|
} |
|
} |
|
|
|
|
|
|
|
.follow-btn { |
|
width: 136rpx; |
|
height: 40rpx; |
|
background: linear-gradient(39deg, #FF5A0D 0%, #FFAC85 100%); |
|
border-radius: 26rpx; |
|
font-size: 28rpx; |
|
color: #fff; |
|
text-align: center; |
|
position: absolute; |
|
right: 60rpx; |
|
} |
|
</style>
|
|
|