981 lines
36 KiB
Vue
981 lines
36 KiB
Vue
<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> |