<template>
    <view class="main">
        <view class="minTopBox" v-if="loginType === 'min'" :style="{
            height: menu.bottom + 8 + 'px'
        }">
            <view class="topContent" :style="{ paddingTop: menu.top + 'px', height: menu.height + 'px' }">
                <image class="fixedIcon" src="/static/home/newFixed.svg" />
                <view class="selectServiceBox" @click="handleGoServiceList">
                    <span class="serviceName">{{ serverPart.SERVERPART_NAME || "" }}</span>
                    <image class="serviceIcon" src="/static/home/newExpendIcon.svg" />
                </view>

                <view class="searchBox" @click="handleGoServiceList">
                    <image class="searchIcon" src="/static/home/newSearch.svg" />
                    <span class="searchText">搜索周边</span>
                </view>
            </view>
        </view>


        <view class="newContent">
            <view class="topBanner">
                <image class="bannerImg" src="/static/home/wanmeiyizhanNewIndex.png" />
            </view>

            <!-- :style="{ marginTop: menu.bottom + 8 + 'px' }" -->
            <view class="funBox">
                <view class="funItem" v-for="(item, index) in funList" :key="index"
                    :style="{ marginBottom: index <= 3 ? '32rpx' : '' }" @click="handleGoFun(item)">
                    <image class="funItemIcon" :src="item.src" />
                    <span class="funItemText">{{ item.label || "" }}</span>
                </view>
            </view>

            <scroll-view :scroll-x="true" class="tabBox">
                <view class="tabList">
                    <view class="tabItem" v-for="(item, index) in tabList" :key="index" @click="handleChangeTab(item)">
                        <view :class="selectTab === item.value ? 'title selectTitle' : 'title'">{{ item.label || "" }}
                        </view>
                        <view :class="selectTab === item.value ? 'desc selectDesc' : 'desc'">{{ item.desc || "" }}
                        </view>
                    </view>
                </view>
            </scroll-view>

            <view v-if="selectTab === 1" style="background-color: #fff;margin-top: 24rpx;">
                <ChargeBox :showType="'horizontal'" :serviceAreaList="chaegeBoxList" pageType="scanCode"
                    :showStore="true" :comeForm="'home'" />
            </view>


            <view class="carouselBox">
                <swiper class="swiperBox" scroll-x="true" autoplay="true" circular="true"
                    @change="swiperChange($event, 'currentBan')" :current="currentBan">
                    <swiper-item v-for="(image, i) in bannerList" :key="i">
                        <image class="swiperImg" :src="image"></image>
                    </swiper-item>
                </swiper>
            </view>


            <!-- 驿站美食 -->
            <view class="foodBox">
                <view class="foodTop">
                    <view class="topLeft">
                        <image class="foodTopIcon" />
                        <span class="foodDesc">提前点餐 无需排队</span>
                    </view>
                    <view class="topRight">
                        <span class="moreText">查看更多</span>
                        <image class="rightArrow" src="/static/home/newRightRow.svg" />
                    </view>
                </view>

                <scroll-view :scroll-x="true" class="foodContent">
                    <view class="foodList">
                        <view class="foodItem">
                            <image class="foodSrc" />
                            <view class="foodDetail">
                                <view class="foodName">柠檬小龙虾沙拉</view>
                                <view class="foodInfo">月售249 仅剩13份</view>
                                <view class="priceBox">
                                    <view class="priceLeft">
                                        <span class="price">
                                            <span class="priceUnit">￥</span>
                                            14.5
                                        </span>
                                        <span class="priceOld">￥20.5</span>
                                    </view>
                                    <view class="priceRight">
                                        <image class="addBtn" src="/static/home/addShopButton.svg" />
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>

            </view>

            <!-- 皖美特产 -->
            <view class="productBox">
                <view class="foodTop">
                    <view class="topLeft">
                        <image class="foodTopIcon" />
                        <span class="foodDesc">本地特产 特色农品</span>
                    </view>
                    <view class="topRight">
                        <span class="moreText">查看更多</span>
                        <image class="rightArrow" src="/static/home/newRightRow.svg" />
                    </view>
                </view>

                <scroll-view :scroll-x="true" class="foodContent">
                    <view class="foodList">
                        <view class="foodItem">
                            <image class="foodSrc" />
                            <view class="foodDetail">
                                <view class="foodName">柠檬小龙虾沙拉</view>
                                <view class="priceBox">
                                    <view class="priceLeft">
                                        <span class="price">
                                            <span class="priceUnit">￥</span>
                                            14.5
                                        </span>
                                        <span class="priceOld">￥20.5</span>
                                    </view>
                                    <!-- <view class="priceRight">
                                        <image class="addBtn" src="/static/home/addShopButton.svg" />
                                    </view> -->
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>

            </view>


            <!-- 附近景点 -->

            <view class="nearBox">
                <view class="nearTabBox">
                    <view :class="selectNear === item.value ? 'nearTabItem selectNearTab' : 'nearTabItem'"
                        v-for="(item, index) in nearTabBox" :key="index">
                        {{ item.label || "" }}
                    </view>
                </view>
            </view>

        </view>
        <tabbar :page="'/pages/home/index'" />
        <CustomLoading :visible="isLoading" />
    </view>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import tabbar from "../../components/tabbar.vue";
