mall_client/zyhs3_uniapp/pages/home/index - 1.1.vue

2145 lines
50 KiB
Vue
Raw Permalink Normal View History

2026-03-13 07:50:35 +00:00
<style lang="scss">
.popup {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
z-index: 99;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
}
.baoyou {
background: linear-gradient(164deg, #FF784C 0%, #FF4C56 100%);
border-radius: 1px;
color: #fff;
font-size: 18rpx;
margin: 10rpx;
padding: 4rpx 6rpx;
font-weight: 500;
}
.hidden {
opacity: 0;
visibility: hidden;
}
.s-wrap {
padding-top: 468rpx;
}
.yuantouhaowu {
background-image: url("../../static/home/zhongyizhenpinditu.png");
background-size: 100% 100%;
height: 129px;
}
.yuantouhaowu1 {
background-image: url("../../static/home/zhongyiyouxuanditu.png");
background-size: 100% 100%;
height: 129px;
}
.uni_text {}
.uni_text_big {
font-size: 28rpx;
color: #FFFFFF;
}
.uni_text_sm {
font-size: 24rpx;
color: #FFFFFF;
}
.u-icon {
margin: 20rpx 0 0 8rpx;
}
.classfiyBox {
background: #FFFFFF;
border-radius: 8px;
}
.s-bt {
width: 530rpx;
height: 100rpx;
line-height: 100rpx;
background: linear-gradient(180deg, #fdf6d9 0%, #eda863 100%);
border-radius: 728rpx;
text-align: center;
font-size: 40rpx;
font-weight: 500;
color: #ee3320;
margin: 484rpx auto 0;
}
.rain-wrap {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
background: rgba(0, 0, 0, 0.6);
}
.r-content {
position: relative;
top: -400px;
// left: 200rpx;
transform: rotate(15deg);
// transition: all 8s linear;
}
.r-packet {
position: absolute;
width: 112rpx;
height: 224rpx;
}
.sPacket {
width: 72rpx;
height: 144rpx;
}
.waterfall-item {
background: #fff;
margin-bottom: 10px;
border-radius: 10px;
}
.countdown-wrap {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
.c-t-num {
position: absolute;
font-size: 288rpx;
font-family: "D-DIN Exp", sans-serif;
font-weight: bold;
line-height: 338rpx;
background: linear-gradient(180deg, #faf6e8 0%, #eda863 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
transform: scale(0);
animation: ani 1s;
&:nth-child(2) {
animation-delay: 1s;
}
&:nth-child(3) {
animation-delay: 2s;
}
&:nth-child(4) {
animation-delay: 3s;
}
}
@keyframes ani {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
}
.prize-wrap {
display: flex;
flex-direction: column;
align-items: center;
.prize-card {
background-image: url("https://yswy-agent.yjdfytmall.com/20221230/e23c5a80-e4ab-4630-a4af-e34f533d88d3.png");
background-size: 100% 100%;
padding-top: 110rpx;
width: 492rpx;
height: 660rpx;
text-align: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
.p-c-t-1 {
font-size: 32rpx;
color: #f04d3c;
line-height: 38rpx;
}
.p-c-t-2 {
font-size: 44rpx;
font-family: "D-DIN Exp", sans-serif;
font-weight: bold;
color: #f1523f;
line-height: 103rpx;
margin-top: 16rpx;
}
.p-c-t-2_1 {
font-family: normal;
font-weight: 400;
font-size: 32rpx;
color: #f04d3c;
line-height: 38rpx;
}
.p-c-t-3 {
font-size: 28rpx;
color: #fbecca;
line-height: 33rpx;
margin-top: 192rpx;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.p-bt {
background-image: url("https://yswy-agent.yjdfytmall.com/20221230/37d7a076-15e6-4f2b-bc79-552f3a11b2fc.png");
background-size: 100% 100%;
width: 342rpx;
height: 88rpx;
text-align: center;
line-height: 70rpx;
font-size: 36rpx;
color: #ee331f;
text-shadow: 0 1rpx 0 #ffeeab;
}
}
.alert-close {
width: 64rpx;
margin-top: 32rpx;
width: 64rpx;
}
}
.page {
width: 100%;
min-height: 100vh;
background-size: 100% 100%;
background-image: url("https://i.328888.xyz/2023/01/06/k485X.png");
}
.ic_map {
width: 52rpx;
height: 52rpx;
}
.header {
padding: var(--status-bar-height) 16rpx 0rpx;
background-size: 100% 100%;
.notice {
position: relative;
.tips {
position: absolute;
right: -20rpx;
top: -10rpx;
color: white;
font-size: 24rpx;
padding: 0 14rpx;
border-radius: 50rpx;
z-index: 9;
background-color: #ca0400;
}
}
}
.header_search {
padding: 0 8rpx;
padding-top: 15rpx;
position: relative;
.left {
border-right: 2rpx solid #eeeeee;
color: #333;
padding-right: 10rpx;
margin-right: 10rpx;
.down {
font-size: 24rpx;
margin-top: 6rpx;
}
}
.searchList {
margin-top: 10rpx;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
left: 80rpx;
top: 40rpx;
.icon {
transform: scaleY(-1);
color: white;
margin-bottom: -10rpx;
}
.cell {
background-color: #ffffff;
border-radius: 10rpx;
padding: 0 30rpx;
box-shadow: 0rpx 0rpx 4rpx #ffffff;
&-item {
font-size: 30rpx;
width: 100rpx;
height: 80rpx;
display: block;
text-align: center;
line-height: 80rpx;
border-bottom: 2rpx solid #fbf9fc;
}
&-item:last-child {
border: none;
}
}
}
}
.search_wrapper {
// width: 539rpx;
width: 100%;
padding-left: 43rpx;
border-radius: 40rpx;
padding: 10upx;
border: 1px solid #E7B786;
input {
font-size: 24rpx;
color: #c0c0c0;
}
.btn_search {
width: 48px;
height: 28px;
background: linear-gradient(167deg, #FDD6A2 0%, #DCA76F 100%);
border-radius: 14px;
color: #000;
font-size: 20rpx;
}
.search_input {
color: #333;
font-size: 28upx;
}
}
.swiper {
width: 719rpx;
height: 290rpx;
margin-top: 32rpx;
margin-bottom: 10rpx;
&-wrap {
width: 100%;
height: 100%;
}
&-box {
width: 719rpx;
height: 100%;
border-radius: 20rpx;
overflow: hidden;
}
&-item {
width: 100%;
height: 100%;
}
}
.classes {
padding: 0 14rpx;
margin-top: 30rpx;
.classes_item {
flex: 1;
white-space: nowrap;
margin-right: 28rpx;
width: 80%;
.item {
display: inline-block;
text-align: center;
line-height: 60rpx;
font-size: 30rpx;
color: #333333;
margin-right: 20rpx;
padding: 5upx 40upx;
height: 60rpx;
background: #e1e2e5;
border-radius: 40upx;
&.active {
font-size: 32rpx;
}
}
}
.ic_class {
width: 60rpx;
height: 60rpx;
}
}
.nav {
padding: 20rpx 0rpx;
box-shadow: 0px 1rpx 5rpx 1rpx rgba(156, 156, 156, 0.2);
border-radius: 15rpx;
margin-top: 22rpx;
flex-wrap: wrap;
.nav_item {
width: 122rpx;
flex-direction: column;
font-size: 24rpx;
margin-bottom: 30rpx;
image {
width: 96rpx;
height: 100rpx;
margin-bottom: 6rpx;
}
}
}
.prefecture {
margin-top: 15rpx;
.box_shadow {
position: relative;
box-shadow: 0px 1rpx 2rpx 1rpx rgba(160, 160, 160, 0.19);
}
.text {
font-size: 32rpx;
color: #000000;
font-weight: 600;
position: absolute;
left: 27rpx;
top: 21rpx;
}
.text1 {
top: 14rpx;
}
.hot {
position: absolute;
background: linear-gradient(90deg, #f44646 0%, #ff855d 100%);
left: 140rpx;
color: #fff;
top: 21rpx;
font-size: 24rpx;
padding: 4rpx 12rpx;
border-radius: 20rpx;
}
.activate_bg {
flex: 1;
width: 100%;
// height: 424rpx;
border-radius: 15rpx;
image {
width: 100%;
height: 100%;
}
}
.right {}
.shop_bg {
width: 384rpx;
height: 230rpx;
background: #fff;
background-size: 100% 100%;
position: relative;
.ic_sj {
margin-top: 20upx;
width: 319rpx;
height: 145rpx;
position: absolute;
top: 48rpx;
left: 28rpx;
}
}
.score_bg {
width: 384rpx;
height: 230rpx;
background: #fff;
background-size: 100% 100%;
position: relative;
.ic_sj {
margin-top: 20upx;
width: 319rpx;
height: 145rpx;
position: absolute;
top: 48rpx;
left: 28rpx;
}
.hot {
background: linear-gradient(90deg, #f44646 0%, #ff855d 100%);
color: #fff;
}
}
.bottom {
.arrow {
width: 13rpx;
height: 20rpx;
position: absolute;
left: 160rpx;
top: 31rpx;
}
.fruits_area {
flex: 1;
height: 260rpx;
background: url("../../static/images/home/fruits_bg.png") no-repeat;
background-size: 100% 100%;
position: relative;
}
.company_enter {
flex: 1;
height: 260rpx;
background: url("../../static/images/home/static_images_home_company_bg.png") no-repeat;
background-size: 100% 100%;
position: relative;
.ic_company {
width: 150rpx;
height: 140rpx;
position: absolute;
left: 168rpx;
top: 52rpx;
}
}
.good_brand {
flex: 1;
height: 260rpx;
background: url("../../static/images/home/brand_bg.png") no-repeat;
background-size: 100% 100%;
position: relative;
.ic_company {
width: 135rpx;
height: 120rpx;
position: absolute;
left: 165rpx;
top: 71rpx;
}
.arrow {
left: 180rpx;
}
}
.hot {
color: #a4a4a4;
background-color: transparent;
left: 16rpx;
top: 63rpx;
}
}
}
.good-title {
display: flex;
align-items: center;
justify-content: center;
view {
margin: 10upx;
font-size: 32upx;
font-weight: 600;
}
image {
margin: 10upx;
width: 31upx;
height: 38upx;
}
}
.goods_list {
padding: 0 18rpx;
flex-wrap: wrap;
}
/deep/.input-placeholder {
color: #999;
}
/deep/.u-modal__content {
.u-button {
width: 500rpx !important;
}
}
.shouxia {
margin-top: 100px;
width: 330rpx;
height: 100rpx;
line-height: 100rpx;
background: linear-gradient(180deg, #fdf6d9 0%, #eda863 100%);
border-radius: 728rpx;
text-align: center;
font-size: 40rpx;
font-weight: 500;
color: #ee3320;
margin: 280rpx auto 0;
}
</style>
<template>
<view>
<!-- <view class="page" v-show="!showModal1">
<view v-show="isActivity" class="rain-wrap">
<view class="r-content" :style="{
top: `${rcTop}rpx`,
left: `${rcLeft}rpx`,
transition: `all ${activityData.totalTime}s linear`
}">
<img v-for="(packet, index) in redPackets" :key="packet.id" src="../../static/packet.png" class="r-packet"
:class="{ sPacket: packet.small }" :style="{ left: `${packet.x}` + 'rpx', top: `${packet.y}` + 'rpx' }"
@tap="cClick(packet, index)" />
</view>
</view>
<view v-show="!isActivity" class="s-wrap">
<view class="s-bt" @click="countdownStart">开始领取绿色积分</view>
</view>
<view v-if="countdownFlag" class="countdown-wrap">
<view class="c-t-num">3</view>
<view class="c-t-num">2</view>
<view class="c-t-num">1</view>
<view class="c-t-num">GO</view>
</view>
</view> -->
<view class="main">
<view class="popup" :class="{ hidden: !showModal1 }">
<view class="prize-wrap">
<view class="prize-card">
<view class="p-c-t-1">恭喜获取</view>
<view class="p-c-t-2">
{{ greenRecord.awardGreen
}}
<view class="p-c-t-2_1">绿色积分</view>
</view>
<view class="shouxia" @click="handlerGet">
<text v-if="!btnloading">开心收下</text>
<view style="padding: 28rpx 0" v-else>
<u-loading-icon></u-loading-icon>
</view>
</view>
</view>
<!-- 下边的差号容易误碰导致领取不成功-->
<!-- <image class="alert-close" src="../../static/alert_close.png" mode="widthFix" @click="showModal1 = false">-->
<!-- </image>-->
</view>
</view>
<!-- <u-modal @close="showModal1 = false" :closeOnClickOverlay="true" :showConfirmButton="false" :show="showModal1"
:title="greenRecord.count + '条空投记录'" :content="content">
<view class="flex flex-center flex-column">
{{ greenRecord.awardGreen }}
<u-gap height="40rpx"></u-gap>
<u-button @click="handlerGet" :loading="btnloading" type="primary" text="确认领取"></u-button>
</view>
</u-modal> -->
<view class="header">
<!-- #ifdef MP-WEIXIN -->
<view :style="{ height: wxBtnHeight + 'px' }"></view>
<!-- #endif -->
<view class="positionShow" v-if="!isOpenPosition" @click="goSet">
<view class="flex flex-align-center item">
<text class="iconfont icon">&#xe659;</text>
<text class="txt">您未开启位置服务距离计算不准确请点击前往开启位置服务</text>
</view>
</view>
<view class="header_search flex flex-between flex-align-center">
<!-- <image
@tap="openMap"
class="ic_map"
src="../../static/images/home/ic_map.png"
></image> -->
<view class="search_wrapper flex bg-w flex-align-center">
<!-- <view
class="flex flex-align-center left"
@click="showSearchList = !showSearchList"
>
<text class="font30">{{ searchList[searchIndex] }}</text>
<text class="iconfont down">&#xe644;</text>
</view> -->
<view class="searchList" v-if="showSearchList">
<!-- <text class="iconfont icon">&#xe644;</text>
<view class="cell">
<text
class="cell-item"
:class="{ 'color-purple': i === searchIndex }"
v-for="(item, i) in searchList"
:key="i"
@click="selectSearchType(i)"
>
{{ item }}
</text> -->
<!-- </view> -->
</view>
<image src="../../static/home/sousuo.png" class="w10 h10 mr6 ml6 "></image>
<input confirm-type="search" @confirm="onSearch" v-model="keyWord" class="flex-1 search_input"
type="text" placeholder="请输入您想要搜索的名称" />
<view class="btn_search flex color-w flex-center font28" @click="onSearch">搜索</view>
</view>
<!-- <view class="notice" @tap="jumpToNotice(1, '系统公告')">
<image
class="ic_map"
src="../../static/images/home/ic_notice.png"
></image>
<text class="tips" v-if="noticeTotal">{{
noticeTotal > 99 ? "99+" : noticeTotal
}}</text>
</view> -->
</view>
<view class="flex flex-between font26 color-w">
<text>{{ addressName }}</text>
</view>
<!-- 轮播图 -->
<view class="">
<!-- <uv-swiper
imgMode="widthFix"
:list="swiperList"
:autoplay="false"
height="160"
class="mt4 mb4"
style="border-radius: 0;"
>
</uv-swiper> -->
<!-- {{swiperList}} -->
<swiper :autoplay="true" indicator-dots class="mt6">
<swiper-item v-for="(item, i) in swiperList" :key="i">
<view class="swiper-box" @click="advertJump(item.operationCode, item.operationValue)">
<image :src="item.ossUrl" mode="" class="swiper-item" style="border-radius: 20rpx">
</image>
</view>
</swiper-item>
</swiper>
</view>
<view class="list_3">
<view class="text-group_2" @click="callbackMethod(item.method)" v-for="(item, index) in loopData0"
:key="index">
<text class="text_3" v-html="item.lanhutext0"></text>
<text class="text_4" v-html="item.lanhutext1"></text>
<image :src="item.lanhuBg0" mode="">
</image>
</view>
</view>
<!--UPDATETODO 新的升级板块中亿万商放在原海南鲜品位置 <view style="padding: 8px 8px 0 8px;" @click="goPage('/pages/home/details?id=642&qvyu=5&greenText=0&rmbText=0')"> -->
<view style="" @click="goPage('/pages/home/zhongYiWanShang')">
<!-- <image style="height:86px;width:100%" src="../../static/home/hainanxianpin.png"></image> -->
<image style="height:176px;width:100%" src="../../static/home/zhongyiwanshang.png"></image>
</view>
<!-- 分类 -->
<view class="classes flex flex-between flex-center">
<scroll-view class="classes_item" scroll-x="true">
<!-- :class="[classesIndex == index ? 'active':'']" -->
<view class="flex items-center">
<view class="w600 f16 mr6">推荐</view>
<view @click="handlerClasses('/pages/class/index', index)" class="w600 f16 mr6 t4"
v-for="(item, index) in classesList">
{{ item.name }}
</view>
</view>
</scroll-view>
<image @click="goPage('/pages/class/index')" class="w10 h10" src="../../static/home/gengduo.png"
mode="">
</image>
</view>
<!-- 导航 -->
<!-- <view class="nav bg-w flex flex-between" v-if="false">
<view
class="nav_item flex flex-center"
v-for="(item, index) in navList"
>
<image :src="item.icon" mode=""></image>
<view>{{ item.text }}</view>
</view>
</view> -->
<!-- 专区1 -->
</view>
<!-- <view class="classfiyBox m6 p4 flex justify-between">
<view v-for="i in classfiyList" class="p4 flex flex-column justify-center items-center" @click="handlerClasses('/pages/class/index', i.index)">
<image :src="i.url" class="w20 h20"></image>
<view class="mt4 f12">{{i.title}}</view>
</view>
</view> -->
<!-- <view class="p4 yuantouhaowu m4">
<view class="flex justify-between mt10 pt4 pb4" style="position:relative;">
<image style="height:96px;width:100%" class="m3" src="../../static/home/binglang.png">
</image>
<view style="position: absolute;top:30rpx;left:20rpx;" @click="goLicai">
<view class="w500 f12 m2 uni_text_big">南药基地</view>
<view class="w500 f12 m2 uni_text_sm">市场成熟/前景广阔</view>
<u-icon name="play-circle-fill" color="#ffffff" size="18"></u-icon>
</view>
<image style="height:96px;width:100%" class="m3" src="../../static/home/lajiao.png">
</image>
<view style="position: absolute;top:30rpx;right: 120rpx;" @click="goChili">
<view class="w500 f12 m2 uni_text_big">林下经济</view>
<view class="w500 f12 m2 uni_text_sm">林下套种/科技创新</view>
<u-icon name="play-circle-fill" color="#ffffff" size="18"></u-icon>
</view>
</view>
</view> -->
<!-- <view class="p4 yuantouhaowu1 m4">
<view class="flex justify-between mt10 pt4 pb4" style="position:relative;">
<image style="height:96px;width:100%;" class="m3" src="../../static/home/jihuoquditu.png">
</image>
<view style="position: absolute;top:30rpx;left:20rpx;"
@click="goPage('/pages/home/details?id=642&qvyu=5&greenText=0&rmbText=0')">
<view class="w500 f12 m2 uni_text_big">海南鲜品</view>
<view class="w500 f12 m2 uni_text_sm">源头好物/分享福利</view>
<u-icon name="play-circle-fill" color="#ffffff" size="18"></u-icon>
</view>
<image style="height:96px;width:100%;" class="m3" src="../../static/home/shangjiaquditu.png">
</image>
<view style="position: absolute;top:30rpx;right: 120rpx;"
@click="goPage('/pages/home/goodsArea?type=2')">
<view class="w500 f12 m2 uni_text_big">商家区</view>
<view class="w500 f12 m2 uni_text_sm">商家入驻/品类丰富</view>
<u-icon name="play-circle-fill" color="#ffffff" size="18"></u-icon>
</view>
</view>
</view> -->
<!-- 商品列表 -->
<view class="flex flex-between goods_list" style="margin-bottom: 25rpx;">
<!-- <block v-for="(goods, index) in newProductList">
<GoodsItem :dataItem="goods"></GoodsItem>
</block> -->
</view>
<uv-waterfall ref="waterfall" v-model="newProductList" :add-time="10" :left-gap="10" :right-gap="10"
:column-gap="columnGap" @changeList="changeList">
<!-- 第一列数据 -->
<template v-slot:list1>
<!-- 为了磨平部分平台的BUG必须套一层view -->
<view>
<view>
<!-- <uv-swiper
imgMode="widthFix"
:list="listSwiper"
:autoplay="false"
height="240"
width="120"
class="mb4"
style="border-radius: 0;"
>
</uv-swiper>
<uv-swiper
imgMode="widthFix"
:list="listSwiper2"
:autoplay="false"
height="240"
width="120"
class="mb4"
style="border-radius: 0;"
>
</uv-swiper> -->
</view>
<view v-for="(item, index) in list1" @click.stop="jumpTo(item)" :key="item.id"
class="waterfall-item">
<view class="waterfall-item__image" :style="[imageStyle(item)]">
<image :src="item.mainImage" mode="widthFix" :style="{width:item.width+'px'}"
style="border-radius: 6px;"></image>
</view>
<view class="p4">
<view class="w500 m2 f12 t4">
{{
item.titleName
}}
<!-- 华为P60 香芋紫 1TB -->
</view>
<view class="flex">
<view class="baoyou">包邮</view>
<!-- <view class="youhuiquan">优惠券</view> -->
</view>
<view class="flex justify-between items-baseline">
<rkPrice class="ml3" new-color="#000" newPriceSlotText="" :price="{
newPrice:item.wholesalePrice.toFixed(2) || 999,
oldPrice:item.wholesalePrice.toFixed(2) || 9999
}"></rkPrice>
<view class="w500 t5 f10">{{item.ficti || 0}}人购买</view>
</view>
</view>
</view>
</view>
</template>
<!-- 第二列数据 -->
<template v-slot:list2>
<!-- 为了磨平部分平台的BUG必须套一层view -->
<view>
<view>
</view>
<view v-for="(item, index) in list2" :key="item.id" @click.stop="jumpTo(item)"
class="waterfall-item">
<view class="waterfall-item__image" :style="[imageStyle(item)]">
<image :src="item.mainImage" mode="widthFix" :style="{width:item.width+'px'}"
style="border-radius: 6px;"></image>
</view>
<view class="p4">
<view class="w500 m2">
<view class="w500 m2 f12 t4">
{{
item.titleName
}}
<!-- 华为P60 香芋紫 1TB -->
</view>
<!-- 华为P60 香芋紫 1TB -->
</view>
<view class="flex">
<view class="baoyou">包邮</view>
<!-- <view class="youhuiquan">优惠券</view> -->
</view>
<view class="flex justify-between items-baseline">
<rkPrice class="ml3" new-color="#000" newPriceSlotText="" :price="{
newPrice:item.wholesalePrice.toFixed(2) || 999,
oldPrice:item.wholesalePrice.toFixed(2) || 9999
}"></rkPrice>
<view class="w500 t5 f10">{{item.ficti || 0}}人购买</view>
</view>
</view>
</view>
</view>
</template>
</uv-waterfall>
<!-- 弹框 -->
<modal v-if="showModal">
<image :src="advertData.ossUrl" mode="widthFix" @click="imgJump"></image>
<text class="iconfont color-w font60" style="margin-top: 20rpx"
@click="showModal = false">&#xe64a;</text>
</modal>
<!-- 福利红包 -->
<red-envelopes v-for="(item, i) in redList" :key="i" :data="item" :type="1"
:bottom="i === 0 ? 100 : i * 80 + 100"></red-envelopes>
<!-- <tabbar></tabbar> -->
</view>
<u-modal @confirm="handlerRead" @cancel="handlerDetail" :show="showPop" :showCancelButton="true"
cancelText="查看详情" confirmText="已查阅">
<view class="pop-content" v-if="popInfo">
<view class="flex flex-center">{{ popInfo.titleName }}</view>
<view class="content-text color-b6 font28" v-html="popInfo.textDescribe">
</view>
<image :src="popInfo.mainImage" mode=""></image>
</view>
</u-modal>
</view>
</template>
<script>
import url from "@/common/http/url.js";
import publics from "@/common/utils/public.js";
import {
checkOpenGPSService,
isNotSameDay
} from "@/common/utils/index.js";
import product from "./modules/product.vue";
import shop from "./modules/shop.vue";
import modal from "@/components/modal.vue";
import redEnvelopes from "@/components/red-envelopes.vue";
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
import tabbar from "@/components/tabbar.vue";
import GoodsItem from "./modules/goodsItem.vue";
import {
mapMutations,
mapState
} from "vuex";
import {
showToast
} from "../../libs/QS-SharePoster/app";
import HomeGood from "@/components/homeGood.vue"
import rkPrice from "@/components/rk-price.vue"
export default {
components: {
uniLoadMore,
product,
shop,
modal,
redEnvelopes,
tabbar,
GoodsItem,
HomeGood,
rkPrice
},
data() {
return {
loopData0: [{
method: 'goLicai',
lanhuBg0: '../../static/home/nanyaojidi@2x.png',
lanhutext0: '南药基地',
lanhutext1: '市场成熟&nbsp;前景广阔'
},
{
method: 'goChili',
lanhuBg0: '../../static/home/linxiajingji@2x.png',
lanhutext0: '林下经济',
lanhutext1: '林下套种&nbsp;科技创新'
},
{
method: 'details',
lanhuBg0: '../../static/home/hainanxianpin@2x.png',
lanhutext0: '海南鲜品',
lanhutext1: '新鲜采摘&nbsp;足斤邮寄'
},
{
method: 'goodsArea',
lanhuBg0: '../../static/home/shangjiazhuanqu@2x.png',
lanhutext0: '商家专区',
lanhutext1: '商家入驻&nbsp;品类丰富'
}
],
showHint: false, // 红包雨结束弹窗展示
speed: 2, // 红包下落速度控制
countdownFlag: false,
isActivity: false,
redPackets: [], // 初始化红包雨
getRedPackets: [], // 抢到的红包
pId: 0,
rcTop: 0,
rcLeft: 0,
getPoint: 0,
activityData: {
totalTime: 10, // 活动持续时间 秒
},
btnloading: false,
staticUrl: this.$staticUrl,
statusBarHeight: uni.getStorageSync("system").statusBarHeight,
swiperHeight: 0,
swiperList: [],
classesIndex: 0,
classesList: [],
classfiyList: [{
title: "电子数码",
url: require("../../static/home/dianzishuma.png"),
index: 0
},
{
title: "食品类别",
url: require("../../static/home/rouqindanlei.png"),
index: 2
},
{
title: "日用百货",
url: require("../../static/home/riyongbaihuo.png"),
index: 0,
},
{
title: "酒水冲饮",
url: require("../../static/home/jiushuiyinliao.png"),
index: 9
},
{
title: "蔬菜百货",
url: require("../../static/home/shucaishuiguo.png"),
},
],
navList: [{
text: "食品生鲜",
icon: require("../../static/images/home/ic_nav1.png"),
},
{
text: "数码家电",
icon: require("../../static/images/home/ic_nav2.png"),
},
{
text: "日用百货",
icon: require("../../static/images/home/ic_nav3.png"),
},
{
text: "美妆护肤",
icon: require("../../static/images/home/ic_nav4.png"),
},
{
text: "服装鞋帽",
icon: require("../../static/images/home/ic_nav5.png"),
},
{
text: "时尚箱包",
icon: require("../../static/images/home/ic_nav6.png"),
},
{
text: "运动户外",
icon: require("../../static/images/home/ic_nav7.png"),
},
{
text: "钟表珠宝",
icon: require("../../static/images/home/ic_nav8.png"),
},
{
text: "母婴童装",
icon: require("../../static/images/home/ic_nav9.png"),
},
{
text: "更多分类",
icon: require("../../static/images/home/ic_nav10.png"),
},
],
listSwipertop: [
require('../../static/home/banner.png')
],
listSwiper: [
require('../../static/home/banner2.png')
],
listSwiper2: [
require('../../static/home/hufupin.png')
],
swiperCenterList: [],
searchList: ["商品", "店铺"],
searchIndex: 0,
showSearchList: false,
keyWord: "",
centreSwiperList: [],
current: 0,
tabs: [{
name: "新品推荐",
img: "news"
},
{
name: "精品推荐",
img: "boutique"
},
{
name: "附近店铺",
img: "nearby"
},
],
list1: [],
list2: [],
tabsTop: 0,
tabsFixed: false,
leftGap: 20,
rightGap: 20,
columnGap: 10,
myAddressData: {
// 默认北京
longitude: 0,
latitude: 0,
},
storeEnclosureList: [],
nearbyLoading: "more",
// 精品推荐
recommendList: [],
recommendPageSize: 1,
recommendLoading: "more",
// 新品推荐
newProductList: [],
pageNum: 1,
loadingType: "more",
addressName: "",
showModal: false,
advertData: {},
redList: [],
noticeTotal: 0,
isOpenPosition: true,
wxBtnHeight: 0,
showModal1: false,
title: "2条空投记录",
content: "0.88绿色积分",
greenRecord: 0,
showPop: false,
popInfo: {
titleName: '',
textDescribe: ''
}
};
},
onLoad() {
// // #ifdef MP-WEIXIN
// this.wxBtnHeight = wx.getMenuButtonBoundingClientRect().height
// this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
// // #endif
// this.swiperHeight = uni.getSystemInfoSync().screenHeight
// // 获取新品商品
// this.getNewProductList('add')
// // 获取轮播图、弹框
// this.getAdvertising()
},
onShow() {
this.queryAirDrop();
},
mounted() {
uni.getSystemInfo({
success: (res) => {
uni.setStorageSync('system', res)
uni.setStorageSync('dpi', 750 / res.screenWidth);
try {
this.setSysTem(res)
} catch (e) {
console.warn(e)
}
}
})
//获取三级地址数据
if (uni.getStorageSync("userInfo")) this.setIsLogin(true);
publics.getExternalSources();
isNotSameDay();
this.queryAirDrop();
// console.log('isNotSameDay', isNotSameDay())
// #ifdef MP-WEIXIN
this.wxBtnHeight = wx.getMenuButtonBoundingClientRect().height;
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
// #endif
this.swiperHeight = uni.getSystemInfoSync().screenHeight;
// 获取新品商品
this.getNewProductList("add");
// this.newProductList.push({
// titleName:'苹果手环 iWatch8 多彩腕带',
// mainImage:require('../../static/home/biaodai.png')
// })
// this.newProductList.push({
// titleName:'华为mate60 pro',
// mainImage:require('../../static/home/huawei.png')
// })
// this.newProductList.push({
// titleName:'索尼 耳机',
// mainImage:require('../../static/home/erji.png')
// })
// 获取轮播图、弹框
this.getAdvertising();
let _this = this;
// #ifdef APP-PLUS
//是否开启位置权限
// if (!uni.getStorageSync('refuse')) {
// checkOpenGPSService(result=>{
// _this.isOpenPosition = result
// if (result) {
// //设置地址
// _this.getMyLocation();
// }
// })
// } else {
// // this.isOpenPosition = true
// }
// #endif
// #ifndef APP-PLUS
// this.getMyLocation()
// #endif
// 获取红包信息
this.getRedBagList();
// 获取公告未读数量
this.getNoticeTotal();
this.$http("GET", url.goods.getGoodsClass).then((res) => {
// this.catrgoryList = res.data
res.data.map((v) => {
if (v.type === 1) {
this.classesList.push(v);
}
});
// this.$nextTick(() => {
// setTimeout(()=>{
// _this.getHeightList()
// }, 500)
// })
// uni.stopPullDownRefresh();
});
this.getNoticePop()
setTimeout(() => {
this.$getRect("#tabs").then((res) => {
if (res) {
this.tabsTop = res.top - 50;
}
});
}, 500);
},
computed: {
...mapState(["isLogin", "userInfo"]),
imageStyle(item) {
return item => {
const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
const w = v / 2;
const rate = w / item.w;
const h = rate * item.h;
return {
width: w + 'px',
height: h + 'px'
}
}
}
},
methods: {
...mapMutations(["setLocation", "setIsLogin", 'logout']),
async getNoticePop() {
let res = await this.$http('GET', url.cms.getNoticePop);
if (res.code == 200 && res.data != null) {
this.showPop = true;
this.popInfo = res.data;
}
},
callbackMethod(val) {
if (val == 'goLicai') {
this.goLicai()
} else
if (val == 'goChili') {
this.goChili()
} else
if (val == 'details') {
this.goPage('/pages/home/details?id=642&qvyu=5&greenText=0&rmbText=0')
} else
if (val == 'goodsArea') {
this.goPage('/pages/home/goodsArea?type=2')
}
},
jumpTo(item) {
this.$navigateTo('/pages/home/details?id=' + item.id + '&qvyu=' + item.goodsType || 0 + '&greenText=' +
item.greenText || 0 + '&rmbText=' + item.rmbText || 0)
},
handlerDetail() {
uni.navigateTo({
url: '/pages/notice/details?id=' + this.popInfo.id
})
this.handlerRead()
},
async handlerRead() {
let res = await this.$http('GET', url.cms.noticeRead, {
id: this.popInfo.id
});
if (res.code == 200) {
this.showPop = false;
}
},
goLicai() {
try {
// uni.showLoading({ mask: true });
this.$http("GET", "/user/userCache").then((res) => {
if (res.data) {
this.$http("GET", url.user.getUserIdentity)
.then(({
code,
data
}) => {
if (code == 200) {
uni.hideLoading();
const _ = data.find((item) => item.identityNameCode == 1);
this.goPage("/pages/licai/index");
}
})
.catch(() => uni.hideLoading());
} else {
uni.hideLoading();
this.logout();
}
});
} catch (e) {
//TODO handle the exception
uni.hideLoading();
}
},
changeList(e) {
console.log(e, '111')
this[e.name].push(e.value);
},
goChili() {
try {
// uni.showLoading({ mask: true });
this.$http("GET", "/user/userCache").then((res) => {
if (res.data) {
this.$http("GET", url.user.getUserIdentity)
.then(({
code,
data
}) => {
if (code == 200) {
uni.hideLoading();
const _ = data.find((item) => item.identityNameCode == 1);
if (!!_ && _.identityStatus == 1) {
//是会员
this.goPage("/pages/chili/index");
} else {
uni.showToast({
title: "VIP身份才可入驻",
icon: "none"
});
}
}
})
.catch(() => uni.hideLoading());
} else {
uni.hideLoading();
this.logout();
}
});
} catch (e) {
//TODO handle the exception
uni.hideLoading();
}
},
async countdownStart() {
// 开启倒计时
this.countdownFlag = true;
setTimeout(() => {
// 倒计时结束,开始红包雨
this.countdownFlag = false;
this.start();
}, 4000);
},
// 活动开始
async start() {
this.isActivity = true;
let sY = 0;
for (let i = 0; i < this.activityData.totalTime * this.speed; i++) {
// 每个水平位置上放置两个红包
const rowNum = 2;
for (let i = 0; i < rowNum; i++) {
const section = 750 / rowNum;
let base = i * section;
this.redPackets.push({
x: base + Math.random() * section,
y: sY + Math.random() * 70, // 垂直距离上70的距离随机分布
small: Math.random() > 0.5, // 随机生成小型红包
id: this.pId++,
});
}
// 每行红包垂直间距200
sY += 200;
}
// 红包雨开始的位置
this.rcTop = 0 - sY;
this.rcLeft = sY * 0.268; // sY * tan(15)
setTimeout(() => {
// 红包雨结束时的位置
this.rcTop = 0;
this.rcLeft = 100;
}, 100);
setTimeout(async () => {
// 红包雨结束
this.isActivity = false;
this.showHint = true;
}, this.activityData.totalTime * 1000);
},
cClick(packet, index) {
this.getRedPackets.push({
...packet
});
this.redPackets.splice(index, 1);
},
async checkPermission() {
let status = permision.isIOS ?
await permision.requestIOS("location") :
await permision.requestAndroid(
"android.permission.ACCESS_FINE_LOCATION"
);
console.log("status=====", status);
if (status === null || status === 1) {
status = 1;
} else if (status === 2) {
uni.showModal({
content: "系统定位已关闭",
confirmText: "确定",
showCancel: false,
success: function(res) {},
});
} else if (status.code) {
uni.showModal({
content: status.message,
});
} else {
uni.showModal({
content: "需要定位权限",
confirmText: "设置",
success: function(res) {
if (res.confirm) {
permision.gotoAppSetting();
}
},
});
}
return status;
},
queryAirDrop() {
this.$http("GET", url.asset.queryAirDrop).then(({
code,
data
}) => {
if (code == 200) {
if (data.count > 0) {
this.greenRecord = data;
this.showModal1 = true;
}
}
});
},
handlerGet() {
if (this.btnloading) return;
this.btnloading = true;
// try {
this.$http("GET", url.asset.getAirDrop)
.then(({
code,
data
}) => {
console.log(code);
if (code == 200) {
this.showModal1 = false;
this.$msg("领取成功");
uni.setStorageSync("isGet", true);
} else {
this.showModal1 = false;
this.$msg("请重新领取");
}
})
.catch((e) => {
this.showModal1 = false;
this.$msg("请重新领取");
})
.finally(() => {
//等showModal1弹窗动画彻底关闭再将btnloading改为false以免关闭的残影中再次点击按钮
let a = setTimeout(() => {
clearTimeout(a);
this.btnloading = false;
}, 2000);
});
// } catch (e) {
// this.btnloading = false
// this.showModal1 = false;
//
// }
},
goPage(path) {
if (!this.isLogin) return this.$msg("未登录");
if (!path) return this.$msg("暂未开放");
this.$navigateTo(path);
},
handlerClasses(path, index) {
this.classesIndex = index;
this.$navigateTo(path + "?classIndex=" + index);
// this.changeTab(index)
// this.getNewProductList()
},
goSet() {
let system = uni.getSystemInfoSync(); // 获取系统信息
if (system.platform === "android") {
// 判断平台
var Intent = plus.android.importClass("android.content.Intent");
var Settings = plus.android.importClass("android.provider.Settings");
var intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);
main.startActivity(intent);
} else if (system.platform === "ios") {
var UIApplication = plus.ios.importClass("UIApplication");
var application2 = UIApplication.sharedApplication();
var NSURL2 = plus.ios.importClass("NSURL");
var setting2 = NSURL2.URLWithString("app-settings:"); // 打开应用权限
application2.openURL(setting2);
plus.ios.deleteObject(setting2);
plus.ios.deleteObject(NSURL2);
plus.ios.deleteObject(application2);
}
},
// 红包福利
getRedBagList() {
this.$http("GET", url.cms.redEnvelopesList).then((res) => {
if (res.data && res.data.length > 0) {
let data = res.data;
data.map((v) => {
v.show = true;
});
this.redList = data;
}
});
},
// 获取轮播图、弹框
getAdvertising() {
// 首页顶部轮播图
this.$http("GET", url.cms.advertisingMap, {
position: 1
}).then((res) => {
this.swiperList = res.data;
});
// 首页中间轮播图
this.$http("GET", url.cms.advertisingMap, {
position: 2
}).then((res) => {
this.swiperCenterList = res.data;
});
// 首页弹框广告
this.$http("GET", url.cms.advertisingMap, {
position: 3
}).then((res) => {
if (res.data.length > 0) {
this.advertData = res.data[0];
if (this.advertData.popupMode === 2) {
if (!publics.advertShowToStorage(this.advertData.id)) {
this.showModal = true;
}
} else {
this.showModal = true;
}
}
});
},
// 获取平台公告未读数量
getNoticeTotal() {
this.$http("GET", url.cms.noticeCount, {
type: 1,
read: 2
}).then(
(res) => {
this.noticeTotal = res.data;
}
);
},
filterImg(img) {
return publics.filterImgUrl(img, 3);
},
async getBoutiqueList(type) {
if (type === "add") {
if (this.recommendLoading === "nomore") {
return;
}
this.recommendLoading = "loading";
} else {
this.recommendLoading = "more";
this.recommendList = [];
this.recommendPageSize = 1;
}
let params = {
pageSize: this.recommendPageSize,
sortComprehensive: 1,
goodsType: 2,
};
let res = await this.$http("GET", url.goods.getGoodsList, params);
let list = res.data;
let goodsList = list.records;
if (type === "refresh") {
this.recommendList = [];
this.recommendPageSize = 1;
}
this.recommendList = this.recommendList.concat(goodsList);
if (this.recommendList.length < list.total) {
this.recommendPageSize++;
this.recommendLoading = "more";
} else {
this.recommendLoading = "nomore";
}
uni.stopPullDownRefresh();
},
// 获取新品上市商品
async getNewProductList(type) {
if (type === "add") {
if (this.loadingType === "nomore") {
return;
}
this.loadingType = "loading";
} else {
this.loadingType = "more";
this.newProductList = [];
this.pageNum = 1;
}
//没有更多直接返回
let params = {
pageSize: this.pageNum,
sortComprehensive: 1,
goodsType: Number(this.classesIndex) + 1,
storeId: 0,
};
let res = await this.$http("GET", url.goods.getGoodsList, params);
let list = res.data;
this.newProductList = this.newProductList.concat(list.records);
if (this.newProductList.length < list.total) {
this.pageNum++;
this.loadingType = "more";
} else {
this.loadingType = "nomore";
}
uni.stopPullDownRefresh();
},
gojifen() {
return uni.showToast({
title: '升级中......',
icon: "none",
})
// this.goPage('/pages/home/goodsArea?type=3')
},
// 获取附近的店铺
async getStoreEnclosureList() {
let params = {
pageNum: this.storeEnclosureList.length,
lng: this.myAddressData.longitude, //经度
lat: this.myAddressData.latitude, //纬度
};
let res = await this.$http("GET", url.store.getNearbyStores, params);
this.storeEnclosureList = this.storeEnclosureList.concat(res.data);
this.nearbyLoading = res.data.length < 12 ? "nomore" : "more";
uni.stopPullDownRefresh();
},
selectSearchType(i) {
this.searchIndex = i;
this.showSearchList = false;
},
onSearch() {
this.showSearchList = false;
let keyWord = this.keyWord;
if (this.searchIndex === 0) {
// 搜索商品
this.jumpToProduct("商品列表", -1, keyWord);
} else {
// 搜索店铺
this.jumpToStore(keyWord);
}
this.keyWord = "";
},
getMyLocation() {
let _this = this;
uni.getLocation({
type: "wgs84",
geocode: true,
success: function(res) {
console.log("获取当前位置成功。。。。", res);
_this.setLocation(res);
//设置地址
publics.setMyaddressLngLat(JSON.stringify(res));
_this.myAddressData = res;
//设置当前位置名称
if (res.address) {
_this.addressName =
res.address.district +
(res.address.poiName || res.address.street);
}
},
fail: function(err) {
// 定位权限没开启
console.log("getLocation.error.", err);
// _this.openMap()
},
});
},
currentLoadData() {
if (this.current === 0) {
this.getNewProductList("add");
} else if (this.current === 1) {
this.getBoutiqueList("add");
} else {
this.getStoreEnclosureList();
}
},
changeTab(index) {
this.current = index;
},
swiperChange(e) {
this.changeTab(e.detail.current);
this.currentLoadData();
},
openMap() {
let _this = this;
uni.chooseLocation({
latitude: _this.myAddressData.latitude || 39.904989,
longitude: _this.myAddressData.longitude || 116.405285,
success: function(res) {
//设置地址
publics.setMyaddressLngLat(JSON.stringify(res));
_this.myAddressData = res;
//重新加载附近店铺
// _this.getStoreEnclosureList();
if (res.address.indexOf("省") > -1) {
//解析地址,去除省份和市
let reg = /.+?(省|市|自治区|自治州|县|区)/g;
let addressMatch = res.address.match(reg);
//设置当前位置名称
let replaseName = "";
for (let i = 0; i < addressMatch.length; i++) {
replaseName += addressMatch[i];
}
_this.addressName = res.address.replace(replaseName, "");
} else {
_this.addressName = res.address;
}
},
fail() {
// _this.$msg("获取位置失败,请检查定位服务是否开启,或持设备到相对开阔的露天场所再次尝试", 8000);
},
});
},
jumpToNotice(key, title) {
this.$navigateTo(`/pages/notice/index?type=${key}&title=${title}`);
},
jumpToProduct(title, goodsType, goodsName) {
this.$navigateTo(
`/pages/home/productList?title=${title}&goodsType=${goodsType}&goodsName=${goodsName}`
);
},
jumpToNew(type, title) {
this.$navigateTo(
`/pages/home/newPeopleOrSpecial?type=${type}&title=${title}`
);
},
jumpToStore(keyWord) {
let path = "/pages/home/storeList";
if (keyWord) {
path = path + "?storeName=" + keyWord;
}
this.$navigateTo(path);
},
showToast() {
this.$msg("暂未开放,敬请期待~");
},
imgJump() {
this.showModal = false;
this.$http("POST", url.cms.clickAdvertisingMap, {
id: this.advertData.id,
});
this.advertJump(
this.advertData.operationCode,
this.advertData.operationValue
);
},
advertJump(code, value) {
publics.advertOption(code, value);
},
backPress() {
//隐藏到后台不退出app
let main = plus.android.runtimeMainActivity();
main.moveTaskToBack(false);
return true;
},
pageScroll(e) {
// 滑动到tabs是固定在顶部
if (e.scrollTop > this.tabsTop) {
this.tabsFixed = true;
} else {
this.tabsFixed = false;
}
},
//加载更多
reachBottom() {
this.currentLoadData();
},
// 下拉刷新
pullDownRefresh() {
// 获取轮播图、弹框
this.getAdvertising();
if (this.current === 0) {
this.getNewProductList("refresh");
} else if (this.current === 1) {
this.getBoutiqueList("refresh");
} else {
// 附近的店铺
this.storeEnclosureList = [];
this.getStoreEnclosureList();
}
},
},
};
</script>
<style scoped lang="scss">
.pop-content {
width: 600rpx;
height: 600rpx;
overflow-y: scroll;
.content-text {
margin-top: 20rpx;
}
image {
width: 550rpx;
margin-top: 20rpx;
}
// padding: 0 40rpx;
}
.tag {
color: #ffffff;
padding: 0 6rpx;
border-radius: 5rpx;
margin-right: 6rpx;
font-size: 30rpx;
}
.main {
background-color: #f4f5f6;
}
.positionShow {
height: 100rpx;
width: 750rpx;
// position: fixed;
// top: 80rpx;
// left: 0;
// right: 0;
margin-left: -30rpx;
background-color: #fceeed;
display: flex;
align-items: center;
.item {
padding: 0 30rpx;
}
.txt {
font-size: 28rpx;
color: #666666;
}
.icon {
color: #f55556;
font-size: 40rpx;
margin-right: 20rpx;
}
}
.content {
padding: 0 20rpx;
.grid {
margin: 10rpx 0 10rpx;
border-radius: 20rpx;
padding: 20rpx 0 30rpx;
&-item {
width: 33.33%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 26rpx;
.icon {
width: 90rpx;
height: 90rpx;
}
}
}
.clas {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 20rpx;
margin-bottom: 20rpx;
.img {
border-radius: 20rpx;
margin-bottom: 10rpx;
width: 230rpx;
}
.max-img {
width: 350rpx;
}
}
.centreSwiper {
margin-bottom: 26rpx;
.wrap {
height: 180rpx;
width: 100%;
&-item {
width: 100%;
height: 100%;
border-radius: 16rpx;
}
}
}
.tabs {
margin-bottom: 6rpx;
transform: 0.5s;
display: flex;
justify-content: space-between;
.tab {
width: 27%;
padding: 10rpx;
border-radius: 10rpx;
background-color: #f8d247;
opacity: 0.8;
&.active {
opacity: 1;
color: #ffffff;
font-size: 32rpx;
}
.txt {
padding-bottom: 4rpx;
}
}
.active {
color: #f8d247;
font-weight: bold;
font-size: 38rpx;
}
.active.txt {
border-bottom: 8rpx solid #b90000;
}
}
.tabsFixed {
background-color: white;
width: 750rpx;
height: 90rpx;
line-height: 90rpx;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
.list {
.mark {
width: 236rpx;
margin-bottom: -6rpx;
}
.title {
padding: 0 20rpx;
border-radius: 10rpx;
height: 90rpx;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
.icon {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
}
.new {
height: 100%;
// overflow-y: scroll;
&-item {
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20rpx;
}
.recommend {
background-color: #6b5aac;
border-radius: 20rpx;
margin-top: 0;
.pad {
margin: 0 20rpx;
}
}
}
.shop {
height: 100%;
}
}
}
.list_3 {
display: flex;
height: 96px;
justify-content: space-between;
margin-bottom: 70rpx;
font-weight: 800;
.text-group_2 {
width:138rpx;
margin-top:20rpx;
padding: 20rpx 18rpx 190rpx 20rpx;
background-color: #ffffff;
border-radius: 8rpx;
image {
width: 100rpx;
height: 100rpx;
float: right;
top:10rpx;
}
.text_3 {
overflow-wrap: break-word;
color: rgba(47, 36, 36, 1);
font-size: 14px;
font-family: PingFangSC-Medium;
font-weight: 800;
text-align: center;
white-space: nowrap;
line-height: 17px;
margin-right: 19px;
}
.text_4 {
overflow-wrap: break-word;
color: rgba(128, 128, 128, 1);
font-size: 8px;
text-align: left;
white-space: nowrap;
line-height: 11px;
margin-top: 5rpx;
}
}
}
.custom-view {
overflow: hidden;
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
}
</style>