|
|
|
@ -0,0 +1,752 @@ |
|
|
|
<template> |
|
|
|
<view class="page__view"> |
|
|
|
|
|
|
|
<view class="header"> |
|
|
|
<view class="filter"> |
|
|
|
<view class="filter-header"> |
|
|
|
<view class="bar"> |
|
|
|
<view> |
|
|
|
<button v-if="isFold" class="btn is-fold" @click="isFold = false"> |
|
|
|
<text>筛选</text> |
|
|
|
<image class="btn-icon" src="@/static/image/icon-arrow-down.png" mode="widthFix"></image> |
|
|
|
</button> |
|
|
|
<button v-else class="btn" @click="isFold = true"> |
|
|
|
<text>筛选</text> |
|
|
|
<image class="btn-icon" src="@/static/image/icon-arrow-up-light.png" mode="widthFix"></image> |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
<view class="title">分类</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-if="!isFold" class="filter-content"> |
|
|
|
<view class="filter-item" v-for="filter in filters" :key="filter.id"> |
|
|
|
<view class="filter-item-label">{{ `${filter.label}：` }}</view> |
|
|
|
<view class="filter-item-content"> |
|
|
|
<template v-if="filter.key === 'price'"> |
|
|
|
<view class="flex range price"> |
|
|
|
<view class="range-item"> |
|
|
|
<uv-input |
|
|
|
v-model="startPrice" |
|
|
|
type="number" |
|
|
|
inputAlign="center" |
|
|
|
placeholder="开始价格" |
|
|
|
placeholderStyle="color: #181818; font-size: 28rpx; font-weight: 400;" |
|
|
|
:customStyle="{ |
|
|
|
backgroundColor: 'transparent', |
|
|
|
padding: '0', |
|
|
|
boxSizing: 'border-box', |
|
|
|
fontSize: '28rpx', |
|
|
|
border: 'none', |
|
|
|
}" |
|
|
|
fontSize="28rpx" |
|
|
|
:clearable="true" |
|
|
|
></uv-input> |
|
|
|
</view> |
|
|
|
<view class="split">至</view> |
|
|
|
<view class="range-item"> |
|
|
|
<uv-input |
|
|
|
v-model="endPrice" |
|
|
|
type="number" |
|
|
|
inputAlign="center" |
|
|
|
placeholder="结束价格" |
|
|
|
placeholderStyle="color: #181818; font-size: 28rpx; font-weight: 400;" |
|
|
|
:customStyle="{ |
|
|
|
backgroundColor: 'transparent', |
|
|
|
padding: '0', |
|
|
|
boxSizing: 'border-box', |
|
|
|
fontSize: '28rpx', |
|
|
|
border: 'none', |
|
|
|
}" |
|
|
|
fontSize="28rpx" |
|
|
|
:clearable="true" |
|
|
|
></uv-input> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
<template v-else-if="filter.key === 'time'"> |
|
|
|
<view class="flex range time"> |
|
|
|
<view class="range-item" @click="openStartDatePicker"> |
|
|
|
{{ startDate ? $dayjs(startDate).format('YYYY-MM-DD') : '开始日期' }} |
|
|
|
<button v-if="startDate" class="btn btn-clear" @click.stop="onClearStartDate"> |
|
|
|
<uv-icon name="close-circle" color="#B5B5B5" size="28rpx"></uv-icon> |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
<view class="split">至</view> |
|
|
|
<view class="range-item" @click="openEndDatePicker"> |
|
|
|
{{ endDate ? $dayjs(endDate).format('YYYY-MM-DD') : '结束日期' }} |
|
|
|
<button v-if="endDate" class="btn btn-clear" @click.stop="onClearEndDate"> |
|
|
|
<uv-icon name="close-circle" color="#B5B5B5" size="28rpx"></uv-icon> |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<uv-datetime-picker |
|
|
|
ref="startDatePicker" |
|
|
|
v-model="startDate" |
|
|
|
mode="date" |
|
|
|
title="开始日期" |
|
|
|
confirmColor="#00A9FF" |
|
|
|
round="32rpx" |
|
|
|
:minDate="minTime" |
|
|
|
@confirm="onStartDateChange" |
|
|
|
></uv-datetime-picker> |
|
|
|
<uv-datetime-picker |
|
|
|
ref="endDatePicker" |
|
|
|
v-model="endDate" |
|
|
|
mode="date" |
|
|
|
title="结束日期" |
|
|
|
confirmColor="#00A9FF" |
|
|
|
round="32rpx" |
|
|
|
:minDate="startDate || minTime" |
|
|
|
@confirm="onEndDateChange" |
|
|
|
></uv-datetime-picker> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<view class="option"> |
|
|
|
<view |
|
|
|
v-for="option in filter.options" |
|
|
|
:key="option.id" |
|
|
|
:class="['option-item', option.id == queryParams[filter.key] ? 'is-active' : '']" |
|
|
|
@click="onClickFilter(filter.key, option.id)" |
|
|
|
> |
|
|
|
{{ option.label }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<button class="flex btn btn-fold" @click="isFold = false"> |
|
|
|
<image class="btn-icon" src="@/static/image/icon-arrow-up.png" mode="widthFix"></image> |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="sort"> |
|
|
|
<sortBar></sortBar> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 分类商品列表 --> |
|
|
|
<view class="main" > |
|
|
|
|
|
|
|
<uv-vtabs |
|
|
|
:list="categoryList" |
|
|
|
keyName="name" |
|
|
|
:current="current" |
|
|
|
:chain="true" |
|
|
|
@change="change" |
|
|
|
|
|
|
|
barWidth="177rpx" |
|
|
|
barBgColor="#F5F5F5" |
|
|
|
:barItemStyle="{ |
|
|
|
color: '#1D2129', |
|
|
|
fontSize: '28rpx', |
|
|
|
fontWeight: 400, |
|
|
|
}" |
|
|
|
:barItemActiveStyle="{ |
|
|
|
color: '#00A9FF', |
|
|
|
fontWeight: 600, |
|
|
|
backgroundColor: '#FFFFFF', |
|
|
|
}" |
|
|
|
:barItemActiveLineStyle="{ |
|
|
|
background: '#00A9FF', |
|
|
|
margin: '48rpx 4rpx', |
|
|
|
borderRadius: '4rpx', |
|
|
|
}" |
|
|
|
> |
|
|
|
<uv-vtabs-item v-for="(item, index) in categoryList" :index="index" :key="item.id"> |
|
|
|
<template v-if="item.children.length"> |
|
|
|
<view class="card" v-for="product in item.children" :key="product.id" > |
|
|
|
<productCard :data="product" ></productCard> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<uv-empty text="还没有呢"/> |
|
|
|
</template> |
|
|
|
</uv-vtabs-item> |
|
|
|
</uv-vtabs> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- tabbar --> |
|
|
|
<tabber select="category" /> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
// import mixinsList from '@/mixins/list.js' |
|
|
|
import { mapState } from 'vuex' |
|
|
|
|
|
|
|
import tabber from '@/components/base/tabbar.vue' |
|
|
|
import sortBar from '@/components/product/sortBar.vue' |
|
|
|
import productCard from '@/components/product/productCard.vue' |
|
|
|
|
|
|
|
export default { |
|
|
|
// mixins: [mixinsList], |
|
|
|
components: { |
|
|
|
sortBar, |
|
|
|
productCard, |
|
|
|
tabber, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
current : 0, |
|
|
|
startPrice: null, |
|
|
|
endPrice: null, |
|
|
|
startDate: null, |
|
|
|
endDate: null, |
|
|
|
minTime: new Date().getTime(), |
|
|
|
queryParams: { |
|
|
|
pageNo: 1, |
|
|
|
pageSize: 1000, |
|
|
|
}, |
|
|
|
categoryList: [], |
|
|
|
filters: [], |
|
|
|
isFold: true, |
|
|
|
} |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
|
|
|
|
}, |
|
|
|
async onLoad({ categoryId }) { |
|
|
|
|
|
|
|
await Promise.allSettled([this.fetchCategoryList(), this.fetchFilters()]) |
|
|
|
console.log('categoryList', this.categoryList) |
|
|
|
console.log('filters', this.filters) |
|
|
|
|
|
|
|
await this.initList() |
|
|
|
|
|
|
|
if(this.categoryList.length > 0 && categoryId){ |
|
|
|
this.current = this.categoryList.findIndex(item => item.id === categoryId) |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
async fetchCategoryList() { |
|
|
|
this.categoryList = [ |
|
|
|
{ |
|
|
|
id: '001', |
|
|
|
name: '国际游', |
|
|
|
children: [], |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '002', |
|
|
|
name: '夏令营', |
|
|
|
children: [], |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '003', |
|
|
|
name: '周末营', |
|
|
|
children: [], |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '004', |
|
|
|
name: '周边游', |
|
|
|
children: [], |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '005', |
|
|
|
name: '定制游', |
|
|
|
children: [], |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '006', |
|
|
|
name: '周末活动', |
|
|
|
children: [], |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '007', |
|
|
|
name: '亲子活动', |
|
|
|
children: [], |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '008', |
|
|
|
name: '社会实践', |
|
|
|
children: [], |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '009', |
|
|
|
name: '夏令营', |
|
|
|
children: [], |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '010', |
|
|
|
name: '周末活动', |
|
|
|
children: [], |
|
|
|
}, |
|
|
|
] |
|
|
|
return |
|
|
|
try { |
|
|
|
this.categoryList = (await this.$fetch('getCategoryList', { pageSize: 1000 }))?.records?.map(item => ({ id: item.id, name: item.name, children: [] })) |
|
|
|
} catch(err) { |
|
|
|
this.categoryList = [] |
|
|
|
} |
|
|
|
}, |
|
|
|
async fetchFilters() { |
|
|
|
|
|
|
|
this.filters = [ |
|
|
|
{ |
|
|
|
id: '001', |
|
|
|
key: 'frontier', |
|
|
|
label: '国境', |
|
|
|
options: [ |
|
|
|
{ |
|
|
|
id: '00101', |
|
|
|
label: '国内', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '00102', |
|
|
|
label: '国外', |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '002', |
|
|
|
key: 'target', |
|
|
|
label: '目的地', |
|
|
|
options: [ |
|
|
|
{ |
|
|
|
label: '全部', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '00201', |
|
|
|
label: '上海', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '00202', |
|
|
|
label: '北京', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '00203', |
|
|
|
label: '浙江省', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '00204', |
|
|
|
label: '广东省', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '00205', |
|
|
|
label: '广西省', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '00206', |
|
|
|
label: '云南省', |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '003', |
|
|
|
key: 'age', |
|
|
|
label: '适合年龄', |
|
|
|
options: [ |
|
|
|
{ |
|
|
|
label: '全部', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '00301', |
|
|
|
label: '6-10岁', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '00302', |
|
|
|
label: '11-14岁', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '00303', |
|
|
|
label: '15-16岁', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '00304', |
|
|
|
label: '17-18岁', |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '004', |
|
|
|
key: 'long', |
|
|
|
label: '活动时长', |
|
|
|
options: [ |
|
|
|
{ |
|
|
|
label: '全部', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '00401', |
|
|
|
label: '1日', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '00402', |
|
|
|
label: '多日', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '00403', |
|
|
|
label: '寒假', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '00404', |
|
|
|
label: '暑假', |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '005', |
|
|
|
key: 'price', |
|
|
|
label: '价格区间', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '006', |
|
|
|
key: 'time', |
|
|
|
label: '出发日期', |
|
|
|
}, |
|
|
|
] |
|
|
|
|
|
|
|
this.filters.forEach(item => { |
|
|
|
const { key, options } = item |
|
|
|
|
|
|
|
if (!options?.length || !options[0]?.id) { |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
this.queryParams[key] = options[0].id |
|
|
|
}) |
|
|
|
|
|
|
|
// todo: fetch |
|
|
|
}, |
|
|
|
async queryProductList(categoryId) { |
|
|
|
|
|
|
|
return [ |
|
|
|
{ |
|
|
|
id: '001', |
|
|
|
image: '/static/image/temp-20.png', |
|
|
|
name: '新疆天山行7/9日丨醉美伊犁&吐鲁番双套餐', |
|
|
|
desc: '国内游·7-9天·12岁+', |
|
|
|
currentPrice: 688.99, |
|
|
|
originalPrice: 1200, |
|
|
|
registered: 4168, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '002', |
|
|
|
image: '/static/image/temp-24.png', |
|
|
|
name: '坝上双草原6日|乌兰布统+锡林郭勒＋长城', |
|
|
|
desc: '国内游·7-9天·12岁+', |
|
|
|
currentPrice: 688.99, |
|
|
|
originalPrice: 1200, |
|
|
|
registered: 4168, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '003', |
|
|
|
image: '/static/image/temp-25.png', |
|
|
|
name: '牛湖线探秘 | 清远牛湖线徒步，探秘天坑与大草原', |
|
|
|
desc: '国内游·7-9天·12岁+', |
|
|
|
currentPrice: 688.99, |
|
|
|
originalPrice: 1200, |
|
|
|
registered: 4168, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '004', |
|
|
|
image: '/static/image/temp-26.png', |
|
|
|
name: '低海拔藏区草原，汉藏文化大穿越', |
|
|
|
desc: '国内游·7-9天·12岁+', |
|
|
|
currentPrice: 688.99, |
|
|
|
originalPrice: 1200, |
|
|
|
registered: 4168, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '005', |
|
|
|
image: '/static/image/temp-27.png', |
|
|
|
name: '新丝路到敦煌7日 | 甘青轻松穿越，沙漠＋草原', |
|
|
|
desc: '国内游·7-9天·12岁+', |
|
|
|
currentPrice: 688.99, |
|
|
|
originalPrice: 1200, |
|
|
|
registered: 4168, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '006', |
|
|
|
image: '/static/image/temp-28.png', |
|
|
|
name: '呼伦贝尔6/8日|经典or环线双套餐可选', |
|
|
|
desc: '国内游·7-9天·12岁+', |
|
|
|
currentPrice: 688.99, |
|
|
|
originalPrice: 1200, |
|
|
|
registered: 4168, |
|
|
|
}, |
|
|
|
] |
|
|
|
|
|
|
|
return |
|
|
|
try { |
|
|
|
return (await this.$fetch('queryProductList', { ...this.queryParams, categoryId }))?.records || [] |
|
|
|
} catch (err) { |
|
|
|
return [] |
|
|
|
} |
|
|
|
}, |
|
|
|
async initList() { |
|
|
|
console.log('queryParams', this.queryParams) |
|
|
|
const results = await Promise.allSettled(this.categoryList.map(category => { return this.queryProductList(category.id) })) |
|
|
|
|
|
|
|
results.forEach((result, index) => { |
|
|
|
this.categoryList[index].children = result.value || [] |
|
|
|
}) |
|
|
|
|
|
|
|
console.log('categoryList', this.categoryList) |
|
|
|
}, |
|
|
|
change(e) { |
|
|
|
this.current = e |
|
|
|
}, |
|
|
|
search(){ |
|
|
|
// todo: set filter |
|
|
|
this.initList() |
|
|
|
}, |
|
|
|
onClickFilter(key, val) { |
|
|
|
if (val) { |
|
|
|
this.queryParams[key] = val |
|
|
|
} else { |
|
|
|
delete this.queryParams[key] |
|
|
|
} |
|
|
|
this.initList() |
|
|
|
}, |
|
|
|
openStartDatePicker() { |
|
|
|
this.$refs.startDatePicker?.[0]?.open?.(); |
|
|
|
}, |
|
|
|
onStartDateChange(e) { |
|
|
|
const date = e.value |
|
|
|
|
|
|
|
this.queryParams.startDate = date |
|
|
|
|
|
|
|
const { endDate } = this.queryParams |
|
|
|
|
|
|
|
if (endDate && this.$dayjs(date).isAfter(endDate, 'day')) { |
|
|
|
this.endDate = null |
|
|
|
delete this.queryParams.endDate |
|
|
|
} |
|
|
|
|
|
|
|
this.initList() |
|
|
|
}, |
|
|
|
onClearStartDate() { |
|
|
|
this.startDate = null |
|
|
|
|
|
|
|
delete this.queryParams.startDate |
|
|
|
|
|
|
|
this.initList() |
|
|
|
}, |
|
|
|
openEndDatePicker() { |
|
|
|
this.$refs.endDatePicker?.[0]?.open?.(); |
|
|
|
}, |
|
|
|
onEndDateChange(e) { |
|
|
|
const date = e.value |
|
|
|
|
|
|
|
this.queryParams.endDate = date |
|
|
|
|
|
|
|
const { startDate } = this.queryParams |
|
|
|
|
|
|
|
if (startDate && this.$dayjs(date).isBefore(startDate, 'day')) { |
|
|
|
this.startDate = null |
|
|
|
delete this.queryParams.startDate |
|
|
|
} |
|
|
|
|
|
|
|
this.initList() |
|
|
|
}, |
|
|
|
onClearEndDate() { |
|
|
|
this.endDate = null |
|
|
|
|
|
|
|
delete this.queryParams.endDate |
|
|
|
|
|
|
|
this.initList() |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.page__view { |
|
|
|
height: 100vh; |
|
|
|
background: linear-gradient(#DAF3FF, #FBFEFF 200rpx, #FBFEFF); |
|
|
|
|
|
|
|
/deep/ .uv-popup { |
|
|
|
z-index: 1000000 !important; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.header { |
|
|
|
width: 100%; |
|
|
|
padding: 0 32rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.filter { |
|
|
|
|
|
|
|
&-header { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: flex-end; |
|
|
|
height: 176rpx; |
|
|
|
padding-bottom: 12rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
.bar { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
|
|
|
|
|
.btn { |
|
|
|
display: inline-flex; |
|
|
|
align-items: center; |
|
|
|
column-gap: 8rpx; |
|
|
|
padding: 8rpx 30rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: 500; |
|
|
|
color: #FFFFFF; |
|
|
|
background: #00A9FF; |
|
|
|
border: 2rpx solid #00A9FF; |
|
|
|
border-radius: 64rpx; |
|
|
|
|
|
|
|
&-icon { |
|
|
|
width: 32rpx; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
|
|
|
|
&.is-fold { |
|
|
|
font-weight: 400; |
|
|
|
color: #191919; |
|
|
|
background: #D8F2FF; |
|
|
|
border-color: #00A9FF66; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
text-align: center; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 600; |
|
|
|
color: #191919; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&-content { |
|
|
|
margin-top: 24rpx; |
|
|
|
|
|
|
|
.btn { |
|
|
|
&-fold { |
|
|
|
margin-top: 32rpx; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
&-icon { |
|
|
|
width: 40rpx; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&-item { |
|
|
|
display: flex; |
|
|
|
|
|
|
|
& + & { |
|
|
|
margin-top: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-label { |
|
|
|
width: 156rpx; |
|
|
|
min-height: 64rpx; |
|
|
|
line-height: 64rpx; |
|
|
|
flex: none; |
|
|
|
} |
|
|
|
|
|
|
|
&-content { |
|
|
|
flex: 1; |
|
|
|
|
|
|
|
.option { |
|
|
|
margin-top: 6rpx; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
gap: 24rpx; |
|
|
|
|
|
|
|
&-item { |
|
|
|
padding: 8rpx 16rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #181818; |
|
|
|
border-radius: 4rpx; |
|
|
|
|
|
|
|
&.is-active { |
|
|
|
color: #FFFFFF; |
|
|
|
background: #00A9FF; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.range { |
|
|
|
margin: 4rpx 0; |
|
|
|
column-gap: 8rpx; |
|
|
|
border-bottom: 2rpx solid #EEEEEE; |
|
|
|
|
|
|
|
&-item { |
|
|
|
width: 220rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.split { |
|
|
|
padding: 0 24rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
line-height: 1; |
|
|
|
color: #8B8B8B; |
|
|
|
} |
|
|
|
|
|
|
|
&.price { |
|
|
|
.range-item { |
|
|
|
padding: 4rpx 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&.time { |
|
|
|
.range-item { |
|
|
|
// width: 220rpx; |
|
|
|
padding: 8rpx 0; |
|
|
|
text-align: center; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #181818; |
|
|
|
|
|
|
|
.btn-clear { |
|
|
|
margin: 6rpx 0; |
|
|
|
float: right; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.sort { |
|
|
|
width: 100%; |
|
|
|
height: 116rpx; |
|
|
|
padding: 24rpx 0; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.main { |
|
|
|
/deep/ .uv-vtabs, |
|
|
|
/deep/ .uv-vtabs__bar, |
|
|
|
/deep/ .uv-vtabs__content { |
|
|
|
height: calc(100vh - 292rpx - #{$tabbar-height} - env(safe-area-inset-bottom)) !important; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .uv-vtabs__bar { |
|
|
|
background: #F6F6F6 !important; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .uv-vtabs__bar-item { |
|
|
|
padding: 48rpx 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .uv-vtabs__content { |
|
|
|
padding: 24rpx 24rpx 0 24rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
background: linear-gradient(#DAF3FF, #F4F4F4 250rpx, #F4F4F4); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.card { |
|
|
|
& + & { |
|
|
|
margin-top: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&:last-child { |
|
|
|
padding-bottom: 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
