<template>
	<!-- 首页页面 -->
	<div class="main-container">
		<div class="bgimg">
			<a-carousel :autoplay="true" effect="fade" :dots="false" ref="scrollimg">
				<img :src="item" alt="" v-for="(item, index) in imglist" :key="index" />
			</a-carousel>
			<div class="middleslogan" :style="{ opacity: isshow ? '1' : '0' }">
				<!-- </i> -->
				<i class="iconfont" style="margin-bottom: 20px">
					<img src="http://matripe.oss-cn-beijing.aliyuncs.com/bcSVG/zzlogo.png" style="width: 140px !important; height: 70px; margin-bottom: 30px" alt="" />
				</i>

				<i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i>
				<!-- <p style="font-size:90px;color:white">一个专门服务代理的平台</p> -->
				<div v-if="isLogin">
					<router-link to="/list" style="display: inline-block; width: 100%">查看职位</router-link>
				</div>
				<div v-else>
					<router-link to="/list" style="display: inline-block; width: 100%">登录</router-link>
				</div>
			</div>
			<div id="toAboutBill" style="height: 84px; width: 1200px; position: absolute; bottom: 0;display:none"></div>
		</div>
		<div class="navigationBar" ref="navigationBar" id="navigationBar" style="display:none">
			<!-- <ul>
				<li @click="toTargetLocation('aboutBill')">关于稻田</li>
				<li @click="toTargetLocation('cooperativeBrand')">合作品牌</li>
				<li @click="toTargetLocation('businessLandscape')">业务版图</li>
				<li @click="toTargetLocation('relationUs')">联系我们</li>
			</ul> -->
			<a-anchor @click.prevent="" :affix="true">
				<a-anchor-link href="#toAboutBill" title="关于稻田" />
				<a-anchor-link href="#cooperativeBrand" title="合作品牌" />
				<a-anchor-link href="#businessLandscape" title="业务版图" />
				<a-anchor-link href="#relationUs" title="联系我们" />
			</a-anchor>
		</div>

		<div class="aboutBill" id="aboutBill" style="display:none">
			<div class="w">
				<div class="title">关于稻田</div>
				<div class="content">
					<p>伯才稻田，隶属郑州伯才科技有限公司，是一个专门服务同业合作伙伴的综合平台——一个专门服务代理的平台。平台为合作伙伴提供交付全流程的产品和服务，是伯才供应链产品矩阵中的旗舰产品。平台通过直签、联合派遣和战略合作等方式，严选上线项目，深度介入服务的每一个环节，为合作伙伴的顺利交付保驾护航。</p>
					<p>郑州伯才科技有限公司的前身为北京矩阵动力科技有限公司，项目于2015年5月在郑州启动，并于2016年5月在北京正式注册公司，开始商业化运作。伯才科技旗下有郑州伯才人力资源服务有限公司、江西人海企业管理有限公司等多家企业服务业务公司。</p>
					<p>公司2021年启用全新品牌——伯才。“新品牌、新里程”，品牌升级，但初心不变，伯才团队以崭新的面貌继续全心全意服务老乡、成就伙伴。</p>
				</div>
			</div>
		</div>
		<div class="cooperativeBrand" id="cooperativeBrand" style="display:none">
			<div class="w">
				<div class="title">合作品牌</div>
				<div class="content">
					<ul class="clearfix">
						<li v-for="item in cooperativeImg" :key="item">
							<img :src="`../../../${item}`" alt="" />
						</li>
					</ul>
					<span style="float: right; font-size: 14px; line-height: 20px; margin-top: 16px">* 部分合作品牌展示</span>
				</div>
			</div>
		</div>
		<div class="businessLandscape" id="businessLandscape" style="display:none">
			<div class="w">
				<div class="title">业务版图</div>
				<div class="content">
					<div class="left">
						<p>伯才合作项目</p>

						<p>触达城市100+</p>
						<p>辐射18个省及直辖市</p>
						<p>覆盖华东、华南、华中、华北、西南、西北6大区域</p>
					</div>
					<div class="right">
						<img src="http://matripe.oss-cn-beijing.aliyuncs.com/yishoudan/map.svg" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div class="relationUs" id="relationUs" style="display:none">
			<div class="w">
				<div class="title">联系我们</div>
				<div class="content">
					<div class="left">
						<p>总部地址：河南省郑州市郑东新区升龙广场2号楼A座</p>
						<!-- <p>接待地址：河南省郑州市航空港区相州街29-60号</p> -->
						<p>联系电话：0371-6611 3723</p>
					</div>
					<div class="right">
						<span
							><img src="http://matripe.oss-cn-beijing.aliyuncs.com/bcSVG/bcdtgzh.jpg" style="width: 100px" alt="" />
							<p>伯才稻田公众号</p></span
						>
						<span
							><img src="http://matripe.oss-cn-beijing.aliyuncs.com/bcSVG/bcdtxcx.jpg" style="width: 100px" alt="" />
							<p>伯才稻田小程序</p></span
						>
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="banner">
			<div class="w">
				<i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i>
			</div>
		</div> -->
		<footer>
			<div class="w">
				<!-- <ul>
					<li @click="totop"><router-link to="/list">一手职位</router-link></li>
					<li></li>
					<li @click="totop">
						<router-link to="/serviceoutlets">服务网点</router-link>
					</li>
					<li></li>
					<li @click="totop">
						<router-link to="/aboutus">关于我们</router-link>
					</li>
				</ul> -->
				<div>
					Copyright © 2015 - 2022 Bocai. All Rights Reserved. <i></i>
					<a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">豫ICP备2023001993号</a>
				</div>
			</div>
		</footer>
	</div>
