popularize-front/pages/index/index.vue

<template>
	<view class="page">
		<view class="head-box"></view>
		<uv-navbar title=" " leftIcon=" "  bgColor="transparent" height="100rpx"></uv-navbar>
		<view class="content">
			<view class="search-box">
				<view class="search-box-l">
					<image class="address-img" src="@/static/image/home/address-icon.png" mode="widthFix"></image>
					<view>成都</view>
					<image class="sjx-img" src="@/static/image/home/sjx-icon.png" mode="widthFix"></image>
				</view>
				<view class="search-box-r">
					<uv-search placeholder="搜索相关内容" v-model="keyword" shape="square" :showAction="false" color="#fff" placeholderColor="#BDABAC" :clearabled="false" searchIconColor="#fff" searchIconSize="50rpx" bgColor="#4A2A2B" height="63rpx"></uv-search>
				</view>
			</view>
			<view class="swipe-box">
				<uv-swiper :list="list" height="336rpx" radius="30rpx" bgColor="transparent" indicator	indicatorMode="dot"></uv-swiper>
			</view>
			
			<view class="ydsk-box">
				<view class="ydsk-box-title">悦动时刻</view>
				<view class="ydsk-box-gird">
					<view class="gird-l">
						<view class="left-box">
							<view class="title-box">
								<view>活动签到</view>
								<view>签到有好礼</view>
							</view>
							<view class="btn-box">立即查看</view>
						</view>
						<image class="hdqd-img" src="@/static/image/home/hdqd-img.png" mode="widthFix"></image>
					</view>
					<view class="gird-r">
						<view class="hd-box">
							<view class="left-box">
								<view class="title-box">
									活动
								</view>
								<view class="btn-box">立即查看</view>
							</view>
							<image class="hdqd-img" src="@/static/image/home/hd-img.png" mode="widthFix"></image>
						</view>
						<view class="hd-box lx-box">
							<view class="left-box">
								<view class="title-box">
									旅行
								</view>
								<view class="btn-box">立即查看</view>
							</view>
							<image class="hdqd-img" src="@/static/image/home/lx-img.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="hd-list">
				<uv-tabs
					@click= "tabs"
					:list="hdList" 
					lineWidth="50rpx" 
					:lineColor="`url(${lineBg}) 100% 100%`"
					:activeStyle="{
						color: '#fff',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
					:inactiveStyle="{
						color: '#999',
						transform: 'scale(1)'
					}" 
					itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"
				></uv-tabs>
				
				<active-item :cardListData="cardListData"/>
			</view>
		
		</view>
		
		
		<tabber select="home" />
	</view>
</template>

