|
|
<template> <view class="container"> <global-loading />
<!-- 店铺首页 --> <view class="content" v-if="id"> <view class="shop-top" :style="{'padding-top': topHeight + 'px'}"> <image src="https://wechat.hnthee.com/ceres-local-file/image/title_white_back.png" class="back" @click="back"></image> <view class="search-btn" @click="searchPro"> <image class="search-icon" src="https://wechat.hnthee.com/ceres-local-file/image/shop_collect_search.png" mode="widthFix"> </image> <text class="search-word">{{$t('common.searchproduct_hint')}}</text> </view> </view> <view class="stopInfo"> <view class="shop-top-content"> <view class="contentLeft"> <image :src="storeInfo.shopLogo" class="photo-img"></image> <view class="shop-info-top"> <view class="shop-name"> <text class="shop-name">{{storeInfo.shopName}}</text> <text class="shop-num">{{$t('common.fans')}}：{{fansNumber}}</text> </view> <!-- #ifdef MP-WEIXIN --> <view v-if="hasService" class="btns flex-column-plus mar-left-10" @click="flyToService"> <image class="store-icon" src="https://ceres.zkthink.com/static/images/service-product-detail.png"></image> <text>{{$t('common.service')}}</text> </view> <!-- #endif --> </view> </view> <view class="contentRight"> <view class="favorites-box cur-poi" @click="collectToggle"> <image v-if="ifCollect === 0" class="store-icon" src="https://ceres.zkthink.com/static/images/iconShoucang.png"> </image> <image v-else class="store-icon" src="https://ceres.zkthink.com/static/images/shoucangActive.png"></image> <text class="text">{{ifCollect === 0? $t('common.collect') : $t('common.cancel')}}</text> </view> </view> </view> <view class="distributorBox flex-items flex-sp-between" @click="applyForRecruit"> <view class="distributor"> <view class="flex-display flex-items"> <image class="item-btn-icon" src="https://wechat.hnthee.com/ceres-local-file/image/shop_collect_distributor.png" mode="widthFix"></image> <view class="fs28 font-color-252744">{{$t('client.tobedistributor')}}</view> </view> </view> <view class="rightArrow"> <image src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_shop_forward.png"></image> </view> </view> </view> <view class="shopContent"> <view class="tabs-nav-warp"> <scroll-view class="tabs-nav" scroll-x="true"> <view class="ul"> <view class="li" :class="{'on':activeTab==='index'}" @click="tabChange('index')">首页</view> <view class="li" :class="{'on':activeTab==='all'}" @click="tabChange('all')">全部</view> <view class="li" v-for="(item,index) in classList" :key="index" :class="{'on':activeTab===item.classifyId}" @click="tabChange(item.classifyId)"> {{item.classifyName}} </view> </view> </scroll-view> </view> <view v-if="activeTab=== 'index'"> <canvas-page :componentsData="componentsData" :terminal="terminal" :typeId="3" :shopId="id"> </canvas-page> </view> <view v-else> <view class="shop-banner-box" v-if="bannerInfo && bannerInfo.length > 0"> <swiper indicator-dots="true"> <swiper-item v-for="(item, index) in bannerInfo" :key="index" @click="applyForRecruit()"> <image :src="item.bannerImage" class="shop-banner-img"></image> </swiper-item> </swiper> </view> <view class="shop-list-content"> <!-- <view class="shop-list-nav">--> <!-- <view class="nav-item padd-l" :class="{'active' : navIndex == 0}" @click="navIndexTap(0)">--> <!-- <text class="nav-title">全部商品</text>--> <!-- <text class="line"></text>--> <!-- </view>--> <!-- <view class="nav-item padd-r" :class="{'active' : navIndex == 1}" @click="navIndexTap(1)">--> <!-- <text class="nav-title">分类查看</text>--> <!-- <text class="line"></text>--> <!-- </view>--> <!-- </view>--> <block v-if='isShowGoods'> <view class="navBox"> <view class="shop-list-nav"> <view class="nav-item-sort" @click="sortTap(1)"> <text class="nav-title" :class="{'active' : sortIndex == 1}">新品</text> </view> <view class="nav-item-sort" @click="sortTap(2)"> <text class="nav-title" :class="{'active' : sortIndex == 2}">{{$t('product.price')}}</text> <view class="r"> <image src="https://wechat.hnthee.com/ceres-local-file/image/arrow_sort_up.png" v-if="type == 1" class="arrow-img padd-t"></image> <image src="https://wechat.hnthee.com/ceres-local-file/image/arrow_sort_down.png" v-if="type == 2" class="arrow-img padd-b"></image> </view> </view> <view class="nav-item-sort" @click="sortTap(3)"> <text class="nav-title" :class="{'active' : sortIndex == 3}">{{$t('common.synthesis')}}</text> <view class="r"> <image src="https://wechat.hnthee.com/ceres-local-file/image/arrow_sort_up.png" v-if="volume == 1" class="arrow-img padd-t"></image> <image src="https://wechat.hnthee.com/ceres-local-file/image/arrow_sort_down.png" v-if="volume == 2" class="arrow-img padd-b"></image> </view> </view> </view> </view> <view class="shop-list-box" v-if="total > 0"> <view class="item" v-for="(cItem, index) in storeInfolist" :key="index" @click="goodsItemTap(cItem.productId,cItem.skuId)"> <image :src="cItem.image" class="product-img default-img" onerror="this.src='url(https://wechat.hnthee.com/ceres-local-file/image/default.png) no-repeat center';this.οnerrοr=null"></image> <image v-if="cItem.ifCollect === 1" class="collect-img" src="https://wechat.hnthee.com/ceres-local-file/image/shop_prod_collect_actvie.png" @click.stop="onCollect(cItem, 0)"/> <image v-else class="collect-img" src="https://wechat.hnthee.com/ceres-local-file/image/shop_prod_collect_normal.png" @click.stop="onCollect(cItem, 1)"/> <image class="cart-add-img" src="https://wechat.hnthee.com/ceres-local-file/image/shop_prod_addcart.png"/> <view class="product-bottom-box"> <view class="product-name">{{cItem.productName}}</view><!-- <view class="product-num font-color-C5AA7B mar-top-10">已售{{cItem.number}}件 </view>--> <view class="product-price-box"> <image v-if="cItem.activityType===1" class="iconImg" src="https://ceres.zkthink.com/static/images/groupBuyIcon.png" alt="拼团icon"></image> <image v-if="cItem.activityType === 2" class="iconImg" src="https://ceres.zkthink.com/static/images/spikeIcon.png" alt="秒杀活动"> </image> <image v-if="cItem.activityType === 3" class="iconImg discountIcon" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-03-14/38184785db4b4fbca767ada611097ae9_discount.png" alt="限时折扣活动"></image> <image v-if="cItem.activityType === 4" class="iconImg" src="https://ceres.zkthink.com/static/images/spikeIcon.png" alt="平台秒杀"> </image> <image v-if="cItem.activityType===5" class="iconImg" src="https://ceres.zkthink.com/static/images/discountListIcon.png" alt="平台折扣"></image> <image v-if="cItem.activityType===9" class="iconImg" src="https://ceres.zkthink.com/static/images/memberCenterIcon.png" alt="会员价"></image> <image v-if="cItem.activityType === 8" class="iconImg" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png" alt="场景营销"></image> <text class="price-box fs28 font-color-252744 mar-right-10 fs-bold">￥{{cItem.price}}</text> <text class="price-through">￥{{cItem.originalPrice}}</text> </view> </view> </view> </view> <view class='empty-container' v-else> <image src="/images/kong4.png"></image> <text>暂无商品</text> </view> </block> </view> </view> </view> </view> </view></template>
<script> const NET = require('../../utils/request') const API = require('../../config/api') import api from '@/components/canvasShow/config/api' import canvasPage from '@/components/canvasShow/canvasShowPage.vue' export default { data() { return { componentsData: [], navIndex: 0, id: '', price: 0, storeInfo: {}, classList: [], dataList: [], isShowGoods: true, sortIndex: 0, list: [], bannerInfo: [], total: 0, ifNew: 0, //是否新品
type: 1, //价格排序条件
volume: 1, //销量排序条件
page: 1, //当前页
pageSize: 20, //每页记录数
classifyId: '', loadingType: 0, storeInfolist: [], isIphone: false, activeTab: 'index', terminal: API.terminal, collectId: 0, ifCollect: 0, salesId: 0, //分销员id
fansNumber: '', // 粉丝数
topHeight: 10, hasService: false, isLoading: false, } }, components: { canvasPage }, onLoad(options) { // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
let menuButtonInfo = uni.getMenuButtonBoundingClientRect() this.topHeight = menuButtonInfo.top // #endif
// #ifdef APP
this.topHeight = 50 // #endif
this.isIphone = getApp().globalData.isIphone; if (getApp().globalData.shopShareItem) { const item = getApp().globalData.shopShareItem this.id = parseInt(item.storeId) this.salesId = parseInt(item.salesId) getApp().globalData.shopShareItem = undefined } else { this.id = parseInt(options.storeId) this.salesId = parseInt(options.salesId) } this.bindSalesCustomer(this.salesId, this.id) this.canvasGet() this.getTemplate() this.getFindProductGroupList() this.getShopBanner() this.getShopInfo() this.addBusinessBuyerUser(); // #ifdef MP-WEIXIN
this.getServiceUrl(this.id) // #endif
}, onReachBottom() { if (this.loadingType == 1) { uni.stopPullDownRefresh() } else { this.page = this.page + 1 this.getTemplate() } }, methods: { // 读取画布
canvasGet() { var _this = this var apiUrl = api.getCanvas + '?terminal=' + this.terminal + '&type=' + 3 if (this.id) { apiUrl += '&shopId=' + this.id } let params = { url: apiUrl, method: 'GET' } // uni.showLoading({
// mask: true,
// title: '加载中...',
// })
NET.request(apiUrl, {}, 'GET').then(res => { if (JSON.stringify(res.data) !== '{}') { var componentsData = JSON.parse(res.data.json) this.componentsData = componentsData } uni.hideLoading() }).catch(res => { uni.hideLoading() }) }, getShopBanner() { NET.request(API.GetShopBanner, { shopId: this.id }, 'GET').then(res => { this.bannerInfo = res.data }).catch(res => {
}) }, getTemplate() { let data = { shopId: this.id, ifNew: this.ifNew, type: this.type, volume: this.volume, page: this.page, pageSize: this.pageSize, groupId: this.classifyId } // uni.showLoading({
// title: '加载中...',
// mask: true
// });
NET.request(API.GetStore, data, 'GET').then(res => { uni.hideLoading() if (res.data.page.list.length == 0) { this.loadingType = 1 this.page = this.page } this.storeInfo = res.data; this.total = res.data.page.total this.storeInfolist = this.storeInfolist.concat(res.data.page.list) console.log("this.storeInfolist--->", this.storeInfolist) }).catch(res => { uni.hideLoading() uni.showToast({ title: res.data.message, duration: 2000, icon: 'none' }); }) }, // 查询店铺分组数据
getFindProductGroupList() { NET.request(API.GetStoreShopClassify, { shopId: this.id }, 'GET').then(res => { this.classList = res.data.filter(item => JSON.stringify(item) !== "{}") }).catch(res => {}) }, goodsItemTap(productId, skuId) { uni.navigateTo({ url: '../goodsModule/goodsDetails?shopId=' + this.id + '&productId=' + productId + '&skuId=' + skuId }) }, navIndexTap(index) { this.storeInfolist = [] this.navIndex = index, this.isShowGoods = index == 0 if (index == 0) { this.page = 1 this.classifyId = '' this.getTemplate() } else { this.isShowGoods = false } }, back() { uni.navigateBack() }, sortTap(index) { this.page = 1 this.storeInfolist = [] if (index == 1) { this.ifNew = this.ifNew != 0 ? 0 : 1, this.type = 1, this.volume = 1, this.sortIndex = index } else if (index == 2) { this.ifNew = 0, this.type = this.type != 1 ? 1 : 2, this.volume = 1, this.sortIndex = index } else if (index == 3) { this.ifNew = 0, this.type = 1, this.volume = this.volume != 1 ? 1 : 2, this.sortIndex = index } this.getTemplate() }, classItemTap(classifyId) { this.page = 1 this.classifyId = classifyId this.isShowGoods = true this.storeInfolist = [] this.getTemplate() }, // 栏目切换
tabChange(key) { this.activeTab = key if (key !== 'index') { this.page = 1 this.classifyId = key === 'all' ? '' : key this.storeInfolist = [] this.getTemplate() } }, //判断是否已申请成为该店铺的分销员
applyForRecruit() { const res = uni.getStorageSync('storage_key'); const token = res.token if (token) { let item = {} if (uni.getStorageSync('storage_key')) { item = uni.getStorageSync('storage_key'); } if (JSON.stringify(item) == '{}') {
} else { NET.request(API.HasApply, { shopId: this.id }, 'GET').then(res => { if (res.data.distributorId == undefined) { uni.navigateTo({ url: '../distributionModule/recruit?shopId=' + this.id }) } else if (res.data.state === 1) { uni.showToast({ title: "您已申请成为该店铺的分销员", icon: "none" }) } else { uni.showToast({ title: "您的申请正在审核中，请稍后查看", icon: "none" }) } }).catch(res => {}) } } else { uni.showToast({ title: '请先登录', icon: "none" }) uni.navigateTo({ url: '/pages_category_page2/userModule/login' }) }
}, bindSalesCustomer(salesId, storeId) { if (salesId && storeId) { //如果已登录，静默绑定客户关系，否则跳转到登录页面
if (uni.getStorageSync('storage_key')) { NET.request(API.BindSalesCustomer, { shopId: storeId, distributorId: salesId }, 'POST').then(res => { uni.showToast({ title: "绑定成功", icon: "none" }) }).catch(res => { uni.showToast({ title: res.data.msg, icon: "none" }) }) } else { uni.setStorageSync('salesId', salesId) uni.setStorageSync("shopId", storeId) uni.navigateTo({ url: '../../pages_category_page2/userModule/login' }) } } }, // 获取店铺信息
getShopInfo() { var _this = this; NET.request(API.getShopIndex + `?shopId=${this.id}`, null, 'GET').then(function(res) { _this.ifCollect = res.data.ifCollect; _this.collectId = res.data.collectId; _this.fansNumber = res.data.fansNumber; }).catch(function(res) { uni.showToast({ title: _this.$t('common.fail'), icon: "none" });
}); }, //收藏店辅
collectToggle() { const res = uni.getStorageSync('storage_key'); const token = res.token if (token) { if (this.ifCollect == 0) { this.collectShop(); } else { this.cancelCollectShop(); } } else { uni.showToast({ title: '请先登录', icon: "none" }) uni.navigateTo({ url: '/pages_category_page2/userModule/login' }) } }, //收藏
collectShop() { var _this = this; NET.request(API.collect, { shopId: parseInt(this.id) }, 'POST').then(function(res) { _this.ifCollect = 1; uni.showToast({ title: _this.$t('common.collectsuccess'), icon: "success" });
}).catch(function(res) { uni.showToast({ title: _this.$t('common.fail'), icon: "none" });
}); }, //取消收藏
cancelCollectShop() { var _this2 = this; NET.request(API.cancelCollect, { ids: [this.collectId] }, 'POST').then(function(res) { _this2.ifCollect = 0; uni.showToast({ title: _this2.$t('common.cancelcollectsuccess'), icon: "success" });
}).catch(function(res) { uni.showToast({ title: _this2.$t('common.fail'), icon: "none" });
}); }, addBusinessBuyerUser() { NET.request(API.AddBusinessBuyerUser, { shopId: this.id }, "POST") }, // 查询产品
searchPro(key, type) { uni.navigateTo({ url: `/pages_category_page1/search/index/index` }) }, // 获取客服url
getServiceUrl(id) { if (this.isLoading || !id || id === 'null') { return } const shopids = uni.getStorageSync('service_shopids') || [] const corpIds = uni.getStorageSync('service_corpIds') || [] const urls = uni.getStorageSync('service_urls') || []
const index = shopids.indexOf(id) if (index === -1) { this.isLoading = true NET.request(API.CustomerService, { id }, 'get').then(res => { if (res.code === '' && res.data.corpId && res.data.url) { shopids.push(this.shopId) corpIds.push(res.data.corpId) urls.push(res.data.url)
uni.setStorageSync('service_shopids', shopids); uni.setStorageSync('service_corpIds', corpIds); uni.setStorageSync('service_urls', urls);
this.corpId = res.data.corpId this.serviceURL = res.data.url if (this.serviceURL) { this.hasService = true } } this.isLoading = false }).catch(err => { this.isLoading = false }) } else { this.corpId = corpIds[index] this.serviceURL = urls[index] if (this.serviceURL) { this.hasService = true } } }, // 跳转客服
flyToService() { if (!this.serviceURL || !this.corpId) { this.hasService = false return } const extInfo = { // 客服信息
url: this.serviceURL // 客服链接
} // #ifdef MP-WEIXIN
wx.openCustomerServiceChat({ extInfo, corpId: this.corpId // 企业ID
}) // #endif
},
//state：1收藏，0取消收藏
onCollect(item, state){ let _this = this; if (state === 1){ NET.request(API.collect, { productId: parseInt(item.productId) }, 'POST').then(res => { // item.ifCollect = 1;
_this.$set(item, 'ifCollect', 1); uni.showToast({ title: this.$t('common.collectsuccess'), icon: "success" }) }) }else { NET.request(API.cancelCollect, { ids: [item.productId] }, 'PUT').then(res => { // item.ifCollect = 0;
_this.$set(item, 'ifCollect', 0); uni.showToast({ title: this.$t('common.cancelcollectsuccess'), icon: "success" }) }) } } } }</script><style lang='scss' scoped>
.shop-top { background: #252744; display: flex; align-items: center; width: 100%; position: fixed; z-index: 99; padding-bottom: 20rpx; }
// #ifdef APP-PLUS
.shop-top { padding-top: 80rpx; }
// #endif
.stopInfo { padding: 125rpx 20rpx 20rpx 20rpx; //background: red;
}
// 店铺头部
.shop-top-content { padding: 10rpx 28rpx; background: #FFFFFF; border-radius: 30rpx; box-shadow: 0rpx 15rpx 30rpx 0rpx #F2F2F2; display: flex; align-items: center;
.contentLeft { flex: 9; display: flex;
.photo-img { width: 102rpx; height: 102rpx; border-radius: 10rpx; margin-right: 10rpx; }
.shop-info-top { border-radius: 20rpx 20rpx 0 0; position: relative; display: flex; align-items: center;
.shop-name { display: flex; flex-direction: column; justify-content: space-between; font-size: 30rpx; font-weight: 400; color: #252744;
.shop-num { font-size: 24rpx; color: #252744; opacity: 0.7; margin-top: 15rpx; } }
.btns { width: 100rpx; height: 95%; font-size: 24rpx; text-align: center;
image { max-width: 56rpx; max-height: 56rpx; margin: auto; } } } }
.contentRight { flex: 3;
.favorites-box { display: flex; width: 160rpx; height: 60rpx; background: #F54639; opacity: 1; border-radius: 46rpx; align-items: center; justify-content: center;
.store-icon { width: 32rpx; height: 32rpx; margin-right: 8rpx; }
.text { font-size: 24rpx; color: #fff; } } } }
.rightArrow { image { width: 14rpx; height: 24rpx; } }
.distributorBox { background: #FFFFFF; border-radius: 30rpx; box-shadow: 0rpx 15rpx 30rpx 0rpx #F2F2F2; margin-top: 20rpx; height: 80rpx; padding: 0 20rpx; display: flex; justify-items: center; color: #333333; font-size: 28rpx; }
// 首页内容
.shopContent { width: 100%; /* background: #fff; */ border-radius: 20rpx 20rpx 0 0;
.tabs-nav-warp { padding: 0 20px;
.tabs-nav { margin-top: 20upx;
.ul { white-space: nowrap;
.li { display: inline-block; margin-left: 60upx; font-size: 28upx; color: #90919C; position: relative; padding-bottom: 18upx;
&:first-child { margin-left: 0; }
&.on { &:after { content: ''; width: 100%; height: 6rpx; border-radius: 3rpx; background: #252744; position: absolute; left: 0; bottom: 4rpx; }
font-weight:bold; color: #252744; } } } } }
.shop-banner-box { background: #f7f7f7; padding: 20rpx 30rpx; box-sizing: border-box; }
.shop-list-content { width: 100%;
/* background: #fff; */ .navBox { padding: 0 20rpx;
.shop-list-nav { display: flex; flex-direction: row; align-items: center; height: 80rpx; line-height: 76rpx; background: #fff; border-radius: 30rpx; box-shadow: 0rpx 15rpx 30rpx 0rpx #F2F2F2; } }
.shop-list-box { width: 100%; //background: #f7f7f7;
padding: 16rpx 20rpx 0; box-sizing: border-box; display: flex; flex-wrap: wrap;
.item { width: 48%; margin: 12rpx 0; border-radius: 10rpx; display: flex; flex-direction: column; position: relative;
.collect-img { width: 56rpx; height: 56rpx; position: absolute; right: 12rpx; top: 15rpx; }
.cart-add-img { width: 68rpx; height: 68rpx; position: absolute; right: 10rpx; bottom: 10rpx; } }
.item:nth-of-type(2n) { margin-left: 4%; margin-right: 0; } } } }
.shop-banner-img { width: 100%; height: 280rpx; border-radius: 20rpx; }
.nav-item { flex: 1; font-size: 30rpx; color: #666; display: flex; flex-direction: column; align-items: center; height: 80rpx; line-height: 76rpx; }
.nav-item.active { color: #ff7911; }
.nav-item .line { display: inline-block; width: 80rpx; height: 4rpx; background: #fff; border-radius: 2rpx; }
.nav-item.active .line { background: linear-gradient(0deg, rgba(255, 162, 0, 1), rgba(255, 121, 17, 1)); }
.nav-item.padd-l { padding-left: 20%; box-sizing: border-box; }
.nav-item.padd-r { padding-right: 20%; box-sizing: border-box; }
.nav-item-sort { flex: 1; font-size: 24rpx; color: #90919C; display: flex; flex-direction: row; align-items: center; justify-content: center; height: 80rpx; line-height: 80rpx;
.r { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-left: 5rpx; }
.r .arrow-img { width: 20rpx; height: 13rpx; //padding: 1rpx;
margin-top: 4rpx; margin-left: 3rpx; box-sizing: border-box; } }
.product-img { width: 100%; height: 330rpx; }
.product-bottom-box { padding: 20rpx; box-sizing: border-box; background: #FFFFFF; }
.product-name { display: block; font-size: 28rpx; color: #252744; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-num { font-size: 24rpx; margin-top: 15rpx; border: 2rpx solid #E4E5E6; padding: 10rpx; display: inline-block; }
.product-price-box { width: 100%; display: flex; flex-direction: row; align-items: center; margin-top: 30rpx;
.iconImg { width: 58rpx; height: 36rpx; margin-right: 10rpx; }
.discountIcon { width: 100rpx; } }
.product-price-box .price-through { text-decoration: line-through; font-size: 24rpx; color: #90919C;; }
.shop-sort-list { margin-top: 20rpx; width: 100%; display: flex; flex-direction: column; }
.shop-sort-list .item { display: flex; flex-direction: column; background: #fff; padding: 0 30rpx 20rpx; box-sizing: border-box; margin-bottom: 20rpx; }
.shop-sort-list .item .sort-title { font-size: 30rpx; color: #333; padding: 30rpx 0; }
.sort-single-box { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }
.sort-single-box .single { width: 340rpx; height: 78rpx; margin: 0 5rpx 10rpx 0; background: #fff; border: 1px solid #E5E5E5; border-radius: 4rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26rpx; color: #333; box-sizing: border-box; }
.sort-single-box .single:nth-of-type(2n) { margin-left: 5rpx; margin-right: 0; }
.back { width: 20rpx; height: 34rpx; padding: 0 30rpx; }
.empty-container { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.empty-container image { width: 200rpx; height: 200rpx; margin-top: 150rpx; }
.empty-container text { font-size: 28rpx; color: #999; margin-top: 30rpx; display: block; width: 300rpx; text-align: center; }
.active { color: #252744; font-weight: bold; }
.distributor { font-size: 26upx; border-radius: 25upx; display: flex; align-items: center;
.item-btn-icon { width: 32rpx; height: 32rpx; margin-right: 10rpx; } }
.search-btn { height: 64rpx; border-radius: 4rpx; display: flex; flex-direction: row; align-items: center; margin-right: 30rpx; width: 428rpx; border-radius: 40rpx; background: rgba(255, 255, 255, 0.1);
.search-icon { width: 32rpx; height: 32rpx; margin-left: 20rpx; }
.search-word { font-size: 24rpx; font-weight: 400; color: #90919C; margin-left: 10rpx; } }
// #ifdef H5 || APP-PLUS
.search-btn { width: 100%; }
// #endif
// #ifdef MP-ALIPAY
.back { width: 25rpx; height: 25rpx; margin-top: 15rpx; padding: 10rpx; display: none; }
.shop-top { margin-top: 0 !important; }
.shop-top-content { padding-top: 80rpx; }
.nav-item-sort .r .arrow-img { width: 16rpx; height: 16rpx; padding: 4rpx; }
.tabs-nav { margin-top: 20upx;
.ul { .li { &:first-child { margin-left: 36upx; } } } }
// #endif
</style>
<style>page { background: #FAFAFA;}</style>
|
