traveler/LaneTexture/pages/index/index.vue

<template>
	<view class="content">
		<!-- 顶部区域 -->
		<view class="header">
			<view class="logo-container">
		<image class="logo" src="/static/logo.png"></image>
				<view class="logo-text">
					<text class="logo-text-top">Have A</text>
					<text class="logo-text-bottom">Nice Trip</text>
				</view>
			</view>
			<image class="header-mascot" src="/static/mascot.png"></image>
		</view>
		
		<!-- 会员广告条 -->
		<view class="vip-banner">
			<view class="vip-info">
				<image class="vip-icon" src="/static/vip-icon.png"></image>
				<view class="vip-text">
					<text class="vip-title">Gooh Pro永久权益</text>
					<text class="vip-price">仅需0.003元/日</text>
				</view>
			</view>
			<view class="vip-button">去了解</view>
		</view>
		
		<!-- 热门行程 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">热门行程</text>
				<view class="section-more">
					<text>更多</text>
					<text class="more-icon">></text>
				</view>
			</view>
			
			<scroll-view class="trip-scroll" scroll-x="true" show-scrollbar="false">
				<view class="trip-cards">
					<!-- 美食之旅卡片 -->
					<view class="trip-card">
						<image class="trip-image" src="/static/food-trip.jpg"></image>
						<view class="trip-tag">美食之旅</view>
						<view class="trip-info">
							<text class="trip-title">舌尖漫游，味蕾绽放的盛宴之旅</text>
							<text class="trip-count">32个行程计划</text>
						</view>
					</view>
					
					<!-- 潮汕三日卡片 -->
					<view class="trip-card">
						<image class="trip-image" src="/static/coastal-trip.jpg"></image>
						<view class="trip-info">
							<text class="trip-title">潮汕三日餐叙：从古城到海岛鲜🌊</text>
							<view class="trip-data">
								<text class="trip-days">3天8个行程</text>
								<text class="trip-people">663人来纳</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 热门目的地 -->
		<view class="hot-spots-section">
			<view class="section-title">热门目的地</view>
			
			<!-- 景点卡片区域 -->
			<view class="spots-grid">
				<!-- 北京故宫 -->
				<view class="spot-card">
					<view class="spot-tag">5A</view>
					<image class="spot-image" src="/static/beijing.jpg" mode="aspectFill"></image>
					<view class="spot-name">故宫博物院</view>
					<view class="spot-location">
						<text class="location-dot">●</text>
						<text>北京东城区</text>
					</view>
				</view>
				
				<!-- 上海外滩 -->
				<view class="spot-card">
					<view class="spot-tag">5A</view>
					<image class="spot-image" src="/static/shanghai.jpg" mode="aspectFill"></image>
					<view class="spot-name">上海外滩</view>
					<view class="spot-location">
						<text class="location-dot">●</text>
						<text>上海黄浦区</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				title: 'Have A Nice Trip',
				hotSpots: [
					{
						id: 48,
						name: "故宫博物院",
						city: "北京",
						district: "东城区",
						level: "5A",
						coverImage: "/static/beijing.jpg"
					},
					{
						id: 100,
						name: "上海外滩",
						city: "上海",
						district: "黄浦区",
						level: "5A",
						coverImage: "/static/shanghai.jpg"
					}
				]
			}
		},
		onLoad() {
			console.log('首页加载完成');
		},
		methods: {
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		background-color: #e3f4ff;
		min-height: 100vh;
	}

	/* 顶部区域 */
	.header {
		padding: 80rpx 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.logo-container {
		display: flex;
		align-items: center;
	}

	.logo {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}
	
	.logo-text {
		display: flex;
		flex-direction: column;
	}
	
	.logo-text-top {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.logo-text-bottom {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		background-color: #ffeb3b;
		padding: 0 10rpx;
	}
	
	.header-mascot {
		width: 120rpx;
		height: 120rpx;
	}
	
	/* 会员广告条 */
	.vip-banner {
		margin: 20rpx 30rpx;
		background-color: #3a9eeb;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: white;
	}
	
	.vip-info {
		display: flex;
		align-items: center;
	}
	
	.vip-icon {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}
	
	.vip-text {
		display: flex;
		flex-direction: column;
	}
	
	.vip-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 5rpx;
	}

	.vip-price {
		font-size: 26rpx;
	}
	
	.vip-button {
		background-color: white;
		color: #3a9eeb;
		padding: 10rpx 30rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
	}
	
	/* 热门行程 */
	.section {
		margin: 20rpx 0;
	}
	
	.section-header {
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.section-more {
		display: flex;
		align-items: center;
		color: #3a9eeb;
		font-size: 28rpx;
	}
	
	.more-icon {
		margin-left: 5rpx;
	}
	
	.trip-scroll {
		width: 100%;
	}
	
	.trip-cards {
		display: flex;
		padding: 0 30rpx;
	}
	
	.trip-card {
		width: 620rpx;
		background-color: white;
		border-radius: 20rpx;
		margin-right: 20rpx;
		overflow: hidden;
		position: relative;
	}
	
	.trip-image {
		width: 100%;
		height: 300rpx;
	}
	
	.trip-tag {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		background-color: rgba(58, 158, 235, 0.8);
		color: white;
		padding: 5rpx 20rpx;
		border-radius: 50rpx;
		font-size: 24rpx;
	}
	
	.trip-info {
		padding: 20rpx;
	}
	
	.trip-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}
	
	.trip-count, .trip-days {
		font-size: 26rpx;
		color: #666;
		background-color: #f0f0f0;
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
	}
	
	.trip-data {
		display: flex;
		justify-content: space-between;
	}
	
	.trip-people {
		font-size: 26rpx;
		color: #999;
	}
	
	/* 热门目的地样式 */
	.hot-spots-section {
		margin: 20rpx 0 30rpx;
		padding: 30rpx 0;
		background-color: #ffffff;
	}
	
	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		padding: 0 30rpx;
		margin-bottom: 20rpx;
		color: #333;
		display: flex;
		align-items: center;
	}
	
	.section-title::before {
		content: "";
		width: 8rpx;
		height: 36rpx;
		background: linear-gradient(to bottom, #4facfe, #00f2fe);
		margin-right: 16rpx;
		border-radius: 4rpx;
	}
	
	.spots-grid {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
	}
	
	.spot-card {
		width: 330rpx;
		height: 280rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
	}
	
	.spot-image {
		width: 100%;
		height: 180rpx;
		border-radius: 20rpx 20rpx 0 0;
	}
	
	.spot-tag {
		position: absolute;
		top: 16rpx;
		left: 16rpx;
		background-color: #ff6b35;
		color: white;
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		font-weight: bold;
		z-index: 1;
	}
	
	.spot-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		padding: 16rpx 16rpx 8rpx;
	}
	
	.spot-location {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #999;
		padding: 0 16rpx;
	}
	
	.location-dot {
		color: #ff4f81;
		font-size: 24rpx;
		margin-right: 6rpx;
	}
</style>