|
@@ -0,0 +1,904 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="map">
|
|
|
|
+ <!-- 查询 -->
|
|
|
|
+ <view class="search">
|
|
|
|
+ <view class="search-top" style="padding: 16rpx 30rpx 0rpx;margin-bottom: 20rpx;">
|
|
|
|
+ <view class="search-loupe" @click="isopenSearch = !isopenSearch">
|
|
|
|
+ <image style="width: 32rpx;height: 32rpx;" src="/static/icon/search02.png" mode=""></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="search-area-all">
|
|
|
|
+ <view :class="isSelectArea?'search-area':'search-areaClick'" @click="openArea">
|
|
|
|
+ <text>地区</text>
|
|
|
|
+ <image v-if="isSelectArea" style="width: 16rpx;height: 10rpx;" src="/static/icon/down01.png"
|
|
|
|
+ mode="">
|
|
|
|
+ </image>
|
|
|
|
+ <image v-if="!isSelectArea" style="width: 16rpx;height: 10rpx;" src="/static/icon/up01.png"
|
|
|
|
+ mode="">
|
|
|
|
+ </image>
|
|
|
|
+ </view>
|
|
|
|
+ <view :class="isSelectBrand?'search-area':'search-areaClick'" @click="openBrand">
|
|
|
|
+ <text>品牌</text>
|
|
|
|
+ <image v-if="isSelectBrand" style="width: 16rpx;height: 10rpx;" src="/static/icon/down01.png"
|
|
|
|
+ mode="">
|
|
|
|
+ </image>
|
|
|
|
+ <image v-if="!isSelectBrand" style="width: 16rpx;height: 10rpx;" src="/static/icon/up01.png"
|
|
|
|
+ mode="">
|
|
|
|
+ </image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="search-area" :class="isSelectSift?'search-area':'search-areaClick'" @click="openSift">
|
|
|
|
+ <text>更多筛选</text>
|
|
|
|
+ <image v-if="isSelectSift" style="width: 16rpx;height: 10rpx;" src="/static/icon/down01.png"
|
|
|
|
+ mode="">
|
|
|
|
+ </image>
|
|
|
|
+ <image v-if="!isSelectSift" style="width: 16rpx;height: 10rpx;" src="/static/icon/up01.png"
|
|
|
|
+ mode="">
|
|
|
|
+ </image>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <image style=" flex: none; width: 52rpx;height: 46rpx;" src="/static/icon/vip.png" mode=""></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="search-detail" v-if="isopenSearch">
|
|
|
|
+ <u-input placeholder="输入酒店/城市名称搜索酒店" border='none'>
|
|
|
|
+ <template slot="suffix" style='margin-right:40rpx;'>
|
|
|
|
+ <u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
|
|
|
|
+ height="32rpx"></u-image>
|
|
|
|
+ </template>
|
|
|
|
+ </u-input>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 选择地区 -->
|
|
|
|
+ <view class="search-detail" v-if="!isSelectArea">
|
|
|
|
+ <view class="search-detail-area">
|
|
|
|
+ <view class="areaTitle" v-for="(item,index) in areaList" :key="index" @click="checked(index)">
|
|
|
|
+ <view :class="{'active-area':isActive === index}">
|
|
|
|
+ {{item.title}}
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="search-detail-btn">
|
|
|
|
+ <view class="search-detail-btn-left">
|
|
|
|
+ <text>取消</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="search-detail-btn-right">
|
|
|
|
+ <text>确认</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 选择品牌-->
|
|
|
|
+ <view class="search-detail" v-if="!isSelectBrand">
|
|
|
|
+ <view class="search-detail-area">
|
|
|
|
+ <view class="areaTitle" v-for="(item,index) in brandList" :key="index" @click="checked(index)">
|
|
|
|
+ <view :class="{'active-area':isActive === index}">
|
|
|
|
+ {{item.title}}
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="search-detail-btn">
|
|
|
|
+ <view class="search-detail-btn-left">
|
|
|
|
+ <text>取消</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="search-detail-btn-right">
|
|
|
|
+ <text>确认</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 筛选-->
|
|
|
|
+ <view class="search-detail" v-if="!isSelectSift">
|
|
|
|
+ <view class="partner">
|
|
|
|
+ <view class="partner-top" @click="selectPartner">
|
|
|
|
+ <text>合作伙伴</text>
|
|
|
|
+ <image v-if="isPartner" style=" width: 20rpx; height: 12rpx; " src="/static/icon/up02.png"
|
|
|
|
+ mode=""></image>
|
|
|
|
+ <image v-if="!isPartner" style=" width: 20rpx; height: 12rpx; " src="/static/icon/down02.png"
|
|
|
|
+ mode=""></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="partner-main" v-if="isPartner">
|
|
|
|
+ <uni-data-checkbox multiple v-model="value" :localdata="partner" @change="change">
|
|
|
|
+ </uni-data-checkbox>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="partner-top" style="border-top: none;" @click="selectJoin">
|
|
|
|
+ <text>加盟品牌</text>
|
|
|
|
+ <image v-if="isJoin" style=" width: 20rpx; height: 12rpx; " src="/static/icon/up02.png" mode="">
|
|
|
|
+ </image>
|
|
|
|
+ <image v-if="!isJoin" style=" width: 20rpx; height: 12rpx; " src="/static/icon/down02.png"
|
|
|
|
+ mode=""></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="partner-main" v-if="isJoin">
|
|
|
|
+ <uni-data-checkbox multiple v-model="value" :localdata="partner" @change="change">
|
|
|
|
+ </uni-data-checkbox>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="search-detail-btn">
|
|
|
|
+ <view class="search-detail-btn-left">
|
|
|
|
+ <text>取消</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="search-detail-btn-right">
|
|
|
|
+ <text>确认</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ <view class="address" v-if="isShow">
|
|
|
|
+ <view style="height:1232rpx;">
|
|
|
|
+ <hch-position :markers="markers"></hch-position>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="address-nav">
|
|
|
|
+ <view class="address-nav-btn">
|
|
|
|
+ <view class="">
|
|
|
|
+ <image style="width: 84rpx;height: 84rpx;" src="/static/icon/location.png" mode=""></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="" @click="goHotelList">
|
|
|
|
+ <image style="width: 84rpx;height: 84rpx;" src="/static/icon/list.png" mode=""></image>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view
|
|
|
|
+ style="width: 100%; overflow-x: scroll; display: flex;align-items: center;justify-content: space-between;">
|
|
|
|
+ <view class="address-detail" v-for="item in 3">
|
|
|
|
+ <view class="mark">
|
|
|
|
+ <image style="width: 496rpx;height: 318rpx;border-radius: 10rpx;"
|
|
|
|
+ src="/static/icon/Kudosbg.png" mode=""></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="inner">
|
|
|
|
+ <view class="address-detail-main">
|
|
|
|
+ <view class="address-detail-main-left">
|
|
|
|
+ <text class="title">IHG酒店</text>
|
|
|
|
+ <view class="content">
|
|
|
|
+ <text>豪华型</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="bottom">
|
|
|
|
+ <text class="bottom-left">¥</text>
|
|
|
|
+ <text class="bottom-right">238起</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="address-detail-main-right" @click="goBook">
|
|
|
|
+ <text>预订</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="address-detail-position">
|
|
|
|
+ <image style="width: 18rpx;height: 22rpx;" src="/static/icon/address02.png" mode="">
|
|
|
|
+ </image>
|
|
|
|
+ <text style="margin-left:4rpx ;">3.3km</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <!-- 酒店列表 -->
|
|
|
|
+ <view class="hotel-list" v-if="!isShow">
|
|
|
|
+ <view class="hotel-list-item" v-for="item in 10">
|
|
|
|
+ <view class="wrap">
|
|
|
|
+ <view class="mark">
|
|
|
|
+ <image style="width: 694rpx;height: 318rpx;border-radius: 10rpx;" src="/static/icon/Kudosbg.png"
|
|
|
|
+ mode=""></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="inner">
|
|
|
|
+ <view class="address-detail-main">
|
|
|
|
+ <view class="address-detail-main-left">
|
|
|
|
+ <text class="title">IHG酒店</text>
|
|
|
|
+ <view class="content">
|
|
|
|
+ <text>豪华型</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="bottom">
|
|
|
|
+ <text class="bottom-left">¥</text>
|
|
|
|
+ <text class="bottom-right">238起</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="address-detail-main-right" @click="goBook">
|
|
|
|
+ <text>预订</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="address-detail-position">
|
|
|
|
+ <image style="width: 18rpx;height: 22rpx;" src="/static/icon/address02.png" mode=""></image>
|
|
|
|
+ <text style="margin-left:4rpx ;">3.3km</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 触底 -->
|
|
|
|
+ <view class="home-bottom">
|
|
|
|
+ <uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
|
|
|
|
+ </view>
|
|
|
|
+ <view class="return-btn" @click="returnBtn">
|
|
|
|
+ <image style="width: 132rpx;height: 132rpx;border-radius: 50%;" src="/static/icon/return01.png" mode="">
|
|
|
|
+ </image>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ <view style="height: 110rpx;"></view>
|
|
|
|
+ <tab-bar></tab-bar>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import TabBar from '../../components/TabBar/tabbar.vue'
|
|
|
|
+ import HchPosition from '../../components/hch-position/hch-position.vue'
|
|
|
|
+ export default {
|
|
|
|
+ components: {
|
|
|
|
+ TabBar,
|
|
|
|
+ HchPosition
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ hotelList:[],
|
|
|
|
+ //门店在地图上的标记 以下字段必填
|
|
|
|
+ markers: [],
|
|
|
|
+
|
|
|
|
+ //暂无数据
|
|
|
|
+ status: 'noMore',
|
|
|
|
+ contentText: {
|
|
|
|
+ contentdown: '查看更多',
|
|
|
|
+ contentrefresh: '加载中',
|
|
|
|
+ contentnomore: '—— 已经到底啦 ——'
|
|
|
|
+ },
|
|
|
|
+ //是否展示地图
|
|
|
|
+ isShow: true,
|
|
|
|
+ value: [0],
|
|
|
|
+ //合作伙伴
|
|
|
|
+ partner: [{
|
|
|
|
+ text: '足球',
|
|
|
|
+ value: 0
|
|
|
|
+ }, {
|
|
|
|
+ text: '篮球',
|
|
|
|
+ value: 1
|
|
|
|
+ }, {
|
|
|
|
+ text: '游泳',
|
|
|
|
+ value: 2
|
|
|
|
+ }, {
|
|
|
|
+ text: '游泳',
|
|
|
|
+ value: 3
|
|
|
|
+ }, {
|
|
|
|
+ text: '游泳',
|
|
|
|
+ value: 4
|
|
|
|
+ }, {
|
|
|
|
+ text: '游泳',
|
|
|
|
+ value: 5
|
|
|
|
+ }, {
|
|
|
|
+ text: '游泳',
|
|
|
|
+ value: 6
|
|
|
|
+ }, {
|
|
|
|
+ text: '游泳',
|
|
|
|
+ value: 7
|
|
|
|
+ }, ],
|
|
|
|
+
|
|
|
|
+ //品牌
|
|
|
|
+ brandList: [{
|
|
|
|
+ title: '谷歌'
|
|
|
|
+ }, {
|
|
|
|
+ title: '微软'
|
|
|
|
+ }, {
|
|
|
|
+ title: 'iphone'
|
|
|
|
+ }, {
|
|
|
|
+ title: '新希望'
|
|
|
|
+ }, {
|
|
|
|
+ title: '三江重工'
|
|
|
|
+ }, {
|
|
|
|
+ title: 'JavaScript'
|
|
|
|
+ }],
|
|
|
|
+ //地区
|
|
|
|
+ areaList: [{
|
|
|
|
+ title: '重庆'
|
|
|
|
+ }, {
|
|
|
|
+ title: '成都'
|
|
|
|
+ }, {
|
|
|
|
+ title: '绵阳'
|
|
|
|
+ }, {
|
|
|
|
+ title: '广汉'
|
|
|
|
+ }, {
|
|
|
|
+ title: '内江'
|
|
|
|
+ }, {
|
|
|
|
+ title: '宜宾'
|
|
|
|
+ }, {
|
|
|
|
+ title: '大理'
|
|
|
|
+ }, {
|
|
|
|
+ title: '自贡'
|
|
|
|
+ }, {
|
|
|
|
+ title: '贵州'
|
|
|
|
+ }, {
|
|
|
|
+ title: '泸州'
|
|
|
|
+ }],
|
|
|
|
+ //激活指定table菜单
|
|
|
|
+ isActive: 0,
|
|
|
|
+ //展开搜索
|
|
|
|
+ isopenSearch: false,
|
|
|
|
+ //选择地区
|
|
|
|
+ isSelectArea: true,
|
|
|
|
+ //选择品牌
|
|
|
|
+ isSelectBrand: true,
|
|
|
|
+ //刷选
|
|
|
|
+ isSelectSift: true,
|
|
|
|
+ //是否展示合作伙伴
|
|
|
|
+ isPartner: false,
|
|
|
|
+ //是否展示加盟品牌
|
|
|
|
+ isJoin: false,
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ onLoad() {
|
|
|
|
+ //获取酒店列表
|
|
|
|
+ this.getList()
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ methods: {
|
|
|
|
+ getList() {
|
|
|
|
+ this.$api.hotel.getHotelList({
|
|
|
|
+ page: 1
|
|
|
|
+ }).then(res => {
|
|
|
|
+ this.hotelList = res.data.data
|
|
|
|
+ console.log(this.hotelList);
|
|
|
|
+ this.markers = this.hotelList.map(item=>{
|
|
|
|
+ return {
|
|
|
|
+ id:item.id,
|
|
|
|
+ latitude: item.latitude,
|
|
|
|
+ longitude: item.longitude,
|
|
|
|
+ width:'34rpx',
|
|
|
|
+ height:'40rpx',
|
|
|
|
+ iconPath: '../../../static/navigation.png',
|
|
|
|
+ callout: {
|
|
|
|
+ content:item.name,
|
|
|
|
+ borderRadius: 10,
|
|
|
|
+ padding: 10,
|
|
|
|
+ display: "ALWAYS",
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ console.log(this.markers);
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ //去预定页面
|
|
|
|
+ goBook() {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: '/pages/map/hotel-book/index'
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ //返回上一级
|
|
|
|
+ returnBtn() {
|
|
|
|
+ this.isShow = !this.isShow
|
|
|
|
+ },
|
|
|
|
+ //打开酒店列表
|
|
|
|
+ goHotelList() {
|
|
|
|
+ console.log(111);
|
|
|
|
+ this.isShow = !this.isShow
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ //是否展示加盟品牌
|
|
|
|
+ selectJoin() {
|
|
|
|
+ this.isJoin = !this.isJoin
|
|
|
|
+ },
|
|
|
|
+ //是否展示合作伙伴
|
|
|
|
+ selectPartner() {
|
|
|
|
+ this.isPartner = !this.isPartner
|
|
|
|
+ },
|
|
|
|
+ //合作伙伴刷选
|
|
|
|
+ change(e) {
|
|
|
|
+ console.log('e:', e);
|
|
|
|
+ },
|
|
|
|
+ //菜单index切换
|
|
|
|
+ checked(index) {
|
|
|
|
+ this.isActive = index
|
|
|
|
+ },
|
|
|
|
+ //展开地区选择
|
|
|
|
+ openArea() {
|
|
|
|
+ console.log(111);
|
|
|
|
+ this.isSelectArea = !this.isSelectArea
|
|
|
|
+ },
|
|
|
|
+ //展开品牌选择
|
|
|
|
+ openBrand() {
|
|
|
|
+ this.isSelectBrand = !this.isSelectBrand
|
|
|
|
+ },
|
|
|
|
+ //展开筛选选择
|
|
|
|
+ openSift() {
|
|
|
|
+ this.isSelectSift = !this.isSelectSift
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+ page {
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .map {
|
|
|
|
+ height: 100%;
|
|
|
|
+ background-color: #f9f9f9;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .return-btn {
|
|
|
|
+ position: fixed;
|
|
|
|
+ right: 0;
|
|
|
|
+ top: 927rpx;
|
|
|
|
+ z-index: 99;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .home-bottom {
|
|
|
|
+ height: 60rpx;
|
|
|
|
+ background-color: #f9f9f9;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .hotel-list {
|
|
|
|
+ width: 100%;
|
|
|
|
+ background-color: #f9f9f9;
|
|
|
|
+ padding: 32rpx 30rpx;
|
|
|
|
+ padding-bottom: 200rpx;
|
|
|
|
+
|
|
|
|
+ .hotel-list-item {
|
|
|
|
+ width: 100%;
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
+
|
|
|
|
+ .wrap {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 318rpx;
|
|
|
|
+ position: relative;
|
|
|
|
+ box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
+
|
|
|
|
+ .inner {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 318rpx;
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
|
+ position: absolute;
|
|
|
|
+ z-index: 2;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+
|
|
|
|
+ .address-detail-main {
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0;
|
|
|
|
+ bottom: 30rpx;
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: flex-end;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+
|
|
|
|
+ .address-detail-main-left {
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 20rpx;
|
|
|
|
+
|
|
|
|
+ .title {
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .content {
|
|
|
|
+ margin: 12rpx 0 20rpx;
|
|
|
|
+ width: 92rpx;
|
|
|
|
+ height: 34rpx;
|
|
|
|
+ background: rgba(142, 160, 166, .6);
|
|
|
|
+ border-radius: 17rpx;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ font-size: 22rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bottom {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+
|
|
|
|
+ .bottom-left {
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ margin-right: 6rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bottom-right {
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .address-detail-main-right {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 24rpx;
|
|
|
|
+ width: 120rpx;
|
|
|
|
+ height: 44rpx;
|
|
|
|
+ background: #FF6300;
|
|
|
|
+ box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
|
|
|
|
+ border-radius: 22rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .address-detail-position {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 22rpx;
|
|
|
|
+ right: 24rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .search-detail {
|
|
|
|
+ width: 100%;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 88rpx;
|
|
|
|
+ z-index: 999 !important;
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+ box-shadow: 0px 12rpx 16rpx 0px rgba(220, 222, 229, 0.4);
|
|
|
|
+ padding: 20rpx 30rpx 20rpx;
|
|
|
|
+
|
|
|
|
+ .partner {
|
|
|
|
+ .partner-top {
|
|
|
|
+ height: 88rpx;
|
|
|
|
+ border-top: 2rpx solid #F0F0F0;
|
|
|
|
+ border-bottom: 2rpx solid #F0F0F0;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ color: #333;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .partner-main {
|
|
|
|
+ margin-top: 32rpx;
|
|
|
|
+
|
|
|
|
+ ::v-deep .uni-data-checklist .checklist-group .checklist-box {
|
|
|
|
+ width: 26%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner {
|
|
|
|
+ width: 48rpx;
|
|
|
|
+ height: 48rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner .checkbox__inner-icon {
|
|
|
|
+ top: 6rpx !important;
|
|
|
|
+ left: 17rpx !important;
|
|
|
|
+ height: 24rpx !important;
|
|
|
|
+ width: 15rpx !important;
|
|
|
|
+ border-right-color: #ff6200;
|
|
|
|
+ border-bottom-color: #ff6200;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text {
|
|
|
|
+ color: #666 !important;
|
|
|
|
+ font-size: 24rpx !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ::v-deep .checklist-text {
|
|
|
|
+ font-size: 24rpx !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner {
|
|
|
|
+ border-color: #EDEDED !important;
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .search-detail-area {
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ align-items: center;
|
|
|
|
+
|
|
|
|
+ .areaTitle {
|
|
|
|
+ width: 156rpx;
|
|
|
|
+ height: 56rpx;
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
+ border: 2rpx solid #EDEDED;
|
|
|
|
+ border-radius: 28rpx;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ color: #666;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
+ margin-bottom: 18rpx;
|
|
|
|
+
|
|
|
|
+ &:nth-child(4n) {
|
|
|
|
+ margin-right: 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // .areaTitle-item {
|
|
|
|
+ // width: 156rpx;
|
|
|
|
+ // height: 56rpx;
|
|
|
|
+ // background-color: #F1F1F1;
|
|
|
|
+ // border-radius: 26rpx;
|
|
|
|
+ // font-size: 24rpx;
|
|
|
|
+ // color: #999;
|
|
|
|
+ // display: flex;
|
|
|
|
+ // justify-content: center;
|
|
|
|
+ // align-items: center;
|
|
|
|
+ // }
|
|
|
|
+ .active-area {
|
|
|
|
+ width: 156rpx;
|
|
|
|
+ height: 56rpx;
|
|
|
|
+ border-radius: 28rpx;
|
|
|
|
+ background-color: #FF6200;
|
|
|
|
+ color: #fff;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .search-detail-btn {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ margin: 38rpx 0 20rpx;
|
|
|
|
+
|
|
|
|
+ .search-detail-btn-left {
|
|
|
|
+ flex: 1;
|
|
|
|
+ height: 76rpx;
|
|
|
|
+ background: rgba(237, 237, 237, .55);
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ color: #999999;
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .search-detail-btn-right {
|
|
|
|
+ flex: 1;
|
|
|
|
+ height: 76rpx;
|
|
|
|
+ background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ margin-left: 22rpx;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ::v-deep .u-input {
|
|
|
|
+ width: 690rpx !important;
|
|
|
|
+ height: 68rpx !important;
|
|
|
|
+ background: #F1F1F1;
|
|
|
|
+ border-radius: 74rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ::v-deep .u-input__content__field-wrapper {
|
|
|
|
+ padding-left: 36rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .search-top {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .search {
|
|
|
|
+ position: relative;
|
|
|
|
+ flex: none;
|
|
|
|
+ width: 100%;
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
+ box-shadow: 0px 12rpx 16rpx 0px rgba(220, 222, 229, 0.4);
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ align-items: inherit;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+
|
|
|
|
+ .search-loupe {
|
|
|
|
+ flex: none;
|
|
|
|
+ width: 60rpx;
|
|
|
|
+ height: 60rpx;
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ border: 2rpx solid #EDEDED;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .search-area-all {
|
|
|
|
+ flex: 1;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+
|
|
|
|
+ .search-areaClick {
|
|
|
|
+ padding: 12rpx 22rpx;
|
|
|
|
+ height: 52rpx;
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
+ border-radius: 26rpx;
|
|
|
|
+ border: 2rpx solid #FF6200;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #FF6200;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
+
|
|
|
|
+ text {
|
|
|
|
+ margin-right: 8rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .search-area {
|
|
|
|
+ padding: 12rpx 22rpx;
|
|
|
|
+ height: 52rpx;
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
+ border-radius: 26rpx;
|
|
|
|
+ border: 2rpx solid #EDEDED;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #666666;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
+
|
|
|
|
+ text {
|
|
|
|
+ margin-right: 8rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .address-nav {
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: 100%;
|
|
|
|
+ bottom: 34rpx;
|
|
|
|
+ padding: 0 16rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ overflow-x: scroll;
|
|
|
|
+
|
|
|
|
+ .address-nav-btn {
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .address {
|
|
|
|
+ flex: 1;
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ .address-detail {
|
|
|
|
+ position: relative;
|
|
|
|
+ flex: none;
|
|
|
|
+ width: 496rpx;
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
+
|
|
|
|
+ &:last-child {
|
|
|
|
+ margin-right: 0rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .inner {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 318rpx;
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
|
+ position: absolute;
|
|
|
|
+ z-index: 2;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+
|
|
|
|
+ .address-detail-main {
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0;
|
|
|
|
+ bottom: 30rpx;
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: flex-end;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+
|
|
|
|
+ .address-detail-main-left {
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 20rpx;
|
|
|
|
+
|
|
|
|
+ .title {
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .content {
|
|
|
|
+ margin: 12rpx 0 20rpx;
|
|
|
|
+ width: 92rpx;
|
|
|
|
+ height: 34rpx;
|
|
|
|
+ background: rgba(142, 160, 166, .6);
|
|
|
|
+ border-radius: 17rpx;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ font-size: 22rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bottom {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+
|
|
|
|
+ .bottom-left {
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ margin-right: 6rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bottom-right {
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .address-detail-main-right {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 24rpx;
|
|
|
|
+ width: 120rpx;
|
|
|
|
+ height: 44rpx;
|
|
|
|
+ background: #FF6300;
|
|
|
|
+ box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
|
|
|
|
+ border-radius: 22rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .address-detail-position {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 22rpx;
|
|
|
|
+ right: 24rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|