talent_map/pc/pages/footprint/footprint.vue

<template>
	<div class="goods-search flex-col bg-white">
		<div class="nav-container flex">
		    <el-breadcrumb style="flex: 1;" separator="/">
		        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
		        <el-breadcrumb-item class="line1" style="max-width: 800px;">我的足迹</el-breadcrumb-item>
		    </el-breadcrumb>
		</div>
		<div class="content">
			<!-- 搜索结果列表 -->
			<div v-if="talentsList.length > 0">
				<talents-list :list="talentsList" />
				<div class="pagination flex row-center" style="padding-bottom: 38px" v-if="count">
					<el-pagination background hide-on-single-page layout="prev, pager, next" :page-size="9"
						:total="count" prev-text="上一页" next-text="下一页" @current-change="changePage">
					</el-pagination>
				</div>
			</div>
			<null-data v-else :img="require('@/static/images/goods_null.png')" text="暂无数据~"></null-data>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				talentsList: [],
			};
		},
		watch: {},
		created() {
			this.getTalents();
		},
		mounted() {},
		computed: {},
		methods: {
			changePage(current) {
				this.page = current
				this.getTalents()
			},
			async getTalents() {
				const params = {
					page_size: 9,
					page_no: this.page
				}
				const {
					code,
					data,
					_meta
				} = await this.$get('article/footprint', {
					params,
				})
				if (code == 1) {
					this.talentsList = data
					this.count = _meta.totalCount
				}
			},
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.goods-search {
		height: 100%;
		position: relative;

		.header-wrap {
			position: relative;
			z-index: 999;

			.search {
				background: #fff;
				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.03);
				position: relative;
				z-index: 1;
				padding: 0 30px 20px;
			}
		}
		
		.nav-container {
			padding: 24px 24px 0;
		}

		.search-content {
			// position: absolute;
			width: 100%;
			height: 100%;
			// padding-top: 100px;
			z-index: 100;

			.search-words {
				padding-left: 24px;
				padding-bottom: 20px;

				.title {
					padding: 26px 0;
					// font-size: 32px;
					font-weight: 500;
				}

				.words {
					.item {
						line-height: 33px;
						height: 33px;
						padding: 0 24px;
						background: #F7F8FA;
						border-radius: 8px 8px 8px 8px;
						// font-size: 24px;
						color: #666666;
						cursor: pointer;
					}
				}
			}
		}

		.content {
			flex: 1;
			min-height: 0;

			.goods-list {
				overflow: hidden;
			}
		}
	}
</style>