825 lines
22 KiB
Vue
825 lines
22 KiB
Vue
<template>
|
|
<view class="have-fun tabbar-page">
|
|
<view class="top-box">
|
|
<view class="v12-justify-start v12-align-center">
|
|
<view class="flex jc-end">
|
|
<view class="city-box" @click="goCity('cloud')" id="city-box">
|
|
<text style="white-space:nowrap; width: 90rpx" class="v12-primary-text one-t">{{ cityName }}</text>
|
|
<image :src="webUrl+'/icon/fun-city-change.png'" mode="scaleToFill"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="search-box v12-primary-border flex jc-between ai-center">
|
|
<input
|
|
v-model="name"
|
|
type="text"
|
|
placeholder="请输入关键词~"
|
|
placeholder-style="color:#949494"
|
|
@confirm="search"
|
|
>
|
|
<view class="search-btn v12-primary v12-white-text v12-radius-60" @click="search">
|
|
<text class="v12-font-bold">搜索</text>
|
|
<image
|
|
class="icon v12-ml-1"
|
|
:src="webUrl+'/orderIcon/搜索 (1).png'"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="v12-pa-2" style="position: relative">
|
|
<view class="v12-radius-20 v12-px-2 v12-py-1 tip-wrap v12-align-center v12-justify-between">
|
|
<view class="v12-align-center">
|
|
<image
|
|
class="map-icon"
|
|
mode="scaleToFill"
|
|
:src="webUrl + '/orderIcon/map_white.png'"
|
|
></image>
|
|
<text style="width: 95%" class="v12-font-24 v12-white-text">定位显示你在 {{ cityName }} 点击可切换其他城市</text>
|
|
</view>
|
|
<view @click="goCity('cloud')" class="qh-btn v12-white v12-radius-10 v12-font-24 v12-font-bold v12-dark-text v12-px-2">点击切换</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="type-box flex" id="type-box">
|
|
<view class="first-box">
|
|
<view class="first-box__inner">
|
|
<view
|
|
:class="{
|
|
'active': typeIndex === -1
|
|
}"
|
|
class="item flex-0 flex flex-col jc-center ai-center"
|
|
@click="tapType(-1)"
|
|
>
|
|
<image :src="townConfig.icon" mode="scaleToFill"/>
|
|
<view class="name">{{ townConfig.label }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view style="padding-left: 0" class="type-box flex " >
|
|
|
|
</view> -->
|
|
<view class="scroll-box">
|
|
<view
|
|
v-for="(item, index) in typeList"
|
|
:key="index"
|
|
:class="{
|
|
'active': typeIndex === index
|
|
}"
|
|
class="item flex-0 flex flex-col jc-center ai-center"
|
|
@click="tapType(index)"
|
|
>
|
|
<image :src="item.icon" mode="scaleToFill"/>
|
|
<view class="name">{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="type-banner-wrap" v-if="typeIndex !== -1">
|
|
<view v-if="currType.titleImage" class="title">
|
|
<image
|
|
:src="currType.titleImage"
|
|
mode="heightFix"
|
|
class="img"
|
|
/>
|
|
</view>
|
|
<view v-if="hotelBanner.length" class="slider-wrap">
|
|
<swiper
|
|
indicatorDots="true"
|
|
indicator-color="rgba(255, 255, 255, .3)"
|
|
indicator-active-color="#ffffff"
|
|
autoplay
|
|
circular
|
|
style="height: 330rpx;"
|
|
>
|
|
<block
|
|
v-for="(item, bannerIndex) in hotelBanner"
|
|
:key="bannerIndex"
|
|
>
|
|
<swiper-item>
|
|
<view class="swiper-item" @click="typeBannerItemClick(item)">
|
|
<image :src="item.bannerImage" class="img" />
|
|
</view>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
<view class="body" v-if="typeIndex === -1" id="body1">
|
|
<view class="town-card" v-for="(town, i) in townList" :key="i" @click="toTown(town)">
|
|
<!-- <view class="town-title">{{ town.name }}</view> -->
|
|
<image :src="town.frontImage" mode="scaleToFill"/>
|
|
<view class="v12-primary enter-btn">点击进入
|
|
<view class="icon-box"><u-icon name="arrow-rightward" color="#fff" size="8"></u-icon></view>
|
|
</view>
|
|
</view>
|
|
<view class="v4-nodata" v-if="townList.length === 0">
|
|
<image src="@/static/images/img_nodata.png" mode="scaleToFill"/>
|
|
<view class="text">暂无数据</view>
|
|
</view>
|
|
</view>
|
|
<view class="body" v-else>
|
|
<view class="v12-justify-between v12-align-center" v-if="hotelList.length > 0">
|
|
<text class="v12-font-bold" v-if="hotelBanner.length">推荐</text>
|
|
<view class="v12-dark1-text v12-font-28 v12-align-center refresh-btn" @click="handleRefresh">
|
|
<u-icon name="reload"></u-icon>
|
|
换一换
|
|
</view>
|
|
</view>
|
|
<view v-if="isLoad">
|
|
<view v-if="hotelList.length > 0">
|
|
<view class="list-wrapper">
|
|
<view class="list">
|
|
<view
|
|
v-for="(item, index) in hotelEvenList"
|
|
:key="index"
|
|
class="item"
|
|
@click="goInnDetail(item)"
|
|
>
|
|
<fun-hotel-item :item="item" />
|
|
</view>
|
|
</view>
|
|
<view class="list">
|
|
<view
|
|
v-for="(item, index) in hotelOddList"
|
|
:key="index"
|
|
class="item"
|
|
@click="goInnDetail(item)"
|
|
>
|
|
<fun-hotel-item :item="item" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="v4-nodata" v-else>
|
|
<image src="@/static/images/img_nodata.png" mode="scaleToFill"/>
|
|
<view class="text">暂无数据</view>
|
|
</view>
|
|
</view>
|
|
<goo-skeleton
|
|
v-else
|
|
:show-avatar="false"
|
|
/>
|
|
</view>
|
|
<FunctionGuide @hide="setGuide('findFunIndex')" :maxStep="3" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
|
|
<AiEntrance
|
|
:city-name="cityName"
|
|
/>
|
|
<xdd-tabbar :curr-index="4" />
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { getHotelList, getHotelTypeList, getAncientTownIcon, getAncientTownList, getHotelBanner } from "@/api/inn.js"
|
|
import { fetchCity } from "@/api/wenwan"
|
|
import { getCurAddress, getLocation } from "@/utils/common"
|
|
import FunHotelItem from './components/HotelItem'
|
|
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
|
import XddTabbar from '@/components/xdd-tabbar'
|
|
import FunctionGuide from '@/components/FunctionGuide'
|
|
import AiEntrance from '@/components/aiChat/entrance'
|
|
import GuideMixins from '@/mixins/GuideMixins'
|
|
export default {
|
|
components: {
|
|
FunHotelItem,
|
|
XddTabbar,
|
|
FunctionGuide,
|
|
AiEntrance
|
|
},
|
|
mixins: [pageListenMixins, GuideMixins],
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
name: '',
|
|
page: 1,
|
|
typeList: [],
|
|
typeIndex: -1,
|
|
// 当前选中的类型
|
|
currType: {},
|
|
cityName: '',
|
|
hotelList: [],
|
|
isLoad: false,
|
|
pageKeyId: Object.freeze('findFunIndex'),
|
|
isNext: false,
|
|
townConfig: {},
|
|
townList: [],
|
|
randomSeed: null,
|
|
hotelBanner: [],
|
|
goodCityId: '',
|
|
cityOptions: []
|
|
}
|
|
},
|
|
computed: {
|
|
hotelOddList() {
|
|
const arr = this.hotelList.filter(function(item, index) { return index % 2 === 1 })
|
|
return arr
|
|
},
|
|
hotelEvenList() {
|
|
const arr = this.hotelList.filter(function(item, index) { return index % 2 === 0 })
|
|
return arr
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
// 后端接口结构需要调整下，需要补充总页数，前端可判断当前页数大于等于总页数则不发送网络请求
|
|
if(this.isNext) {
|
|
this.page++
|
|
const random = this.randomSeed ? 1 : 0
|
|
this.fetchList(random, this.randomSeed)
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.currType = {}
|
|
if (options && options.city) {
|
|
this.goodCityId = options.city
|
|
}
|
|
this.initGoodCity()
|
|
getHotelTypeList().then(({data}) => {
|
|
this.typeList = data
|
|
this.currType = this.typeIndex === -1 ? {} : data[this.typeIndex]
|
|
this.getMapData()
|
|
})
|
|
this.getIcon()
|
|
this.queryGuide('findFunIndex')
|
|
},
|
|
onShow() {
|
|
uni.$emit('updateUnreadMessageCount')
|
|
const memCityName = uni.getStorageSync('cityName')
|
|
// this.typeIndex = 0
|
|
this.name = ''
|
|
if (memCityName.length) {
|
|
this.cityName = memCityName
|
|
uni.removeStorageSync('cityName')
|
|
this.name = ''
|
|
}
|
|
},
|
|
watch: {
|
|
cityName: {
|
|
handler(value) {
|
|
if (value) {
|
|
this.updateGoodCityId()
|
|
this.search()
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
showFunctionGuide() {
|
|
if(this._step == this.functionGuideData.step) return
|
|
if(this.functionGuideData.step == 1) {
|
|
this._step = this.functionGuideData.step
|
|
|
|
this.getElementData('#city-box', res=>{
|
|
const imgs = [
|
|
{
|
|
url: this.webUrl + '/引导页素材/寻趣味/Group 1/Group 1-1.png',
|
|
style: {
|
|
position: 'absolute',
|
|
zIndex: 99,
|
|
width: '390rpx',
|
|
top: 0*2+'rpx',
|
|
left: res.width*2+'rpx',
|
|
height: '162rpx',
|
|
/* px: ; */
|
|
},
|
|
isBtn: false
|
|
},
|
|
{
|
|
url: this.webUrl + '/引导页素材/寻趣味/Group 1/Group 1-2.png',
|
|
style: {
|
|
position: 'absolute',
|
|
zIndex: 99,
|
|
width: '117rpx',
|
|
top: 80*2+'rpx',
|
|
left: -60*2+'rpx',
|
|
right: 0,
|
|
margin: 'auto',
|
|
height: '46rpx',
|
|
},
|
|
isBtn: 'jump'
|
|
},
|
|
{
|
|
url: this.webUrl + '/引导页素材/寻趣味/Group 1/Group 1-3.png',
|
|
style: {
|
|
position: 'absolute',
|
|
zIndex: 99,
|
|
width: '117rpx',
|
|
top: 80*2+'rpx',
|
|
left: 200*2+'rpx',
|
|
height: '46rpx',
|
|
},
|
|
isBtn: 'next'
|
|
},
|
|
]
|
|
this.setFunctionGuideData({
|
|
imgs: imgs,
|
|
tipsPosition: '420rpx',
|
|
btnGroupPosition: '',
|
|
position: {
|
|
top: res.top + 'px',
|
|
left: res.left + 'px',
|
|
width: `${res.width}px`,
|
|
height: `${res.height}px`,
|
|
}
|
|
})
|
|
})
|
|
return
|
|
} else {
|
|
if(this.functionGuideData.step == 2) {
|
|
this._step = this.functionGuideData.step
|
|
|
|
this.getElementData('#type-box', res=>{
|
|
const imgs = [
|
|
{
|
|
url: this.webUrl + '/引导页素材/寻趣味/Group 2/Group 2-1.png',
|
|
style: {
|
|
position: 'absolute',
|
|
zIndex: 99,
|
|
width: '504rpx',
|
|
top: 170*2+'rpx',
|
|
left: 0+'rpx',
|
|
right: 0,
|
|
margin: 'auto',
|
|
height: '191rpx',
|
|
/* px: ; */
|
|
},
|
|
isBtn: false
|
|
},
|
|
{
|
|
url: this.webUrl + '/引导页素材/寻趣味/Group 2/Group 2-3.png',
|
|
style: {
|
|
position: 'absolute',
|
|
zIndex: 99,
|
|
width: '117rpx',
|
|
top: 270*2+'rpx',
|
|
left: -160*2+'rpx',
|
|
right: 0,
|
|
margin: 'auto',
|
|
height: '46rpx',
|
|
},
|
|
isBtn: 'jump'
|
|
},
|
|
{
|
|
url: this.webUrl + '/引导页素材/寻趣味/Group 2/Group 2-2.png',
|
|
style: {
|
|
position: 'absolute',
|
|
zIndex: 99,
|
|
width: '117rpx',
|
|
top: 270*2+'rpx',
|
|
left: 160*2+'rpx',
|
|
height: '46rpx',
|
|
},
|
|
isBtn: 'next'
|
|
},
|
|
]
|
|
this.setFunctionGuideData({
|
|
imgs: imgs,
|
|
tipsPosition: '420rpx',
|
|
btnGroupPosition: '',
|
|
position: {
|
|
top: res.top + 'px',
|
|
left: res.left + 'px',
|
|
width: `${res.width}px`,
|
|
height: `${(res.height-20)}px`,
|
|
}
|
|
})
|
|
})
|
|
return
|
|
}
|
|
if(this.functionGuideData.step == 3) {
|
|
this._step = this.functionGuideData.step
|
|
|
|
this.getElementData('#body1', res=>{
|
|
const imgs = [
|
|
{
|
|
url: this.webUrl + '/引导页素材/寻趣味/Group 3/Group 3-1.png',
|
|
style: {
|
|
position: 'absolute',
|
|
zIndex: 99,
|
|
width: '290rpx',
|
|
top: 90*2+'rpx',
|
|
left: 0,
|
|
right: 0,
|
|
margin: 'auto',
|
|
height: '165rpx',
|
|
/* px: ; */
|
|
},
|
|
isBtn: false
|
|
},
|
|
{
|
|
url: this.webUrl + '/引导页素材/寻趣味/Group 3/Group 3-2.png',
|
|
style: {
|
|
position: 'absolute',
|
|
zIndex: 99,
|
|
width: '97rpx',
|
|
top: 60*2+'rpx',
|
|
left: 60*2+'rpx',
|
|
right: 0,
|
|
margin: 'auto',
|
|
height: '55rpx',
|
|
},
|
|
isBtn: 'jump'
|
|
},
|
|
]
|
|
this.setFunctionGuideData({
|
|
imgs: imgs,
|
|
tipsPosition: '420rpx',
|
|
btnGroupPosition: '',
|
|
position: {
|
|
top: (res.top) + 'px',
|
|
left: res.left+10 + 'px',
|
|
width: `${res.width-20}px`,
|
|
height: `${res.height-20}px`,
|
|
}
|
|
})
|
|
})
|
|
return
|
|
}
|
|
return
|
|
}
|
|
},
|
|
handleRefresh() {
|
|
uni.showLoading()
|
|
this.page = 1
|
|
this.hotelList = []
|
|
this.fetchList(1, this.randomSeed)
|
|
},
|
|
toTown(town) {
|
|
uni.navigateTo({
|
|
url: `/pages/town/index?id=${town.id}`
|
|
})
|
|
},
|
|
getIcon() {
|
|
getAncientTownIcon().then(res => {
|
|
this.townConfig = res.data
|
|
})
|
|
},
|
|
initGoodCity() {
|
|
fetchCity(2).then(({ data }) => {
|
|
const group = data && data.group ? data.group : []
|
|
const list = []
|
|
group.forEach(item => {
|
|
if (item.city && item.city.length) {
|
|
list.push(...item.city)
|
|
}
|
|
})
|
|
this.cityOptions = list
|
|
this.updateGoodCityId()
|
|
})
|
|
},
|
|
updateGoodCityId() {
|
|
if (!this.cityOptions.length || !this.cityName) return
|
|
const found = this.cityOptions.find(item => item.cityName === this.cityName)
|
|
if (found) {
|
|
this.goodCityId = found.id || found.cityId || this.goodCityId
|
|
this.fetchHotelBanner()
|
|
}
|
|
},
|
|
goCity() {
|
|
uni.navigateTo({
|
|
url: `/pages/chose-city/chose-city?type=2&city=${this.cityName}`
|
|
})
|
|
},
|
|
goInnDetail(item) {
|
|
uni.navigateTo({
|
|
url: `/pagesInn/inn/innHome?id=${item.id}&from=fun`
|
|
})
|
|
},
|
|
async getMapData() {
|
|
const map = await getLocation()
|
|
if (map.length > 1 && !this.cityName) {
|
|
const {latitude, longitude} = map[1]
|
|
getCurAddress(latitude, longitude, address => {
|
|
this.cityName = address.city
|
|
})
|
|
}
|
|
},
|
|
tapType(index) {
|
|
|
|
if (this.typeIndex === index) return
|
|
this.typeIndex = index
|
|
this.randomSeed = null
|
|
this.currType = index === -1 ? {} : this.typeList[index]
|
|
this.name = ''
|
|
this.search()
|
|
},
|
|
search() {
|
|
this.isLoad = false
|
|
this.page = 1
|
|
this.hotelList = []
|
|
this.fetchList()
|
|
},
|
|
fetchList(random = 0, randomSeed) {
|
|
if(this.typeIndex === -1) {
|
|
const params = {
|
|
cityName: this.cityName,
|
|
page: 1,
|
|
limit: 999
|
|
}
|
|
getAncientTownList(params).then(res => {
|
|
this.townList = res.data.records
|
|
})
|
|
return
|
|
}
|
|
const param = {
|
|
page: this.page,
|
|
type: this.typeList[this.typeIndex].id,
|
|
cityName: this.cityName,
|
|
random: random,
|
|
randomSeed: this.page > 1 ? randomSeed : null
|
|
}
|
|
const name = this.name.trim()
|
|
if (name.length > 0) {
|
|
param.name = name
|
|
}
|
|
getHotelList(param).then(res => {
|
|
const { success, data, msg } = res
|
|
if (success) {
|
|
if(random === 1) {
|
|
this.randomSeed = msg
|
|
}
|
|
for (let i = 0; i < data.length; i++) {
|
|
const cover = data[i].cover
|
|
data[i].hide = true
|
|
// 视频封面取第一帧图片
|
|
if (data[i].coverType === 2) {
|
|
data[i].videoCover = cover
|
|
data[i].cover = (cover + '?vframe/jpg/offset/1')
|
|
} else {
|
|
data[i].videoCover = ''
|
|
}
|
|
this.hotelList.push(data[i])
|
|
if(data.length < 10) {
|
|
this.isNext = false
|
|
} else {
|
|
this.isNext = true
|
|
}
|
|
}
|
|
}
|
|
}).finally(() => {
|
|
this.isLoad = true
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
fetchHotelBanner() {
|
|
if (!this.goodCityId) {
|
|
return
|
|
}
|
|
const params = {
|
|
goodCityId: this.goodCityId
|
|
}
|
|
getHotelBanner(params).then(res => {
|
|
const { success, data } = res
|
|
if (success && data) {
|
|
if (Array.isArray(data.hotelBanner)) {
|
|
this.hotelBanner = data.hotelBanner
|
|
} else if (Array.isArray(data)) {
|
|
this.hotelBanner = data
|
|
}
|
|
}
|
|
})
|
|
},
|
|
typeBannerItemClick(item) {
|
|
if (!item.hotelId) return
|
|
uni.navigateTo({ url: `/pagesInn/inn/innHome?id=${item.hotelId}` })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
.map-icon{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-right: 5rpx;
|
|
}
|
|
.qh-btn{
|
|
padding-top: 4rpx;
|
|
padding-bottom: 4rpx;
|
|
// border: thin dashed #999;
|
|
white-space: nowrap;
|
|
}
|
|
.tip-wrap{
|
|
background: #AAAEB3;
|
|
position: relative;
|
|
align-items: self-start !important;
|
|
&::before{
|
|
position: absolute;
|
|
content: '';
|
|
border-left: 15rpx solid transparent;
|
|
border-right: 15rpx solid transparent;
|
|
border-top: 20rpx solid transparent;
|
|
border-bottom: 20rpx solid #AAAEB3;
|
|
top: -30rpx;
|
|
left: 10%;
|
|
}
|
|
}
|
|
.icon-box{
|
|
border: 1rpx solid #fff;
|
|
border-radius: 100%;
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
margin-left: 5rpx;
|
|
padding: 2rpx;
|
|
}
|
|
.enter-btn{
|
|
color: #fff;
|
|
width: fit-content;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10rpx 16rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-radius: 30rpx 0;
|
|
font-size: 24rpx;
|
|
}
|
|
.town-title{
|
|
border-radius: 100rpx;
|
|
/* border-color: #333; */
|
|
// mix-blend-mode: difference;
|
|
width: fit-content;
|
|
padding: 5rpx 20rpx;
|
|
border: 1rpx solid #fff;
|
|
color: #fff;
|
|
position: absolute;
|
|
margin: auto;
|
|
top: 20rpx;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.town-card{
|
|
width: 100%;
|
|
height: 400rpx;
|
|
background: #fff;
|
|
border-radius: 30rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-bottom: 30rpx;
|
|
image{
|
|
width: -webkit-fit-content;
|
|
width: inherit;
|
|
height: -webkit-fit-content;
|
|
height: inherit;
|
|
}
|
|
}
|
|
.first-box{
|
|
padding-right: 15rpx;
|
|
position: sticky;
|
|
left: 0;
|
|
background-color: #f5f5f5;
|
|
z-index: 9;
|
|
}
|
|
.first-box__inner{
|
|
padding: 10rpx;
|
|
background: #fff;
|
|
border-radius: 30rpx;
|
|
}
|
|
.scroll-box{
|
|
display: flex;
|
|
height: fit-content;
|
|
background: #fff;
|
|
overflow-x: scroll;
|
|
padding: 10rpx;
|
|
border-radius: 30rpx;
|
|
}
|
|
.search-btn{
|
|
position: absolute;
|
|
top: 2rpx;
|
|
bottom: 2rpx;
|
|
right: 2rpx;
|
|
padding: 0rpx 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
}
|
|
.have-fun {
|
|
//padding-top: 120rpx;
|
|
|
|
.top-box {
|
|
padding: 32rpx 0 0rpx;
|
|
background: #f5f5f5;
|
|
|
|
.search-box {
|
|
position: relative;
|
|
width: 575rpx;
|
|
height: 60rpx;
|
|
box-sizing: border-box;
|
|
// margin: 0 auto;
|
|
padding: 0 24rpx 0 32rpx;
|
|
border: 2rpx solid #BBD2D2;
|
|
border-radius: 30rpx;
|
|
|
|
input {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
|
|
.type-box {
|
|
height: 200rpx;
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
padding: 0rpx 20rpx 0 20rpx;
|
|
|
|
.item {
|
|
width: 154rpx;
|
|
height: 154rpx;
|
|
// margin-right: 20rpx;
|
|
border-radius: 26rpx;
|
|
|
|
image {
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
}
|
|
|
|
.name {
|
|
margin-top: 12rpx;
|
|
color: #949494;
|
|
font-size: 24rpx;
|
|
line-height: 34rpx;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
background: #DCF2FE;
|
|
|
|
.name {
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.body {
|
|
padding: 0 20rpx 20rpx;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.refresh-btn {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.city-box {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 8rpx 20rpx 8rpx 20rpx;
|
|
border-radius: 30px;
|
|
background: #f5f5f5;
|
|
|
|
image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
text {
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.list-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.list {
|
|
width: 348rpx;
|
|
.item {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.tabbar-page {
|
|
padding: 0 0 180rpx 0;
|
|
}
|
|
.type-banner-wrap {
|
|
padding: 0 20rpx;
|
|
background-color: #f5f5f5;
|
|
.title {
|
|
padding: 0 0 20rpx;
|
|
.img {
|
|
display: block;
|
|
height: 48rpx;
|
|
}
|
|
}
|
|
.slider-wrap {
|
|
width: 100%;
|
|
height: 330rpx;
|
|
padding: 0 0 20rpx 0;
|
|
.swiper-item {
|
|
.img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 330rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|