AIProd/pages/Home/index.vue

<template>
	<div id="home-page">
		<IntegratedLayout>
			<div class="top-title">
				<div class="first-text gradient-color">
					AIToolsFinder
				</div>
				<div class="second-text">
					Get global AI tools in one stop
				</div>
				<div class="third-text">
					It includes over a <span class="special">thousand global AI tools</span>, covering writing, images,
					videos, audio, programming,
					music, design, chatting, etc., and recommends learning platforms, frameworks and models
				</div>
				<div class="input-container">
					<input type="text" placeholder="Please enter the key words">
					<i class="el-icon-search gradient-color search-icon pointer"></i>
				</div>
			</div>

			<div class="card flex">
				<div class="left-card card-box">
					<el-carousel indicator-position="outside">
						<el-carousel-item v-for="item in 4" :key="item">
						</el-carousel-item>
					</el-carousel>

				</div>
				<div class="right-card card-box">
					<div class="clearfix">
						<img src="/logo/hot.png" />
						Popular Tools
					</div>
					<div class="line">

					</div>
					<div class="pop-item">
						<div v-for="item in pop_tools" class="box">
							<div class="img-box">
								<img src="/logo/bottom-logo.png" />
							</div>
							<div>
								{{ item.name }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="tool-list">
				<ToolList :list="list" @tool-selected="scrollToTool"></ToolList>
			</div>
			<div class="line">
			</div>
			<div class="toolbar" v-for="tool in list">
				<Toolbar :tool="tool" :id="`tool-${tool.name}`"></Toolbar>
			</div>

		</IntegratedLayout>
		<!-- <el-backtop target=".scroll-container" :bottom="100">
			<div>
				<img src="/logo/back-top.png" />
			</div>
		</el-backtop> -->
	</div>
</template>

<script>
	import ToolList from './ToolList.vue'
	import Toolbar from './Toolbar.vue'
	export default {
		name: 'Home',
		components: {
			ToolList,
			Toolbar
		},
		data() {
			return {
				pop_tools: [{
						name: 'Gemini',
						src: ''
					},
					{
						name: 'Gemini',
						src: ''
					},
					{
						name: 'Gemini',
						src: ''
					},
					{
						name: 'Gemini',
						src: ''
					},
					{
						name: 'Gemini',
						src: ''
					},
					{
						name: 'Gemini',
						src: ''
					},
				],
				list: [{
						name: 'AI Image Tool',
						img: 'image'
					},
					{
						name: 'AI Office Tools',
						img: 'office'
					},
					{
						name: 'AI Video Tool',
						img: 'Video'
					},
					{
						name: 'AI Programming Tools',
						img: 'program'
					},
					{
						name: 'AI Chat Assistant',
						img: 'chat'
					},
					{
						name: 'AI Writing Tool',
						img: 'write'
					},
					{
						name: 'AI learning Website',
						img: 'learn'
					},
					{
						name: 'AI Design Tool',
						img: 'design'
					},
					{
						name: 'AI Search Engine',
						img: 'search'
					},
					{
						name: 'AI Development Platform',
						img: 'develop'
					},
					{
						name: 'AI Audio Tool',
						img: 'audio'
					},
					{
						name: 'AI Model Evaluation',
						img: 'model'
					},
					{
						name: 'AI Prompt Command',
						img: 'prompt'
					},
					{
						name: 'AI Content Detection',
						img: 'content'
					},
					{
						name: 'AI Agent',
						img: 'agent'
					},
					{
						name: 'Model Training',
						img: 'train'
					}
				]
			}
		},
		methods: {
			scrollToTool(toolName) {
				const target = document.getElementById(`tool-${toolName}`)
				if (target) {
					target.scrollIntoView({
						behavior: 'smooth',
						block: 'start'
					})
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	#home-page {
		flex: 1;
		overflow-y: auto; // 必须启用滚动
		position: relative; // 添加相对定位
		background-repeat: no-repeat;
		background-size: contain; // 控制图片自适应
		background-position: top center;
		background-image: url('/logo/mask.png');
	}



	.top-title {
		@include flex-center;
		flex-direction: column;
		font-weight: bold;
		height: 400px;
		margin-top: 180px;

		div {
			text-align: center;
		}


		.first-text {
			line-height: 90px;
			font-size: $huge-font-size2;
		}

		.second-text {
			margin: 18px 0;
			font-size: $huge-font-size3;
		}

		.third-text {
			width: 716px;
			height: 81px;
			font-weight: 500;
			color: $grey-color;
			font-size: $normal-font-size;

			.special {
				color: $main-color;
			}
		}
	}

	

	.card {
		display: grid;
		grid-template-columns: 2fr 1fr; // 4列布局
		gap: 20px; // 网格间距
		margin: 0 auto;
		height: 366px;

		.card-box {
			background: $white;
			box-shadow: 0px 18px 33px 0px rgba(0, 0, 0, 0.05);
			border-radius: 12px;
			border: 1px solid #FFFFFF;
		}

		.left-card {
			// min-width: 805px;
		}

		.right-card {
			padding: 20px;
			// min-width: 372px;
		}

		.clearfix {
			display: flex;
			align-items: center;
			margin-bottom: 20px;
			font-size: $larg-font-size;
		}

		.img-box {
			width: 50px;
			height: 50px;
			margin: 15px 0;
			background: #FFFFFF;
			border-radius: 12px;
			border: 1px solid #E2E8F0;
			@include flex-center;

			&:hover {
				transform: scale(1.15);
				cursor: pointer;
				@include gradient-border($linear-gradient-start, $linear-gradient-end);

			}
		}

		.pop-item {
			display: grid;
			grid-auto-rows: 1fr;
			grid-template-columns: repeat(3, 1fr);
			gap: 10px; // 新增间距控制

			.box {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

	}

	.tool-list {
		margin: 40px 0;
	}

	.input-container {
		margin: 60px auto;
	}
</style>