talent_map/pc/pages/talents_detail/_id.vue

<template>
	<div class="item-details" v-if="item.id">
		<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;">人才详情：{{item.title}}</el-breadcrumb-item>
		    </el-breadcrumb>
		</div>
		<!-- 头部 -->
		<div class="bg-white  header flex row-center">
			<div class="cate-title m-r-10"><span>{{ item.title }}</span><el-tag type="danger"
					size="small">{{item.module}}</el-tag></div>
		</div>
		<!-- 基本信息 -->
		<div class="talents-item m-t-16">
			<div class="flex">
				<i class="el-icon-phone"></i>
				<div class="m-l-20">基本信息</div>
			</div>
			<div class="m-t-16 item-info">
				<!-- 人才 -->
				<div v-if="item.module == 'talent' || item.module == 'pedigree'">
					<div class="m-t-16">姓名：{{ item.title }}</div>
				</div>
				<div v-else>
					<div class="m-t-16">名称：{{ item.title }}</div>
				</div>
				<div class="m-t-16" v-if="item.company">单位：{{ item.company }}</div>
				<div class="m-t-16" v-if="item.position">职位：{{ item.position }}</div>
				<div class="m-t-16" v-if="item.module == 'base'">负责人：{{ item.principal }}</div>
				<div class="m-t-16" v-if="item.module == 'pedigreeCompany'">法人：{{ item.principal }}</div>
				<div class="m-t-16" v-if="item.module == 'firm'">秘书长：{{ item.principal }}</div>

				<div class="flex m-t-16">
					<i class="el-icon-phone"></i>
					<div class="m-l-20">{{ item.tel }}</div>
				</div>
				<div class="flex m-t-16">
					<i class="el-icon-location"></i>
					<div class="m-l-20">{{ item.city }}{{ item.address }}</div>
				</div>
			</div>
		</div>
		<!-- 简介信息 -->
		<div class="talents-item m-t-16">
			<div class="flex">
				<i class="el-icon-phone"></i>
				<span class="m-l-20"></span>
				<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>
			</div>
			<div class="m-t-16 item-info">
				<div v-html="item.intro"></div>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import {
		Message
	} from 'element-ui'
	export default {
		head() {
			return {
				title: this.$store.getters.headTitle,
				link: [{
					rel: 'icon',
					type: 'image/x-icon',
					href: this.$store.getters.favicon,
				}, ],
			}
		},
		async asyncData({
			params,
			$get,
			app
		}) {
			const {
				data,
				code,
				msg
			} = await $get('article/' + params.id, {})
			if (code == 0) {
				setTimeout(() => app.router.back(), 1500)
			}
			return {
				item: data,
			}
		},

		data() {
			return {
				item: {},
				id: '',
			}
		},
		created() {
			this.id = this.$route.params.id
		},
		methods: {
			...mapActions(['getPublicData']),
		},
		watch: {},
		computed: {},
	}
</script>

<style lang="scss">
	.item-details {
		margin-top: 24px;
		padding: 50px;
		background: #FFFFFF;
		box-shadow: -1px 0px 6px 1px rgba(0, 0, 0, 0.04);
		border-radius: 4px 4px 4px 4px;
	}

	.header {
		.cate-title {
			font-size: 28px;
			font-weight: 500;
			color: #DD4250;

			span {
				margin-right: 10px;
			}
		}
	}

	.talents-item {
		background: #FFFFFF;
		box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.03);
		border-radius: 12px 12px 12px 12px;
		padding: 30px;
		font-size: 16px;

		.item-info {
			padding: 20px;
			background: #F7F8FA;
			border-radius: 8px 8px 8px 8px;
		}
	}
</style>