yicangzongtai_app_240321/pages/research/homepage/about-us-list.vue

<template>
	<view class="management">
		<navbar ref="navbar" :config="config"></navbar>

		<view class="content" v-if="dataList.length>0">
			<view class="modify" v-for="item in dataList" :key="item.id" @click="goDetail(item)">
				<view class="password">
					{{item.title}}
				</view>
				<view class="modif-name">

					<text class="iconfont">&#xe6c7;</text>
				</view>
			</view>

		</view>

		<nodata v-else :config="{ top: 1, content: '暂无数据~' }"></nodata>
		<view class="footer">
			<view class="u-font24">
				Copyright@2021-2030 </view>
			<view class="u-font24">绿马松河生活平台公益平台 版权所有
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '关于松河生活平台',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#FFFFFF"],
					statusBarFontColor: '#1A1A1A',
				},
				dataList: []

			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: 'about-us-detail?id=' + item.id
				});
			},
			getList() {


				this.$http
					.get(
						`/about/us/list`

					)
					.then((res) => {
						if (res && res.code == 200) {
							this.dataList = res.list
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footer {
		margin-top: 500rpx;
		text-align: center;

		position: fixed;
		bottom: 0rpx;
		padding-bottom: 20rpx;
		background: #fff;
		width: 100%;

	}

	.management {
		position: relative;
	}

	.sign {
		display: flex;
		justify-content: center;

		.sign-out {
			margin-top: 550rpx;
			font-size: 36rpx;
			color: #DCCDA4;
			font-weight: 400;
			padding: 18rpx 272rpx;
			background-color: #0B844A;
			border-radius: 43rpx;

		}
	}


	.address {
		padding: 0 30rpx;

		.item {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #E6E6E6;
			padding-bottom: 30rpx;
			padding-top: 23rpx;
			font-size: 28rpx;
			color: #1A1A1A;
			font-weight: 400;
		}

	}

	.content {
		padding: 0 30rpx;
		padding-bottom: 160rpx;

		.modify {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 22rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #E6E6E6;

			.password {
				font-size: 28rpx;
				color: #1A1A1A;
				font-weight: 400;
			}

			.modif-name {
				font-size: 28rpx;
				font-weight: 400;
				color: #1A1A1A;

				.iconfont {
					margin-left: 14rpx;
				}
			}
		}
	}

	.distance {
		height: 10rpx;
		background-color: #F5F5F5;
	}

	.top {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		margin: 45rpx 0 40rpx 0;

		.image {
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}

		.name-and-num {
			margin-left: 18rpx;
			flex: 1;

			.name {
				font-size: 28rpx;
				color: #1A1A1A;
				font-weight: 400;
			}

			.num {
				font-size: 24rpx;
				color: #999999;
				font-weight: 500;

			}
		}
	}
</style>