|
|
@@ -0,0 +1,174 @@
|
|
|
+<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>
|