zh_order_food_xcx/pages-buy/ticket.vue

<template>
	<view class="ticket-box iPhone-bottom flex-common-css box-border-box">
		<view class="nav-box">
			<image class="head-bg" src="@/static/img/buy/ticket-bg.png" mode="scaleToFill"></image>
			<Nav :leftShow='false' :customNav='true' bgckgroundBox='transparent'>
				<template>
					<view slot="custom" class="align-items-center">
						<uni-icons type="left" size="20" @click="toBack()" color="#fff"></uni-icons>
						<view class="w-390 text-overflow-ellipsis-one fs-36 fw-400 fc-f">票务</view>
					</view>
				</template>
			</Nav>
			
			<view class="box-border-box plr-24 mb-32">
				<view class="head-search">
					<uni-icons class="s-icon" type="search" size="19"></uni-icons>
					<input type="text" placeholder="搜一搜带你玩周边">
					<view class="head-search-buttom text-align-center fs-28 fw-500 fc-f">搜索</view>
				</view>
			</view>
			
			<view class="display-flex box-border-box plr-24 nav-list">
				<view class="text-align-center nav-item" v-for="(item,i) in navList" :key="i">
					<image class="nav-img" :src="item.img" mode="scaleToFill"></image>
					<view class="fs-24 w-96" :class="type == item.id?'fw-600 fc-41ABF5':'fw-400'">{{item.name}}</view>
				</view>
			</view>
		</view>
		
		<scroll-view class="scroll-view-css box-border-box plr-24" scroll-y="true" @scrolltolower="scrolltolower">
			<view class="list-item display-flex" v-for="(item,i) in 10" :key="i" @click="toDet(item)">
				<image src="@/static/img/my/lqzx-bg.png" mode="scaleToFill"></image>
				<view class="flex-1">
					<view class="w-470 text-overflow-ellipsis fw-600 fs-32 mb-48">大耳朵游乐场大耳朵游乐场11大耳朵游v乐场v</view>
					<view class=" flex-justify-space align-items-flex-end">
						<view class="">
							<span class="fs-24 fw-400 fc-FB3D03">￥</span>
							<span class="fw-b fs-40 fc-FB3D03">3.9</span>
							<span class="text-line-through fs-24 fc-9 fw-400">￥3.9</span>
						</view>
						<view class="to-box fs-28 fw-400 fc-f text-align-center">马上抢</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import tools from "@/service/tools";
	export default {
		data(){
			return{
				type:0,
				navList:[
					{name:"全部",id:0,img:require('@/static/img/buy/t-all.png')},
					{name:"动植物园",id:1,img:require('@/static/img/buy/t-all.png')},
					{name:"动植物园",id:1,img:require('@/static/img/buy/t-all.png')},
					{name:"动植物园",id:1,img:require('@/static/img/buy/t-all.png')},
					{name:"动植物园",id:1,img:require('@/static/img/buy/t-all.png')},
					{name:"动植物园",id:1,img:require('@/static/img/buy/t-all.png')},
					{name:"动植物园",id:1,img:require('@/static/img/buy/t-all.png')},
				]
			}
		},
		onShow() {
			
		},
		methods:{
			toBack(){
				tools.leftClick()
			},
			scrolltolower(){
				console.log('触底');
			},
			toDet(item){
				uni.navigateTo({
					url:"/pages-buy/ticket-det"
				})
			},
		},
	}
</script>

<style>
	body{
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.w-470{
		width: 470rpx;
	}
	.ticket-box{
		.list-item{
			width: 100%;
			min-height: 200rpx;
			margin-bottom: 40rpx;
			background-color: #fff;
			image{
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}
			.to-box{
				width: 132rpx;
				height: 52rpx;
				line-height: 52rpx;
				background: linear-gradient( 225deg, #41ABF5 0%, #5BD8FB 100%);
				border-radius: 200rpx;
			}
		}
		
		.nav-box{
			width: 100%;
			height: 452rpx;
			position: relative;
			.head-bg{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 452rpx;
				z-index: -1;
			}
			.head-search{
				width: 100%;
				position: relative;
				.s-icon{
					position: absolute;
					left: 24rpx;
					top: 20rpx;
				}
				input{
					width:100%;
					height: 72rpx;
					background: #FFFFFF;
					border-radius: 200rpx;
					box-sizing: border-box;
					padding: 0 130rpx 0 68rpx;
					font-size: 32rpx;
				}
				.head-search-buttom{
					width: 120rpx;
					height: 60rpx;
					background: linear-gradient( 90deg, #2CE6F8 0%, #41ABF5 100%);
					border-radius: 200rpx;
					line-height: 60rpx;
					position: absolute;
					right: 6rpx;
					top: 6rpx;
				}
			}
			.nav-list{
				overflow-x: scroll;
				.nav-item{
					width: 96rpx !important;
					height: 126rpx;
					margin-right: 48rpx;
					.nav-img{
						width: 80rpx;
						height: 80rpx;
						margin: 0 auto 12rpx auto;
						z-index: 10;
					}
					.w-96{
						width: 96rpx;
					}
				}
			}
		}
	}
</style>