</template>

<script>
import Vue from "vue";
import Cookies from "js-cookie";
const path = require("path");
const files = require.context("../../../static/img", false, /.png$/);

// const modules = {}

console.dir(Vue);
export default {
	// 组件名称
	name: "Main",
	// 局部注册的组件
	components: {},
	// 组件参数 接收来自父组件的数据
	props: {},
	// 组件状态值
	data() {
		return {
			isshow: false,
			imglist: ["http://matripe.oss-cn-beijing.aliyuncs.com/yishoudan/newBanner/banner1.webp", "http://matripe.oss-cn-beijing.aliyuncs.com/yishoudan/newBanner/banner2.webp", "http://matripe.oss-cn-beijing.aliyuncs.com/yishoudan/newBanner/banner3.webp"],
			cooperativeImg: [],
			isLogin: false,
		};
	},
	// 计算属性
	computed: {},
	// 侦听器
	watch: {},
	// 生命周期钩子   注：没用到的钩子请自行删除
	/**
	 * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
	 */
	created() {
		if (localStorage.getItem("LOGIN_DATA")) {
			this.isLogin = true;
		}
		setTimeout(() => {
			this.isshow = true;
		}, 500);
	},
	/**
	 * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
	 * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
	 */
	mounted() {
		this.getCooperativeImg();
		// console.log(navigationBar);
	},
	// 组件方法
	methods: {
		changeStyle(e) {
			console.log(e);
			console.log(1);
		},

		getCooperativeImg() {
			files.keys().forEach((key) => {
				const names = path.basename(key, ".png"); //返回文件名 不含后缀名
				let content = files(key).default || files(key);
				if (names.indexOf("imgList") != -1 && names.substr(names.length - 1, 1) == "1") {
					this.cooperativeImg.push(content);
				}
			});
		},
		// toTargetLocation(target) {
		// 	// console.log(123);
		// 	const now = window.scrollY;
		// 	// 2. 目标位置（文章信息区域的高度）
		// 	const dist = document.getElementById(target).getBoundingClientRect().top;
		// 	console.log(dist);
		// 	animate({
		// 		from: now, // 当前的位置
		// 		to: dist, // 目标位置
		// 		onUpdate: (latest) => window.scrollTo(0, latest),
		// 	});
		// },
		totop() {
			// console.log(window);
			document.body.scrollTop = 0;
			document.documentElement.scrollTop = 0;
			// window.body.scrollY = 0;
		},
	},
};
</script>

