talent_map/pc/components/layout/header.vue

<template>
	<header>
		<div class="header-wrap">
			<div class="header-con xs">
				<div class="wrapper1180 flex row-between">
					<div class="flex" style="height: 100%">
						<template v-if="
			                    publicData.article && publicData.article.length
			                ">
							<img style="
			                        width: 16px;
			                        height: 16px;
			                        margin-right: 10px;
			                    " src="~/static/images/header_notice.png" />
							<client-only>
								<swiper ref="headerSwiper" :options="swiperOptions">
									<swiper-slide class="swiper-item" v-for="(
			                                item, index
			                            ) in publicData.article" :key="index">
										<nuxt-link class="flex-col row-center" style="height: 100%" :to="
			                                    '/news_list/news_list_detail?id=' +
			                                    item.id
			                                ">
											<div class="line1">
												{{ item.title }}
											</div>
										</nuxt-link>
									</swiper-slide>
								</swiper>
							</client-only>
						</template>
					</div>
					<div class="user flex flex-none">
						<div v-if="config.name">
							您好，欢迎来到 {{ config.name }}！
						</div>
						<ul class="flex flex-none">
							<li>
								<nuxt-link to="/">首页</nuxt-link>
							</li>
							<li>
								<nuxt-link to="/">人才看板</nuxt-link>
							</li>
							<li>
								<nuxt-link to="/footprint/footprint">我的足迹</nuxt-link>
							</li>
							<li>
								<div
									@click.stop="showCompanyAdd = true">
									企业反馈</div>
							</li>
							<li>
								<div
									@click.stop="showFeedbackAdd = true">
									意见反馈</div>
							</li>

							<li v-if="publicData.nickname">
								<el-popover placement="bottom" trigger="hover" width="300">
									<!-- 统计 -->
									<div class="flex row-around w-full user-count">
										<div class="flex-1 flex flex-col col-center"
											v-for="(item, index) in publicData.count" :key="index"
											@tap="menuJump(item)">
											<div class="lg primary">{{ item.count }}</div>
											<div>{{ item.title }}</div>
										</div>
									</div>
									<div class="user-nav">
										<div class="lighter xs item" @click="onLogout">
											退出登录
										</div>
									</div>
									<div slot="reference">
										{{ publicData.nickname }}
										<i class="el-icon-arrow-down"></i>
									</div>
								</el-popover>
							</li>
							<li v-else>
								<nuxt-link to="/account/login">聚才网登录</nuxt-link>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="header-main" :style="{
            'background-image': `url(${config.pc_top_bg})`}">
				<div class="wrapper1180 flex flex-col row-center">
					<div class="app-name">{{config.name}}</div>
					<div class="search-wrap flex row-between">
						<!--                        <nuxt-link to="/" class="flex row-center">-->
						<!--                            <img-->
						<!--                                :src="config.shop_login_logo"-->
						<!--                                class="logo"-->
						<!--                                alt="logo"-->
						<!--                            />-->
						<!--                        </nuxt-link>-->
						<div class="flex">
							<div class="search flex">
								<input type="text" v-model="name" placeholder="请输入关键字搜索" @focus="toFocus"
									@keyup.enter="toSearch" />
								<el-button class="search-btn" type="primary" @click="toSearch">
									搜索
								</el-button>
							</div>
						</div>
					</div>
					<div>热搜词语: 知名企业家人才名录、全国高端人才名录 </div>
				</div>
			</div>
		</div>
		<feedback-add v-model="showFeedbackAdd" />
		<company-add v-model="showCompanyAdd" />
	</header>
</template>

