机票

asset/css/flex.css

@@ -117,6 +117,9 @@
 .items-center{
 	align-items: center;
 }
+.items-start{
+	align-items: start;
+}
 .justify-center{
 	justify-content: center;
 }

asset/font/tffont.css

 @font-face {
   font-family: "tffont"; /* Project id 4816119 */
-  src: url('//at.alicdn.com/t/c/font_4816119_vhne921vx0o.woff2?t=1739518077462') format('woff2'),
-       url('//at.alicdn.com/t/c/font_4816119_vhne921vx0o.woff?t=1739518077462') format('woff'),
-       url('//at.alicdn.com/t/c/font_4816119_vhne921vx0o.ttf?t=1739518077462') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_4816119_61ojoauzfi8.woff2?t=1739876734691') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4816119_61ojoauzfi8.woff?t=1739876734691') format('woff'),
+       url('//at.alicdn.com/t/c/font_4816119_61ojoauzfi8.ttf?t=1739876734691') format('truetype');
 }
 
 .tffont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.tffont-qianwangx:before {
+  content: "\e608";
+}
+
+.tffont-qianwang:before {
+  content: "\e601";
+}
+
 .tffont-arrowleft:before {
   content: "\e610";
 }

pages.json

@@ -745,6 +745,13 @@
 					{
 						"navigationStyle" : "custom"
 					}
+				},
+				{
+					"path" : "flightDetail",
+					"style" : 
+					{
+						"navigationBarTitleText" : "填写机票订单信息"
+					}
 				}
 			]
 		}

pages/airTicket/airCity.vue

@@ -34,14 +34,14 @@
 							mode="aspectFill">
 						</image>
 						<view class="city-list-item col">
-							<view style="margin-bottom: 30rpx;" class=" row items-center">
+							<view @click="goListHandle('')" style="margin-bottom: 30rpx;" class=" row items-center">
 								<view class="bold col">{{x.DepartureName}} - {{x.ArrivalCityName}}</view>
 								<view class="row items-center">
 									<view style="font-size: 22rpx;">更多日期</view>
 									<u-icon name='arrow_right' custom-prefix="tffont" color="#00000066" size="28"></u-icon>
 								</view>
 							</view>
-							<view class="flights row items-center" v-for="(f,fi) in x.TicketProductList">
+							<view @click="goListHandle(f.FlightDate)" class="flights row items-center" v-for="(f,fi) in x.TicketProductList">
 								<image style="width: 30rpx;" :src="`https://static.tripcdn.com/packages/flight/airline-logo/latest/airline/48/${f.AlCode}.png`" mode="widthFix"></image>
 								<view style="font-size: 22rpx;width:50rpx;margin:0 4px">
 									{{ f.DayCount }}天
@@ -58,15 +58,7 @@
 								</view>
 								<u-icon name='arrow_right' custom-prefix="tffont" color="#00000066" size="28"></u-icon>
 							</view>
-							<!-- <view class="row q-mt-md">
-								<view class="col">
-									<text style="font-size: 22rpx;color: #A4A4A4;font-weight: 400;">仅需：</text>
-									<text style="color:#FF3166;font-size: 22rpx;">¥</text>
-									<text
-										style="font-size: 32rpx;font-weight: bold;color:#FF3166;">{{x.Flight.B2BPrice}}</text>
-								</view>
-								<view class="more-date">更多日期</view>
-							</view> -->
+							
 						</view>
 					</view>
 
@@ -152,7 +144,7 @@
 
 				if (this.dateRangeValue.type == 1) {
 					this.parementers.StartDate = this.dateRangeValue.startDate
-					//this.parementers.EndDate = this.dateRangeValue.startDate
+					this.parementers.EndDate = this.dateRangeValue.startDate
 				} else {
 					const d = this.resolveDateByFuzzyHandle(this.dateRangeValue.fuzzy.fuzzyType)
 					this.parementers.StartDate = d[0]
@@ -260,6 +252,15 @@
 				})
 				this.getTopLowTicketHandle()
 			},
+			goListHandle(val){
+				let url ='/pages/airTicket/ticketList/ticketList'
+				if(val!=''){
+					url += `?dv=${encodeURIComponent(val)}`
+				}
+				uni.navigateTo({
+					url
+				})
+			}
 		}
 	}
 </script>

pages/airTicket/airIndex.vue