<style scoped lang="less">
.clearfix:after {
	/*伪元素是行内元素 正常浏览器清除浮动方法*/
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.main-container {
	overflow: hidden;
	.bgimg {
		position: relative;
		overflow: hidden;
		width: 100vw;
		height: calc(100% - 40px);
		// height: 100%;
		// background: url("../../assets/banner1.png") no-repeat center;
		img {
			width: 100% !important;
			height: calc(100vh - 40px);
		}
		.middleslogan {
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;
			top: 45%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			color: #fff;
			z-index: 99;
			transition: all 1.5s;
			p {
				text-align: center;
				font-weight: 100;
				width: 1200px;
				letter-spacing: 10px;
			}
			i {
				text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
			}
			i:nth-of-type(1) {
				font-size: 24px;
				margin-bottom: 30px;
			}
			i:nth-of-type(2) {
				font-size: 64px;
				line-height: 1;
			}
			div {
				width: 100px;
				height: 32px;
				margin-top: 115px;
				font-size: 14px;
				line-height: 29px;
				text-align: center;
				border-radius: 999px;
				cursor: pointer;
				color: #fff;
				border: 1px solid #fff;
				text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
				background-color: rgba(255, 255, 255, 0);
				transition: all 0.3s;
				&:hover {
					background-color: rgba(255, 255, 255, 0.3);
					border-color: transparent;
				}
			}
		}
		.bottominfo {
			position: absolute;
			bottom: 40px;
			left: 50%;
			font-size: 14px;
			transform: translateX(-50%);
			color: #fff;
		}
	}
	/deep/ .navigationBar {
		overflow: hidden;
		width: 1200px;
		height: 84px;
		position: absolute;
		bottom: 0;
		left: 50%;
		border-radius: 8px 8px 0 0;
		overflow: hidden;
		transform: translateX(-50%);
		transition: all 0.2s;
		z-index: 999;
		.ant-anchor {
			display: flex;
			height: 84px;
			margin: 0 auto;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			> div {
				margin: 0 52px;
				font-size: 16px;
			}
			.ant-anchor-link-active > .ant-anchor-link-title {
				color: #ff4400;
			}
			.ant-anchor-ink {
				display: none;
			}
		}
	}
	.aboutBill,
	.cooperativeBrand,
	.businessLandscape,
	.relationUs {
		padding-top: 25px;
		padding-bottom: 70px;
		background-color: #fff;
		.title {
			position: relative;
			text-align: center;
			font-size: 24px;
			line-height: 33px;
			padding-bottom: 12px;
			&:after {
				content: "";
				display: block;
				width: 30px;
				height: 2px;
				position: absolute;
				background-color: #ff4400;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}
		.content {
			margin-top: 50px;
			font-size: 18px;
			line-height: 40px;
			> p {
				text-indent: 2em;
				margin-bottom: 20px;
			}
		}
	}
	.cooperativeBrand {
		padding-top: 100px;
		// padding-bottom: 96px;
		height: 740px;
		background: url("http://matripe.oss-cn-beijing.aliyuncs.com/yishoudan/cooperativeBrandBg.webp") no-repeat 100%;
		.content {
			ul {
				li {
					float: left;
					width: 186px;
					height: 88px;
					margin-top: 16px;
					border-radius: 8px;
					transition: all 0.2s;
					&:not(li:nth-child(6n)) {
						margin-right: 16px;
					}

					&:hover {
						background-color: rgba(254, 254, 254, 0.3);
						box-shadow: 0px 0px 12px 3px #ddd;
					}
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	.businessLandscape {
		.title {
			margin-top: 80px;
		}
		.content {
			display: flex;
			justify-content: space-between;
			.left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				p {
					line-height: 28px;
					font-size: 16px;
					color: #666;
				}
				p:first-child {
					margin-bottom: 24px;
					font-size: 20px;
					color: #333;
				}
			}
		}
	}
	.relationUs {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: unset;
		height: 445px;
		background: url("http://matripe.oss-cn-beijing.aliyuncs.com/yishoudan/relationUsBg.webp") no-repeat 100% 100%;
		// padding-bottom: 126px;

		.content {
			display: flex;
			justify-content: space-between;
			margin-top: 72px;
			.left {
				// display: flex;
			}
			.right {
				display: flex;
				justify-content: space-around;
				> span {
					text-align: center;
					margin-right: 36px;
					p {
						font-size: 14px;
					}
				}
			}
		}
	}
	.banner {
		height: 72px;
		// margin-top: 20px;
		background-color: #ff4400;
		margin-bottom: -20px;
		.w {
			display: flex;
			height: 100%;
			justify-content: center;
			align-items: center;
			i {
				font-size: 32px;
				color: #fff;
			}
			img:last-child {
				width: 173px;
				height: 42px;
				margin-right: 110px;
			}
		}
		// background-color: black;
	}
	footer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
		padding: 40px 30px;
		margin-top: 20px;
		.w {
			ul {
				display: flex;
				justify-content: center;
				li {
					font-size: 16px;
					text-align: center;
					color: #4d575e;
					line-height: 25px;
				}
				li:nth-of-type(2n) {
					width: 1px;
					height: 20px;
					margin: 5px 54px;
					background-color: #4d575e;
				}
			}
			div {
				text-align: center;
				// margin-top: 16px;
				// color: #4d575e;
        color: #fff;
				font-size: 12px;
				i {
					display: inline-block;
					vertical-align: middle;
					width: 1px;
					height: 16px;
					margin: 0 10px;
					background-color: #4d575e;
				}
			}
		}
	}
}
</style>
