tongchengred/pages/index/ken.vue

<template>
	<view class="content">
		<image src="../../static/images/bg-bg.png" mode="" class="bg-bg"></image>
		<image src="../../static/images/ken-tit1.png" mode="" class="top-tit"></image>
		<view class="cot">
			{{$store.state.baseName}}推出博爱园公益月捐计划 ，参与月捐项目 ，我们将为您每月发放一封{{$store.state.baseName}}官方感谢信 ，我们期待并感谢您无私的爱心奉献。
		</view>
		<view class="lov">
			Love makes dreams come true
		</view>
		<view class="dow">
			下拉查看详情
		</view>
		<image src="../../static/icon/dow.png" mode="" class="dow-dow"></image>
		<image src="../../static/images/pen.png" mode="" class="pen"></image>
		<view class="pen-pen" v-for="(item,index) in list" @click="navto('/pages/index/yue?id=' + item.id)">
			<image src="../../static/img/pen0.png" mode=""></image>
			<view class="tit" v-html="item.title">
			</view>
		</view>
		<view class="" style="height: 150rpx;">

		</view>

	</view>

</template>

<script>
	import {
		getArticList
	} from '@/api/index.js';
	import { getPlan} from '@/api/money.js'
	export default {
		data() {
			return {
				list: [],
				page: 1,
				limit: 10,
				loadingType: 'more'
			}
		},
		methods: {
			navto(url) {
				uni.navigateTo({
					url
				})
			},
			getList() {
				let that = this
				if (that.loadingType == 'loading' || that.loadingType == 'noMore') return;
				that.loadingType = 'loading'
				getPlan({
					page: that.page,
					limit: that.limit
				}).then(({data}) => {
					let arr = []
					if (data.data.length > 0) {
						arr = data.data.map(item => {
							item.title = item.title.replace(/[^\u4e00-\u9fa5]/g, '<br />');
							return item
						})
					}
					that.list = that.list.concat(arr);
					that.page++
					if (that.limit == data.data.length) {
						that.loadingType = 'more'
					} else {
						that.loadingType = 'noMore'
					}
				})
				// getArticList({
				// 	ifyid: 78,
				// 	page: that.page,
				// 	limit: that.limit
				// }).then(({
				// 	data
				// }) => {
				// 	let arr = []
				// 	if (data.list.length > 0) {
				// 		arr = data.list.map(item => {
				// 			item.title = item.title.replace(/[^\u4e00-\u9fa5]/g, '<br />');
				// 			return item
				// 		})
				// 	}
				// 	that.list = that.list.concat(arr);
				// 	that.page++
				// 	if (that.limit == that.list.length) {
				// 		that.loadingType = 'more'
				// 	} else {
				// 		that.loadingType = 'noMore'
				// 	}
				// });
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	image {
		display: block;
	}

	* {
		position: relative;
	}

	.bg-bg {
		width: 750rpx;
		height: 773rpx;
		position: absolute;
		bottom: 0;
	}

	.content {
		width: 750rpx;
		// height: 4983rpx;
		background: linear-gradient(3.799999999999997deg, #1784D8 0%, #6CA7E1 100%);
		padding-top: 1rpx;
	}

	.top-tit {
		width: 521rpx;
		height: 322rpx;
		margin: 128rpx auto 70rpx;
	}

	.cot {
		padding: 0 70rpx;
		font-weight: bold;
		font-size: 26rpx;
		color: #FFFFFF;
		text-decoration-line: underline;
		text-align: center;
		line-height: 53rpx;
		letter-spacing: 1rpx;
		text-underline-offset: 10px
	}

	.lov {
		// font-family: Source Han Serif SC;
		text-align: center;
		font-weight: bold;
		font-size: 19rpx;
		color: #FFFFFF;
		padding: 30rpx 0 64rpx;
	}

	.dow {
		text-align: center;
		font-weight: bold;
		font-size: 43rpx;
		color: #FFFFFF;
		padding-bottom: 27rpx;
	}

	.dow-dow {
		width: 38rpx;
		height: 87rpx;

		margin: auto;
	}

	.pen {
		width: 738rpx;
		height: 562rpx;
		margin: auto;
	}

	.pen-pen {
		width: 594rpx;
		height: 757rpx;
		margin:30rpx auto;
		image {
			width: 594rpx;
			height: 757rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
		.tit {
			width: 250rpx;
			height: 100rpx;
			text-align: center;
			font-size: 40rpx;
			color: #D27227;
			font-weight: bold;
			// font-weight: bold;
			// /* 设置描边宽度及颜色 默认为字体内外描边 */
			// text-stroke: 1px #D27227;
			// /* 兼容Webkit(Chrome/Safari)内核浏览器的写法 */
			// -webkit-text-stroke: 1px #D27227;
			
			position: absolute;
			top: 200rpx;
			left: 0;
			right: 0;
			margin: auto;

		}
	}
</style>