1547 lines
44 KiB
Vue
1547 lines
44 KiB
Vue
<template>
|
|
<view class="homeMain">
|
|
<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(1)">
|
|
<span class="serviceName">{{
|
|
serverPart.SERVERPART_NAME || ""
|
|
}}</span>
|
|
<image class="serviceIcon" src="/static/home/newExpendIcon.svg" />
|
|
</view>
|
|
|
|
<view class="searchBox" @click="handleGoServiceList(2)">
|
|
<image class="searchIcon" src="/static/home/newSearch.svg" />
|
|
<span class="searchText">搜索周边</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="appTopBox"
|
|
v-else
|
|
:style="{
|
|
height: menu.top + 50 + 'px',
|
|
}"
|
|
>
|
|
<view class="topContent" :style="{ paddingTop: menu.top + 'px' }">
|
|
<image class="fixedIcon" src="/static/home/newFixed.svg" />
|
|
<view class="selectServiceBox" @click="handleGoServiceList(1)">
|
|
<span class="serviceName">{{
|
|
serverPart.SERVERPART_NAME || ""
|
|
}}</span>
|
|
<image class="serviceIcon" src="/static/home/newExpendIcon.svg" />
|
|
</view>
|
|
|
|
<view class="searchBox" @click="handleGoServiceList(2)">
|
|
<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="https://eshangtech.com/wanmeiyizhanImg/home/wanmeiyizhanNewIndex.png"
|
|
/>
|
|
</view>
|
|
|
|
<view style="box-sizing: border-box; padding: 0 32rpx">
|
|
<!-- :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="chaegeBoxList && chaegeBoxList.length > 0"
|
|
style="background-color: #fff; margin-top: 24rpx"
|
|
>
|
|
<ChargeBox
|
|
:showType="'horizontal'"
|
|
:serviceAreaList="chaegeBoxList"
|
|
pageType="scanCode"
|
|
:showStore="true"
|
|
:comeForm="'home'"
|
|
:showPadding="true"
|
|
/>
|
|
</view>
|
|
|
|
<view class="carouselBox" @click="handleGoDiscovery" v-if="showBanner">
|
|
<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="stationFood">驿站美食</span>
|
|
<span class="foodDesc">提前点餐 无需排队</span>
|
|
</view>
|
|
<view class="topRight" @click="handleGoFoodOrder">
|
|
<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="foodItemNew"
|
|
v-for="(item, index) in foodList"
|
|
:key="index"
|
|
@click="handleGoFoodShop(item)"
|
|
>
|
|
<view class="shopName">{{ item.MERCHANTS_NAME || "" }}</view>
|
|
<!-- <view class="foodSrc" :style="{ backgroundImage: `url(${item.IMAGE_URL})` }"></view> -->
|
|
<view class="foodSrcBox">
|
|
<image
|
|
class="foodSrc"
|
|
lazy-load="true"
|
|
:src="item.IMAGE_URL"
|
|
/>
|
|
<!-- mode="aspectFit" -->
|
|
</view>
|
|
|
|
<view class="foodDetail">
|
|
<view class="foodName">{{ item.COMMODITY_NAME }}</view>
|
|
<!-- <view class="foodInfo">月售249 仅剩13份</view> -->
|
|
<view class="priceBox">
|
|
<view class="priceLeft">
|
|
<span class="price">
|
|
<span class="priceUnit">￥</span>
|
|
{{ item.COMMODITY_RETAILPRICE }}
|
|
</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="stationFood">皖美农品</span>
|
|
<span class="foodDesc">本地特产 特色农品</span>
|
|
</view>
|
|
<view class="topRight" @click="handleGoFoodOrder">
|
|
<span class="moreText">查看更多</span>
|
|
<image class="rightArrow" src="/static/home/newRightRow.svg" />
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view :scroll-x="true" class="foodContent">
|
|
<view class="foodList">
|
|
<!-- AllProductsList -->
|
|
<view
|
|
class="foodItemNew"
|
|
v-for="(item, index) in AllProductsList"
|
|
:key="index"
|
|
@click="handleGoFoodShop(item)"
|
|
>
|
|
<!-- <view class="foodSrc" :style="{ backgroundImage: `url(${item.IMAGE_URL})` }"></view> -->
|
|
<view class="foodSrcBox">
|
|
<image
|
|
class="foodSrc"
|
|
lazy-load="true"
|
|
:src="item.IMAGE_URL"
|
|
/>
|
|
<!-- mode="aspectFit" -->
|
|
</view>
|
|
|
|
<view class="foodDetail">
|
|
<view class="foodName">{{ item.COMMODITY_NAME }}</view>
|
|
<!-- <view class="foodInfo">月售249 仅剩13份</view> -->
|
|
<view class="priceBox">
|
|
<view class="priceLeft">
|
|
<span class="price">
|
|
<span class="priceUnit">￥</span>
|
|
{{ item.COMMODITY_RETAILPRICE }}
|
|
</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>
|
|
|
|
<!-- 附近景点 -->
|
|
<!-- <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/newIndex'" />
|
|
<CustomLoading
|
|
:visible="isLoading"
|
|
v-if="isLoading"
|
|
@update:visible="(val) => (isLoading = val)"
|
|
/>
|
|
</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: {}, // 当前的服务区
|
|
foodList: [], // 当前服务区的食品详情
|
|
AllProductsList: [], // 农品内容
|
|
showBanner: false,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
user: "user",
|
|
canIuse: "canIuse",
|
|
provinceCode: "provinceCode",
|
|
severList: "severList",
|
|
}),
|
|
},
|
|
async onLoad() {
|
|
// await getApp().globalData.initReady;
|
|
// 获取手机参数对页面进行适配 主要是用于拿到胶囊的位置
|
|
let systemInfo = uni.getSystemInfoSync();
|
|
let type = uni.getStorageSync("loginType");
|
|
this.loginType = type;
|
|
console.log("this.loginTypethis.loginType", this.loginType);
|
|
if (type === "min") {
|
|
this.menu = uni.getMenuButtonBoundingClientRect();
|
|
} else {
|
|
this.menu = systemInfo.safeArea;
|
|
}
|
|
await this.handleOnLoad();
|
|
},
|
|
async onShow() {
|
|
this.showBanner = true;
|
|
// await getApp().globalData.initReady;
|
|
let type = uni.getStorageSync("loginType");
|
|
if (type !== "min") {
|
|
uni.hideTabBar({
|
|
animation: false,
|
|
});
|
|
}
|
|
// 当前服务区
|
|
let currentService = uni.getStorageSync("currentService");
|
|
if (this.serverPart && currentService) {
|
|
if (this.serverPart.ServerPart_Name !== currentService.SERVERPART_NAME) {
|
|
this.handleOnShowUpdate(currentService);
|
|
}
|
|
}
|
|
this.isLoading = false;
|
|
},
|
|
onHide() {
|
|
this.showBanner = true;
|
|
},
|
|
// 下拉刷新
|
|
async onPullDownRefresh() {
|
|
this.isLoading = true;
|
|
uni.setStorageSync("seatInfo", null);
|
|
uni.setStorageSync("currentService", null);
|
|
uni.setStorageSync("nearService", null);
|
|
uni.setStorageSync("nearThreeList", null);
|
|
uni.setStorageSync("allServiceList", null);
|
|
await this.handleOnLoad();
|
|
|
|
let allServiceList = uni.getStorageSync("allServiceList");
|
|
let currentService = uni.getStorageSync("currentService");
|
|
this.chaegeBoxList = [];
|
|
this.$forceUpdate();
|
|
console.log("allServiceListallServiceListallServiceList", allServiceList);
|
|
if (allServiceList && allServiceList.length > 0) {
|
|
allServiceList.forEach((item) => {
|
|
if (item.SERVERPART_NAME === currentService.SERVERPART_NAME) {
|
|
this.serverPart = item;
|
|
}
|
|
});
|
|
}
|
|
|
|
let _this = this;
|
|
setTimeout(() => {
|
|
_this.chaegeBoxList = [_this.serverPart.SERVERPART_NAME];
|
|
uni.stopPullDownRefresh();
|
|
}, 500);
|
|
this.isLoading = false;
|
|
},
|
|
onHide() {
|
|
this.isLoading = false;
|
|
this.$forceUpdate();
|
|
},
|
|
methods: {
|
|
...mapMutations({
|
|
setArea: "setHomeServer",
|
|
setServerPart: "discoveryServerPart",
|
|
setSeverList: "severList",
|
|
setprovinceCode: "setprovinceCode",
|
|
setInvitedCode: "setInvitedCode",
|
|
setOwnerUnitId: "setOwnerUnitId",
|
|
}),
|
|
// onshow需要更新得内容
|
|
async handleOnShowUpdate(currentService) {
|
|
this.isLoading = true;
|
|
let allServiceList = uni.getStorageSync("allServiceList");
|
|
this.chaegeBoxList = [];
|
|
this.$forceUpdate();
|
|
console.log("allServiceListallServiceListallServiceList", allServiceList);
|
|
if (allServiceList && allServiceList.length > 0) {
|
|
allServiceList.forEach((item) => {
|
|
if (item.SERVERPART_NAME === currentService.SERVERPART_NAME) {
|
|
this.serverPart = item;
|
|
}
|
|
});
|
|
}
|
|
// 拿到当前服务区的点餐数据
|
|
await this.handleGetCurrentService();
|
|
|
|
let _this = this;
|
|
setTimeout(() => {
|
|
_this.chaegeBoxList = [_this.serverPart.SERVERPART_NAME];
|
|
}, 500);
|
|
|
|
this.isLoading = false;
|
|
this.$forceUpdate();
|
|
},
|
|
// 跳转精选活动
|
|
handleGoDiscovery() {
|
|
uni.switchTab({
|
|
url: "/pages/discovery/index",
|
|
});
|
|
},
|
|
// 跳转到对应的食品门店 点餐页面
|
|
handleGoFoodShop(item) {
|
|
console.log("item", item);
|
|
|
|
if (this.user.MEMBERSHIP_MOBILEPHONE) {
|
|
let id = item.SERVERPARTSHOP_IDS.split(",")[0];
|
|
uni.navigateTo({
|
|
url: `/pages/shopPages/shop/index?id=${id}&mid=${item.MERCHANTS_ID}&province=${item.PROVINCE_CODE}&buyType=${item.SCANCODE_ORDER}`,
|
|
});
|
|
} else {
|
|
let id = item.SERVERPARTSHOP_IDS.split(",")[0];
|
|
uni.navigateTo({
|
|
url: `/pages/shopPages/shop/index?id=${id}&mid=${item.MERCHANTS_ID}&province=${item.PROVINCE_CODE}&buyType=${item.SCANCODE_ORDER}`,
|
|
});
|
|
this.isLogin = true;
|
|
}
|
|
},
|
|
// 轮播框的图片切换
|
|
swiperChange(e, name) {
|
|
// this[name] = e.mp.detail.current;
|
|
this.currentBan = e.mp.detail.current;
|
|
},
|
|
// 切换tab
|
|
handleChangeTab(obj) {
|
|
// this.selectTab = obj.value
|
|
if (obj.value === 2) {
|
|
// 出行导航
|
|
uni.navigateTo({
|
|
url: "/pages/scanCodeCharge/travelNavigation",
|
|
});
|
|
} else if (obj.value === 3) {
|
|
// 跳转会员权益页面
|
|
uni.navigateTo({
|
|
url: "/pages/memberBenefits/index",
|
|
});
|
|
}
|
|
},
|
|
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);
|
|
// 拿到当前服务区的点餐数据
|
|
await this.handleGetCurrentService();
|
|
|
|
this.isLoading = false;
|
|
this.$forceUpdate();
|
|
},
|
|
// 拿到当前服务区的点餐数据
|
|
async handleGetCurrentService() {
|
|
// const data = await this.$api.getCoop({
|
|
// action_type: "GetSellerList",
|
|
// showSales: 1,
|
|
// showCoupon: 1,
|
|
// showComment: 1,
|
|
// serverpartId: this.serverPart.SERVERPART_ID,
|
|
// provinceCode: this.serverPart.ProvinceCode || "340000",
|
|
// showGoods: 1,
|
|
// pageSize: 9999,
|
|
// pageIndex: 1,
|
|
// });
|
|
// let list = data.Data.List;
|
|
|
|
const data = await this.$api.$javaGet2("/third-party/getMerchantsList", {
|
|
serverpartId: this.serverPart.SERVERPART_ID,
|
|
});
|
|
let list = data.Result_Data.List;
|
|
console.log("首页点餐数据", list);
|
|
// 因为要显示具体商品 但是商品的内容 又在item的 GoodsList 里面 是一个数据 那么就将要显示的商品拆出来
|
|
let shopList = [];
|
|
let productsList = [];
|
|
if (list && list.length > 0) {
|
|
list.forEach((item) => {
|
|
if (item.GOODSLIST && item.GOODSLIST.length > 0) {
|
|
item.GOODSLIST.forEach((subItem) => {
|
|
let obj = JSON.parse(JSON.stringify(item));
|
|
obj = {
|
|
...obj,
|
|
...subItem,
|
|
};
|
|
shopList.push(obj);
|
|
});
|
|
}
|
|
if (item.MERCHANTS_ID === 927) {
|
|
if (item.GOODSLIST && item.GOODSLIST.length > 0) {
|
|
item.GOODSLIST.forEach((subItem) => {
|
|
let obj = JSON.parse(JSON.stringify(item));
|
|
obj = {
|
|
...obj,
|
|
...subItem,
|
|
};
|
|
productsList.push(obj);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
this.foodList = shopList;
|
|
this.AllProductsList = productsList;
|
|
},
|
|
// 跳转点餐页面
|
|
handleGoFoodOrder() {
|
|
// 线上点餐
|
|
uni.navigateTo({
|
|
url: "/pages/reservationOrder/index",
|
|
});
|
|
},
|
|
// 跳转修改服务区的列表页面
|
|
handleGoServiceList(value) {
|
|
// 当value为1 的时候 表示会回到该页面
|
|
if (value === 1) {
|
|
uni.navigateTo({ url: "/pages/newMap/index/index" });
|
|
} else {
|
|
uni.navigateTo({ url: "/pages/newMap/index/index?comeForm=home" });
|
|
}
|
|
},
|
|
// 中间的八个功能点击的跳转
|
|
handleGoFun(obj) {
|
|
let _this = this;
|
|
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) {
|
|
// 我要加油
|
|
uni.navigateTo({ url: "/pages/scanCodeCharge/oilIndex" });
|
|
} 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>
|
|
.homeMain {
|
|
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: 274rpx;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.appTopBox {
|
|
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;
|
|
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: 274rpx;
|
|
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;
|
|
padding: 0 0 140rpx;
|
|
// 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;
|
|
margin-top: 32rpx;
|
|
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%;
|
|
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 8rpx;
|
|
|
|
.topLeft {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.foodTopIcon {
|
|
width: 200rpx;
|
|
height: 70rpx;
|
|
}
|
|
|
|
.stationFood {
|
|
font-family: "PingFang SC";
|
|
font-weight: 600;
|
|
font-size: 30rpx;
|
|
color: #000;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.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;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
|
|
.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%;
|
|
// height: 370rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
box-sizing: border-box;
|
|
padding: 10rpx 0 22rpx;
|
|
|
|
.foodItem {
|
|
width: 280rpx;
|
|
// height: 370rpx;
|
|
box-sizing: border-box;
|
|
padding: 24rpx;
|
|
|
|
.foodSrcBox {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
background-color: #f5f5f5;
|
|
border-radius: 8rpx;
|
|
overflow: hidden;
|
|
|
|
.foodSrc {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
background-repeat: no-repeat;
|
|
// margin-bottom: 16rpx;
|
|
}
|
|
}
|
|
|
|
.foodSrc {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
background-repeat: no-repeat;
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.foodItemNew {
|
|
box-sizing: border-box;
|
|
padding: 16rpx 26rpx;
|
|
box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(0, 0, 0, 0.1);
|
|
border-radius: 16rpx;
|
|
margin-right: 16rpx;
|
|
.shopName {
|
|
font-family: "PingFang SC";
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #000c04;
|
|
line-height: 30rpx;
|
|
display: inline-block;
|
|
width: 240rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.foodSrcBox {
|
|
margin-top: 16rpx;
|
|
width: 218rpx;
|
|
height: 218rpx;
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
.foodSrc {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.foodDetail {
|
|
margin-top: 20rpx;
|
|
.foodName {
|
|
font-family: "PingFang SC";
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #000c04;
|
|
line-height: 30rpx;
|
|
display: inline-block;
|
|
width: 240rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.priceBox {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.priceLeft {
|
|
.price {
|
|
font-family: "PingFang SC";
|
|
font-weight: 600;
|
|
font-size: 30rpx;
|
|
color: #ff6800;
|
|
line-height: 30rpx;
|
|
.priceUnit {
|
|
font-family: "PingFang SC";
|
|
font-weight: 500;
|
|
font-size: 20rpx;
|
|
color: #ff6800;
|
|
line-height: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.priceRight {
|
|
font-family: "PingFang SC";
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #ffffff;
|
|
line-height: 30rpx;
|
|
padding: 6rpx 16rpx;
|
|
background-color: #01c553;
|
|
border-radius: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 8rpx;
|
|
|
|
.topLeft {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.foodTopIcon {
|
|
width: 200rpx;
|
|
height: 70rpx;
|
|
}
|
|
|
|
.stationFood {
|
|
font-family: "PingFang SC";
|
|
font-weight: 600;
|
|
font-size: 30rpx;
|
|
color: #000;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.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;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
|
|
.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%;
|
|
// height: 370rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
padding: 10rpx 0 22rpx;
|
|
|
|
.foodItem {
|
|
width: 280rpx;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.foodItemNew {
|
|
box-sizing: border-box;
|
|
padding: 16rpx 26rpx;
|
|
box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(0, 0, 0, 0.1);
|
|
border-radius: 16rpx;
|
|
margin-right: 16rpx;
|
|
.shopName {
|
|
font-family: "PingFang SC";
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #000c04;
|
|
line-height: 30rpx;
|
|
display: inline-block;
|
|
width: 240rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.foodSrcBox {
|
|
margin-top: 16rpx;
|
|
width: 218rpx;
|
|
height: 218rpx;
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
.foodSrc {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.foodDetail {
|
|
margin-top: 20rpx;
|
|
.foodName {
|
|
font-family: "PingFang SC";
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #000c04;
|
|
line-height: 30rpx;
|
|
display: inline-block;
|
|
width: 240rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.priceBox {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.priceLeft {
|
|
.price {
|
|
font-family: "PingFang SC";
|
|
font-weight: 600;
|
|
font-size: 30rpx;
|
|
color: #ff6800;
|
|
line-height: 30rpx;
|
|
.priceUnit {
|
|
font-family: "PingFang SC";
|
|
font-weight: 500;
|
|
font-size: 20rpx;
|
|
color: #ff6800;
|
|
line-height: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.priceRight {
|
|
font-family: "PingFang SC";
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #ffffff;
|
|
line-height: 30rpx;
|
|
padding: 6rpx 16rpx;
|
|
background-color: #01c553;
|
|
border-radius: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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> |