Files
xdd-uniapp-new/pages/home/index_bak20240730.vue
T

1131 lines
30 KiB
Vue

<template>
<view class="index">
<view class="header acea-row row-column row-left" style="position: absolute;left: 0;right: 0;"
:style="{top:statusBarHeight+'px'}">
<view class="acea-row row-middle row-right" style="position: relative;z-index: 1;">
<view style="position: relative;color: #FFF;margin-left: 20rpx;margin-right: 20rpx;"
class="acea-row row-middle">
<image style="width: 36rpx;height: 36rpx;" :src="webUrl+'/20210616184302174394.png'" mode="">
</image>
<view style="margin-left: 10rpx;font-size: 28rpx;color: #fff;">客服</view>
<button class="cus-btn" open-type="contact"></button>
</view>
</view>
</view>
<view class="slider-banner" style="position: relative;">
<swiper style="height: 510rpx;" indicatorDots="true" indicator-color="rgba(255, 255, 255, .3)"
indicator-active-color="#ffffff" v-if="banner.length > 0" autoplay circular>
<block v-for="(item, bannerIndex) in banner" :key="bannerIndex">
<swiper-item>
<view @click="goRoll(item)" class="swiper-item">
<image :src="item.pic"/>
</view>
</swiper-item>
</block>
</swiper>
<view class="acea-row row-between row-middle"
style="flex-wrap: nowrap;position: absolute;left: 0;bottom: 0;right: 0;background: rgba(0,0,0,0.6);padding: 10rpx 32rpx;">
<view class="news acea-row row-between-wrapper"
style="box-shadow: none !important;flex-grow: 1;flex-wrap: nowrap;background:transparent !important;border: none !important;margin: 0 30rpx 0 0 !important;padding: 0 !important;height: auto !important;">
<view class="swiper-no-swiping new-banner" style="height: 34rpx !important;text-align: right;">
<swiper class="swiper-wrapper" style="height: 34rpx !important;" v-if="userList.length > 0" :interval="3000"
:indicator-dots="false" autoplay circular vertical>
<block v-for="(item, userIndex) in userList" :key="userIndex">
<swiper-item class="swiper-slide" style="height: 34rpx !important;">
<view class="swiper-item acea-row row-middle" style="height: 34rpx !important;">
<view class="newsTitle line1"
style="color: #fff !important;font-size: 24rpx;text-align: left !important;">
恭喜{{ item.nickname }} 抽中奖品{{ item.prizeName }}
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</view>
</view>
<view class="acea-row row-middle row-between" style="padding-top: 20rpx;background: #fff;">
<view @click="goGoodSearch()" class="search acea-row row-middle" style="flex-grow: 1;">
<text class="iconfont icon-xiazai5" style="color: #acacac;"></text>
搜索
</view>
</view>
<!-- 导航v9 -->
<view style="padding:24rpx 30rpx;background-color: #FFFFFF">
<u-scroll-list
:indicator="menus.length > 10"
:indicator-active-color="'#FF6666'"
>
<view v-for="n in menuArr[0].length" :key="n">
<view
class="flex flex-col ai-center"
style="width: 138rpx;margin-bottom: 32rpx;"
@click="$global.commonJump(menuArr[0][n]['uniapp_url'])"
>
<image style="width: 86rpx;height: 86rpx" :src="menuArr[0][n]['pic']" mode="scaleToFill"/>
<view class="one-t tc" style="width: 100%;margin-top: 16rpx;color:#666666;font-size: 26rpx">
{{ menuArr[0][n]['name'] }}
</view>
</view>
<view
v-if="menuArr[1][n]"
class="flex flex-col ai-center"
style="width: 138rpx"
@click="$global.commonJump(menuArr[1][n]['uniapp_url'])"
>
<image style="width: 86rpx;height: 86rpx" :src="menuArr[1][n]['pic']" mode="scaleToFill"/>
<view class="one-t tc" style="width: 100%;margin-top: 16rpx;color:#666666;font-size: 26rpx">
{{ menuArr[1][n]['name'] }}
</view>
</view>
</view>
</u-scroll-list>
</view>
<!-- 导航v9end -->
<!-- v4 预售专区开始 -->
<view class="pre-sale" v-if="preSaleList.length">
<image class="bg" :src="webUrl+'/20220519145831955075.png'" mode="scaleToFill" @click="goPreSale"></image>
<view class="list">
<view class="item" v-for="(item,index) in preSaleList" :key="index" @click="goGoodsConByProductID(item,'pre')">
<image :src="item.image" mode="scaleToFill"></image>
<view style="text-align: center;">{{ item.title }}</view>
<text>{{ item.price }}</text>
</view>
</view>
</view>
<!-- v4 预售专区结束 -->
<!-- v4 每天特价开始 -->
<view class="special-offer" v-if="dailyGoodsList.length">
<view class="header flex">
<view class="flex" style="align-items: center;">
<text class="title">每天特价</text>
<view class="date-box flex">
<image class="icon-date" :src="webUrl+'/20220521111703338325.png'" mode="scaleToFill"></image>
<view class="day">
<text>{{ date }}</text>
DAY
</view>
<view class="month">{{ month }}</view>
</view>
</view>
<view class="more" @click="goOffer">查看更多
<uni-icons type="arrowright" color="#7C7C7C" size="14"/>
</view>
</view>
<view class="list flex">
<view class="item flex" v-for="(item,index) in dailyGoodsList" :key="index"
@click="goGoodsConByProductID(item,'day')">
<image class="top-img" :src="item.image" mode="scaleToFill"></image>
<view class="content">
<view class="title one-t">{{ item.title }}</view>
<view class="price flex">
<text class="red">{{ item.price }}</text>
<text class="gray"
v-if="item.productPrice">{{ item.productPrice }}
</text>
</view>
</view>
</view>
</view>
</view>
<!-- v4 每天特价结束 -->
<!-- v9 专题 -->
<view class="subject-box">
<view class="section-half flex jc-between">
<image class="bg-img" :src="countyFamous.backgroundImage" mode="scaleToFill"
@click="$global.commonJump('/pkg_product/views/famousList')" v-if="countyFamous.backgroundImage"/>
<view class="food-box" @click="$global.commonJump('/pkg_product/views/seasonList')">
<image class="bg-img" :src="seasonalFood.backgroundImage" mode="scaleToFill"
v-if="seasonalFood.backgroundImage"/>
<swiper class="swiper" circular autoplay :interval="3000">
<swiper-item v-for="(arr,arrIndex) in seasonalFood.groupList" :key="arrIndex">
<view class="flex">
<image :src="item.image" mode="scaleToFill" v-for="(item,index) in arr" :key="index"/>
</view>
</swiper-item>
</swiper>
</view>
</view>
<view class="section-full flex jc-between">
<swiper class="swiper" circular autoplay :interval="3000">
<swiper-item v-for="(stay,stayIndex) in contentHomestay" :key="stayIndex">
<image :src="stay.indexImage" mode="scaleToFill" @click="goHomeStay(stay)"/>
</swiper-item>
</swiper>
<image :src="contentFestival.indexImage" mode="scaleToFill" @click="goFestival"
v-if="contentFestival.indexImage"/>
</view>
</view>
<!-- v9 老用户弹窗 -->
<u-popup :show="isOldUser" mode="center" bgColor="transparent">
<view class="popup-old-user flex flex-col ai-center">
<image class="main" :src="oldUserPopup.image" mode="scaleToFill" @click="tapOld()"/>
<view class="icon-box flex jc-center ai-center" @click="changeOldPopup(false)">
<image :src="webUrl+'/20230608112219219303.png'" mode="scaleToFill"/>
</view>
</view>
</u-popup>
<!-- 2022/6/20 add 尖货推荐 special-offer-->
<view class="bast-box">
<view style="padding: 0 32rpx;background: #FFFFFF;">
<image class="bast-title" :src="webUrl+'/20230407111908318221.png'" mode="scaleToFill"/>
</view>
<view class="list flex" v-if="bastList.length">
<custom-waterfalls-flow :value="bastList" imageKey="image">
<view class="item flex" v-for="(item,index) in bastList" :key="index" slot="slot{{index}}">
<template v-if="item.storeName==='swiper'">
<swiper class="item bannar-swiper" autoplay circular>
<swiper-item v-for="swipe in bannerList" :key="swipe">
<image :src="swipe.pic" mode="aspectFit" @click="goGoodsConByProductID(swipe)"/>
</swiper-item>
</swiper>
</template>
<template v-else>
<image class="top-img" :src="item.image" mode="scaleToFill" @click="goGoodsCon(item)"></image>
<view class="content" @click="goGoodsCon(item)">
<view class="title more-t">{{ item.storeName }}</view>
<view class="price flex">
<text class="red">{{ item.price }}</text>
<text class="gray"
v-if="item.productPrice">{{ item.productPrice }}
</text>
</view>
</view>
</template>
</view>
</custom-waterfalls-flow>
</view>
</view>
<!-- 尖货推荐结束 -->
<!-- 最新通知消息开始 -->
<uni-popup ref="popup" type="center">
<view v-if="unReadMessageInfo" class="acea-row row-column row-middle"
style="position: relative;background-color: #fff;width: 440rpx;border-radius: 20rpx;">
<view class="msg_title">
{{ unReadMessageInfo.noticeTitle }}
</view>
<view class="msg_content">
<rich-text :nodes="unReadMessageInfo.noticeContent" />
</view>
<view class="msg_line"></view>
<view class="msg_btn" @click="msgConfirm">我知道了</view>
</view>
</uni-popup>
<!-- 通知消息结束 -->
<u-back-top :scroll-top="scrollTop">
<image
:src="webUrl+'/icon/setTop.png'"
mode="scaleToFill"
style="width: 40px;height: 40px;"
@click="setTopHandle"
/>
</u-back-top>
</view>
</template>
<script>
import imgBox from '@/components/imageTypeSet/imagebox.vue'
import { mapGetters } from 'vuex'
import { getCouponReceive, noticeDetail, noticeList } from '@/api/user'
import { getHomeData, getShareImage } from '@/api/public'
import { getProducts } from '@/api/store'
import { sharpBannar } from '@/api/goods'
import NP from 'number-precision'
import { pageListenMixins } from '@/mixins/pageListenMixins'
export default {
name: 'IndexPage',
components: {
imgBox
},
mixins: [pageListenMixins],
data() {
return {
currentIndex: 0,
speed: 200,
seriesWidth: 400,
duration: 60000,
unReadMessageInfo: null,
webUrl: this.$VUE_APP_RESOURCES_URL,
isLiving: true, //是否正在直播
showCoupon: false,
viewHeight: (750 * 3 / 4.0),
bslGoodsHeight: 750 * 3 / 4.0 + 'rpx',
hotGoodsColumnWidth: '325rpx',
bgImgHeight: '20px',
logoUrl: '',
innArray: [],
shopArray: [],
restaurantArray: [],
banner: [],
menus: [],
menuArr: [[], []],
roll: [],
cityName: '',
activity: [],
groupGoods: [],
activityOne: {},
bastList: [],
firstList: [],
userList: [],
newGoods: null,
companyName: '',
companyAddress: '',
companyTel: '',
companyLogo: '',
info: {
fastList: [],
bastBanner: [],
bastList: []
},
likeInfo: [],
lovely: [],
benefit: [],
couponList: [],
swiperOption: {
pagination: {
el: '.swiper-pagination',
clickable: true
},
autoplay: {
disableOnInteraction: false,
delay: 2000
},
loop: true,
speed: 1000,
observer: true,
observeParents: true
},
swiperRoll: {
direction: 'vertical',
autoplay: {
disableOnInteraction: false,
delay: 2000
},
loop: true,
speed: 1000,
observer: true,
observeParents: true
},
swiperScroll: {
freeMode: true,
freeModeMomentum: false,
slidesPerView: 'auto',
observer: true,
observeParents: true
},
swiperBoutique: {
pagination: {
el: '.swiper-pagination',
clickable: true
},
autoplay: {
disableOnInteraction: false,
delay: 2000
},
loop: true,
speed: 1000,
observer: true,
observeParents: true
},
swiperProducts: {
freeMode: true,
freeModeMomentum: false,
slidesPerView: 'auto',
observer: true,
observeParents: true
},
liveList: [],
broadcastStyle2: {
speed: 100,
font_size: '32', //字体大小(rpx)
text_color: '#333', //字体颜色
back_color: 'red', //背景色
},
bslImglist: [],
statusBarHeight: 64,
dailyGoodsList: [], // 每日特价
preSaleList: [], // 预售商品
month: 0, // 每日特价:月
date: 0, // 每日特价:日
bannerList: [], // 尖货推荐横幅
shareAppImg: '', // 发送给朋友
isOldUser: true, // 老用户弹窗
oldUserPopup: {},
contentHomestay: {},
contentFestival: {},
countyFamous: {},
seasonalFood: {},
pageKeyId: Object.freeze('appIndex'),
scrollTop: 0
}
},
computed: mapGetters(['userInfo', 'isLogin']),
onLoad(options) {
const _this = this
_this.init()
getShareImage().then(({ data }) => _this.shareAppImg = data)
uni.getSystemInfo({
success: (e) => {
let statusBar = 0
let customBar = 0
// #ifdef MP-WEIXIN
statusBar = e.statusBarHeight
const custom = uni.getMenuButtonBoundingClientRect()
customBar = custom.bottom + custom.top - e.statusBarHeight
// #endif
_this.statusBarHeight = customBar
// 两列商品宽度
_this.hotGoodsColumnWidth = (e.screenWidth - uni.upx2px(90)) / 2 + 'px'
// 状态栏图片高度
_this.bgImgHeight = statusBar + 'px'
}
})
},
onShow() {
const today = new Date()
this.month = today.getMonth() + 1
this.date = today.getDate()
// 如果已经登录获取用户信息
if (this.isLogin) {
this.$store.dispatch('getUser', true)
// 获取最新一条消息
this.getUnreadMsgList()
}
// 获取团购商品
this.getGroupGoods()
// fix bug#1113
// if (this.bastList.length > 0) {
// this.getBastList()
// }
},
onHide() {
this.pageToHideHandle()
},
onShareAppMessage() {
return {
title: '探寻有趣有味的生活方式',
path: '/pages/home/index',
imageUrl: this.shareAppImg
}
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
uni.navigateTo({
url: '/pkg-video/views/lottery'
})
},
onPageScroll(e) {
this.scrollTop = e.scrollTop
},
methods: {
init() {
const _this = this
sharpBannar().then(response => {
_this.bannerList = response.data.banner
uni.showLoading({ title: '加载中' })
getHomeData().then(res => {
const { data } = res
_this.logoUrl = data.logoUrl
_this.$set(_this, 'banner', data.banner)
_this.$set(_this, 'menus', data.menus)
data.menus?.forEach((item, index) => {
if (index % 2 === 0) {
_this.menuArr[0].push(item)
} else {
_this.menuArr[1].push(item)
}
})
_this.$set(_this, 'roll', data.roll)
// 滚动会员信息
_this.$set(_this, 'userList', data.lotteryRecord)
_this.$set(_this, 'info', data.info)
_this.$set(_this, 'firstList', data.firstList.map((item) => {
item.price = _this.$force2Decimal(item.price)
// 如果已经登录获取用户信息
if (_this.$store.getters.token && _this.userInfo) {
const p = NP.times(item.price, NP.divide(parseFloat(_this.userInfo.discount), 100))
item.vipPrice = _this.$force2Decimal(p)
}
return item
}))
_this.$set(_this, 'oldUserPopup', data.oldUserPopup)
_this.$set(_this, 'contentHomestay', data.contentHomestay)
_this.$set(_this, 'contentFestival', data.contentFestival)
_this.$set(_this, 'countyFamous', data.countyFamous)
// 处理时令尝鲜轮播图所需数据
const foodLen = data.seasonalFood.productsCarousels.length
const foods = data.seasonalFood.productsCarousels
const groupList = []
if (foodLen) {
const count = 4
for (let i = 0; i < foodLen; i += count) {
groupList.push(foods.slice(i, i + count))
}
}
data.seasonalFood.groupList = groupList
_this.$set(_this, 'seasonalFood', data.seasonalFood)
if (_this.firstList.length > 0) {
_this.newGoods = _this.firstList[0]
}
_this.$set(_this, 'likeInfo', data.likeInfo.map((item) => {
item.price = _this.$force2Decimal(item.price)
item.otPrice = _this.$force2Decimal(item.otPrice)
// 如果已经登录获取用户信息
if (_this.$store.getters.token && _this.userInfo) {
const p = NP.times(item.price, NP.divide(parseFloat(_this.userInfo.discount), 100))
item.vipPrice = _this.$force2Decimal(p)
}
return item
}))
setTimeout(() => {
// 伴手礼图片
const imgs = []
_this.likeInfo.forEach((item) => {
imgs.push(item.image)
})
_this.$set(_this, 'bslImglist', imgs)
_this.seriesWidth = 770 * imgs.length - 20
_this.duration = Math.floor(_this.seriesWidth / _this.speed * 1000)
}, 1)
for (let i = 0; i < data.bastList.length; i++) {
data.bastList[i].hide = true
}
_this.$set(_this, 'bastList', data.bastList)
_this.$set(_this, 'lovely', data.lovely)
_this.$set(_this, 'benefit', data.benefit)
_this.$set(_this, 'couponList', data.couponList)
_this.$set(_this, 'companyName', data.companyName)
_this.$set(_this, 'companyAddress', data.companyAddress)
_this.$set(_this, 'companyTel', data.companyTel)
_this.$set(_this, 'companyLogo', data.companyLogo)
_this.$set(_this, 'dailyGoodsList', data.dailyGoodsList)
_this.$set(_this, 'preSaleList', data.preSaleList)
uni.hideLoading()
}).catch(() => {
uni.hideLoading()
})
})
},
getBastList() {
getHomeData().then(res => {
const { success, data } = res
if (success) {
for (let i = 0; i < data.bastList.length; i++) {
data.bastList[i].hide = true
}
this.$set(that, 'bastList', data.bastList)
}
})
},
getGroupGoods() {
getProducts({
page: 1,
limit: 1,
sid: 19, //团购id=19
news: 0,
priceOrder: '',
salesOrder: ''
}).then(res => {
this.groupGoods = res.data
})
},
clickItem(data) {
this.goGoodsCon(data)
},
msgConfirm: function () {
this.$refs.popup.close()
},
goPreSale: function () {
this.$yrouter.push('/v4/views/preSale/preSale')
},
goOffer: function () {
this.$yrouter.push('/v4/views/offer/offer')
},
setMsgReaded(mid) {
noticeDetail({ id: mid })
},
getUnreadMsgList() {
noticeList({
limit: 10,
page: 1
}).then(res => {
if (res.data && res.data.length > 0) {
const msg = res.data[0]
if (msg.readFlag == 'RF0') {
this.unReadMessageInfo = msg
this.$refs.popup.open()
this.setMsgReaded(msg.id)
}
}
})
},
call() {
if (this.companyTel != undefined && this.companyTel.length > 0) {
uni.makePhoneCall({
// 手机号
phoneNumber: this.companyTel,
// 成功回调
success: (res) => {
},
// 失败回调
fail: (res) => {
}
});
} else {
this.$dialog.error('电话为空')
}
},
goRoll(item) {
if (item.uniapp_url) {
this.$yrouter.push(item.uniapp_url)
}
},
goGoodSearch() {
this.$yrouter.push('/pages/shop/GoodSearch/index')
},
goGoodsCon(item) {
this.$yrouter.push({
path: '/pages/shop/GoodsCon/index',
query: {
id: item.id
}
})
},
goGoodsConByProductID(item, from) {
this.$yrouter.push({
path: '/pages/shop/GoodsCon/index',
query: {
id: item.productId,
activityId: item.id,
from
}
})
},
changeOldPopup(state) {
this.isOldUser = state
},
goHomeStay(stay) {
if (stay.uniappUrl) {
this.$global.commonJump(stay.uniappUrl)
return
}
if (stay.type === 2 && stay.isLinkToProduct) {
this.$yrouter.push({
path: '/pages/shop/GoodsCon/index',
query: {
id: stay.productId
}
})
return
}
if (stay.type === 1) {
uni.navigateTo({url: '/pkg_product/views/homestay?id=' + stay.id})
}
},
goFestival() {
uni.navigateTo({url: '/pkg_product/views/festival'})
},
tapOld() {
this.isOldUser = false
const {
type,
text,
jumpTime,
pageLevel,
url,
params,
couponId
} = this.oldUserPopup
if (couponId != null) {
getCouponReceive(couponId).then(res => {
if (res.status === 200) {
uni.showToast({
title: text,
icon: 'none',
success: () => {
}
})
}
}).catch((err) => {
uni.showToast({
title: err.data.msg + '',
icon: 'none',
duration: 3000
})
})
}
// type 1-定时跳转,2-点击跳转,3-不跳转
if (type === 1) {
setTimeout(() => {
this.$global.levelJump(pageLevel, url, params)
}, jumpTime * 1000)
} else if (type === 2) {
this.$global.levelJump(pageLevel, url, params)
}
},
setTopHandle() {
uni.pageScrollTo({
scrollTop: 0,
duration: 200
})
}
}
}
</script>
<style scoped lang="less">
.index {
background-color: #F5F5FA;
.header {
height: auto !important;
background-color: transparent !important;
}
.header {
background-repeat: no-repeat;
background-size: 100% 100%;
}
.header .paper-cuts-img {
position: absolute;
width: 159*2rpx;
height: 159*2rpx;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 0;
}
.swiper-item {
height: 100%;
}
.slider-banner {
-webkit-transform: rotate(0);
width: auto !important;
}
.search {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
box-sizing: border-box;
height: 64rpx;
background-color: #F5F5F5;
padding: 0 28rpx;
font-size: 28rpx;
color: #acacac;
border-radius: 32rpx;
margin: 0 30rpx;
}
.news {
margin: 0rpx 30rpx !important;
border-radius: 8rpx !important;
background: #f7f7f7 !important;
border: none !important;
padding: 0 !important;
}
.news .new-banner .text .newsTitle {
color: #666666 !important;
}
.cus-btn {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: transparent !important;
}
.cus-btn::after {
border: none !important;
}
.msg_title {
font-size: 0.36*100rpx;
font-weight: bold;
color: rgba(8, 15, 26, 1);
margin-top: 20rpx;
}
.msg_line {
background-color: #f3f3f3;
height: 1px;
width: 100%;
margin-top: 20rpx;
}
.msg_content {
padding: 0.1*100rpx;
color: #080F1A;
font-size: 0.32*100rpx;
}
.msg_btn {
padding: 10rpx;
font-size: 34rpx;
color: #38afef;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.pre-sale {
position: relative;
width: 686rpx;
height: 440rpx;
margin: 0 auto;
.bg {
width: 100%;
height: 100%;
}
.list {
display: flex;
flex-wrap: nowrap;
position: absolute;
bottom: 36rpx;
width: 100%;
padding: 0 14rpx;
box-sizing: border-box;
.item {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 10rpx;
image {
width: 200rpx;
height: 200rpx;
border-radius: 8rpx;
}
view {
width: 200rpx;
margin: 4rpx 0 12rpx;
color: #333;
font-size: 24rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
text {
display: inline-block;
padding: 2rpx 15rpx;
border-radius: 18rpx;
background: #ED0F0F;
color: #fff;
font-size: 24rpx;
}
}
}
}
// 每天特价
.special-offer {
margin-top: 40rpx;
.flex {
display: flex;
}
.header {
justify-content: space-between;
align-items: center;
.title {
margin-right: 8rpx;
color: #333;
line-height: 48rpx;
font-size: 32rpx;
font-weight: bold;
}
.icon-date {
width: 40rpx;
height: 40rpx;
}
.date-box {
align-items: center;
padding: 8rpx;
background: #fff;
border-radius: 8px;
.day {
color: #494949;
font-size: 40rpx;
font-weight: bold;
text {
color: #FF1200;
}
}
.month {
height: 32rpx;
margin-left: 12rpx;
padding-left: 6rpx;
border-left: 2rpx solid #DDDDDD;
color: #999999;
font-size: 28rpx;
}
}
.more {
margin-top: 8rpx;
color: #7C7C7C;
font-size: 24rpx;
}
}
.list {
flex-wrap: wrap;
justify-content: space-between;
padding: 0 32rpx 40rpx;
.item {
position: relative;
flex-direction: column;
width: 328rpx;
margin-top: 20rpx;
background: #fff;
.top-img {
flex-shrink: 0;
width: 328rpx;
height: 328rpx;
}
.icon-fire {
width: 24rpx;
height: 24rpx;
}
.title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin: 10rpx 12rpx 10rpx 10rpx;
font-size: 26rpx;
font-weight: bold;
line-height: 38rpx;
color: #333333;
}
.price {
align-items: center;
margin-left: 10rpx;
padding-bottom: 10rpx;
.red {
font-size: 26rpx;
font-weight: bold;
line-height: 38rpx;
color: #ED0F0F;
}
.gray {
margin-left: 16rpx;
text-decoration: line-through;
font-size: 20rpx;
line-height: 30rpx;
color: #C2C5CC;
}
}
.shop {
position: absolute;
bottom: 0;
justify-content: space-between;
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 6rpx 12rpx 18rpx 10rpx;
border: 1rpx solid #EFEFEF;
font-size: 22rpx;
line-height: 32rpx;
color: #333333;
}
}
}
}
.subject-box {
padding: 0 32rpx 40rpx;
background: #FFFFFF;
image {
vertical-align: middle;
}
.section-half {
margin-bottom: 16rpx;
.bg-img {
width: 336rpx;
height: 180rpx;
}
.food-box {
position: relative;
width: 336rpx;
height: 180rpx;
overflow: hidden;
.swiper {
position: absolute;
left: 20rpx;
bottom: 20rpx;
width: 296rpx;
height: 72rpx;
overflow: hidden;
z-index: 10;
image {
width: 72rpx;
height: 72rpx;
margin-right: 4rpx;
border-radius: 4rpx;
}
image:last-child {
margin-right: 0;
}
}
}
}
.section-full {
image {
width: 336rpx;
height: 480rpx;
}
.swiper {
width: 336rpx;
height: 480rpx;
}
}
}
.popup-old-user {
image {
vertical-align: middle;
}
.main {
width: 560rpx;
height: 840rpx;
border-radius: 40rpx;
}
.icon-box {
width: 96rpx;
height: 96rpx;
margin-top: 40rpx;
background: rgba(51, 51, 51, .4);
border-radius: 50%;
image {
width: 40rpx;
height: 40rpx;
}
}
}
.bast-box {
.bast-title {
width: 312rpx;
height: 40rpx;
margin: 16rpx 0 16rpx;
}
.bannar-swiper {
height: 534rpx;
image {
width: 332rpx;
height: 534rpx;
}
}
.list {
padding: 32rpx;
.item {
position: relative;
flex-direction: column;
background: #fff;
.top-img {
width: 332rpx;
height: 332rpx;
}
.content {
box-sizing: border-box;
padding: 10rpx 10rpx 20rpx;
.title {
color: #333;
font-size: 28rpx;
}
.price {
font-size: 32rpx;
.red {
color: #DA0000;
}
.gray {
margin-left: 16rpx;
text-decoration: line-through;
font-size: 20rpx;
line-height: 30rpx;
color: #C2C5CC;
}
}
}
}
}
}
}
</style>