starify-app/src/pages/index/index.vue

<template>
	<view class="body">
		<view class="color-bg"></view>
		<view class="state-bar"></view>
		<view class="head">
			<view class="left"></view>
			<view class="center title">星光</view>
			<view class="right"></view>
		</view>
		<div class="search-bar">
			<input :placeholder="serachKeywords"/><text class="iconfont icon-MagnifyingGlass"></text>
		</div>
		<div class="block"></div>
		<view class="scroll-cont">
			<scroll-view class="scroll-view" scroll-y="true">
				<div class="app-list">
					<navigator url="/pages/user/login" class="login-lock" v-if="!userInfo.token">
						 <view class="title">登录/注册</view>
						 <view class="sub-title">解锁您的AI营销黑科技</view>
					</navigator>
					<div class="app-item">
						<div class="icon iconfont icon-GoogleLogo"></div>
						<div class="name">谷歌搜索</div>
					</div>
					<div class="app-item">
						<div class="icon iconfont icon-MapPin"></div>
						<div class="name">地图搜索</div>
					</div>
					<div class="app-item">
						<div class="icon iconfont icon-AppWindow"></div>
						<div class="name">域名搜索</div>
					</div>
					<div class="app-item">
						<div class="icon iconfont icon-IdentificationCard"></div>
						<div class="name">名片搜索</div>
					</div>
					<div class="app-item">
						<div class="icon iconfont icon-AppWindow"></div>
						<div class="name">域名搜索</div>
					</div>
					<div class="app-item">
						<div class="icon iconfont icon-IdentificationCard"></div>
						<div class="name">名片搜索</div>
					</div>
					<div class="app-item">
						<div class="icon iconfont icon-GoogleLogo"></div>
						<div class="name">谷歌搜索</div>
					</div>
					<div class="app-item">
						<div class="icon iconfont icon-MapPin"></div>
						<div class="name">地图搜索</div>
					</div>
					<div class="app-item">
						<div class="icon iconfont icon-GoogleLogo"></div>
						<div class="name">谷歌搜索</div>
					</div>
					<div class="app-item">
						<div class="icon iconfont icon-GridFour"></div>
						<div class="name">全部应用</div>
					</div>
				</div>
				<swiper :autoplay="true" :circular="true" class="banner">
					<swiper-item class="banner-item">
						<image mode="aspectFill" class="banner-image" src="/static/banner/banner1.jpg"></image>
					</swiper-item>
					<swiper-item class="banner-item">
						<image mode="aspectFill" class="banner-image" src="/static/banner/banner1.jpg"></image>
					</swiper-item>
					<swiper-item class="banner-item">
						<image mode="aspectFill" class="banner-image" src="/static/banner/banner1.jpg"></image>
					</swiper-item>
				</swiper>
				<div class="news">
					<div class="tab-cont">
						<div class="tabs">
							<div class="tab-item active">精选</div>
							<div class="tab-item">热门</div>
						</div>
					</div>
					<div class="news-list">
						<div class="news-item">
							<div class="text-info">
								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
								<div class="user">星光官方</div>
							</div>
							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
						</div>
						<div class="news-item">
							<div class="text-info">
								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
								<div class="user">星光官方</div>
							</div>
							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
						</div>
						<div class="news-item">
							<div class="text-info">
								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
								<div class="user">星光官方</div>
							</div>
							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
						</div>
						<div class="news-item">
							<div class="text-info">
								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
								<div class="user">星光官方</div>
							</div>
							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
						</div>
						<div class="ad-item">
							<view class="ad-tag">广告</view>
							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
						</div>
						<div class="news-item">
							<div class="text-info">
								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
								<div class="user">星光官方</div>
							</div>
							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
						</div>
						<div class="news-item">
							<div class="text-info">
								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
								<div class="user">星光官方</div>
							</div>
							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
						</div>
						<div class="news-item">
							<div class="text-info">
								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
								<div class="user">星光官方</div>
							</div>
							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
						</div>
						<div class="news-item">
							<div class="text-info">
								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
								<div class="user">星光官方</div>
							</div>
							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
						</div>
						<div class="news-item">
							<div class="text-info">
								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
								<div class="user">星光官方</div>
							</div>
							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
						</div>
						<div class="news-item">
							<div class="text-info">
								<div class="title">基于聊天软件跨平台对话营销云,基于聊天软件跨平台对话营销云。</div>
								<div class="user">星光官方</div>
							</div>
							<image mode="aspectFill" class="cover" src="/static/banner/banner1.jpg"></image>
						</div>
					</div>
				</div>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { login } from '@/api/user';
	export default {
		data() {
			return {
				title: 'Hello',
				serachKeywords: ''
			}
		},
		onLoad() {
			this.initSearchKeywords()
		},
		methods: {
			initSearchKeywords() {
				let keywordList = [
					'大家都在搜“WhatsApp”',
					'🔥本周热度飙升“Gemini3”',
					'大家都在搜“Facebook”',
					'🔥本周热度飙升“OpenAi”'
				]
				let index = 1
				this.serachKeywords = keywordList[0]
				setInterval(()=>{
					this.serachKeywords = this.serachKeywords = keywordList[index]
					if(index === keywordList.length - 1){
						index = 0
					}else{
						index += 1
					}
				},4000)
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo
			}
		}
	}
