talent_map/pc/components/talents-list.vue

<template>
	<div>

		<el-row type="flex" class="row-bg" :gutter="10" style="margin: 10px;" v-for="(sitem, sindex)  in flexRow"
			:key="sindex">
			<el-col :span="8" v-for="(item, index) in list.slice(sindex * 3, sindex * 3+3)" :key="index">
				<nuxt-link :to="`/talents_detail/${item.id}`">
					<el-card shadow="hover">
						<el-descriptions :colon="false" :column="1">

							<el-descriptions-item>
								<div class="flex row-between" style="width: 100%;">
									<div style="font-weight: bold;" class="flex flex-1">
										<div class="flex-none"
											style="width: 8px;height: 8px;background: #DD4250;border-radius: 50%; margin-right: 10px;">
										</div>
										<div class="flex-none">{{item.title}}</div>
										<div class="flex-none">
											<el-tag type="danger" size="small">{{item.module}}</el-tag>
										</div>
										<div class="primary flex-1 text-right" v-if="item.position">
											{{item.position}}
										</div>
									</div>
								</div>
							</el-descriptions-item>

							<el-descriptions-item content-style="overflow: hidden">
								<div class="flex row-between" style="width: 100%;">
									<div class="flex-1 line-1" v-if="item.chain">
										<span>产业链：{{item.chain}}</span>
									</div>
									<div class="flex-1" v-if="item.tel">
										<div class="primary pointer text-right"><i
												class="el-icon-phone"></i>{{item.tel}}
										</div>
									</div>
								</div>
							</el-descriptions-item>

							<el-descriptions-item content-style="overflow: hidden" v-if="item.company">
								<div class="flex line-1">
									<span class="line-1">单位：{{ item.company }}</span>
								</div>
							</el-descriptions-item>
							<el-descriptions-item
								v-if="item.module == 'base'">负责人：{{ item.principal }}</el-descriptions-item>
							<el-descriptions-item
								v-if="item.module == 'pedigreeCompany'">法人：{{ item.principal }}</el-descriptions-item>
							<el-descriptions-item
								v-if="item.module == 'firm'">秘书长：{{ item.principal }}</el-descriptions-item>

							<el-descriptions-item content-style="overflow: hidden">
								<div class="flex line-1">
									<span v-if="item.module == 'talent'">研究领域：</span>
									<span v-else-if="item.module == 'base'">基地特色：</span>
									<span
										v-else-if="item.module == 'university' || item.module == 'association'">研究方向：</span>
									<span v-else-if="item.module == 'fund'">投资产业领域：</span>
									<span v-else-if="item.module == 'pedigreeCompany'">主要产品：</span>
									<span v-else-if="item.module == 'pedigree'">个人简介：</span>
									<span v-else>简介：</span>
									<span class="line-1">{{ item.description }}</span>
								</div>
							</el-descriptions-item>
							<el-descriptions-item content-style="overflow: hidden">
								<div class="flex p-t-10 line-1" style="border-top: 1px solid #DEDEDE; width: 100%;">
									<i class="el-icon-location"></i>
									<div class="m-l-10 line-1">{{ item.city }}{{ item.address }}</div>
								</div>
							</el-descriptions-item>
						</el-descriptions>
					</el-card>
				</nuxt-link>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => [],
			},
		},
		data() {
			return {
				flexRow: [0, 1, 2], //3行默认
			}
		},
		watch: {
			list: {
				immediate: true,
				handler: function(val) {
					this.flexRow = [...Array(Math.ceil(this.list.length / 3)).keys()]
					console.log('this.flexRow')
					console.log(this.flexRow)
				},
			},
		},
		methods: {
			
		},
		computed: {},
	};
</script>

<style lang="scss" scoped>
	:deep(.el-descriptions-item__label:not(.is-bordered-label)) {
		margin-right: 0;
	}
</style>