import CustomLoading from "../../components/customLoading.vue";
import ChargeBox from "../../components/chargeBox.vue";
import {
    handleGetUserPointInfo,
    handleGetNearThreeService
} from "../../utils/publicMethods";

export default {
    components: { tabbar, CustomLoading, ChargeBox },
    data() {
        return {
            menu: {},// 拿到用户手机尺寸
            loginType: "",// 登录平台
            funList: [
                { label: '扫码充电', value: 1, src: "/static/home/scanCode.png" },
                { label: '我要加油', value: 2, src: "/static/home/getOil.png" },
                { label: '线上点餐', value: 3, src: "/static/home/onlineFood.png" },
                { label: '出行导航', value: 4, src: "/static/home/mapHelp.png" },
                { label: '道路救援', value: 5, src: "/static/home/roadHelp.png" },
                { label: '失物招领', value: 6, src: "/static/home/newLostAndFound.png" },
                { label: '我要修车', value: 7, src: "/static/home/helpCar.png" },
                { label: '投诉建议', value: 8, src: "/static/home/NewSuggestIcon.png" }
            ], // 可以跳转的功能列表
            tabList: [
                { label: "驿达推荐", desc: "推荐精选", value: 1 },
                { label: "皖美地图", desc: "请跟我走", value: 2 },
                { label: "皖美会员", desc: "会员特权", value: 3 },
            ],// tab的功能列表
            selectTab: 1, // 选中的功能列表
            chaegeBoxList: [],// 服务区名称列表
            bannerList: [
                // "https://eshangtech.com/ShopICO/yifu/banner/banner1.png",
                // "https://eshangtech.com/ShopICO/yifu/banner/banner2.png",
                // "https://eshangtech.com/ShopICO/yifu/banner/banner3.png",
                "https://eshangtech.com/wanmeiyizhanImg/home/activityNo1.png",
                "https://eshangtech.com/wanmeiyizhanImg/home/activityNo2.png",
                "https://eshangtech.com/wanmeiyizhanImg/home/activityNo3.png",
            ], // 轮播框内容
            currentBan: 1, // 当前的轮播框 显示内容
            nearTabBox: [
                { label: "玩乐推荐", value: 1 }
            ],
            selectNear: 1,//附近景点的tab选择
            seatInfo: {},// 经纬度信息
            isLoading: false,// 加载效果
            nearPart: {},// 最近的服务区
            serverPart: {},// 当前的服务区
            chaegeBoxList: []
        }
    },
    computed: {
        ...mapGetters({
            user: "user",
            canIuse: "canIuse",
            provinceCode: "provinceCode",
            severList: "severList",
        }),
    },
    async onLoad() {
        // 获取手机参数对页面进行适配 主要是用于拿到胶囊的位置
        let systemInfo = uni.getSystemInfoSync();
        let type = uni.getStorageSync("loginType");
        this.loginType = type;
        if (type === "min") {
            this.menu = uni.getMenuButtonBoundingClientRect();
        } else {
            this.menu = systemInfo.safeArea;
        }
        await this.handleOnLoad()
    },
    async onShow() {
        uni.hideTabBar({
            animation: false,
        });
    },
    methods: {
        ...mapMutations({
            setArea: "setHomeServer",
            setServerPart: "discoveryServerPart",
            setSeverList: "severList",
            setprovinceCode: "setprovinceCode",
            setInvitedCode: "setInvitedCode",
            setOwnerUnitId: "setOwnerUnitId",
        }),
        // 切换tab
        handleChangeTab(obj) {
            this.selectTab = obj.value
        },
        async handleOnLoad() {
            this.isLoading = true
            // 拿到经纬度信息
            let seatInfo = await handleGetUserPointInfo()
            this.seatInfo = seatInfo
            // 拿到几个需要的服务区的数据
            let serviceInfo = await handleGetNearThreeService()
            console.log('serviceInfo', serviceInfo);

            this.nearPart = serviceInfo.currentService;
            this.serverPart = serviceInfo.currentService;
            this.chaegeBoxList = [serviceInfo.nearThreeList[0]]

            console.log('this.serverPart', this.serverPart);


            this.isLoading = false
            this.$forceUpdate()
        },
        // 跳转修改服务区的列表页面
        handleGoServiceList() {
            uni.navigateTo({ url: "/pages/newMap/index/index?comeForm=home" });
        },
        // 中间的八个功能点击的跳转
        handleGoFun(obj) {
            if (obj.value === 1) {
                // 扫码充电 
                if (this.loginType === 'min') {
                    uni.navigateTo({ url: "/pages/scanCodeCharge/mapIndex" });
                } else {
                    uni.navigateTo({ url: "/pages/scanCodeCharge/mapIndexAPP" });
                }
            } else if (obj.value === 2) {
                // 我要加油 
            } else if (obj.value === 3) {
                // 线上点餐 
                uni.navigateTo({
                    url: "/pages/reservationOrder/index",
                });
            } else if (obj.value === 4) {
                // 出行导航 
                uni.navigateTo({
                    url: "/pages/scanCodeCharge/travelNavigation",
                });
            } else if (obj.value === 5) {
                // 道路救援 
                if (_this.loginType === "min") {
                    uni.navigateTo({ url: "/pages/clickRescue/index" });
                } else {
                    uni.navigateTo({ url: "/pages/clickRescue/index" });
                }
            } else if (obj.value === 6) {
                // 失物招领 
                uni.navigateTo({
                    url: "/pages/contact/index",
                });
            } else if (obj.value === 7) {
                // 我要修车 
                uni.navigateTo({
                    url: "/pages/clickRescue/carMaintenance",
                });
            } else if (obj.value === 8) {
                // 投诉建议 
                if (!this.user.MEMBERSHIP_ID) {
                    let _this = this;
                    uni.showModal({
                        title: "温馨提示",
                        content: "请您授权登录后再操作。",
                        success(res) {
                            if (res.confirm) {
                                if (_this.loginType === "min") {
                                    uni.navigateTo({ url: "/pages/register/index" });
                                } else {
                                    uni.navigateTo({ url: "/pages/login/index" });
                                }
                            }
                        },
                    });
                    return;
                }
                if (_this.loginType === "min") {
                    uni.navigateTo({
                        url: "/pages/complaintFeedback/index",
                    });
                } else {
                    uni.navigateTo({
                        url: "/pages/complaintFeedback/index",
                    });
                }
            }
        }

    }
}
</script>