<script>
	
	import tabber from '@/components/base/tabbar.vue'
	import activeItem from '@/components/active/active-item.vue'
	export default {
		components:{
			tabber,
			activeItem
		},
		data() {
			return {
				keyword:'',
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				hdList: [
					{ id: 0, name: '近期活动' },
					{ id: 1, name: '往期活动' },
				],
				lineBg: require('@/static/image/cart/tabIcon.png'),
				cardListData: [
					{
						imgUrl: 'https://up.zhuoku.org/22/a4/60/50/fc3bd0b4e656911fccdde4383637c1cd.jpg',
						orderTime: '2024.08.23 12:00',
						state: 'U',
						stateText: '待参加',
						title: '夏日去撒野旅游计划～',
						time: '2024.10.28 10:00',
						address: '成都市东丽湖露营地32号',
					},
					{
						imgUrl: 'https://up.zhuoku.org/22/a4/60/50/fc3bd0b4e656911fccdde4383637c1cd.jpg',
						orderTime: '2024.08.23 12:00',
						state: 'S',
						stateText: '已完成',
						title: '夏日去撒野旅游计划～',
						time: '2024.10.28 10:00',
						address: '成都市东丽湖露营地32号',
					},
				]
			}
		},
		methods:{
			tabs(val) {
				console.log(val);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #060504;
	}
</style>
<style scoped lang="scss">
	.page {
		.head-box {
			background: url('@/static/image/nav-bg.png') no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 534rpx;
			position: absolute;
		}
		.content {
			color: #fff;
			padding: 0 30rpx;
			padding-top: calc(var(--status-bar-height) + 100rpx);
			
			.search-box {
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;
				&-l {
					display: flex;
					align-items: center;
					margin-right: 30rpx;
					view {
						font-weight: 400;
						font-size: 27rpx;
						color: #FFFFFF;
						margin: 0 18rpx 0 15rpx;
					}
					.address-img {
						width: 26rpx;
					}
					.sjx-img {
						width: 13rpx;
					}
				}
				&-r {
					flex:1;
				}
			}
		
			.swipe-box {
				margin-bottom: 41rpx;
			}
		
			.ydsk-box {
				margin-bottom: 10rpx;
				&-title {
					width: 250rpx;
					background: url('@/static/image/home/title-bg.png') no-repeat;
					background-size: 100% 100%;
					text-align: center;
					height: 31rpx;
					line-height: 31rpx;
					font-weight: bold;
					font-size: 35rpx;
					color: #FFFFFF;
					margin: 0 auto 33rpx;
				}
				&-gird {
					display: flex;
					justify-content: space-between;
					.gird-l {
						box-sizing: border-box;
						width: 378rpx;
						height: 278rpx;
						padding: 36rpx 0 24rpx 26rpx;
						background: url('@/static/image/home/hdqd-bg.png') no-repeat;
						background-size: 100% 100%;
						position: relative;
						.hdqd-img {
							position: absolute;
							right: 34rpx;
							top: 48rpx;
							width: 200rpx;
						}
					
						.left-box {
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.title-box {
								view {
									font-weight: bold;
									font-size: 29rpx;
									color: #060504;
									&:nth-child(2) {
										font-weight: 400;
										font-size: 21rpx;
										color: #4C4C4C;
										margin-top: 20rpx;
									}
								}
							}
							.btn-box {
								width: 108rpx;
								height: 41rpx;
								background: url('@/static/image/home/hdqd-btn.png') no-repeat;
								background-size: 100% 100%;
								font-weight: 500;
								font-size: 17rpx;
								color: #FFFFFF;
								text-align: center;
								line-height: 41rpx;
							}
						}
					}
					.gird-r {
						.hd-box {
							width: 288rpx;
							height: 130rpx;
							padding: 25rpx 0 24rpx 26rpx;
							box-sizing: border-box;
							background: url('@/static/image/home/hd-bg.png') no-repeat;
							background-size: 100% 100%;
							position: relative;
							.left-box {
								height: 100%;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								.title-box {
									font-weight: bold;
									font-size: 28rpx;
									color: #57270F;
								}
								.btn-box {
									width: 98rpx;
									height: 35rpx;
									background: url('@/static/image/home/hd-btn.png') no-repeat;
									background-size: 100% 100%;
									font-weight: 500;
									font-size: 16rpx;
									color: #FFFFFF;
									text-align: center;
									line-height: 35rpx;
								}
							}
							.hdqd-img {
								position: absolute;
								right: 22rpx;
								top: 25rpx;
								width: 123rpx;
							}
						}
						.lx-box {
							width: 288rpx;
							height: 130rpx;
							padding: 25rpx 0 24rpx 26rpx;
							box-sizing: border-box;
							background: url('@/static/image/home/lx-bg.png') no-repeat;
							background-size: 100% 100%;
							position: relative;
							margin-top: 18rpx;
							.left-box {
								height: 100%;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								.title-box {
									font-weight: bold;
									font-size: 28rpx;
									color: #57270F;
								}
								.btn-box {
									width: 98rpx;
									height: 35rpx;
									background: url('@/static/image/home/lx-btn.png') no-repeat;
									background-size: 100% 100%;
									font-weight: 500;
									font-size: 16rpx;
									color: #FFFFFF;
									text-align: center;
									line-height: 35rpx;
								}
							}
							.hdqd-img {
								position: absolute;
								right: 22rpx;
								top: 25rpx;
								width: 123rpx;
							}
						}
					}
				}
			}
		}
	}
</style>