<script>
	import {
		directive
	} from 'vue-awesome-swiper'
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		directives: {
			swiper: directive,
		},
		data() {
			return {
				name: '',
				search: false,
				swiperOptions: {
					direction: 'vertical',
					// autoHeight: true,
					height: 40,
					initialSlide: 0,
					autoplay: true,
				},
				showFeedbackAdd: false,
				showCompanyAdd: false,
			}
		},
		mounted() {
			this.$nuxt.$on('keyword', (val) => {
				this.name = val
			})
		},
		methods: {
			...mapMutations(['logout']),
			...mapActions(['getPublicData']),
			toSearch() {
				// if (!this.name) return this.$message.error('请输入商品名称')
				if (this.search) {
					this.$nuxt.$emit('search', this.name);
				}
			},
			toFocus() {
				if (!this.search) {
					this.$router.push({
						path: '/search/search',
						// query: {
						// 	name: this.name,
						// },
					})
				} else {
					this.$nuxt.$emit('searchFouce', true);
				}
			},
			onLogout() {
				this.logout()
				this.$message({
					message: '退出成功',
					type: 'success',
				})
				setTimeout(() => location.reload(), 1500)
			},
		},
		watch: {
			$route: {
				immediate: true,
				handler: function(val) {
					console.log(val)
					if (val.path == '/search/search') {
						this.search = true
					} else {
						this.search = false
					}
				},
			},
		},
		computed: {
			...mapState(['publicData', 'config']),
		},
	}
</script>

<style lang="scss" scoped>
	.header-wrap {
		min-width: 1180px;
		position: relative;
		z-index: 1000;

		::v-deep .swiper-container {
			margin-left: 0;
			margin-right: 0;
			height: 100%;
			width: 400px;
		}

		.swiper-item {
			color: #ccc;
			height: 17px;
		}

		.header-con {
			background-color: rgba(4, 4, 4, 0.56);
			border: 1px solid #707070;
			height: 57px;
			color: #f2f2f2;

			>div {
				height: 100%;
				color: #FFFFFF;

				a {
					color: #FFFFFF;

					&:hover {
						color: #fff;
					}
				}

				ul {
					li {
						margin-left: 20px;
					}

					#tel-phone-block {
						position: relative;

						&:hover .float-code {
							display: flex;
							box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
						}

						.float-code {
							display: none;
							position: absolute;
							padding: 22px 16px;
							background-color: white;
							top: 24px;
							right: -20px;

							&::after {
								content: '';
								width: 8px;
								box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
								transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
								right: 35px;
								top: -4px;
								height: 8px;
								background-color: #fff;
								position: absolute;
							}
						}
					}
				}
			}
		}

		.header-main {
			height: 360px;
			background-size: 100% 100%;

			.wrapper1180 {
				height: 360px;

				.app-name {
					font-size: 40px;
					font-weight: bold;
					color: #FFFFFF;
					text-shadow: 1px 1px 2px black;
				}

				.search-wrap {
					margin-top: 30px;
					height: 80px;

					//.logo {
					//    height: 48px;
					//    width: auto;
					//}
					.search {
						width: 460px;
						height: 42px;
						overflow: hidden;

						input {
							flex: 1;
							height: 100%;
							border-radius: 4px 0 0 4px;
							border: 1px solid $--color-primary;
							border-right-width: 0;
							padding: 0 10px;
						}

						.search-btn {
							width: 82px;
							height: 42px;
							cursor: pointer;
							border-radius: 0 4px 4px 0;
						}
					}

					.cart {
						cursor: pointer;
						border-radius: 4px;
						width: 108px;
						height: 42px;
						margin-left: 16px;
					}
				}
			}
		}
		.user li {
			cursor: pointer;
		}
	}

	.user-nav {
		.item {
			text-align: center;
			line-height: 34px;
			display: block;
			cursor: pointer;

			&:not(:last-child) {
				border-bottom: 1px solid #e5e5e5;
			}

			&:hover {
				color: $--color-primary;
			}
		}
	}

	.user-opts {
		padding: 50rpx;

		image {
			width: 70rpx;
			height: 70rpx;
		}
	}

	.user-count {
		color: #5D5D5D;
	}
</style>