</script>

<style>
.body{
	position: relative;
	display: grid;
	grid-template-rows: auto auto auto auto 1fr;
	.color-bg{
		position: absolute;
		width: 100%;
		height: 700rpx;
		left: 0;
		top: 0;
		background-image: linear-gradient(190deg,#ffd1af,#EDEDED 70%);
	}
	.head{
		position: relative;
	}
	.search-bar{
		position: relative;
		box-sizing: border-box;
		border-radius: 12rpx;
		display: grid;
		align-items: center;
		grid-template-columns: 1fr auto;
		background-color: white;
		padding: 20rpx;
		margin: 0 auto;
		width: 700rpx;
		input{
			box-sizing: border-box;
			padding: 0 8rpx;
			font-size: 28rpx;
		}
		.icon-MagnifyingGlass{
			font-size: 34rpx;
		}
	}
	.block{
		height: 20rpx;
	}
	.scroll-cont{
		position: relative;
		.scroll-view{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			.news{
				box-sizing: border-box;
				margin-top: 40rpx;
				background-color: white;
				width: 100%;
				.news-list{
					width: 700rpx;
					margin: auto;
					.ad-item{
						width: 100%;
						height: 200rpx;
						position: relative;
						border-bottom: 1rpx solid #fafafa;
						.cover{
							border-radius: 12rpx;
							width: 100%;
							height: 100%;
						}
						.ad-tag{
							font-size: 23rpx;
							color: gray;
							z-index: 1;
							position: absolute;
							right: 20rpx;
							top: 10rpx;
						}
					}
					.news-item{
						padding: 30rpx 0;
						width: 100%;
						display: grid;
						grid-template-columns: 1fr 200rpx;
						grid-gap: 30rpx;
						.text-info{
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.title{
								font-size: 27rpx;
							}
							.user{
								font-size: 23rpx;
								color: gray;
							}
						}
						.cover{
							border-radius: 12rpx;
							height: 140rpx;
							width: 200rpx;
						}
						&:not(:last-child){
							border-bottom: 1rpx solid #fafafa;
						}
					}
				}
				.tab-cont{
					z-index: 3;
					padding: 24rpx 0;
					position: sticky;
					top: 0;
					width: 100%;
					background-color: white;
					.tabs{
						width: 700rpx;
						margin: auto;
						display: flex;
						gap: 20rpx;
						font-weight: 600;
						.tab-item{
							font-size: 30rpx;
							padding: 0 12rpx 4rpx;
							border-bottom: 6rpx solid transparent;
							&.active{
								border-bottom: 6rpx solid #F09649;
							}
						}
					}
				}
			}
			.banner{
				width: 100%;
				height: 230rpx;
				margin-top: 20rpx;
				background-color: white;
				.banner-item{
					width: 100%;
					aspect-ratio: 5;
					.banner-image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.app-list{
				position: relative;
				width: 700rpx;
				margin: 10rpx auto;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
				.login-lock{
					z-index: 2;
					gap: 4rpx;
					color: #F09649;
					border-radius: 12rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background-color: #ffffffdd;
					position: absolute;
					width: 100%;
					height: 100%;
					.title{
						font-size: 38rpx;
						font-weight: 700;
					}
					.sub-title{
						font-size: 26rpx;
					}
				}
				.app-item{
					padding: 24rpx 6rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 10rpx;
					.icon{
						position: relative;
						font-size: 54rpx;
						color: #FFFFFF;
						&::before{
							text-shadow: 0 0 4rpx #F09649;
							z-index: 1;
							position: relative;
						}
						&::after{
							right: -6rpx;
							top: -6rpx;
							content: '';
							display: block;
							position: absolute;
							width: 48rpx;
							height: 48rpx;
							filter: blur(16rpx);
							border-radius: 50%;
							background-color: #F09649;
						}
					}
					.name{
						color: #333333;
						font-size: 23rpx;
					}
				}
			}
		}
	}
}
</style>