@@ -180,16 +180,19 @@
 		},
 		methods: {
 			searchFlightHandle(){
-				if(this.chosenResult[0].ID==0||this.chosenResult[1].ID==0){
 				uni.setStorageSync('scf',{
 					cities:this.chosenResult,
 					dateRange: this.dateRangeValue
 				})
+				if(this.chosenResult[0].ID==0||this.chosenResult[1].ID==0){
 					uni.navigateTo({
 						url:'/pages/airTicket/airCity'
 					})
 				}else{
 					//查询航班列表
+					uni.navigateTo({
+						url:'/pages/airTicket/ticketList/ticketList'
+					})
 				}
 			},
 			async getContainerWidth() {

pages/airTicket/components/address/ChosenCity.vue

 <template>
 	<view style="height: 100vh; z-index:2;  width:100vw;position: fixed;left: 0;top: 0;background-color: rgba(0, 0, 0, 0.6);">
 		<view style="z-index: 2; background-color: #FFF;padding-bottom:36rpx;position: absolute;top: 0;left: 0;right: 0;border-radius: 0 0 16rpx 16rpx;">
-			<view style="padding:24rpx;font-size: 40rpx;font-weight: bold;color: #121212;" class="text-center">
+			<view style="padding:24rpx;font-size: 40rpx;font-weight: bold;color: #121212;" class="text-center" :style="{'margin-top':paddingTop}">
 				重新选择
 			</view>
 			<view class="air-tools">
@@ -21,11 +21,12 @@
 				
 				<view @click="setCitiesHandler" class="text-center cities-name q-mt-md" style="background-color: #B99846;border-radius: 10rpx;height: 90rpx; line-height: 90rpx;color:#EEF1F4">确 认</view>
 				<u-popup mode="bottom" border-radius="20" :popup="false" v-model="citiesVisible" :maskCloseAble="true" length="auto" :safeAreaInsetBottom="true" @close="popupClose" :z-index="9999">
-					<city-list :city-type="currentCityObj.type" :city-value="currentCityObj.ID" @change="setCityHandler"></city-list>
+					<city-list :enable-all="enableAll" :city-type="currentCityObj.type" :city-value="currentCityObj.ID" @change="setCityHandler"></city-list>
 				</u-popup>
 			</view>
-			<view style="height: 100%;width: 100%;" @click="closed"></view>
+			
 		</view>
+		<view style="height: 100%;width: 100%;" @click="closed"></view>
 	</view>
 </template>
 
@@ -36,6 +37,14 @@
 		props:{
 			value:{
 				type:Array
+			},
+			paddingTop:{
+				type:String,
+				default:'0px'
+			},
+			enableAll:{
+				type:Boolean,
+				default:true
 			}
 		},
 		data(){

pages/airTicket/components/address/CityList.vue

@@ -9,13 +9,13 @@
 			<template v-if="showAddress && showAddress.length>0">
 				<scroll-view scroll-y="true" style="height: 55vh;">
 					<div class="row q-mt-md">
-						<view class="col city-item big q-mr-sm" v-if="keywords==''" :class="{'active':currentValue==0}" @click="setCurrentCity(0)">
+						<view class="col city-item big q-mr-sm" v-if="keywords=='' && enableAll" :class="{'active':currentValue==0}" @click="setCurrentCity(0)">
 							<u-icon name="ditu-xian" custom-prefix="tffont" size="66" v-if="showAddress.length>2"></u-icon>
 							<view style="font-size: 28rpx;font-weight: 600;">全部低价城市</view>
 						</view>
 						<view class="col row flex-grid flex-wrap">
 							<template v-for="(x,i) in showAddress">
-								<view class="city-item " v-if="i<4" :key="i" @click="setCurrentCity(x.ID)" :class="{'active':currentValue==x.ID,'col-t-b':keywords=='','col-f-b':keywords!=''}">{{x.Name}}</view>
+								<view class="city-item " v-if="i<4" :key="i" @click="setCurrentCity(x.ID)" :class="{'active':currentValue==x.ID,'col-t-b':(keywords=='' && enableAll),'col-f-b':(keywords!='' || !enableAll)}">{{x.Name}}</view>
 							</template>
 						</view>
 					</div>
@@ -58,6 +58,10 @@
 			cityValue:{
 				type:Number,
 				default:0
+			},
+			enableAll:{
+				type:Boolean,
+				default:true
 			}
 		},
 		created() {

pages/airTicket/components/guest/index.vue

+<template>
+	<view>
+		<view class="row items-center">
+			<u-radio-group v-model="ia">
+				<u-radio shape="circle">月明人倚楼</u-radio>
+			</u-radio-group>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default{
+		data(){
+			return {
+				ia:false
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
\ No newline at end of file

pages/airTicket/components/sign/range.vue

+<template>
+  <view class="calendar-container">
+    <view class="week-header">
+      <view v-for="(day, index) in weekDays" :key="index" class="week-day">{{ day }}</view>
+    </view>
+
+    <scroll-view scroll-y class="col" style="width:100%;height: 1px;">
+      <view v-for="(month, monthIndex) in calendarData" :key="monthIndex" class="month-container">
+        <view class="month-title">{{ month.year }}年{{ month.month }}月</view>
+        <view class="days-grid">
+          <view 
+            v-for="(dayOffset, index) in month.firstDayOffset" 
+            :key="`offset-${index}`"
+            class="day-placeholder"
+          ></view>
+          
+          <view
+            v-for="(day, dayIndex) in month.days"
+            :key="dayIndex"
+            class="day-item"
+            :class="[
+              { 'selected': isSelected(monthIndex, dayIndex) },
+              { 'disabled': isDisabled(monthIndex, dayIndex) },
+              { 'range': isInRange(monthIndex, dayIndex) },
+              { 'festival': isFestivalDay(month, day) }
+            ]"
+            @tap="handleDaySelect(monthIndex, dayIndex)"
+          >
+            <view class="day-number">{{ day }}</view>
+            <view v-if="calendarFestivals[`${month.year}${month.month}${day}`]" class="day-status">{{calendarFestivals[`${month.year}${month.month}${day}`]}}</view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+import festivals from "./day.js";
+
+export default {
+  props: {
+    defaultStartDate: {
+      type: String,
+      default: ""
+    },
+    defaultEndDate: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      weekDays: ['日', '一', '二', '三', '四', '五', '六'],
+      calendarData: [],
+      selectedStartDate: [],  // Start date index
+      selectedEndDate: [],    // End date index
+      screenWidth: 375,
+      calendarFestivals: {}
+    };
+  },
+  computed: {
+    currentDate() {
+      const date = new Date();
+      return {
+        year: date.getFullYear(),
+        month: date.getMonth() + 1,
+        day: date.getDate()
+      };
+    }
+  },
+  mounted() {
+    this.initializeCalendar();
+  },
+  methods: {
+    initializeCalendar() {
+      this.getScreenWidth();
+      this.generateCalendarData();
+      this.setInitialSelection();
+      this.applyFestivalData();
+    },
+
+    getScreenWidth() {
+      uni.getSystemInfo({
+        success: (res) => {
+          this.screenWidth = res.windowWidth;
+        }
+      });
+    },
+
+    generateCalendarData() {
+      let year = this.currentDate.year;
+      let month = this.currentDate.month;
+      
+      this.calendarData = Array.from({ length: 6 }, (_, index) => {
+        const monthData = this.createMonthData(year, month + index);
+        return monthData;
+      });
+    },
+
+    createMonthData(year, month) {
+      const actualMonth = month > 12 ? month % 12 : month;
+      return {
+        year: month > 12 ? year + 1 : year,
+        month: actualMonth,
+        days: Array.from({ length: new Date(year, actualMonth, 0).getDate() }, (_, index) => index + 1),
+        firstDayOffset: new Date(`${year}/${actualMonth}/1`).getDay()
+      };
+    },
+
+    applyFestivalData() {
+      this.calendarFestivals = festivals.reduce((acc, { year, month, festival }) => {
+        const subResult = festival.map(({ name, day }) => {
+          const key = `${year}${month}${day}`;
+          return { [key]: name };
+        });
+        return { ...acc, ...Object.assign({}, ...subResult) };
+      }, {});
+    },
+
+    setInitialSelection() {
+      if (this.defaultStartDate) {
+        const [year, month, day] = this.defaultStartDate.split('-');
+        const monthIndex = this.calendarData.findIndex(m => m.year == year && m.month == month);
+        if (monthIndex !== -1) {
+          this.selectedStartDate = [monthIndex, parseInt(day) - 1];
+        }
+      }
+
+      if (this.defaultEndDate) {
+        const [year, month, day] = this.defaultEndDate.split('-');
+        const monthIndex = this.calendarData.findIndex(m => m.year == year && m.month == month);
+        if (monthIndex !== -1) {
+          this.selectedEndDate = [monthIndex, parseInt(day) - 1];
+        }
+      }
+    },
+
+    isSelected(monthIndex, dayIndex) {
+      return (this.selectedStartDate[0] === monthIndex && this.selectedStartDate[1] === dayIndex) ||
+             (this.selectedEndDate[0] === monthIndex && this.selectedEndDate[1] === dayIndex);
+    },
+
+    isInRange(monthIndex, dayIndex) {
+      if (!this.selectedStartDate.length || !this.selectedEndDate.length) return false;
+      const start = this.selectedStartDate;
+      const end = this.selectedEndDate;
+      return (monthIndex > start[0] || (monthIndex === start[0] && dayIndex >= start[1])) && 
+             (monthIndex < end[0] || (monthIndex === end[0] && dayIndex <= end[1]));
+    },
+
+    isDisabled(monthIndex, dayIndex) {
+      if (monthIndex === 0) {
+        return dayIndex + 1 < this.currentDate.day;
+      }
+      return false;
+    },
+
+    isFestivalDay(month, day) {
+      return typeof day === 'string';
+    },
+
+    handleDaySelect(monthIndex, dayIndex) {
+      if (this.isDisabled(monthIndex, dayIndex)) return;
+
+      // Handle the selection of start and end date for range
+      if (!this.selectedStartDate.length || (this.selectedStartDate.length && this.selectedEndDate.length)) {
+        this.selectedStartDate = [monthIndex, dayIndex];
+        this.selectedEndDate = [];  // Reset end date
+      } else {
+        if (monthIndex > this.selectedStartDate[0] || 
+            (monthIndex === this.selectedStartDate[0] && dayIndex >= this.selectedStartDate[1])) {
+          this.selectedEndDate = [monthIndex, dayIndex];
+        } else {
+          this.selectedStartDate = [monthIndex, dayIndex];
+          this.selectedEndDate = []; // Reset if the start date is changed
+        }
+      }
+
+      this.$emit('selected-range', this.getSelectedRange());
+    },
+
+    getSelectedRange() {
+      const startMonthData = this.calendarData[this.selectedStartDate[0]];
+      const endMonthData = this.calendarData[this.selectedEndDate[0]];
+      const startDayNumber = this.selectedStartDate[1] + 1;
+      const endDayNumber = this.selectedEndDate[1] + 1;
+      return [ !startMonthData?'':`${startMonthData.year}-${String(startMonthData.month).padStart(2, '0')}-${String(startDayNumber).padStart(2, '0')}`,!endMonthData?'':`${endMonthData.year}-${String(endMonthData.month).padStart(2, '0')}-${String(endDayNumber).padStart(2, '0')}`];
+    }
+  }
+};
+</script>
+
+<style>
+.calendar-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.week-header {
+  display: flex;
+  justify-content: space-around;
+  padding: 10px 0;
+  background: #f8f8f8;
+  border-radius: 16rpx;
+}
+
+.week-day {
+  width: 14.28%;
+  text-align: center;
+  font-size: 14px;
+  color: #333;
+}
+
+.month-container {
+  padding: 15px 10px;
+}
+
+.month-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  padding-left: 10px;
+}
+
+.days-grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.day-item, .day-placeholder {
+  width: 14.28%;
+  min-height: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 0;
+}
+
+.day-item {
+  position: relative;
+  font-size: 14px;
+  color: #333;
+  background: #fff;
+}
+
+.day-placeholder {
+  visibility: hidden;
+}
+
+.day-item.selected {
+  background: #000 !important;
+  color: #fff;
+}
+
+.day-item.disabled {
+  color: #ccc;
+}
+
+.day-item.festival {
+  color: #d32f2f;
+  font-size: 12px;
+}
+
+.day-status {
+  font-size: 10px;
+  color: #d32f2f;
+  position: absolute;
+  bottom: 2px;
+}
+.day-item.range {
+  background-color: #f1f2f4; /* light yellow */
+ /* color: #000; */
+}
+</style>
\ No newline at end of file

pages/airTicket/components/time/DateSelect.vue

+<template>
+	<view style="display: inline-block;" @click="()=>showDateVisible=true">
+		<slot></slot>
+		<u-popup mode="bottom" border-radius="20" :popup="false" v-model="showDateVisible" :maskCloseAble="true" length="auto" :safeAreaInsetBottom="true" @close="()=>showDateVisible=false" :z-index="9999">
+			<view class="column" style="height: 70vh;">
+				<scroll-view scroll-y="true" class="col" style="width: 100%;height: 1px;">
+					<date-select-range @selected-range="changeHandle" v-if="selectType==1" :default-start-date="rangeValue[0]" :default-end-date="rangeValue[1]"></date-select-range>
+					<date-select @selected="changeHandle" v-else :default-date="value"></date-select>
+				</scroll-view>
+				<view @click="selected" class="text-center q-mt-md q-ml-md q-mr-md" style="background-color: #B99846;border-radius: 10rpx;height: 90rpx; line-height: 90rpx;color:#EEF1F4;font-weight: bold;font-size: 32rpx;">确定</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	import DateSelectRange from '../sign/range.vue';
+	import DateSelect from '../sign/sign.vue'
+	export default{
+		data(){
+			return {
+				showDateVisible:false,
+				value:'',
+				rangeValue:[],
+				selectType:0
+			}
+		},
+		props:{
+			defaultValue:{
+				type:String|Array,
+				default:''
+			}
+		},
+		components:{
+			DateSelectRange,
+			DateSelect
+		},
+		created() {
+			this.selectType = typeof this.defaultValue == 'string'?0:1
+			if(this.selectType == 0) this.value = this.defaultValue
+			else this.rangeValue = this.defaultValue
+		},
+		methods: {
+			changeHandle(val){
+				if(this.selectType == 0) this.value = val
+				else this.rangeValue = val
+			},
+			selected(){
+				this.$emit('change',this.selectType==0?this.value:this.rangeValue)
+				this.showDateVisible = false
+			}
+		}
+		
+	}
+</script>
+
+<style>
+</style>
\ No newline at end of file

pages/airTicket/flightDetail.vue

+<template>
+	<view class="f-detail">
+		<view class="column items-center justify-center q-mt-md" v-if="loading">
+			<u-loading mode="circle" size="40"></u-loading>
+			<view class="normal-label text-center q-mt-sm">正在加载信息</view>
+		</view>
+		<template v-if="flight && !loading">
+			<view class="flight-card">
+				<view class="row items-center">
+					<view class="flight-status">去程</view>
+					<view class="city bold">{{goList[0].DepartureName}}</view>
+					<u-icon name='qianwangx' custom-prefix="tffont" color="#00000033" size="28"></u-icon>
+					<view class="city bold">{{goList[goList.length-1].ArrivalCityName}}</view>
+					<view class="col row" style="font-size: 14px;justify-content: flex-end;">
+						<text>{{goList[0].FlightDate.split('-').splice(1,2).join('-')}} {{getWeeks(goList[0].FlightDate)}} {{goList[0].Departure_time}}</text>
+						<u-icon class="q-ml-sm" name='arrow_down' custom-prefix="tffont" color="#00000066" size="32"></u-icon>
+					</view>
+				</view>
+			</view>
+			<view class="flight-card">
+				<view class="row items-center">
+					<view class="flight-status">回程</view>
+					<view class="city bold">{{backList[0].DepartureName}}</view>
+					<u-icon name='qianwangx' custom-prefix="tffont" color="#00000033" size="28"></u-icon>
+					<view class="city bold">{{backList[goList.length-1].ArrivalCityName}}</view>
+					<view class="col row" style="font-size: 14px;justify-content: flex-end;">
+						<text>{{backList[0].FlightDate.split('-').splice(1,2).join('-')}} {{getWeeks(backList[0].FlightDate)}} {{backList[0].Departure_time}}</text>
+						<u-icon class="q-ml-sm" name='arrow_down' custom-prefix="tffont" color="#00000066" size="32"></u-icon>
+					</view>
+				</view>
+			</view>
+			<view class="flight-card q-mt-md">
+				<view class="title">选择乘机人</view>
+				<guest></guest>
+			</view>
+		</template>
+	</view>
+</template>
+
+<script>
+	import guest from './components/guest/index.vue'
+	export default {
+		data() {
+			return {
+				id:0,
+				loading:false,
+				flight:null,
+				goList:[],
+				backList:[],
+				dateRangeValue: {
+					type: 0,
+					startDate: '',
+					fuzzy: {
+						fuzzyType: 0,
+						fuzzyTypeName: '',
+						weeks: [],
+						dayRangStatus: false,
+						dayRange: [4, 10]
+					},
+					formatStartDate: '任意时间出发'
+				},
+				chosenResult: [{
+						type: 0,
+						ID: 0,
+						Name: '全部城市'
+					},
+					{
+						type: 1,
+						ID: 0,
+						Name: '全部城市'
+					}
+				],
+				parementers: {
+					StartDate: '',
+					EndDate: '',
+					DepartCityId: 0,
+					ArriveCityId: 0,
+					AirLineID: 0,
+					groupId: 2,
+					TicketType: 2,
+					StartPlayDay: 0,
+					EndPlayDay: 0,
+					WeekDay: ''
+				},
+			}
+		},
+		components:{guest},
+		onLoad(options) {
+			if(options.id && uni.getStorageSync('scf')){
+				this.id = options.id
+				
+				uni.setNavigationBarColor({
+					backgroundColor:'#DEBF7B',
+					frontColor:'#000000'
+				})
+				const s = uni.getStorageSync('scf')
+				this.dateRangeValue = s.dateRange
+				this.chosenResult = s.cities
+				
+				this.getTopLowTicketHandle()
+				return
+			}
+			this.navigatorToHomeHandle()
+		},
+		created() {
+			
+		},
+		methods: {
+			navigatorToHomeHandle(){
+				uni.redirectTo({
+					url:'/pages/index/index'
+				})
+			},
+			getTopLowTicketHandle() {
+				this.resolveParameterHanle()
+				this.lowData = []
+				this.loading = true
+				this.apipost('AirTicket_get_GetTopTicketProduct', this.parementers, (r) => {
+					if (r.resultCode == 1) {
+						this.resolveTicketHandle(r.data)
+					}else{
+						this.navigatorToHomeHandle()
+					}
+					
+					this.loading = false
+				}, (e) => {
+					this.loading = false
+					this.navigatorToHomeHandle()
+				})
+			},
+			resolveTicketHandle(data){
+				const t = data[0].TicketProductList.find(x=>x.TCID==this.id)
+				if(!t) {
+					this.navigatorToHomeHandle()
+					return
+				}
+				this.goList = t.FlightList.filter(x=>x.FlightType==1)
+				this.backList = t.FlightList.filter(x=>x.FlightType==3)
+				
+				this.flight = t
+				
+			},
+			getWeeks(d){
+				const date = new Date(d)
+				const weeks = ['日', '一', '二', '三', '四', '五', '六']
+				return `周${weeks[date.getDay()]}`
+			},
+			resolveParameterHanle() {
+				this.resetParameterHandle()
+				this.parementers.DepartCityId = this.chosenResult[0].ID
+				this.parementers.ArriveCityId = this.chosenResult[1].ID
+			
+				if (this.dateRangeValue.type == 1) {
+					this.currentDate = this.formatDateHandle(start)
+					this.filterDate.start = this.dateRangeValue.startDate
+					this.filterDate.end = this.dateRangeValue.startDate
+				} else {
+					const d = this.resolveDateByFuzzyHandle(this.dateRangeValue.fuzzy.fuzzyType)
+					this.parementers.StartDate = d[0]
+					this.parementers.EndDate = d[1]
+				}
+			},
+			resetParameterHandle() {
+				this.currentDate = ''
+				this.parementers = {
+					StartDate: '',
+					EndDate: '',
+					DepartCityId: 0,
+					ArriveCityId: 0,
+					AirLineID: 0,
+					groupId: 2,
+					TicketType: 2,
+					StartPlayDay: 0,
+					EndPlayDay: 0,
+					WeekDay: ''
+				}
+			},
+			formatDateHandle(date) {
+				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`
+			},
+			resolveDateByFuzzyHandle(t) {
+				if (t == 0) return ['', '']
+				let start = new Date();
+				let end = new Date()
+				if (t == -1) {
+					start.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
+					end.setMonth(end.getMonth() + 1);
+				} else if (t == -2) {
+					start.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
+					end.setMonth(end.getMonth() + 3)
+				} else {
+					const currentDate = new Date()
+					currentDate.setMonth(currentDate.getMonth() + t);
+					const year = currentDate.getFullYear();
+					const month = currentDate.getMonth();
+					start = new Date(year, month, 1);
+					end = new Date(year, month + 1, 0);
+				}
+				return [this.formatDateHandle(start), this.formatDateHandle(end)]
+			},
+		}
+	}
+</script>
+
+<style>
+@import url('../../asset/css/flex.css');
+.f-detail{
+	background-color: #F5F5F5;
+	background-image: linear-gradient(180deg, #DEBF7B, #F5F5F5);
+	background-size: 100% 900rpx;
+	background-repeat: no-repeat;
+	height: 100vh;
+	width: 100vw;
+	padding-top: 30rpx;
+}
+.f-detail .flight-card{
+	background-color: #fff;
+	border-radius: 16rpx;
+	padding: 20rpx;
+	margin: 30rpx;
+	
+}
+.f-detail .flight-card .title{
+	font-size: 32rpx;
+	font-weight: bold;
+	color: #080A09;
+}
+.f-detail .flight-card .flight-status{
+	background: #E1C278;
+	border-radius: 8rpx;
+	font-size: 24rpx;
+	color: #111111;
+	font-weight: 400;
+	padding: 7rpx 14rpx;
+}
+.f-detail .flight-card .city{
+	width: 98rpx;
+	margin: 0 12rpx;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: #080A09;
+}
+.f-detail .flight-card .bold{
+	font-size: 28rpx;
+	font-weight: bold;
+	line-height: 1;
+}
+</style>

pages/airTicket/ticketList/ticketList.vue

 <template>
-	<view style="height: 100vh;" class="column">
+	<view style="height: 100vh;background-color: #F3F1EF;" class="flight-list column">
+		<chosen-city :enable-all="false" :padding-top="`${barHeight}px`" @closed="resetCityVisible=false" @change="setNewCitiesHandle" :value="chosenResult" v-if="resetCityVisible"></chosen-city>
 		<view class="nav-box row items-center" :style="{paddingTop:barHeight+'px',height:(barHeight+44)+'px'}">
 			<view class="home-btn row items-center" @click="goBackHandle">
 				<u-icon name="arrowleft" custom-prefix="tffont" color="#111" size="34"
@@ -9,7 +10,7 @@
 				<u-icon name="home_1" custom-prefix="tffont" color="#111" size="38"
 					style="font-weight: bolder;"></u-icon>
 			</view>
-			<view class="title row items-center justify-center">
+			<view class="title row items-center justify-center" @click="resetCityVisible=true">
 				<text>{{chosenResult[0].Name}}</text>
 				<view style="margin:0 20rpx">
 					<u-icon name="wangfan1" custom-prefix="tffont" color="#00000066" size="36"></u-icon>
@@ -18,7 +19,7 @@
 				<u-icon class="q-ml-sm" name='arrow_down' custom-prefix="tffont" color="#00000066" size="32"></u-icon>
 			</view>
 		</view>
-		<view class="column items-center justify-center q-mb-md" v-if="loadingLow">
+		<view class="column items-center justify-center q-mt-md" v-if="loadingLow">
 			<u-loading mode="circle" size="40"></u-loading>
 			<view class="normal-label text-center q-mt-sm">正在加载信息</view>
 		</view>
@@ -27,9 +28,9 @@
 		</view>
 		<template v-else>
 			<view class="time-list row" style="padding:0 12rpx;">
-				<scroll-view scroll-x class="col" style="padding:12rpx 0;">
+				<scroll-view :scroll-left="scrollLeft" scroll-x class="col header-scroll" style="padding:12rpx 0;width:1px">
 					<view class="row items-center">
-						<view class="time-item" @click="setCurrentDateHandle"
+						<view class="time-item" :id="'a'+x.FlightDate.replaceAll('-','')" @click="flightDateChangeHandle(x.FlightDate)"
 							:class="{'active':currentDate==x.FlightDate}" v-for="(x,i) in lowHeadData" :key="i">
 							<view class="">{{x.FlightDate.split('-').splice(1,2).join('-')}}</view>
 							<view style="margin: 10rpx 0;">{{x.WeekDayStr}}</view>
@@ -37,15 +38,117 @@
 						</view>
 					</view>
 				</scroll-view>
-				<view class="time-item" style="box-shadow: -1 0 10px #00000066;">
-					<u-icon class="q-ml-sm" name='arrow_down' custom-prefix="tffont" color="#00000066" size="32"></u-icon>
+				<view class="time-item more row items-center justify-center">
+					<date-select @change="dateFilterChange" :default-value="[filterDate.start,filterDate.end]">
+						<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638753835239709518.png" mode="widthFix" style="width: 30rpx;"></image>
+					</date-select>
+				</view>
+			</view>
+			<view class="filter-list">
+				<view class="filter-items col" @click="sortChangeHandle(x.id)" :class="{'active':x.id==sortBy}" v-for="(x,i) in sortList" :key="i">{{x.name}}</view>
+			</view>
+			<scroll-view scroll-y="true" class="col" style="width: 100%;height: 1px;">
+				<view style="padding:30rpx">
+					<view class="flight-card" v-for="(x,i) in flights">
+						
+						<view class="q-mt-md row items-start">
+							<view class="col">
+								<view class="first-blond">
+									<view class="row items-start">
+										<view class="flight-status">去程</view>
+										<view class="flight-time">
+											<view class="">{{x.GoFlightList[0].Departure_time}}</view>
+											<view class="thin">{{x.GoFlightList[0].dName.replaceAll('国际机场','').replaceAll('机场','')}}</view>
+										</view>
+										<view class="used-time column col">
+											<view class="how-time row items-center justify-center">
+												<text>{{x.DepartureTime.Days*24+x.DepartureTime.Hours}}h {{x.DepartureTime.Minutes}}m</text>
+												<view class="other-status" v-if="x.GoFlightList.length>1">
+													中转{{x.GoFlightList.length-1}}次
+												</view>
+											</view>
+											<view class="line">&nbsp;</view>
+											<view class="t-cities" v-if="x.GoFlightList.length>1">
+												<text v-for="(c,ci) in x.GoFlightList" :key="ci">{{ci==0?c.ArrivalCityName:c.DepartureName}} </text>
+											</view>
+										</view>
+										<view class="flight-time">
+											<view class="day-diff" v-if="x.GoDiffDay!=0">
+												{{`${x.GoDiffDay>0?'+':''}${x.GoDiffDay}`}}天
+											</view>
+											<view class="">{{x.GoFlightList[x.GoFlightList.length-1].Arrival_time}}</view>
+											<view class="thin">{{x.GoFlightList[x.GoFlightList.length-1].aName.replaceAll('国际机场','').replaceAll('机场','')}}</view>
+										</view>
+									</view>
+									<view class="q-mt-md row items-center">
+										<view class="row items-center" v-for="(a,ai) in x.GoFlightList">
+											<view class="login-box">
+												<image :src="`https://static.tripcdn.com/packages/flight/airline-logo/latest/airline/48/${a.AlCode}.png`" mode="widthFix"></image>
+											</view>
+											<text class="login-text">{{a.AlName}}{{a.Flight_number}} </text>
+										</view>
+									</view>
+								</view>
+								<view class="second-blond" style="margin-top: 62rpx;">
+									<view class="row items-start">
+										<view class="flight-status">回程</view>
+										<view class="flight-time">
+											<view class="">{{x.BackFlightList[0].Departure_time}}</view>
+											<view class="thin">{{x.BackFlightList[0].dName.replaceAll('国际机场','').replaceAll('机场','')}}</view>
+										</view>
+										<view class="used-time column col">
+											<view class="how-time row items-center justify-center">
+												<text>{{x.ArrivalTime.Days*24+x.ArrivalTime.Hours}}h {{x.ArrivalTime.Minutes}}m</text>
+												<view class="other-status" v-if="x.BackFlightList.length>1">
+													中转{{x.BackFlightList.length-1}}次
+												</view>
+											</view>
+											<view class="line">&nbsp;</view>
+											<view class="t-cities" v-if="x.BackFlightList.length>1">
+												<text v-for="(c,ci) in x.BackFlightList" :key="ci">{{ci==0?c.ArrivalCityName:c.DepartureName}} </text>
+											</view>
+										</view>
+										<view class="flight-time">
+											<view class="day-diff" v-if="x.BackDiffDay!=0">
+												{{`${x.BackDiffDay>0?'+':''}${x.BackDiffDay}`}}天
+											</view>
+											<view class="">{{x.BackFlightList[x.BackFlightList.length-1].Arrival_time}}</view>
+											<view class="thin">{{x.BackFlightList[x.BackFlightList.length-1].aName.replaceAll('国际机场','').replaceAll('机场','')}}</view>
+										</view>
+									</view>
+									<view class="q-mt-md row items-center">
+										<view class="row items-center" v-for="(a,ai) in x.BackFlightList">
+											<view class="login-box">
+												<image :src="`https://static.tripcdn.com/packages/flight/airline-logo/latest/airline/48/${a.AlCode}.png`" mode="widthFix"></image>
+											</view>
+											<text class="login-text">{{a.AlName}}{{a.Flight_number}} </text>
+										</view>
+									</view>
+								</view>
+							</view>
+							<view>
+								<view class="price">
+									<text>¥</text>
+									<text class="big">{{x.B2BPrice}}</text>
+								</view>
+								<view class="num row items-center">
+									<text style="padding: 6rpx;">剩余</text>
+									<text class="col text-center" style="padding:6rpx;background-color: #B99846;">{{x.B2BSellNum}}张</text>
+								</view>
+								<view  class="text-center buy-button">预定</view>
+							</view>
 						</view>
 					</view>
+				</view>
+			</scroll-view>
 		</template>
+		
 	</view>
 </template>
 
 <script>
+	import DateSelect from '../components/time/DateSelect.vue';
+	import ChosenCity from '../components/address/ChosenCity.vue';
 	export default {
 		data() {
 			return {
@@ -65,6 +168,7 @@
 					},
 					formatStartDate: '任意时间出发'
 				},
+				resetCityVisible:false,
 				chosenResult: [{
 						type: 0,
 						ID: 0,
@@ -88,7 +192,27 @@
 					StartPlayDay: 0,
 					EndPlayDay: 0,
 					WeekDay: ''
+				},
+				sortBy:0,
+				scrollLeft:0,
+				sortList:[
+					{id:0,name:'更早起飞'},
+					{id:1,name:'耗时更短'},
+					{id:2,name:'价格更低'},
+					{id:3,name:'仅看直飞'}
+				],
+				filterDate:{
+					start:'',
+					end:''
+				}
 			}
+		},
+		components:{DateSelect,ChosenCity},
+		computed: {
+			flights() {
+				if(this.currentDate=='') return []
+				let filteredFlights = this.lowData.filter(flight => flight.FlightDate === this.currentDate);
+				return this.applySorting(filteredFlights);
 			}
 		},
 		created() {
@@ -102,6 +226,11 @@
 			});
 			this.getTopLowTicketHandle()
 		},
+		onLoad(options) {
+			if(options.dv){
+				this.currentDate = decodeURIComponent(options.dv)
+			}
+		},
 		mounted() {
 			let that = this
 			uni.getSystemInfo({
@@ -111,28 +240,70 @@
 			});
 		},
 		methods: {
+			applySorting(flights) {
+			    switch (this.sortBy) {
+			      case 0:
+			        return flights.sort((a, b) => new Date(`${a.FlightDate} ${a.FlightList[0].Departure_time}`) - new Date(`${b.FlightDate} ${b.FlightList[0].Departure_time}`));
+			      case 1:
+			        return flights.sort((a, b) => this.getFlightDuration(a) - this.getFlightDuration(b));
+			      case 2:
+			        return flights.sort((a, b) => a.B2BPrice - b.B2BPrice);
+			      case 3:
+			        return flights.filter(flight => flight.GoFlightList.length === 1 && flight.BackFlightList.length === 1);
+			      default:
+			        return flights;
+			    }
+			  },
+			  getFlightDuration(flight) {
+			    const duration = (flight.DepartureTime.Days * 24 * 60) + (flight.DepartureTime.Hours * 60) + flight.DepartureTime.Minutes;
+			    return duration;
+			  },
+			centerSelectedItem() {
+				if (!this.currentDate || this.currentDate === '') return;
+				const i = this.lowHeadData.findIndex(x => x.FlightDate === this.currentDate);
+				let targetScrollLeft = 0;
+				if (i >= 3) {
+					targetScrollLeft = (i - 2) * 76;
+				}
+				const duration = 500; // 滚动时长，单位为毫秒
+				const startScrollLeft = this.scrollLeft;
+				const distance = targetScrollLeft - startScrollLeft;
+	
+				const animation = uni.createAnimation({
+					duration: duration,
+					timingFunction: 'ease-in-out'
+				});
+	
+				let currentTime = 0;
+				const interval = setInterval(() => {
+					currentTime += 16; // 约 60fps
+					if (currentTime >= duration) {
+						clearInterval(interval);
+						this.scrollLeft = targetScrollLeft;
+					} else {
+						const progress = currentTime / duration;
+						this.scrollLeft = startScrollLeft + distance * this.easeInOutQuad(progress);
+					}
+				}, 16);
+			},
+			easeInOutQuad(t) {
+				return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+			},
 			resolveParameterHanle() {
 				this.resetParameterHandle()
 				this.parementers.DepartCityId = this.chosenResult[0].ID
 				this.parementers.ArriveCityId = this.chosenResult[1].ID
 
 				if (this.dateRangeValue.type == 1) {
-					//this.parementers.StartDate = this.dateRangeValue.startDate
 					this.currentDate = this.formatDateHandle(start)
-					//this.parementers.EndDate = this.dateRangeValue.startDate
+					this.filterDate.start = this.dateRangeValue.startDate
+					this.filterDate.end = this.dateRangeValue.startDate
 				} else {
 					const d = this.resolveDateByFuzzyHandle(this.dateRangeValue.fuzzy.fuzzyType)
-					this.parementers.StartDate = d[0]
-					this.parementers.EndDate = d[1]
-					// if (this.dateRangeValue.fuzzy.weeks.length > 0) {
-					// 	const weeks = [2, 3, 4, 5, 6, 7, 1]
-					// 	this.parementers.WeekDay = weeks.filter((x, i) => this.dateRangeValue.fuzzy.weeks.indexOf(i) != -1)
-					// 		.join(',')
-					// }
-					// if (this.dateRangeValue.fuzzy.dayRangStatus) {
-					// 	this.parementers.StartPlayDay = this.dateRangeValue.fuzzy.dayRange[0]
-					// 	this.parementers.EndPlayDay = this.dateRangeValue.fuzzy.dayRange[1]
-					// }
+					this.parementers.StartDate = ''
+					this.parementers.EndDate = ''
+					this.filterDate.start=d[0]
+					this.filterDate.end = d[1]
 				}
 			},
 			resetParameterHandle() {
@@ -169,7 +340,7 @@
 					end = new Date(year, month + 1, 0);
 				}
 				this.currentDate = this.formatDateHandle(start)
-				return ['', ''] //[this.formatDateHandle(start), this.formatDateHandle(end)]
+				return [this.formatDateHandle(start), this.formatDateHandle(end)]
 			},
 			formatDateHandle(date) {
 				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`
@@ -182,6 +353,7 @@
 					if (r.resultCode == 1) {
 						this.lowData = this.formatLowData(r.data)
 					}
+					this.centerSelectedItem()
 					this.loadingLow = false
 				}, (e) => {
 					this.loadingLow = false
@@ -193,13 +365,34 @@
 				list.sort((a, b) => {
 					return new Date(a.FlightDate) - new Date(b.FlightDate);
 				})
+				list.forEach(x=>{
+					x.GoFlightList = x.FlightList.filter(f=>f.FlightType==1)
+					x.BackFlightList = x.FlightList.filter(f=>f.FlightType==3)
+					
+					const go = x.GoFlightList[0]
+					const back = x.BackFlightList[0]
+					x.GoDiffDay = this.resolveDiffDayHandle(`${go.FlightDate} ${go.Departure_time}`,go.DepartureUTCZone,go.ArrivalCityUTCZone,x.DepartureTime)
+					x.BackDiffDay = this.resolveDiffDayHandle(`${back.FlightDate} ${back.Departure_time}`,back.DepartureUTCZone,back.ArrivalCityUTCZone,x.ArrivalTime)
+				})
 				this.lowHeadData =this.foramtHeaderListHandle(list)
+				if(this.lowHeadData.findIndex(x=>x.FlightDate==this.currentDate)==-1){
+					this.currentDate = this.lowHeadData[0].FlightDate
+				}
 				return list
 			},
-			setCurrentDateHandle(date) {
-				this.currentDate = date
-			},
-			foramtHeaderListHandle(d){
+			foramtHeaderListHandle(list){
+				const d = list.filter(x=>{
+					const td = new Date(x.FlightDate)
+					const max = new Date()
+					let flag = true
+					if(this.filterDate.start!=''){
+						flag = td>=new Date(this.filterDate.start)
+					}
+					if(this.filterDate.end!='' && flag){
+						flag = td<=new Date(this.filterDate.end)
+					}
+					return flag
+				})
 				const result = d.reduce((acc, item) => {
 				    const groupValue = item.FlightDate;
 				    const currentPrice = item.B2BPrice;
@@ -217,7 +410,6 @@
 				    return acc;
 				}, {});
 				
-				
 				const finalResult = Object.values(result);
 				return finalResult
 			},
@@ -234,7 +426,43 @@
 				uni.redirectTo({
 					url: '/pages/index/index'
 				})
-			}
+			},
+			flightDateChangeHandle(date){
+				this.currentDate = date
+				this.centerSelectedItem()
+			},
+			sortChangeHandle(id){
+				this.sortBy = id
+			},
+			resolveDiffDayHandle(s,sz,ez,ti){
+				const sDate = new Date(s)
+				const sourceDate = new Date(s)
+				sDate.setHours(sDate.getHours()+(ez-sz))
+				sDate.setDate(sDate.getDate()+ti.Days)
+				sDate.setHours(sDate.getHours()+ti.Hours)
+				sDate.setMinutes(sDate.getMinutes()+ti.Minutes)
+				sDate.setHours(0,0,0)
+				sourceDate.setHours(0,0,0)
+				return (((sDate.getTime()-sourceDate.getTime())/(24 * 60 * 60 * 1000)))
+			},
+			dateFilterChange(val){
+				this.filterDate.start = val[0]
+				this.filterDate.end = val[1]
+				this.lowHeadData = this.foramtHeaderListHandle(this.lowData)
+				
+				if(this.lowHeadData.length>0&& this.lowHeadData.findIndex(x=>x.FlightDate==this.currentDate)==-1){
+					this.currentDate = this.lowHeadData[0].FlightDate
+				} else if(this.lowHeadData.length==0) this.currentDate=''
+			},
+			setNewCitiesHandle(val){
+				this.chosenResult = val
+				uni.setStorageSync('scf',{
+					cities:this.chosenResult,
+					dateRange: this.dateRangeValue
+				})
+				this.getTopLowTicketHandle()
+				this.resetCityVisible = false
+			},
 		}
 	}
 </script>
@@ -272,12 +500,13 @@
 		text-align: center;
 		width: calc(100vw - 140px);
 	}
-
+	.header-scroll{
+		 transition: scroll-left 0.5s ease;
+	}
 	.time-list {
 		background: linear-gradient(0, #eacf8d, #d4b465);
 		width: 100%;
 	}
-
 	.time-list .time-item {
 		padding: 22rpx 33rpx;
 		font-size: 24rpx;
@@ -299,7 +528,17 @@
 		content: ' ';
 		background-color: #FFFFFF33;
 	}
-
+	.time-list .time-item.more::before{
+		position: absolute;
+		left: -10rpx;
+		width: 10rpx;
+		top: 0;
+		bottom: 0;
+		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638753830279837045.png');
+		background-size: auto 100%;
+		display: block;
+		content: ' ';
+	}
 	.time-list .time-item.active {
 		background-color: #e7d9b2;
 		font-weight: bold;
@@ -311,6 +550,169 @@
 		display: none;
 	}
 	
+	.filter-list{
+		background-color: #eacf8d;
+		border-top: 1px solid #ffffff2b;
+		display: flex;
+		padding: 12rpx;
+	}
+	.filter-list .filter-items{
+		/* background: #F5F5F5; */
+		border-radius: 8rpx;
+		padding:12rpx;
+		font-size: 24rpx;
+		color: #111111;
+		margin-right: 12px;
+		text-align: center;
+	}
+	.filter-list .filter-items:last-child{
+		margin-right: 0;
+	}
+	.filter-list .filter-items.active{
+		background-color: #e7d9b2;
+	}
+	.flight-card{
+		background-color: #fff;
+		border-radius: 16rpx;
+		padding: 30rpx;
+		margin-bottom: 30rpx;
+		
+	}
+	.flight-card .flight-status{
+		background: #E1C278;
+		border-radius: 8rpx;
+		font-size: 24rpx;
+		color: #111111;
+		font-weight: 400;
+		padding: 14rpx 4rpx;
+		text-orientation: mixed;
+		writing-mode: tb;
+		
+	}
+	.flight-card .flight-time{
+		font-weight: bold;
+		font-size: 36rpx;
+		color: #000000;
+		line-height: 1;
+		margin:0 20rpx;
+		position: relative;
+		
+	}
+	.flight-card .flight-time .day-diff{
+		position: absolute;
+		top: -35rpx;
+		line-height: 1;
+		font-size: 22rpx;
+		color: #FF5858;
+		left: 4rpx;
+	}
+	.flight-card .flight-time .thin{
+		line-height: 1;
+		margin-top: 16rpx;
+		font-weight: 400;
+		font-size: 22rpx;
+		color: #000000;
+		max-width: 45px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.flight-card .used-time{
+		margin-top: -16rpx;
+	}
+	.flight-card .used-time .how-time{
+		height: 24rpx;
+		font-size: 20rpx;
+		color: #9999A5;
+	}
+	.flight-card .used-time .other-status{
+		background: #ECF1F4;
+		border-radius: 4rpx;
+		height: 24rpx;
+		font-size: 18rpx;
+		color: #111111;
+		padding: 0 7rpx;
+		margin-left: 14rpx;
+		font-weight: 500;
+	}
+	.flight-card .used-time .line{
+		height: 4rpx;
+		background: #ECF1F4;
+		position: relative;
+		margin-top: 6rpx;
+	}
+	.flight-card .used-time .line::before,
+	.flight-card .used-time .line::after{
+		position: absolute;
+		left: 0;
+		top:-4rpx;
+		width: 12rpx;
+		height: 12rpx;
+		border-radius: 12rpx;
+		display: block;
+		content: ' ';
+		background: #ECF1F4;
+	}
+	.flight-card .used-time .line::after{
+		left: unset;
+		right: 0;
+	}
+	.flight-card .used-time .t-cities{
+		font-size: 19rpx;
+		color: #111111;
+		margin-top: 8rpx;
+		text-align: center;
+	}
+	.flight-card .login-box{
+		background: #FFFFFF;
+		border-radius: 50%;
+		border: 1px solid #ECF1F4;
+		width: 36rpx;
+		height: 36rpx;
+		text-align: center
+	}
+	.flight-card .login-box image{
+		width: 26rpx;
+		height: 26rpx;
+	}
+	.flight-card .login-text{
+		font-size: 22rpx;
+		color: #9999A5;
+		margin-right: 36rpx;
+		margin-left: 10rpx;
+	}
+	.flight-card .price{
+		margin-left: 25rpx;
+		color:#FF3166;
+		font-weight: bold;
+		font-size: 20rpx;
+		line-height: 1;
+	}
+	.flight-card .price .big{
+		font-size: 36rpx;
+	}
+	.flight-card .num{
+		margin-top: 24rpx;
+		border-radius: 7rpx;
+		background-color: #080A09;
+		font-size: 22rpx;
+		font-weight: 400;
+		color: #FFF;
+		overflow: hidden;
+		padding: 0;
+		line-height: 1;
+	}
+	.flight-card .buy-button{
+		background-color: #080A09;
+		border-radius: 8rpx;
+		height: 50rpx;
+		line-height: 50rpx;
+		color: #EEF1F4;
+		text-align: center;
+		margin-top: 16px;
+		font-size: 25rpx;
+		font-weight: 400;
+	}
 	/* .nav-box .home-btn:active{
 		background-color: #ccc;
 	} */