jiuyiUniapp/shop/pages/index/index.vue

1020 lines
25 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="rf-index">
<!--搜索导航栏-->
<rf-search-bar @search="navToSearch" title="扫一扫" icon="iconsaomiao" :placeholder="hotSearchDefault" />
<scroll-view scroll-x class="index-cate" :style="{top: customBar +'px'}" v-if="isOpenIndexCate && categoryList.length > 0">
<view v-for="(item, index) in categoryList" :key="index" class="index-cate-item" :class="tabCurrentIndex === index ? `text-${themeColor.name} active` : ''"
@tap.stop="tabClick(index, item.brandId)">
{{ item.brandName }}
</view>
</scroll-view>
<!-- #ifdef MP-WEIXIN -->
<ad v-if="adOn" unit-id="adunit-4c607332fcb0fb3f"></ad>
<!-- #endif -->
<view :class="isOpenIndexCate && categoryList.length > 0 ? 'main-wrapper' : ''">
<block v-if="currentCate === 0">
<!-- 轮播图1 -->
<view class="swiper" v-if="index_top && index_top.length > 0">
<view class="swiper-box">
<rf-swipe-dot :info="index_top" mode="nav" :current="current" field="title">
<swiper @change="handleDotChange" autoplay="true">
<swiper-item v-for="(item, index) in index_top" @tap="indexTopToDetailPage(item)" :key="index">
<view class="swiper-item">
<image :src="item.pic" mode="aspectFill" />
</view>
</swiper-item>
</swiper>
</rf-swipe-dot>
</view>
</view>
<!-- 分类列表 -->
<swiper :indicator-active-color="themeColor.color" indicator-color="#666" :indicator-dots="markingList.length > 10"
:style="{height: markingList.length <= 5 ? '200rpx' : '400rpx'}" class="category-list-wrapper" v-if="markingList.length > 0">
<swiper-item class="category-list">
<view class="category" v-for="(sItem, sIndex) in markingList" :key="sIndex" @tap.stop="navToByStoreId(sItem.url)">
<view class="img">
<text class="iconfont" :style="{color: sItem.color}" :class="sItem.icon"></text>
</view>
<view class="text in1line">{{ sItem.title}}</view>
</view>
</swiper-item>
</swiper>
<!--新闻通知-->
<rf-swiper-slide v-if="announceList && announceList.length > 0" :list="announceList" class="rf-skeleton" @navTo="navTo('/pages/index/notice/notice')">
<view slot="header" class="swiper-slide-header">
<text class="iconfont icongonggao" :class="'text-'+themeColor.name"></text>
</view>
</rf-swiper-slide>
<!-- 爆款推荐 -->
<view class="hot-recommend" v-if="hotRecommendList && hotRecommendList.length > 0">
<view class="left">
<image class="hot-recommend-image" @tap="navTo(hotRecommendList[0].url)" :src="hotRecommendList[0].pic"></image>
</view>
<view class="right">
<image class="hot-recommend-image" @tap.stop="navTo(hotRecommendList[1].url)" :src="hotRecommendList[1].pic"></image>
<image class="hot-recommend-image" @tap.stop="navTo(hotRecommendList[2].url)" :src="hotRecommendList[2].pic"></image>
</view>
</view>
<!-- 直播 -->
<!-- #ifdef MP-WEIXIN -->
<ad v-if="adOn" unit-id="adunit-2360481bbd1bd497" ad-type="video" ad-theme="white"></ad>
<Live :detail="liveList"></Live>
<!-- #endif -->
<!--推荐商品-->
<rf-floor-index icon="icontuijian21" v-if="recommendProductList && recommendProductList.length > 0" :list="recommendProductList"
:header="{ title: '推荐商品', desc: 'Recommend Product' }" @toBanner="indexTopToDetailPage" @toList="
navTo(
`/pages/product/list?param=${JSON.stringify({ is_recommend: 1 })}`
)
"
@detail="navToDetailPage" :banner="index_recommend && index_recommend[0]" />
<!--热门商品-->
<rf-floor-index icon="iconremen2" v-if="hotProductList && hotProductList.length > 0" :list="hotProductList" :header="{ title: '热门商品', desc: 'Hot Product' }"
@toBanner="indexTopToDetailPage" @toList="
navTo(`/pages/product/list?param=${JSON.stringify({ is_hot: 1 })}`)
"
@detail="navToDetailPage" :banner="index_hot && index_hot[0]" />
<!--猜您喜欢-->
<rf-floor-p-index v-if="guessYouLikeProductList && guessYouLikeProductList.length > 0" icon="iconcainixihuan2"
:list="guessYouLikeProductList" :isLink="false" :header="{ title: '新品上线', desc: 'Guess You Like It' }" @detail="navToDetailPage"
:bannerShow="false" />
<rf-load-more class="load-more" :status="loadingType" v-if="guessYouLikeProductList.length > 0"></rf-load-more>
<!--网站备案号-->
<!--#ifdef H5-->
<view class="copyright">
<a href="" target="_blank"></a>
</view>
<!-- #endif -->
</block>
<view v-else class="index-cate-product-list">
<rf-product-list :bottom="bottom" :list="categoryProductList"></rf-product-list>
<rf-load-more :status="loadingType" v-if="categoryProductList.length > 0"></rf-load-more>
<rf-empty :bottom="bottom" :info="'暂无该分类产品~'" v-if="categoryProductList.length === 0 && !productLoading"></rf-empty>
</view>
</view>
<!--页面加载动画-->
<rfLoading isFullScreen :active="loading"></rfLoading>
<rf-back-home></rf-back-home>
<rf-back-top :scrollTop="scrollTop"></rf-back-top>
</view>
</template>
<script>
/**
* @des 微商城首页
*
* @author 237524947@qq.com
* @date 2020-01-08 14:14
* @copyright 2019
*/
import {
indexList,
productList,
storeList
} from '@/api/product';
import {
bannerList,
homeRecommendSubject,
homeRecommendProduct,
homeBrand,
queryliveplayerroomlist,
noticeList,
typeList,
homeNewProduct
} from '@/api/sms';
import {
getOpenId,
mpWechatLogin,
wechatH5Login,
thirdPartyWechatOpenPlatform,
thirdPartyApple,
runData
} from '@/api/login';
import {
footPrintList,
memberInfo,
notifyUnRreadCount
} from '@/api/userInfo';
import rfSwipeDot from '@/components/rf-swipe-dot';
import Live from '@/components/Live';
import rfFloorIndex from '@/components/rf-floor-index';
import rfFloorPIndex from '@/components/rf-floor-p-index';
import rfSearchBar from '@/components/rf-search-bar';
import rfSwiperSlide from '@/components/rf-swiper-slide';
import rfProductList from '@/components/rf-product-list';
import {
mapMutations
} from 'vuex';
export default {
components: {
Live,
rfFloorIndex,
rfFloorPIndex,
rfSwipeDot,
rfProductList,
rfSearchBar,
rfSwiperSlide
},
data() {
return {
current: 0, // 轮播图index
carouselList: {}, // 广告图
index_hot: [], // 广告图
index_new: [], // 广告图
index_recommend: [], // 广告图
index_top: [], // 广告图
hotProductList: [], // 热门商品列表
brandList: [],
liveList: [],
recommendProductList: [], // 推荐商品列表
guessYouLikeProductList: [], // 猜您喜欢商品列表
newProductList: [], // 新品上市商品列表
productCateList: [], // 商品栏目
markingList: this.$mConstDataConfig.markingList,
config: {}, // 商户配置
announceList: [], // 公告列表
share: {},
adOn: this.adOn,
loading: true,
scrollTop: 0,
kefuShow: true,
loadingType: 'more',
hotSearchDefault: '请输入关键字',
newsBg: this.$mAssetsPath.newsBg,
errorImage: this.$mAssetsPath.errorImage,
appName: this.$mSettingConfig.appName,
tabCurrentIndex: 0,
categoryList: [], // 分类列表
categoryProductList: [], // 分类列表
pageNum: 0,
currentCate: 0,
hotRecommendList: this.$mConstDataConfig.hotRecommendList,
productLoading: true,
customBar: this.CustomBar,
isOpenIndexCate: this.$mSettingConfig.isOpenIndexCate,
moneySymbol: this.moneySymbol
};
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
onShow() {
// 初始化购物车数量
this.setCartNum(uni.getStorageSync('cartNum'));
},
onLoad(option) {
this.initData(option);
},
computed: {
// 计算倒计时时间
second() {
return function(val) {
return Math.floor(15 * 60 - (new Date() / 1000 - val));
};
},
bottom() {
let bottom = 0;
/* #ifdef H5 */
bottom = 90;
/* #endif */
return bottom;
},
swipeCateList() {
const list = this.brandList;
let result = [];
for (let i = 0, len = list.length; i < len; i += 10) {
result.push(list.slice(i, i + 10));
}
return result;
}
},
onShareAppMessage() {
if (this.hasLogin) {
let userInfo = uni.getStorageSync('userInfo')
return {
title: `${userInfo.nickname}邀请你来到${this.appName}`,
path: '/pages/index/index?recommondCode='+userInfo.selfRecommendCode
};
} else {
return {
title: `欢迎来到${this.appName}`,
path: '/pages/index/index'
};
}
},
onShareTimeline: function(res) {
if (!this.hasLogin) {
let userInfo = uni.getStorageSync('userInfo')
return {
title: `${userInfo.nickname}邀请你来到${this.appName}`,
query: 'recommondCode=${userInfo.selfRecommendCode}'
};
} else {
return {
title: `欢迎来到${this.appName}`,
query: '1=1'
};
}
},
filters: {
filterDiscountPrice(val) {
const price = val.product && (val.product.price * val.discount) / 100;
switch (val.decimal_reservation_number) {
case 0:
return (Math.floor(price * 100) / 100).toFixed(2);
case 1:
return (Math.floor(price * 100) / 100).toFixed(0);
case 2:
return (Math.floor(price * 100) / 100).toFixed(1);
default:
return (Math.floor(price * 100) / 100).toFixed(2);
}
},
filterTotalSales(val) {
if (val > 10000) {
val = `${(val / 10000).toFixed(2)}w`;
}
return val;
}
},
// 下拉刷新
onPullDownRefresh() {
this.pageNum = 0;
this.loading = false;
this.initData();
setTimeout(() => {
uni.stopPullDownRefresh();
}, 250);
},
// 加载更多
onReachBottom() {
if (this.loadingType === 'nomore') return;
if (this.currentCate === 0) {
this.pageNum++
this.getNewProductList();
return;
}
this.pageNum++
this.getProductList(this.currentCate);
},
methods: {
...mapMutations(['setNotifyNum', 'setCartNum']),
// 顶部tab点击
tabClick(index, id) {
this.currentCate = id;
this.tabCurrentIndex = index;
if (id === 0) return;
this.loading = true;
this.pageNum = 0;
this.productLoading = true;
this.categoryProductList = [];
this.getProductList(id);
},
// 获取产品列表
async getProductList(id) {
await this.$http
.get(`${productList}`, {
brandId: id,
pageNum: this.pageNum
})
.then(async r => {
this.loading = false;
this.productLoading = false;
this.loadingType = r.list.length === 10 ? 'more' : 'nomore';
this.categoryProductList = [...this.categoryProductList, ...r.list];
}).catch(() => {
this.loading = false;
this.productLoading = false;
});
},
// 监听轮播图切换
handleDotChange(e) {
this.current = e.detail.current;
},
// 获取code
// 先判断url中有没有code如果有code表明已经授权如果没有code跳转微信授权链接
getCode() {
var appid = `${this.$mConfig.weixinAppId}`;
var hostUrl = `${this.$mConfig.hostUrl}`;
// 截取地址中的code如果没有code就去微信授权如果已经获取到code了就直接把code传给后台获取openId
let code = this.getUrlCode('code')
if (code === null || code === '') {
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' +
encodeURIComponent('https://mojin.51wangshi.com') +
'&response_type=code&scope=snsapi_userinfo&state=1234#wechat_redirect'
// redirect_uri是授权成功后跳转的url地址微信会帮我们跳转到该链接并且通过的形式拼接code这里需要用encodeURIComponent对链接进行处理。
// 如果配置参数一一对应那么此时已经通过回调地址刷新页面后你就会再地址栏中看到code了。
// http://127.0.0.1/pages/views/profile/login/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1
}
},
getUrlCode(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1]
.replace(/\+/g, '%20')) || null
},
getOpenidAndUserinfo(code) {
var storeId = `${this.$mConfig.storeId}`;
this.$http.get(`${wechatH5Login}`, {
code: code,
recommondCode: uni.getStorageSync('recommondCode'),
storeId: storeId
}).then(r => {
this.$mStore.commit('login', r);
this.$mRouter.reLaunch({
route: '/pages/profile/profile'
});
});
},
// 数据初始化
initData(option) {
var baseUrl = `${this.$mConfig.baseUrl}`;
var storeId = `${this.$mConfig.storeId}`;
this.storeId=storeId;
this.hasLogin = this.$mStore.getters.hasLogin;
this.loading = false;
if (option && option.recommondCode) {
uni.setStorageSync('recommondCode', option.recommondCode)
}
/* #ifdef H5 */
if (option && this.$mPayment.isWechat() && !this.hasLogin) {
let code = this.getCode()
if (option.code !== null && option.code !== "" && option.code !== undefined) {
this.getOpenidAndUserinfo(option.code)
}
}
/* #endif */
// 设置购物车数量角标
this.getBannerList();
this.getannounceList();
// this.getTypeList();
this.getBrandList();
// #ifdef MP-WEIXIN
this.getLiveList();
// #endif
//this.getStoreList();
this.loading = false;
this.getHotProductList();
this.getRecommendProductList();
this.getNewProductList();
if (this.hasLogin) {
this.initNotifyNum();
this.initCartItemCount();
}
},
async getLiveList() {
await this.$http.get(`${queryliveplayerroomlist}`, {
storeId: 0
}).then(groupHotGoodsList => {
groupHotGoodsList.forEach(item => {
if (item.live_status == '101') {
if (this.liveList.length < 3) {
this.liveList.push(item)
}
}
});
if (this.liveList.length < 3) {
groupHotGoodsList.forEach(item => {
if (item.live_status == '103') {
if (this.liveList.length < 3) {
this.liveList.push(item)
}
}
});
}
if (this.liveList.length < 3) {
groupHotGoodsList.forEach(item => {
if (item.live_status == '102') {
if (this.liveList.length < 3) {
this.liveList.push(item)
}
}
});
}
});
},
// 设置购物车数量角标
async initCartItemCount() {
if (
this.$mStore.getters.hasLogin &&
parseInt(uni.getStorageSync('cartNum'), 10) > 0
) {
uni.setTabBarBadge({
index: this.$mConstDataConfig.cartIndex,
text: uni.getStorageSync('cartNum').toString()
});
uni.setTabBarBadge({
index: this.$mConstDataConfig.notifyIndex,
text: uni.getStorageSync('notifyNum').toString()
});
} else {
uni.removeStorageSync('cartNum');
uni.removeTabBarBadge({
index: this.$mConstDataConfig.cartIndex
});
uni.removeStorageSync('notifyNum');
uni.removeTabBarBadge({
index: this.$mConstDataConfig.notifyIndex
});
}
},
// 通用跳转
navTo(route) {
this.$mRouter.push({
route
});
},
navToByStoreId(route) {
this.navTo(route + `?storeId=0`);
},
// 跳转至分类模块
navToCategory(id) {
if (this.$mSettingConfig.appCateType === '2') {
uni.setStorageSync('indexToCateId', id);
this.$mRouter.reLaunch({
route: '/pages/category/category'
});
} else {
this.navTo(`/pages/product/list?cate_id=${id}`);
}
},
// 通用跳转
navToSearch() {
this.$mRouter.push({
route: `/pages/index/search/search?data=${JSON.stringify(this.search)}`
});
},
// 跳至广告图指定页面
indexTopToDetailPage(item) {
var url = item.url
this.navTo(url + `&storeId=` + this.storeId);
},
async getStoreList() {
await this.$http.get(`${storeList}`, {
orderBy: 1,
pageSize: 40
}).then(r => {
this.productCateList = r.list;
this.categoryList = [{
id: 0,
storeName: '平台自营'
}, ...this.productCateList];
});
},
// 推荐品牌
async getBrandList() {
await this.$http.get(`${homeBrand}`, {
storeId: 0
}).then(r => {
this.productCateList = r;
this.categoryList = [{
brandId: 0,
brandName: '首页'
}, ...this.productCateList];
});
},
// 轮播图列表 1 轮播图 2 新品推荐广告 3 人气推荐广告 4热门推荐广告 5 分类广告
async getBannerList() {
await this.$http.get(`${bannerList}`, {
storeId: 0
}).then(r => {
r.forEach((item, index) => {
if (item.orderCount === 1) {
this.index_top.push(item)
} else if (item.orderCount === 2) {
this.index_new.push(item)
} else if (item.orderCount === 3) {
this.index_recommend.push(item)
} else if (item.orderCount === 4) {
this.index_hot.push(item)
}
})
});
},
// 设置未读消息个数
async initNotifyNum() {
await this.$http.get(notifyUnRreadCount).then(r => {
this.setNotifyNum(r);
});
},
// 公告列表
async getannounceList() {
await this.$http.get(`${noticeList}`, {
storeId: 0
}).then(r => {
this.announceList = r;
});
},
// 热门商品列表
async getHotProductList() {
await this.$http.get(`${homeNewProduct}`, {
storeId: 0
}).then(r => {
this.hotProductList = r;
});
},
// 推荐商品列表
async getRecommendProductList() {
await this.$http.get(`${homeRecommendProduct}`, {
storeId: 0
}).then(r => {
this.recommendProductList = r;
});
},
// 猜您喜欢商品列表
async getNewProductList(type) {
await this.$http
.get(`${productList}`, {
...this.productParams,
storeId: -1,
pageNum: this.pageNum
})
.then(async r => {
console.log(r)
this.loading = false;
if (type === 'refresh') {
uni.stopPullDownRefresh();
}
console.log(r)
if (r.list) {
this.loadingType = r.list.length === 10 ? 'more' : 'nomore';
this.guessYouLikeProductList = [...this.guessYouLikeProductList, ...r.list];
}
})
.catch(err => {
this.errorInfo = err;
this.loading = false;
if (type === 'refresh') {
uni.stopPullDownRefresh();
}
});
},
// 跳转至商品详情页
navToDetailPage(data) {
const {
id
} = data;
if (!id) return;
this.$mRouter.push({
route: `/pages/product/product?id=${id}`
});
},
// 跳转至分类页
toCategory() {
this.$mRouter.switchTab({
route: '/pages/category/category'
});
}
}
};
</script>
<style lang="scss">
page {
background-color: $page-color-base;
}
.rf-index {
background-color: $color-white;
/*爆款拼团*/
.wrapper {
border-radius: 10upx;
.h-list {
background-color: $page-color-base;
white-space: nowrap;
padding: 0 $spacing-sm;
.h-item {
margin: $spacing-sm $spacing-sm $spacing-sm 0;
display: inline-block;
background-color: $color-white;
font-size: $font-sm;
width: 280upx;
border-radius: 6upx;
.h-item-img {
display: inline-block;
width: 280upx;
height: 300upx;
border-top-left-radius: 12upx;
border-top-right-radius: 12upx;
border-bottom: 1upx solid rgba(0, 0, 0, 0.01);
}
.title {
width: 280upx;
white-space: normal;
height: 60upx;
line-height: 30upx;
font-size: $font-sm;
padding: 0 $spacing-sm;
margin: $spacing-sm 0;
}
.last-line {
padding: 0 $spacing-sm $spacing-base;
margin-bottom: 5upx;
display: flex;
justify-content: space-between;
align-items: center;
/* 垂直居中 */
.red {
font-size: $font-sm;
margin-right: 4upx;
}
}
.price {
font-size: $font-base - 2upx;
line-height: 1;
.m-price {
margin-left: 8upx;
color: $font-color-light;
font-size: $font-sm;
text-decoration: line-through;
}
}
}
}
}
/*轮播图*/
.swiper {
width: 100%;
margin-bottom: 20upx;
display: flex;
justify-content: center;
.swiper-box {
width: 92%;
height: 40vw;
overflow: hidden;
border-radius: 15upx;
box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
//兼容ios微信小程序
position: relative;
z-index: 1;
swiper {
width: 100%;
height: 40vw;
swiper-item {
image {
width: 100%;
height: 40vw;
}
}
}
}
}
/* 爆款推荐 */
.hot-recommend {
background-color: $color-white;
display: flex;
padding: $spacing-base $spacing-lg 0;
.hot-recommend-image {
width: 100%;
height: 100%;
}
.left {
flex: 3;
height: 350upx;
margin-right: 15upx;
}
.right {
flex: 4;
.hot-recommend-image {
height: 170upx;
}
}
}
/*轮播图2*/
.swiper-item-text {
position: absolute;
bottom: 16upx;
left: 30upx;
height: 48upx;
line-height: 48upx;
background: rgba(0, 0, 0, 0.2);
width: 90%;
color: $color-white;
border-bottom-left-radius: 12upx;
padding-left: 20upx;
}
/*新闻通知*/
.swiper-slide-header {
.picfont {
font-size: $font-lg + 8upx;
font-weight: 600;
}
}
/*分类列表*/
.category-list-wrapper {
.category-list {
width: 100%;
padding: $spacing-base;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.category {
margin-top: 10upx;
width: calc(20% - 20upx);
height: 132upx;
display: flex;
text-align: center;
flex-wrap: wrap;
.img {
width: 100%;
display: flex;
justify-content: center;
image {
width: 12vw;
height: 12vw;
border-radius: 50%;
}
}
.text {
margin-top: 16upx;
width: 100%;
display: flex;
justify-content: center;
font-size: 24upx;
color: #3c3c3c;
}
}
}
}
/*版权显示*/
.copyright {
margin: 10upx 0;
width: 100%;
text-align: center;
color: #666;
a {
display: block;
color: #666;
text-decoration: none;
}
}
/*限时抢购*/
.order-item {
display: flex;
flex-direction: column;
background: #fff;
padding: 0 30upx;
margin-bottom: 20upx;
.goods-box-single {
display: flex;
padding: 40upx 10upx 10upx;
height: 330upx;
border-radius: 12upx;
margin-top: 20upx;
box-shadow: 2px 2px 10px rgba(66, 135, 193, 0.2); // 阴影
border-bottom: 1px solid rgba(0, 0, 0, 0.05); // 边框
position: relative;
.goods-img {
display: block;
border-radius: 12upx;
width: 190upx;
height: 200upx;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 30upx 0 24upx;
overflow: hidden;
.title {
font-weight: bold;
line-height: 1.2;
margin: 10upx 0;
}
.attr-box {
line-height: 1.2;
margin-bottom: 8upx;
margin-left: 10upx;
}
.last-line {
margin-top: 3upx;
display: flex;
justify-content: space-between;
align-items: center;
/* 垂直居中 */
.red {
margin-right: 4upx;
}
}
.price {
font-size: $font-lg;
line-height: 1;
.m-price {
margin-left: 8upx;
color: $font-color-light;
font-size: $font-sm;
text-decoration: line-through;
}
}
.triangle-wrapper {
position: absolute;
overflow: hidden;
top: 0;
right: 0;
border-radius: 12upx;
.triangle {
color: #5eba8f;
width: 0;
height: 0;
border-top: 120upx solid;
opacity: 0.8;
border-left: 120upx solid transparent;
}
.triangle-content {
position: absolute;
top: 28upx;
right: 0;
transform: rotate(45deg);
font-size: $font-sm - 2upx;
color: #fff;
}
}
}
}
.action-box {
display: flex;
justify-content: flex-end;
align-items: center;
height: 90upx;
position: relative;
.discount-time {
font-size: $font-sm;
color: $uni-color-success;
margin-right: 20upx;
}
}
}
.index-cate {
white-space: nowrap;
z-index: 10;
background-color: $color-white;
/*#ifndef MP*/
position: fixed;
/*#endif*/
margin-bottom: $spacing-sm;
.index-cate-item {
display: inline-block;
height: 75upx;
line-height: 75upx;
margin: 0 15upx;
text-align: center;
width: 120upx;
font-size: $font-base;
}
.active {
font-weight: 500;
border-bottom: 2px solid;
}
}
.main-wrapper {
margin-top: 85upx;
/*#ifdef MP*/
margin-top: 0;
/*#endif*/
}
.index-cate-product-list {
padding-top: $spacing-sm;
background-color: $page-color-base;
.no-data {
margin: 48upx 0;
color: $font-color-light;
display: flex;
justify-content: center;
align-items: center;
.picfont {
margin-right: 20upx;
font-size: $font-lg + 16upx;
}
}
}
}
</style>