xingmingyi_applet/pages/index/indHot.vue

<template>
	<view class="pageCon">
		<navigator open-type="navigateBack" class="iconBox"><u-icon name="arrow-left" color="#333" size="22" class="rightBox"></u-icon></navigator>
		<view class="top dffd">
			<view class="topLeft">Top {{ newsInfo.num }}</view>
			<view class="title blod dffs">
				{{ newsInfo.name }}
				<image src="/static/img/pro/ordlist.png" mode=""></image>
			</view>
		</view>
		<view class="conwarp">
			<view class="gdHead dffs">
				<image src="/static/img/pro/tips.png" mode=""></image>
				<view class=" fontssm flex1">已近三天阅读、下载、分享数据为准</view>
				<view class="textgrey fontssm">共{{ newsInfo.count }}套｜每天更新</view>
			</view>
			<auth-list :flag="type" :list="newsInfo.data"></auth-list>
		</view>
		<image class="imgbg" src="/static/img/pro/hotbgzl.png" mode=""></image>
	</view>
</template>

<script>
import authList from './components/knowAuthList.vue';
export default {
	components: {
		authList
	},
	data() {
		return {
			id: '',
			type: 1, //1文档 2视频
			newsInfo: {
				data: []
			}
		};
	},
	onPullDownRefresh() {
		setTimeout(res => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onLoad(opt) {
		this.id = opt.id;
		this.type = opt.type;
		this.getInfoList();
	},
	methods: {
		getInfoList() {
			this.$api
				.request('hotrank/rank_list', {
					id: this.id
				})
				.then(data => {
					if (data.code == 200) {
						this.newsInfo = data.data[0];
					} else {
						this.$api.toast(data.msg);
					}
				});
		},
		toNext(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.pageCon {
	.iconBox {
		width: 40rpx;
		height: 40rpx;
		position: fixed;
		top: 80rpx;
		left: 30rpx;
		z-index: 99999;
	}
	.imgbg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.top {
		height: 430rpx;
		padding: 0 30rpx;
		position: relative;
		z-index: 1;
		justify-content: center;
		.topLeft {
			background: linear-gradient(90deg, #fdd597 0%, #eec37a 100%);
			border-radius: 15rpx;
			font-size: 18rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 25rpx;
			padding: 5rpx 12rpx;
			display: inline-block;
			margin-bottom: 15rpx;
		}
		.title {
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			font-size: 46rpx;
			color: #333;
			line-height: 42rpx;
			margin: 9rpx 5rpx 10rpx;
			image {
				width: 36rpx;
				height: 40rpx;
				margin-left: 12rpx;
			}
		}
	}
	.conwarp {
		position: relative;
		z-index: 11;
		background: #ffffff;
		box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.5);
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 39rpx 30rpx 30rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		.gdHead {
			line-height: 58rpx;
			margin-bottom: 16rpx;
			.head {
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 48rpx;
			}
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 14rpx;
			}
		}
	}
	.content {
		position: relative;
		z-index: 11;
	}
}
</style>