realty/virgo.wzfrontend/workark/src/views/index.vue

<template>
	<div class="website-home">
		<div class="banner">
			<el-carousel :interval="5000" arrow="hover" height="100%">
				<el-carousel-item>
					<img class="banner-img"
						src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/1eeba102483945589db9fa134581c19c"
						alt="" />
				</el-carousel-item>
				<el-carousel-item>
					<img class="banner-img"
						src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/e5a861ad85284564ad3fca7783dfbdfd"
						alt="" />
				</el-carousel-item>
				<el-carousel-item>
					<img class="banner-img"
						src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/fbcd3f73ece94cde94f768428d164a9f"
						alt="" />
				</el-carousel-item>
				<el-carousel-item>
					<img class="banner-img"
						src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/29a9a76dd14942198a28851cfe920061"
						alt="" />
				</el-carousel-item>
			</el-carousel>
		</div>
		<!-- <div class="website-home-bg"></div> -->
		<div class="container">
			<!-- <div class="main-container">
				<div class="main-title">WORKARK-寻找合适的服务</div>
				<div class="main-sub-title">方便、快捷、精准</div>
			</div> -->
			<div class="product-box">
				<div class="product-iview" id="list-1">
					<div class="title">产品介绍</div>
					<div class="product-banner" style="height: 400px;">
						<el-carousel :interval="5000" arrow="never" height="100%">
							<el-carousel-item>
								<div class="project-content">
									<div class="project-img"></div>
									<div class="project-article">
										<div class="article-title">产品介绍</div>
										<div class="article-content">
											<div>在复杂多变的商业环境中，精准找到可靠服务商与高效管理服务过程是企业面临的普遍痛点。</div>
											<div>WorkArk应运而生，突破传统服务模式，打造一个开放、透明、高效的企业级服务平台。</div>
											<div>在这里，有需求的企业可以便捷发布任务、筛选优质服务商、全程跟踪进度、安全验收成果；专业服务商可以展示实力、精准获客、在线协作、高效交付。
											</div>
											<div>我们聚焦知识产权、项目申报、技术开发、营销推广、财税审计、企业标准等核心企业服务领域，赋能整个服务价值链！</div>
										</div>
									</div>
								</div>
							</el-carousel-item>
						</el-carousel>
					</div>
				</div>
				<div class="product-iview" v-for="item in list" :key="item.id" :id="`list${item.id}`">
					<div class="title">{{item.name}}</div>
					<div class="product-list">
						<product-item v-for="(node,index) in item.children" :key="index" :item="node" :parent="item">
						</product-item>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	const productItem = () => import('@/components/website/productItem');
	import {
		getServeProductList
	} from '@/api/system'
	export default {
		name: 'index',
		data() {
			return {
				list: [],
				scrollPosition: 0 // 保存滚动条位置
			}
		},
		mounted() {
			this.init();
		},
		activated() {
			// 组件被激活时调用
			if (document.getElementsByClassName('website-layout')) {
				document.getElementsByClassName('website-layout')[0].scrollTo(0, this.scrollPosition);
			}
		},
		beforeRouteLeave(to, from, next) {
			if (document.getElementsByClassName('website-layout')) {
				this.scrollPosition = document.getElementsByClassName('website-layout')[0].scrollTop;
			}
			next();
		},
		deactivated() {
			// 组件被停用时调用

		},
		methods: {
			init() {
				getServeProductList(-1).then(res => {
					if (res.state) {
						this.list = res.data;
						let navList = JSON.parse(JSON.stringify(res.data));
						navList.unshift({
							name: '产品介绍',
							id: -1
						})
						this.$emit('navFunc', navList);
					}
				})
			},
			screenTo(item) {
				if (!document.getElementById('list' + item.id)) return;
				let top = document.getElementById('list' + item.id).offsetTop;
				if (document.getElementsByClassName('website-layout')) {
					document.getElementsByClassName('website-layout')[0].scrollTo({
						top: top - 40, // 纵坐标位置
						left: 0, // 横坐标位置
						behavior: 'smooth' // 平滑滚动效果
					});
				}
			}
		},
		components: {
			productItem
		}
	}
</script>

<style lang="scss">
	.website-home {
		position: relative;

		.container {
			width: 1200px;
			margin: 0 auto;
		}

		.website-home-bg {
			width: 100%;
			min-width: 1200px;
			height: 600px;
			background: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/5ea8dc9317c643d0b0254d8d13a154f3);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.el-carousel {
			height: 100%;
		}

		.banner {
			width: 100%;
			height: 600px;
			background: #eee;
		}

		.banner-img {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}

		.main-container {
			height: 600px;
			color: #fff;
			padding-top: 80px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			position: relative;
			z-index: 8;

			.main-title {
				font-weight: 500;
				font-size: 30px;
				line-height: 50px;
				margin-bottom: 12px;
			}

			.main-sub-title {
				font-weight: 300;
				font-size: 20px;
				line-height: 28px;
				opacity: .7;
				margin-bottom: 50px;
			}
		}

		.product-box {
			margin-top: 80px;
			padding-bottom: 50px;

			.title {
				font-size: 36px;
				line-height: 50px;
				font-weight: 600;
				margin-bottom: 30px;
			}
		}

		.product-list {
			display: flex;
			flex-wrap: wrap;
		}

		.product-iview {
			margin-bottom: 30px;
		}

		.project-content {
			width: 100%;
			height: 100%;
			display: flex;

			.project-img {
				width: 746px;
				height: 100%;
				border-radius: 16px;
				overflow: hidden;
				margin-right: 30px;
				background-image: url('https://file-node.oss-cn-shanghai.aliyuncs.com/youji/441be5f8bde647ed8acf12651ca91354');
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center center;
			}

			.project-article {
				flex: 1;
				width: 0;
			}

			.article-title {
				font-weight: 600;
				font-size: 28px;
				color: #1f2329;
				line-height: 40px;
				padding: 15px 0;
			}

			.article-content {
				font-size: 16px;
				color: #5d6c82;
				line-height: 30px;
				opacity: .9;

				div {
					text-indent: 32px;
					margin-bottom: 10px;
				}
			}
		}
	}
</style>