main
liudan
8 months ago
parent
17b9669120
commit
ffb868ce05
File diff suppressed because one or more lines are too long
@ -0,0 +1,877 @@ |
||||
<template> |
||||
<view :style="viewColor"> |
||||
|
||||
<view class='productList'> |
||||
|
||||
|
||||
<!-- 商品 --> |
||||
<block v-if="tabIndex == 1"> |
||||
<view class='list acea-row row-between-wrapper on' v-if="!is_switch" :style="{ marginTop: mTop }"> |
||||
<view class='item on' v-for="(item,index) in productList" :key="index" |
||||
@click="godDetail(item)"> |
||||
<view class='pictrue on'> |
||||
<image :src='item.image' class="on"></image> |
||||
<view v-if="item.stock == 0" class="sell_out">已售罄</view> |
||||
<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }" class="border-picture"></view> |
||||
</view> |
||||
<view class='text on acea-row row-between-wrapper'> |
||||
<view class='name'> |
||||
<text class="name_text line2">{{item.store_name}}</text> |
||||
</view> |
||||
<view class="item_bot"> |
||||
<view class="acea-row row-bottom"> |
||||
<view class='money on'> |
||||
￥<text class='num'>{{item.price}}</text> |
||||
</view> |
||||
<view v-if="item.show_svip_info.show_svip_price && item.svip_price" class="acea-row row-middle"> |
||||
<text class='vip-money'>￥{{item.svip_price}}</text> |
||||
<view class="vipImg"> |
||||
<image src="/static/images/svip.png"></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="item_tags acea-row"> |
||||
<text v-if="item.merchant.type_name && item.product_type == 0" class="font-bg-red bt-color line1">{{item.merchant.type_name}}</text> |
||||
<text v-else-if="item.merchant.is_trader && item.product_type == 0" class="font-bg-red bt-color line1">自营</text> |
||||
<text v-if="item.product_type != 0" :class="'font_bg-red bt-color type'+item.product_type">{{item.product_type == 1 ? "秒杀" : item.product_type == 2 ? "预售" : item.product_type == 3 ? "助力" : item.product_type == 4 ? "拼团" : ""}}</text> |
||||
<text class="tags_item ticket" v-if="item.issetCoupon">领券</text> |
||||
<text class="tags_item delivery" v-if="item.delivery_free == 1">包邮</text> |
||||
<!-- <view class="ticket-big" v-if="!is_switch && item.issetCoupon">领券满{{item.issetCoupon.use_min_price}}减{{item.issetCoupon.coupon_price}}</view> --> |
||||
</view> |
||||
<view class="score">{{item.rate}}评分 {{item.reply_count}}条评论</view> |
||||
<!-- && hide_mer_status==0 --> |
||||
<view class="company" v-if="item.merchant"> |
||||
<text class='line1'>{{item.merchant.mer_name}}</text> |
||||
|
||||
<view class="flex" v-if="item.merchant" @click.stop="goStore(item.merchant.mer_id)"> |
||||
进店 |
||||
<text class="iconfont icon-xiangyou"></text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- 返佣 --> |
||||
<block v-if="item.max_extension>0 && (item.product_type == 2 || item.product_type == 0)"> |
||||
<view class="foot-bar on"> |
||||
<text class="iconfont icon-fenxiang" v-if="is_switch==true"></text> |
||||
<text class="line1">最高赚 ¥{{item.max_extension}}</text> |
||||
</view> |
||||
</block> |
||||
</view> |
||||
<view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'> |
||||
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}} |
||||
</view> |
||||
</view> |
||||
<view v-else class="list" :style="{ marginTop: mTop }"> |
||||
<WaterfallsFlow :wfList='productList' :isStore="hide_mer_status" @itemTap="godDetail" :type="1" @goShop="goStore"/> |
||||
<view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'> |
||||
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}} |
||||
</view> |
||||
</view> |
||||
<view class='noCommodity' v-if="productList.length==0 && !loading"> |
||||
<view class='pictrue' style="margin: 0 auto;"> |
||||
<image src='/static/images/noCart.png'></image> |
||||
<text>暂无商品，快去搜索其他商品吧</text> |
||||
</view> |
||||
<!-- <recommend v-if="recommend_switch == 1" :hostProduct="hostProduct" :isLogin="isLogin"></recommend> --> |
||||
</view> |
||||
</block> |
||||
<!-- 店铺 --> |
||||
|
||||
|
||||
</view> |
||||
|
||||
<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> --> |
||||
<!-- #ifndef H5 --> |
||||
<passwordPopup></passwordPopup> |
||||
<!-- #endif --> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import { |
||||
getProductslist, |
||||
|
||||
} from '@/api/store.js'; |
||||
import {initiateAssistApi} from '@/api/activity.js'; |
||||
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue' |
||||
import { configMap } from "@/utils"; |
||||
import { mapGetters } from "vuex"; |
||||
// #ifndef H5 |
||||
import passwordPopup from '@/components/passwordPopup'; |
||||
// #endif |
||||
// import authorize from '@/components/Authorize'; |
||||
import { HTTP_REQUEST_URL } from '@/config/app'; |
||||
import { |
||||
goShopDetail |
||||
} from '@/libs/order.js' |
||||
import { |
||||
getconfig, |
||||
} from '@/api/public.js'; |
||||
const app = getApp(); |
||||
export default { |
||||
components: { |
||||
|
||||
WaterfallsFlow, |
||||
// #ifndef H5 |
||||
passwordPopup, |
||||
// #endif |
||||
// authorize, |
||||
}, |
||||
watch: { |
||||
|
||||
}, |
||||
data() { |
||||
return { |
||||
loadend: false, |
||||
loading: false, |
||||
loadTitle: '加载更多', |
||||
title: '', |
||||
domain: HTTP_REQUEST_URL, |
||||
productList: [], |
||||
is_switch: false, |
||||
where: { |
||||
page: 1, |
||||
limit: 30 |
||||
}, |
||||
|
||||
tabIndex: 1, |
||||
|
||||
activeIndex: 0, |
||||
}; |
||||
}, |
||||
onLoad: function(options) { |
||||
let source = options.source; |
||||
if(source==1){this.$set(this.where,'is_hot',1);uni.setNavigationBarTitle({title: '惠通甄选'});} |
||||
if(source==2){this.$set(this.where,'is_benefit',1);uni.setNavigationBarTitle({title: '惠通优选'});} |
||||
if(source==3){this.$set(this.where,'is_best',1);uni.setNavigationBarTitle({title: '惠通云店'});} |
||||
if(source==4){this.$set(this.where,'is_new',1);uni.setNavigationBarTitle({title: '惠通特供'});} |
||||
|
||||
this.get_product_list(); |
||||
|
||||
}, |
||||
onReady() { |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
|
||||
// 滚动监听 |
||||
onPageScroll() { |
||||
uni.$emit('scroll'); |
||||
}, |
||||
methods: { |
||||
|
||||
onLoadFun: function(e) { |
||||
this.isShowAuth = false |
||||
}, |
||||
// 授权关闭 |
||||
authColse: function(e) { |
||||
this.isShowAuth = e; |
||||
}, |
||||
// 去详情页 |
||||
godDetail(item) { |
||||
goShopDetail(item, this.uid).then(res => { |
||||
if (this.isLogin) { |
||||
initiateAssistApi(item.activity_id).then(res => { |
||||
let id = res.data.product_assist_set_id; |
||||
uni.hideLoading(); |
||||
uni.navigateTo({ |
||||
url: '/pages/activity/assist_detail/index?id=' + id |
||||
}); |
||||
}).catch((err) => { |
||||
uni.showToast({ |
||||
title: err, |
||||
icon: 'none' |
||||
}) |
||||
}); |
||||
} else { |
||||
this.isAuto = true; |
||||
this.isShowAuth = true |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
//查找产品 |
||||
get_product_list: function(isPage) { |
||||
let that = this; |
||||
if (that.loadend) return; |
||||
if (that.loading) return; |
||||
if (isPage === true) that.$set(that, 'productList', []); |
||||
that.loading = true; |
||||
that.loadTitle = ''; |
||||
getProductslist(that.where).then(res => { |
||||
let list = res.data.list; |
||||
let productList = that.$util.SplitArray(list, that.productList); |
||||
let loadend = list.length < that.where.limit; |
||||
that.loadend = loadend; |
||||
that.loading = false; |
||||
that.loadTitle = loadend ? '已全部加载' : '加载更多'; |
||||
that.$set(that, 'productList', productList); |
||||
console.log(that.productList) |
||||
that.$set(that.where, 'page', that.where.page + 1); |
||||
}).catch(err => { |
||||
that.loading = false; |
||||
that.loadTitle = '加载更多'; |
||||
}); |
||||
}, |
||||
|
||||
}, |
||||
onPullDownRefresh() { |
||||
|
||||
}, |
||||
onReachBottom() { |
||||
if (this.tabIndex == 1) { |
||||
if (this.productList.length > 0) { |
||||
this.get_product_list(false); |
||||
} |
||||
} |
||||
}, |
||||
onPullDownRefresh(){ |
||||
setTimeout(()=>{ |
||||
const newList = this.productList.reverse(); |
||||
this.productList = newList; |
||||
uni.stopPullDownRefresh(); |
||||
},500) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.topContent{ |
||||
position: fixed; |
||||
top:0; |
||||
width:100%; |
||||
z-index: 10; |
||||
// position: relative; |
||||
|
||||
} |
||||
.sys-head{ |
||||
background: linear-gradient(-90deg, #89B929, #116636); |
||||
position: relative; |
||||
z-index:2 |
||||
} |
||||
.customTitle{ |
||||
height: 40px; |
||||
background: linear-gradient(-90deg, #89B929, #116636); |
||||
text-align: center; |
||||
font-weight: 400; |
||||
font-size: 36rpx; |
||||
color: #FFFFFF; |
||||
line-height: 40px; |
||||
display: inline-block; |
||||
width: 100%; |
||||
position: relative; |
||||
z-index:2; |
||||
margin:-1px 0; |
||||
/deep/.u-icon{ |
||||
position: absolute; |
||||
left: 24rpx; |
||||
top: 25rpx; |
||||
} |
||||
} |
||||
.b-color { |
||||
background: linear-gradient(-90deg, #89B929, #116636); |
||||
border: 1px solid #116636 !important; |
||||
} |
||||
.productList .search { |
||||
width: 100%; |
||||
padding: 0 20rpx; |
||||
box-sizing: border-box; |
||||
position: fixed; |
||||
height: 126rpx; |
||||
left: 0; |
||||
// top: 0; |
||||
z-index: 9; |
||||
background: linear-gradient(-90deg, #89B929, #116636); |
||||
.icon-dingwei { |
||||
color: #fff; |
||||
font-weight: 0; |
||||
font-size: 40rpx; |
||||
line-height: 86rpx; |
||||
width: 62rpx; |
||||
} |
||||
} |
||||
.productList .search .back { |
||||
display: flex; |
||||
align-items: center; |
||||
width: 40rpx; |
||||
height: 60rpx; |
||||
.iconfont { |
||||
color: #fff; |
||||
font-size: 36rpx; |
||||
} |
||||
} |
||||
.productList .search .input { |
||||
flex: 1; |
||||
height: 70rpx; |
||||
background-color: #fff; |
||||
border-radius: 50rpx; |
||||
padding: 0 20rpx; |
||||
box-sizing: border-box; |
||||
} |
||||
.productList .search .input input { |
||||
flex: 1; |
||||
height: 100%; |
||||
font-size: 26rpx; |
||||
margin-left: 10rpx; |
||||
} |
||||
.productList .search .input .placeholder { |
||||
color: #999; |
||||
} |
||||
.productList .search .input .iconfont { |
||||
font-size: 35rpx; |
||||
color: #555; |
||||
} |
||||
.productList .search .icon-pailie, |
||||
.productList .search .icon-tupianpailie, |
||||
.productList .search .iconempty { |
||||
color: #fff; |
||||
width: 62rpx; |
||||
font-size: 40rpx; |
||||
height: 86rpx; |
||||
line-height: 86rpx; |
||||
} |
||||
.productList .nav-wrapper { |
||||
z-index: 9; |
||||
position: fixed; |
||||
left: 0; |
||||
// top: 0; |
||||
width: 100%; |
||||
margin-top: 124rpx; |
||||
background: linear-gradient(-90deg, #89B929, #116636); |
||||
.tab-bar { |
||||
display: flex; |
||||
align-items: center; |
||||
padding:0 0 30rpx 0; |
||||
.tab-item { |
||||
position: relative; |
||||
flex: 1; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
// padding: 8rpx 0 20rpx; |
||||
color: #fff; |
||||
font-size: 28rpx; |
||||
.flag{ |
||||
position: absolute; |
||||
width: 50rpx; |
||||
height: 8rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 4px; |
||||
bottom: -27rpx; |
||||
} |
||||
|
||||
// &::after { |
||||
// content: ' '; |
||||
// position: absolute; |
||||
// left: 50%; |
||||
// bottom: 18rpx; |
||||
// width: 30rpx; |
||||
// height: 3rpx; |
||||
// background: transparent; |
||||
// transform: translateX(-50%); |
||||
// } |
||||
&.on { |
||||
font-weight: bold; |
||||
// &::after { |
||||
// background: #fff; |
||||
// } |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.productList .nav { |
||||
height: 86rpx; |
||||
color: #454545; |
||||
font-size: 28rpx; |
||||
background-color: #fff; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 0 28rpx; |
||||
} |
||||
.productList .nav .item { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex: 1; |
||||
} |
||||
.t-color { |
||||
color: var(--view-theme); |
||||
} |
||||
.productList .nav .item.t-color { |
||||
font-weight: bold; |
||||
color: #454545; |
||||
} |
||||
.productList .nav .item image { |
||||
width: 15rpx; |
||||
height: 19rpx; |
||||
margin-left: 10rpx; |
||||
} |
||||
.productList .list { |
||||
padding: 0 20rpx; |
||||
// padding-top: 280rpx; |
||||
} |
||||
.productList .list.on { |
||||
// background-color: #fff; |
||||
// border-top: 1px solid #f6f6f6; |
||||
} |
||||
.productList .list .item { |
||||
position: relative; |
||||
width: 345rpx; |
||||
margin-top: 20rpx; |
||||
background-color: #fff; |
||||
border-radius: 20rpx; |
||||
.name{ |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.name_text{ |
||||
// max-width: 420rpx; |
||||
-webkit-line-clamp: 1; |
||||
} |
||||
} |
||||
} |
||||
.productList .list .item.on { |
||||
width: 100%; |
||||
display: flex; |
||||
padding: 30rpx; |
||||
} |
||||
// .productList .list .item .pictrue { |
||||
// position: relative; |
||||
// width: 100%; |
||||
// height: 345rpx; |
||||
// } |
||||
.productList .list .item .pictrue.on { |
||||
width: 200rpx; |
||||
height: 200rpx; |
||||
.sell_out { |
||||
display: flex; |
||||
width: 110rpx; |
||||
height: 110rpx; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 100%; |
||||
background: rgba(0,0,0,.6); |
||||
color: #fff; |
||||
font-size: 24rpx; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
margin: -55rpx 0 0 -55rpx; |
||||
&::before{ |
||||
content: ""; |
||||
display: block; |
||||
width: 100rpx; |
||||
height: 100rpx; |
||||
border-radius: 100%; |
||||
border: 1px dashed #fff; |
||||
position: absolute; |
||||
top: 5rpx; |
||||
left: 5rpx; |
||||
} |
||||
} |
||||
.border-picture { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 16rpx; |
||||
background: center/cover no-repeat; |
||||
} |
||||
} |
||||
.productList .list .item .pictrue image { |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 20rpx 20rpx 0 0; |
||||
} |
||||
.productList .list .item .pictrue image.on { |
||||
border-radius: 16rpx; |
||||
width: 200rpx; |
||||
height: 200rpx; |
||||
} |
||||
.productList .list .item .text { |
||||
padding: 20rpx 17rpx 26rpx 17rpx; |
||||
font-size: 30rpx; |
||||
color: #222; |
||||
} |
||||
.productList .list .item .text.on { |
||||
width: 508rpx; |
||||
padding: 0 0 0 22rpx; |
||||
justify-content: space-between; |
||||
align-items: normal; |
||||
.font-bg-red{ |
||||
max-width: 120rpx; |
||||
} |
||||
.bt-color { |
||||
background-color: var(--view-theme); |
||||
border: 1px solid var(--view-theme); |
||||
&.type2{ |
||||
background-color: #FD6523; |
||||
border: 1px solid #FD6523; |
||||
} |
||||
} |
||||
.name,.item_bot{ |
||||
width: 100%; |
||||
color: #333; |
||||
font-size: 32rpx; |
||||
} |
||||
.vip-money { |
||||
color: #282828; |
||||
font-size: 22rpx; |
||||
margin-left: 6rpx; |
||||
font-weight: bold; |
||||
} |
||||
.vipImg { |
||||
width: 65rpx; |
||||
height: 28rpx; |
||||
margin-left: 4rpx; |
||||
image { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: block; |
||||
} |
||||
} |
||||
.item_bot{ |
||||
position: relative; |
||||
&::after{ |
||||
content: ''; |
||||
display: block; |
||||
width: 100%; |
||||
border-bottom: 1px solid #f6f6f6; |
||||
position: absolute; |
||||
right: 20rpx; |
||||
bottom: -30rpx; |
||||
} |
||||
|
||||
} |
||||
} |
||||
.productList .list .item .text .money { |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 26rpx; |
||||
font-weight: bold; |
||||
color: #E53623; |
||||
} |
||||
.productList .list .item .text .money .num { |
||||
font-size: 28rpx; |
||||
} |
||||
.productList .distance { |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 24rpx; |
||||
color: #999999; |
||||
.icon-xiangyou { |
||||
font-size: 24rpx; |
||||
line-height: 24rpx; |
||||
} |
||||
} |
||||
.productList .list .item .text .money .ticket { |
||||
margin-left: 10rpx; |
||||
padding: 0 5rpx; |
||||
font-weight: initial; |
||||
font-size: 20rpx; |
||||
border: 1px solid var(--view-theme); |
||||
border-radius: 4rpx; |
||||
} |
||||
.productList .list .item .text .money .ticket-big { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
min-width: 163rpx; |
||||
height: 28rpx; |
||||
margin-left: 10rpx; |
||||
background-image: url(~static/images/yh.png); |
||||
background-size: 100% 100%; |
||||
font-size: 20rpx; |
||||
font-weight: normal; |
||||
padding: 0 10rpx; |
||||
} |
||||
.productList .list .item .item_tags{ |
||||
margin-top: 8rpx; |
||||
} |
||||
.productList .list .item .item_tags .tags_item { |
||||
display: inline-block; |
||||
font-size: 20rpx; |
||||
text-align: center; |
||||
border-radius: 5rpx; |
||||
padding: 0 4rpx; |
||||
line-height: 28rpx; |
||||
margin-right: 8rpx; |
||||
} |
||||
.productList .list .item .item_tags .tags_item.ticket{ |
||||
color: var(--view-theme); |
||||
border: 1px solid var(--view-theme); |
||||
} |
||||
.item_tags .tags_item.delivery{ |
||||
color: #FF9000; |
||||
border: 1px solid #FF9000; |
||||
} |
||||
.productList .list .item .text .score { |
||||
margin-top: 10rpx; |
||||
|
||||
font-size: 24rpx; |
||||
color: #C0C5CA; |
||||
} |
||||
.productList .list .item .text .company { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
margin-top: 10rpx; |
||||
font-size: 24rpx; |
||||
color: #C0C5CA; |
||||
// width: 300rpx; |
||||
.name { |
||||
display: inline-block; |
||||
width: auto; |
||||
max-width: 200rpx; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
|
||||
} |
||||
.flex { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-left: 10rpx; |
||||
color: #333; |
||||
font-size:24rpx; |
||||
width: 100rpx; |
||||
.iconfont { |
||||
font-size: 16rpx; |
||||
margin-top: 4rpx; |
||||
} |
||||
} |
||||
} |
||||
.productList .list .item .foot-bar { |
||||
width: 100%; |
||||
height: 52rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
background-image: linear-gradient(-90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%); |
||||
border-radius: 0px 0px 16rpx 16rpx; |
||||
color: #fff; |
||||
font-size: 24rpx; |
||||
.icon-fenxiang { |
||||
font-size: 24rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
&.on { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 30rpx; |
||||
width: 200rpx; |
||||
height: 44rpx; |
||||
border-radius: 22rpx; |
||||
} |
||||
} |
||||
.noCommodity { |
||||
background-color: #fff; |
||||
.pictrue { |
||||
height: 420rpx; |
||||
color: $uni-nothing-text; |
||||
image { |
||||
width: 414rpx; |
||||
height: 336rpx; |
||||
} |
||||
} |
||||
} |
||||
.no-shop { |
||||
// margin-top: 240rpx; |
||||
background-color: #fff; |
||||
padding-bottom: calc(100% - 109rpx); |
||||
.pictrue { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
color: $uni-nothing-text; |
||||
image { |
||||
width: 414rpx; |
||||
height: 336rpx; |
||||
} |
||||
} |
||||
} |
||||
.spin { |
||||
display: block; |
||||
transform: rotate(180deg); |
||||
font-size: 36rpx; |
||||
} |
||||
.icon-xiala1 { |
||||
margin-top: 6rpx; |
||||
} |
||||
.icon-shaixuan { |
||||
font-size: 30rpx; |
||||
margin-left: 10rpx; |
||||
} |
||||
.down-wrapper { |
||||
.bg { |
||||
z-index: 8; |
||||
position: fixed; |
||||
left: 0; |
||||
top: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
background: rgba(0, 0, 0, .5); |
||||
} |
||||
.down-box { |
||||
z-index: 8; |
||||
position: fixed; |
||||
left: 0; |
||||
top: 238rpx; |
||||
width: 100%; |
||||
padding: 0 40rpx 28rpx 74rpx; |
||||
background-color: #F8F8F8; |
||||
border-radius: 0 0 24rpx 24rpx; |
||||
.down-item { |
||||
margin-top: 28rpx; |
||||
font-size: 24rpx; |
||||
color: #454545; |
||||
&.on { |
||||
color: var(--view-theme); |
||||
} |
||||
.iconfont{ |
||||
float: right; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.store-wrapper { |
||||
// margin-top: 240rpx; |
||||
padding-top: 300rpx; |
||||
border-top: 1px solid #F6F6F6; |
||||
.star-box { |
||||
display: flex; |
||||
align-items: center; |
||||
.line { |
||||
width: 2rpx; |
||||
height: 20rpx; |
||||
background: #BFBFBF; |
||||
margin: 0 12rpx; |
||||
} |
||||
.star { |
||||
position: relative; |
||||
width: 111rpx; |
||||
height: 19rpx; |
||||
background: url(~pages/columnGoods/images/star.png); |
||||
background-size: 111rpx 19rpx; |
||||
} |
||||
.star-active { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
width: 111rpx; |
||||
height: 19rpx; |
||||
overflow: hidden; |
||||
background: url(~pages/columnGoods/images/star_active.png); |
||||
background-size: 111rpx 19rpx; |
||||
} |
||||
.num { |
||||
color: #E53623; |
||||
font-size: 28rpx; |
||||
margin-left: 13rpx; |
||||
} |
||||
} |
||||
.store-item { |
||||
margin-bottom: 20rpx; |
||||
padding: 40rpx 20rpx; |
||||
background-color: #fff; |
||||
.head { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.left-wrapper { |
||||
display: flex; |
||||
align-items: center; |
||||
.logo { |
||||
width: 111rpx; |
||||
height: 111rpx; |
||||
image { |
||||
width: 111rpx; |
||||
height: 111rpx; |
||||
border-radius: 6rpx; |
||||
} |
||||
} |
||||
.con-box { |
||||
margin-left: 20rpx; |
||||
.font-bg-red { |
||||
width: max-content; |
||||
white-space: nowrap; |
||||
margin-left: 20rpx; |
||||
font-size: 18rpx; |
||||
padding: 2rpx 10rpx; |
||||
color: #FFFFFF; |
||||
background-color: #E93323; |
||||
border-radius: 13rpx; |
||||
} |
||||
.name { |
||||
font-size: 30rpx; |
||||
color: #333; |
||||
font-weight: bold; |
||||
margin-bottom: 19rpx; |
||||
justify-content: normal; |
||||
.store-margin{ |
||||
width: 28rpx; |
||||
height: 30rpx; |
||||
margin-left: 10rpx; |
||||
} |
||||
.mer_name{ |
||||
max-width: 360rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.link { |
||||
|
||||
width: 110rpx; |
||||
height: 60rpx; |
||||
background: linear-gradient(-90deg, #89B929, #116636); |
||||
border-radius: 30px; |
||||
|
||||
font-family: Alibaba PuHuiTi; |
||||
font-weight: 400; |
||||
font-size: 22rpx; |
||||
color: #FFFFFF; |
||||
line-height: 60rpx; |
||||
text-align: center; |
||||
} |
||||
} |
||||
.pic-wrapper { |
||||
display: flex; |
||||
margin-top: 30rpx; |
||||
.pic-item { |
||||
position: relative; |
||||
width: 226rpx; |
||||
height: 226rpx; |
||||
margin-right: 16rpx; |
||||
image { |
||||
width: 226rpx; |
||||
height: 226rpx; |
||||
border-radius: 16rpx; |
||||
} |
||||
.price { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
height: 36rpx; |
||||
padding: 0 10rpx; |
||||
line-height: 36rpx; |
||||
text-align: center; |
||||
background: rgba(0, 0, 0, .5); |
||||
border-radius: 16rpx 2rpx 16rpx 2rpx; |
||||
color: #fff; |
||||
font-size: 24rpx; |
||||
text { |
||||
font-size: 18rpx; |
||||
} |
||||
} |
||||
&:nth-child(3n) { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 292 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 897 B |
|
After Width: | Height: | Size: 902 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 912 B |
Loading…
Reference in new issue