<style lang="less" scoped>
.main {
    width: 100vw;
    min-height: 100vh;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
    position: relative;



    .minTopBox {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
        background-image: url('https://eshangtech.com/wanmeiyizhanImg/home/wanmeiyizhanNewIndex.png');
        background-repeat: no-repeat;
        background-size: 100% 400rpx;

        .topContent {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 0 32rpx;

            .fixedIcon {
                width: 36rpx;
                height: 36rpx;
                margin-right: 8rpx;
            }

            .selectServiceBox {
                width: 180rpx;
                height: 100%;
                display: flex;
                align-items: center;

                .serviceName {
                    max-width: 150rpx;
                    display: inline-block;
                    white-space: noWrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    font-family: "PingFang SC";
                    font-weight: 400;
                    font-size: 30rpx;
                    color: #FFFFFF;
                    line-height: 42rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                .serviceIcon {
                    width: 20rpx;
                    height: 10rpx;
                    margin-left: 8rpx;
                }
            }

            .searchBox {
                width: 324rpx;
                height: 60rpx;
                background-color: rgba(255, 255, 255, 0.7);
                border-radius: 14rpx 14rpx 14rpx 14rpx;
                border: 1rpx solid rgba(0, 0, 0, 0);
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding: 9rpx 20rpx;
                margin-left: 14rpx;

                .searchIcon {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 6rpx;
                }

                .searchText {
                    font-family: "PingFang SC";
                    font-weight: 400;
                    font-size: 30rpx;
                    color: #959fb0;
                    line-height: 42rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }
        }
    }

    .newContent {
        width: 100vw;
        box-sizing: border-box;
        padding: 0 32rpx 180rpx;
        position: absolute;
        background-color: #f5f6f8;
        z-index: 2;
        top: 0;
        left: 0;

        .topBanner {
            width: 100%;
            height: 400rpx;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;

            .bannerImg {
                width: 100%;
                height: 100%;
            }
        }


        .funBox {
            width: 100%;
            box-sizing: border-box;
            padding: 32rpx;
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0rpx 3rpx 8rpx 1rpx rgba(67, 29, 0, 0.15);
            border-radius: 24rpx;
            margin-top: 360rpx;
            display: flex;
            flex-wrap: wrap;
            position: relative;
            z-index: 2;

            .funItem {
                width: 25%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .funItemIcon {
                    width: 80rpx;
                    height: 80rpx;
                    margin-bottom: 12rpx;
                }

                .funItemText {
                    font-family: "PingFang SC";
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #2F3339;
                    line-height: 33rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }
        }

        .tabBox {
            width: 100%;
            margin-top: 32rpx;

            .tabList {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                flex-wrap: nowrap;

                .tabItem {
                    display: inline-block;
                    width: 160rpx;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    .title {
                        font-family: "PingFang SC";
                        font-weight: bold;
                        font-size: 28rpx;
                        color: #333333;
                        line-height: 40rpx;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }

                    .desc {
                        font-family: "PingFang SC";
                        font-weight: 500;
                        font-size: 22rpx;
                        color: #9299A7;
                        line-height: 30rpx;
                        text-align: center;
                        font-style: normal;
                        text-transform: none;
                        margin-top: 6rpx;
                    }

                    .selectTitle {
                        font-family: "PingFang SC";
                        font-weight: bold;
                        font-size: 32rpx;
                        color: #333333;
                        line-height: 45rpx;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }

                    .selectDesc {
                        font-family: "PingFang SC";
                        font-weight: 500;
                        font-size: 22rpx;
                        color: #FFFFFF;
                        line-height: 30rpx;
                        text-align: center;
                        font-style: normal;
                        text-transform: none;
                        padding: 6rpx 16rpx;
                        background: linear-gradient(269deg, #3A82FD 0%, #80AEFF 100%);
                        border-radius: 20rpx 20rpx 20rpx 20rpx;
                    }
                }
            }
        }


        .carouselBox {
            width: 100%;
            height: 300rpx;
            margin-top: 20rpx;

            .swiperBox {
                width: 100%;
                height: 100%;

                .swiperImg {
                    width: 100%;
                    height: 100%;
                }
            }


        }

        .foodBox {
            width: 100%;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 16rpx;
            margin-top: 32rpx;

            .foodTop {
                width: 100%;
                height: 70rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: linear-gradient(180deg, #D7EFFD 0%, #FFFFFF 100%);
                box-shadow: 0rpx 8rpx 12rpx 1rpx rgba(176, 223, 238, 0.07), inset 0rpx 3rpx 6rpx 1rpx #FFFFFF;
                box-sizing: border-box;
                padding: 16rpx 16rpx 0;

                .topLeft {
                    display: flex;
                    align-items: center;

                    .foodTopIcon {
                        width: 200rpx;
                        height: 70rpx;
                    }

                    .foodDesc {
                        font-family: "PingFang SC";
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #7BA3FD;
                        line-height: 42rpx;
                        text-align: center;
                        font-style: normal;
                        text-transform: none;
                        padding: 4rpx 14rpx;
                        border-radius: 22rpx 22rpx 22rpx 0rpx;
                        border: 1rpx solid #7799FD;
                    }
                }

                .topRight {
                    display: flex;
                    align-items: center;

                    .moreText {
                        font-family: "PingFang SC";
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #9299A7;
                        line-height: 33rpx;
                        text-align: right;
                        font-style: normal;
                        text-transform: none;
                    }

                    .rightArrow {
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
            }

            .foodContent {
                width: 100%;

                .foodList {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    flex-wrap: nowrap;

                    .foodItem {
                        width: 280rpx;
                        // height: 370rpx;
                        box-sizing: border-box;
                        padding: 24rpx;

                        .foodSrc {
                            width: 200rpx;
                            height: 200rpx;
                            margin-bottom: 16rpx;
                        }

                        .foodDetail {
                            width: 100%;
                            margin-top: 16rpx;

                            .foodName {
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                font-family: "PingFang SC";
                                font-weight: 400;
                                font-size: 28rpx;
                                color: #050505;
                                line-height: 30rpx;
                                text-align: left;
                                font-style: normal;
                                margin-bottom: 8rpx;
                            }

                            .foodInfo {
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                font-family: "PingFang SC";
                                font-weight: 400;
                                font-size: 24rpx;
                                color: #A8AAB0;
                                line-height: 30rpx;
                                text-align: left;
                                font-style: normal;
                            }

                            .priceBox {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                margin-top: 16rpx;

                                .priceLeft {
                                    .price {
                                        font-family: "DINAlternate";
                                        font-weight: 500;
                                        font-size: 35rpx;
                                        color: #FF790D;
                                        line-height: 52rpx;
                                        text-align: center;
                                        font-style: normal;
                                        text-transform: none;

                                        .priceUnit {
                                            font-family: "PingFang SC";
                                            font-weight: 500;
                                            font-size: 22rpx;
                                            color: #FF790D;
                                            line-height: 30rpx;
                                            text-align: center;
                                            font-style: normal;
                                            text-transform: none;
                                        }
                                    }

                                    .priceOld {
                                        font-family: "PingFang SC";
                                        font-weight: 400;
                                        font-size: 20rpx;
                                        color: #A8AAB0;
                                        line-height: 30rpx;
                                        text-align: center;
                                        font-style: normal;
                                        text-decoration-line: line-through;
                                        margin-left: 8rpx;
                                    }
                                }

                                .priceRight {
                                    width: 40rpx;
                                    height: 40rpx;

                                    .addBtn {
                                        width: 40rpx;
                                        height: 40rpx;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .productBox {
            width: 100%;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 16rpx;
            margin-top: 32rpx;

            .foodTop {
                width: 100%;
                height: 70rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: linear-gradient(#E9ECFF 0%, #F9FAFF 100%);
                box-shadow: 0rpx 8rpx 12rpx 1rpx rgba(176, 223, 238, 0.07), inset 0rpx 3rpx 6rpx 1rpx #FFFFFF;
                box-sizing: border-box;
                padding: 16rpx 16rpx 0;

                .topLeft {
                    display: flex;
                    align-items: center;

                    .foodTopIcon {
                        width: 200rpx;
                        height: 70rpx;
                    }

                    .foodDesc {
                        font-family: "PingFang SC";
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #998CEA;
                        line-height: 42rpx;
                        text-align: center;
                        font-style: normal;
                        text-transform: none;
                        padding: 4rpx 14rpx;
                        border-radius: 22rpx 22rpx 22rpx 0rpx;
                        border: 1rpx solid #998CEA;
                    }
                }

                .topRight {
                    display: flex;
                    align-items: center;

                    .moreText {
                        font-family: "PingFang SC";
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #9299A7;
                        line-height: 33rpx;
                        text-align: right;
                        font-style: normal;
                        text-transform: none;
                    }

                    .rightArrow {
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
            }

            .foodContent {
                width: 100%;

                .foodList {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    flex-wrap: nowrap;

                    .foodItem {
                        width: 280rpx;
                        // height: 370rpx;
                        box-sizing: border-box;
                        padding: 24rpx;

                        .foodSrc {
                            width: 200rpx;
                            height: 200rpx;
                            margin-bottom: 16rpx;
                        }

                        .foodDetail {
                            width: 100%;
                            margin-top: 16rpx;

                            .foodName {
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                font-family: "PingFang SC";
                                font-weight: 400;
                                font-size: 28rpx;
                                color: #050505;
                                line-height: 30rpx;
                                text-align: left;
                                font-style: normal;
                                margin-bottom: 8rpx;
                            }

                            .foodInfo {
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                font-family: "PingFang SC";
                                font-weight: 400;
                                font-size: 24rpx;
                                color: #A8AAB0;
                                line-height: 30rpx;
                                text-align: left;
                                font-style: normal;
                            }

                            .priceBox {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                margin-top: 16rpx;

                                .priceLeft {
                                    .price {
                                        font-family: "DINAlternate";
                                        font-weight: 500;
                                        font-size: 35rpx;
                                        color: #FF790D;
                                        line-height: 52rpx;
                                        text-align: center;
                                        font-style: normal;
                                        text-transform: none;

                                        .priceUnit {
                                            font-family: "PingFang SC";
                                            font-weight: 500;
                                            font-size: 22rpx;
                                            color: #FF790D;
                                            line-height: 30rpx;
                                            text-align: center;
                                            font-style: normal;
                                            text-transform: none;
                                        }
                                    }

                                    .priceOld {
                                        font-family: "PingFang SC";
                                        font-weight: 400;
                                        font-size: 20rpx;
                                        color: #A8AAB0;
                                        line-height: 30rpx;
                                        text-align: center;
                                        font-style: normal;
                                        text-decoration-line: line-through;
                                        margin-left: 8rpx;
                                    }
                                }

                                .priceRight {
                                    width: 40rpx;
                                    height: 40rpx;

                                    .addBtn {
                                        width: 40rpx;
                                        height: 40rpx;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }


        .nearBox {
            width: 100%;
            box-sizing: border-box;
            padding: 25rpx 32rpx;
            background-color: #fff;
            border-radius: 16rpx 16rpx 16rpx 16rpx;
            margin-top: 20rpx;

            .nearTabBox {
                display: flex;
                align-items: center;

                .nearTabItem {
                    font-family: "PingFang SC";
                    font-weight: 500;
                    font-size: 34rpx;
                    color: #5F5F5F;
                    line-height: 45rpx;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                }

                .selectNearTab {
                    font-family: "PingFang SC";
                    font-weight: bold;
                    font-size: 34rpx;
                    color: #141B1A;
                    line-height: 45rpx;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                    position: relative;
                    z-index: 2;
                }


            }
        }
    }
}
</style>