You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1143 lines
25 KiB
1143 lines
25 KiB
<template>
|
|
<!-- 拼团单一商家 -->
|
|
<view class="page1">
|
|
<view class="title">
|
|
<view class="title-sreach">
|
|
<view class="back-btn" @tap="back" :style="{'padding-top': menuButtonInfo.top +'px'}">
|
|
<uni-icons type="left" size="28" color="#fff"></uni-icons>
|
|
</view>
|
|
<view class="title-search" :style="{'margin-top': menuButtonInfo.top +'px'}">
|
|
<uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons>
|
|
<input type="text" placeholder="搜索" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="pintuan">
|
|
<view class="shop-top">
|
|
<view class="shop-img">
|
|
<img :src="shopItem.shopIcon" alt="">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png"
|
|
alt=""
|
|
style="width:30rpx;height:30rpx;position: absolute;top: 0;left: 0;background-size: 100%;" />
|
|
</view>
|
|
<view class="shop-content" @tap="goDetail('shopDetail')">
|
|
<view class="shop-name">
|
|
{{shopItem.shopName}}
|
|
</view>
|
|
<view class="shop-content-center">
|
|
<view class="shop-rate">
|
|
<view class="shop-rate-num">{{shopItem.shopScore}}</view>
|
|
<uni-rate :disabled="true" size="20" disabledColor="rgba(255, 184, 84, 1)"
|
|
:value="shopItem.shopScore" />
|
|
</view>
|
|
<view class="shop-tag">
|
|
<text
|
|
style="padding: 4rpx 10rpx;background: rgba(223, 255, 176, 1);color: #777;border-radius: 6rpx;">
|
|
{{shopItem.shopTypeTitle}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="shop-content-bottom">
|
|
<view class="shop-deal" @tap.stop="goDetail('shopEvaluate')" style="color: #777;">
|
|
店铺评价<uni-icons type="right" size="12"></uni-icons>
|
|
</view>
|
|
<view class="shop-deal1">
|
|
销量 <text> {{shopItem.saleCount != null ? shopItem.saleCount : 0}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="shop-bottom">
|
|
公告：{{shopItem.remark}}
|
|
</view>
|
|
</view>
|
|
<view class="pintuan" style="padding: 0;margin-top:20rpx;display: flex;">
|
|
<view class="pintuan-left">
|
|
<view class="pintuan-left-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="pintuan-left-box">
|
|
<view class="pintuan-left-name">
|
|
无骨双拼|招牌炸鸡套餐
|
|
</view>
|
|
<view class="pintuan-left-price">
|
|
拼团<text style="color: red;">￥59.90</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="pintuan-right">
|
|
<view class="pintuan-right-img">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
|
|
alt="" />
|
|
<view class="weipincheng">+</view>
|
|
</view>
|
|
<view class="pintuan-right-cha">
|
|
差<text style="color: red;">1人</text>拼成
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-list">
|
|
<view class="menu-list">
|
|
<view class="menu1" @tap="checkTab(index)" v-for="(item,index) in menuList" :key="index" :style="{'font-size':item.checked?'40rpx':'30rpx','color':item.checked?'rgba(0, 35, 28, 1)':'#777','width':item.checked?'90px':'70px'}">
|
|
<view style="width: 90px;">{{item.categoryName}}</view>
|
|
<img v-if="item.checked" class="checked-img" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt="" />
|
|
</view>
|
|
</view>
|
|
<view class="goods-member" v-for="(item,index) in productItem" :key="index" @tap="goDetail('product',item)">
|
|
<view class="goods-top">
|
|
<view class="goods-img">
|
|
<img :src="item.productPicture" alt="" style="border-radius: 10px;">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png"
|
|
alt=""
|
|
style="width:30rpx;height:30rpx;position: absolute;top: 0;left: 0;background-size: 100%;" />
|
|
</view>
|
|
<view class="goods-content" @tap="goDetail('goodsDetail')">
|
|
<view class="goods-name">
|
|
{{item.productName}}
|
|
</view>
|
|
<view class="goods-content-center">
|
|
<view class="goods-deal1">
|
|
月售 <text> 100+</text>
|
|
</view>
|
|
<view class="goods-tag">
|
|
<view class="pintuan-right-img">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
|
|
alt="" />
|
|
<view class="weipincheng">+</view>
|
|
</view>
|
|
<view class="pintuan-right-cha">
|
|
差<text style="color: red;">1人</text>拼成
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="shop-tag1">
|
|
<text
|
|
style="padding: 4rpx 10rpx;background: rgba(223, 255, 176, 1);color: #777;border-radius: 6rpx;">
|
|
{{item.attributeListPrice | sliceMsg1}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-bottom">
|
|
<view class="goods-btn" @tap="openPopup('xiadan','dandu',item)"
|
|
style="background: rgba(166, 255, 234, 0.3);margin-right: 6%;border: 1px solid rgba(166, 255, 234, 0.5);">
|
|
直接购买¥{{item.attributeListPrice | sliceMsg}}
|
|
</view>
|
|
<view class="goods-btn" @tap="openPopup('xiadan','pintuan',item)">
|
|
拼团购买¥{{item.productGroupBuyPrices | slicePrice}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;height: 160rpx;"></view>
|
|
<view class="bottom">
|
|
<view class="bottom-left">
|
|
<view style="position: relative;width: 60rpx;height: 80rpx;margin-top: 20rpx;" @tap="openPopup('car','','')">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/60db52398a65459e9541881c926986a4.png" alt="" />
|
|
<view class="bottom-dot">1</view>
|
|
</view>
|
|
<view class="bottom-price">￥18.00</view>
|
|
</view>
|
|
<view class="bottom-right">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d93d893296ed46ea99cfd0e8e2835eaa.png" alt="" />
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 购物车弹窗 -->
|
|
<uni-popup ref="carPopup" background-color="#fff">
|
|
<view class="car-content">
|
|
<view class="car-close" @tap="$refs.carPopup.close()">
|
|
<uni-icons type="close" size="30" color="#fff"></uni-icons>
|
|
</view>
|
|
<view class="car-title">
|
|
已加购商品（3）
|
|
</view>
|
|
<view class="goods-top" style="padding: 0;">
|
|
<view class="goods-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="" style="border-radius: 10px;">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png"
|
|
alt=""
|
|
style="width:30rpx;height:30rpx;position: absolute;top: 0;left: 0;background-size: 100%;" />
|
|
</view>
|
|
<view class="goods-content">
|
|
<view class="goods-name">
|
|
牛仔农庄(医专店)
|
|
</view>
|
|
<view class="goods-content-center">
|
|
<view class="goods-deal1">
|
|
月售 <text> 100+</text>
|
|
</view>
|
|
</view>
|
|
<view class="goods-content-bottom">
|
|
<view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;flex: 1;">
|
|
￥90.00
|
|
</view>
|
|
<view class="pintuan-left-price">
|
|
拼团<text style="color: red;">￥59.90</text>
|
|
</view>
|
|
<view class="goods-num">
|
|
<view class="num-plus" style="background: #999;color: #fff;">
|
|
-
|
|
</view>
|
|
<view class="num">
|
|
1
|
|
</view>
|
|
<view class="num-plus">
|
|
+
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;height: 160rpx;"></view>
|
|
<view class="bottom" style="padding-bottom: 10px;">
|
|
<view class="bottom-left">
|
|
<view style="width: 60rpx;height: 80rpx;margin-top: 10rpx;" @tap="openPopup('car','','')">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/60db52398a65459e9541881c926986a4.png" alt="" />
|
|
</view>
|
|
<view class="bottom-price" style="line-height: 24px;">
|
|
<view>￥18.00</view>
|
|
<view style="font-size: 12px;color: #777;">打包费￥1</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom-right">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d93d893296ed46ea99cfd0e8e2835eaa.png" alt="" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<!-- 拼团和选规格弹窗 -->
|
|
<uni-popup ref="pintuanPopup" background-color="#fff">
|
|
<view class="car-content">
|
|
<view class="car-close" @tap="$refs.carPopup.close()">
|
|
<uni-icons type="close" size="30" color="#fff"></uni-icons>
|
|
</view>
|
|
<view class="goods-top">
|
|
<view class="goods-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="" style="border-radius: 10px;">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png"
|
|
alt=""
|
|
style="width:30rpx;height:30rpx;position: absolute;top: 0;left: 0;background-size: 100%;" />
|
|
</view>
|
|
<view class="goods-content">
|
|
<view class="goods-name">
|
|
牛仔农庄(医专店)
|
|
</view>
|
|
<view class="goods-content-center">
|
|
<view class="goods-deal1">
|
|
月售 <text> 100+</text>
|
|
</view>
|
|
</view>
|
|
<view class="goods-content-bottom">
|
|
<view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;">
|
|
￥90.00
|
|
</view>
|
|
<view class="pintuan-left-price">
|
|
拼团<text style="color: red;">￥59.90</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-spec">
|
|
<view class="spec1">
|
|
<view class="spec11">
|
|
选择食材1
|
|
</view>
|
|
<view class="spec22" >
|
|
<view class="spec222">
|
|
炸鸡块
|
|
</view>
|
|
<view class="spec-check">
|
|
炸鸡块
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="spec1">
|
|
<view class="spec11">
|
|
选择食材2
|
|
</view>
|
|
<view class="spec22">
|
|
<view class="spec222">
|
|
炸鸡块
|
|
</view>
|
|
<view class="spec222">
|
|
炸鸡块
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="spec11">
|
|
成团选择
|
|
</view>
|
|
<view class="goods-team">
|
|
|
|
<view class="team1">
|
|
<view class="team11">
|
|
￥16.00
|
|
</view>
|
|
<view class="team11">
|
|
二人团
|
|
</view>
|
|
</view>
|
|
<view class="team-check">
|
|
<view class="team11">
|
|
￥15.00
|
|
</view>
|
|
<view class="team11">
|
|
三人团
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="spec11">
|
|
他们都在拼
|
|
</view>
|
|
<view class="">
|
|
<view class="goods-center">
|
|
<view class="list-right">
|
|
<view class="list-right-img">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
|
|
alt="" />
|
|
<view class="list-weipincheng">+</view>
|
|
</view>
|
|
<view class="list-right-cha">
|
|
<view class="cha11">
|
|
二人拼
|
|
</view>
|
|
<view class="">
|
|
差<text style="color: red;">1人</text>拼成
|
|
</view>
|
|
</view>
|
|
<view class="list-right-price">
|
|
￥15.00
|
|
</view>
|
|
</view>
|
|
<view class="list-btn">
|
|
拼团
|
|
</view>
|
|
</view>
|
|
<view class="goods-center">
|
|
<view class="list-right">
|
|
<view class="list-right-img">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
|
|
alt="" />
|
|
<view class="list-weipincheng">+</view>
|
|
</view>
|
|
<view class="list-right-cha">
|
|
<view class="cha11">
|
|
三人拼
|
|
</view>
|
|
<view class="">
|
|
差<text style="color: red;">1人</text>拼成
|
|
</view>
|
|
</view>
|
|
<view class="list-right-price">
|
|
￥15.00
|
|
</view>
|
|
</view>
|
|
<view class="list-btn">
|
|
拼团
|
|
</view>
|
|
</view>
|
|
<view class="goods-center">
|
|
<view class="list-right">
|
|
<view class="list-right-img">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
|
|
alt="" />
|
|
<view class="list-weipincheng">+</view>
|
|
</view>
|
|
<view class="list-right-cha">
|
|
<view class="cha11">
|
|
三人拼
|
|
</view>
|
|
<view class="">
|
|
差<text style="color: red;">1人</text>拼成
|
|
</view>
|
|
</view>
|
|
<view class="list-right-price">
|
|
￥15.00
|
|
</view>
|
|
</view>
|
|
<view class="list-btn">
|
|
拼团
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;height: 160rpx;"></view>
|
|
<view class="bottom" style="padding-bottom: 10px;height: 80px;">
|
|
<view v-if="isPintuan" class="pintuan1">
|
|
<view class="pintuan2" style="border-bottom-left-radius: 50px;border-top-left-radius: 50px;">
|
|
面对面团
|
|
</view>
|
|
<view class="pintuan2" style="background: rgba(0, 35, 28, 1);border-bottom-right-radius: 50px;border-top-right-radius: 50px;color: rgba(166, 255, 234, 1);">
|
|
拼团购买￥15.00
|
|
</view>
|
|
</view>
|
|
<view v-else class="pintuan0">
|
|
直接购买
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
type:'',
|
|
shopId:'',
|
|
shopItem:{},
|
|
productItem:{},
|
|
productId:'',
|
|
productItem:[],
|
|
buyCar:new Map(),
|
|
pageNum:1,
|
|
searchForm:{
|
|
shopId:'',
|
|
pageNum: 1,
|
|
pageSize: '10',
|
|
categoryId:''
|
|
},
|
|
menuButtonInfo: {},
|
|
isPintuan:true,
|
|
menuList:[{
|
|
categoryName:'猜你喜欢',
|
|
id:'',
|
|
checked:true
|
|
}]
|
|
}
|
|
},
|
|
components: {
|
|
|
|
},
|
|
filters: {
|
|
sliceMsg(val) {
|
|
var name = ''
|
|
if (typeof(val) == 'string') {
|
|
let newObj = JSON.parse(val)
|
|
for (let as in newObj) {
|
|
name = newObj[as].specPrice
|
|
}
|
|
}
|
|
return name;
|
|
},
|
|
sliceMsg1(val) {
|
|
var name = '正在有'
|
|
let aa = Math.floor(Math.random() * (15 - 5 + 1)) + 1;
|
|
name+=aa+'人下单'
|
|
return name;
|
|
},
|
|
slicePrice(val){
|
|
let begin = ''
|
|
if(val != null){
|
|
begin = val[0].groupPrice
|
|
for(let i = 0;i < val.length;i++){
|
|
if(val[i].groupPrice < begin){
|
|
begin = val[i].groupPrice
|
|
}
|
|
}
|
|
}
|
|
return begin;
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.type = option.type
|
|
if(this.type == 'shop'){
|
|
this.shopItem = JSON.parse(option.item)
|
|
}else{
|
|
this.productItem = JSON.parse(option.item)
|
|
}
|
|
this.getCategory(this.shopItem.id)
|
|
this.getProduct('')
|
|
},
|
|
onShow() {
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
},
|
|
methods: {
|
|
getProduct(categoryId){
|
|
let that = this
|
|
this.searchForm.shopId = this.shopItem.id
|
|
this.searchForm.categoryId = categoryId
|
|
that.tui.request("/app/product/getShareList", "POST", this.searchForm, false, false).then((res) => {
|
|
if (res.code == 200) {
|
|
if (that.pageNum == 1) {
|
|
that.productItem = res.result.records
|
|
} else {
|
|
that.productItem = [...that.productItem, ...res.result.records]
|
|
}
|
|
that.$forceUpdate()
|
|
} else {
|
|
that.tui.toast(res.message)
|
|
return
|
|
}
|
|
uni.hideLoading()
|
|
}).catch((res) => {})
|
|
},
|
|
getCategory(id){
|
|
let that = this
|
|
that.tui.request("/app/productCategory/list", "GET", {
|
|
shopId:id
|
|
}, false, true).then((res) => {
|
|
if (res.code == 200) {
|
|
if(res.result.length >0){
|
|
for(let i = 0;i<res.result.length;i++){
|
|
res.result[i].checked = false
|
|
that.menuList.push(res.result[i])
|
|
}
|
|
}
|
|
that.$forceUpdate()
|
|
} else {
|
|
that.tui.toast(res.message)
|
|
return
|
|
}
|
|
uni.hideLoading()
|
|
}).catch((res) => {})
|
|
},
|
|
checkTab(index){
|
|
for(let i=0;i<this.menuList.length;i++){
|
|
if(i == index){
|
|
this.menuList[i].checked = true
|
|
}else{
|
|
this.menuList[i].checked = false
|
|
}
|
|
}
|
|
this.getProduct(this.menuList[index].id);
|
|
},
|
|
openPopup(type,index,item){
|
|
if(type == 'car'){
|
|
this.$refs.carPopup.open('bottom')
|
|
}else if(type == 'xiadan'){
|
|
if(index == 'pintuan'){
|
|
this.isPintuan = true
|
|
}else{
|
|
this.isPintuan = false
|
|
}
|
|
if(item.attributeList == '' || item.attributeList == null){
|
|
this.buyCar.has(item.id)
|
|
}else{
|
|
this.$refs.pintuanPopup.open('bottom')
|
|
}
|
|
|
|
}
|
|
},
|
|
goDetail(type) {
|
|
if (type == 'goodsDetail') {
|
|
uni.navigateTo({
|
|
url: '/package1/goods/goodsDetail'
|
|
})
|
|
}else if(type == 'shopDetail'){
|
|
uni.navigateTo({
|
|
url: '/package1/group/groupBuyDetail?item=' + JSON.stringify(this.shopItem)
|
|
})
|
|
}else if(type == 'shopEvaluate'){
|
|
uni.navigateTo({
|
|
url: '/package1/group/shopEvaluate?item=' + JSON.stringify(this.shopItem)
|
|
})
|
|
}
|
|
},
|
|
back() {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 24rpx;
|
|
background: #F5F8F5;
|
|
color: #00231C;
|
|
}
|
|
|
|
.page1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 24rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.title {
|
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png') no-repeat;
|
|
width: 100%;
|
|
height: 700rpx;
|
|
background-size: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
.title-sreach {
|
|
width: 75%;
|
|
display: flex;
|
|
height: 200rpx;
|
|
}
|
|
|
|
.title-search {
|
|
margin-top: 110rpx;
|
|
display: flex;
|
|
background: #fff;
|
|
height: 54rpx;
|
|
margin-left: 20rpx;
|
|
border-radius: 54rpx;
|
|
width: 460rpx;
|
|
|
|
input {
|
|
height: 54rpx;
|
|
line-height: 54rpx;
|
|
}
|
|
}
|
|
|
|
.back-btn {
|
|
padding-top: 110rpx;
|
|
}
|
|
|
|
.content {
|
|
margin-top: 430rpx;
|
|
}
|
|
|
|
.shop-img {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
position: relative;
|
|
|
|
img {
|
|
width: 100%;
|
|
background-size: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.shop-top {
|
|
display: flex;
|
|
}
|
|
|
|
.shop-content {
|
|
flex: 1;
|
|
padding-left: 20rpx;
|
|
|
|
}
|
|
|
|
.shop-name {
|
|
font-size: 32rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.shop-content-center {
|
|
display: flex;
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
.shop-rate {
|
|
background: rgba(249, 212, 157, 0.34);
|
|
height: 40rpx;
|
|
display: flex;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.shop-rate-num {
|
|
width: 50rpx;
|
|
height: 100%;
|
|
text-align: center;
|
|
background: linear-gradient(90deg, rgba(255, 77, 0, 1), rgba(255, 184, 84, 1));
|
|
color: #fff;
|
|
line-height: 40rpx;
|
|
font-size: 22rpx;
|
|
border-bottom-left-radius: 20rpx;
|
|
border-top-left-radius: 20rpx;
|
|
border-bottom-right-radius: 10rpx;
|
|
border-top-right-radius: 10rpx;
|
|
}
|
|
|
|
.shop-tag {
|
|
flex: 1;
|
|
line-height: 40rpx;
|
|
text-align: right;
|
|
}
|
|
|
|
.shop-tag1 {
|
|
flex: 1;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
}
|
|
|
|
.shop-content-bottom {
|
|
display: flex;
|
|
}
|
|
|
|
.shop-deal {
|
|
flex: 1;
|
|
}
|
|
|
|
.shop-bottom {
|
|
margin-top: 20rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.pintuan {
|
|
background: #fff;
|
|
padding: 20rpx;
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.pintuan-left {
|
|
display: flex;
|
|
padding: 20rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
.pintuan-left-img {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.pintuan-left-box {
|
|
flex: 1;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.pintuan-right {
|
|
display: flex;
|
|
margin-top: 50rpx;
|
|
width: 30%;
|
|
}
|
|
|
|
.pintuan-right-img {
|
|
height: 40rpx;
|
|
display: flex;
|
|
|
|
img {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
z-index: 98;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.pintuan-left-name {
|
|
font-weight: 700;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.pintuan-left-price {
|
|
display: inline;
|
|
padding: 10rpx;
|
|
background: rgba(255, 57, 57, 0.1);
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.weipincheng {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background: rgba(166, 255, 234, 1);
|
|
border-radius: 40rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
margin-left: -6rpx;
|
|
z-index: 97;
|
|
}
|
|
|
|
.pintuan-right-cha {}
|
|
|
|
.goods-member{
|
|
padding: 10px 0;
|
|
margin-top: 10px;
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
}
|
|
|
|
.goods-list {
|
|
width: 95%;
|
|
height: auto;
|
|
border-radius: 20rpx;
|
|
margin: 20rpx auto 20rpx;
|
|
}
|
|
|
|
.goods-top {
|
|
padding: 20rpx 0;
|
|
display: flex;
|
|
}
|
|
|
|
.goods-content {
|
|
flex: 1;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.goods-name {
|
|
font-size: 32rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.goods-content-center {
|
|
display: flex;
|
|
margin: 16rpx 0;
|
|
}
|
|
|
|
.goods-rate {
|
|
background: rgba(249, 212, 157, 0.34);
|
|
height: 40rpx;
|
|
display: flex;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.goods-rate-num {
|
|
width: 50rpx;
|
|
height: 100%;
|
|
text-align: center;
|
|
background: linear-gradient(90deg, rgba(255, 77, 0, 1), rgba(255, 184, 84, 1));
|
|
color: #fff;
|
|
line-height: 40rpx;
|
|
font-size: 22rpx;
|
|
border-bottom-left-radius: 20rpx;
|
|
border-top-left-radius: 20rpx;
|
|
border-bottom-right-radius: 10rpx;
|
|
border-top-right-radius: 10rpx;
|
|
}
|
|
|
|
.goods-deal1 {
|
|
width: 60%;
|
|
}
|
|
|
|
.goods-tag {
|
|
display: flex;
|
|
margin: 0;
|
|
width: 40%;
|
|
}
|
|
|
|
.goods-content-bottom {
|
|
display: flex;
|
|
}
|
|
|
|
.goods-deal {
|
|
flex: 1;
|
|
}
|
|
|
|
.goods-img {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
position: relative;
|
|
|
|
img {
|
|
width: 100%;
|
|
background-size: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.goods-bottom {
|
|
display: flex;
|
|
width: 95%;
|
|
margin: 20rpx auto;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
}
|
|
|
|
.goods-btn {
|
|
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
|
|
width: 47%;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
background: #fff;
|
|
z-index: 98;
|
|
box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.bottom-left {
|
|
flex: 1;
|
|
display: flex;
|
|
padding: 20rpx;
|
|
|
|
img {
|
|
width: 60rpx;
|
|
height: 80rpx;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.bottom-price{
|
|
margin-left: 40rpx;
|
|
font-size: 40rpx;
|
|
color: red;
|
|
font-weight: 700;
|
|
line-height: 110rpx;
|
|
}
|
|
|
|
.bottom-right {
|
|
padding-top: 20rpx;
|
|
flex: 1;
|
|
|
|
img {
|
|
width: 360rpx;
|
|
height: 100rpx;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
.bottom-dot{
|
|
position: absolute;
|
|
top: 0;
|
|
right: -20rpx;
|
|
background: red;
|
|
color: #fff;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
border-radius: 32rpx;
|
|
text-align: center;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.car-content{
|
|
position: relative;
|
|
height: 600px;
|
|
width: 100%;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
padding: 10px;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.car-close{
|
|
width: 30px;
|
|
height: 30px;
|
|
position: absolute;
|
|
top: -40px;
|
|
right: 10px;
|
|
}
|
|
|
|
.car-title{
|
|
height: 48px;
|
|
line-height: 30px;
|
|
margin: 0 auto;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
.num-plus{
|
|
width: 28px;
|
|
height: 28px;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
line-height: 24px;
|
|
border-radius: 5px;
|
|
|
|
background: rgba(0, 35, 28, 1);
|
|
color: rgba(166, 255, 234, 1);
|
|
|
|
}
|
|
.num{
|
|
width: 40px;
|
|
height: 28px;
|
|
text-align: center;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
}
|
|
.goods-num{
|
|
display: flex;
|
|
height: 28px;
|
|
flex: 1;
|
|
margin-left: 20px;
|
|
}
|
|
.pintuan0{
|
|
width: 90%;
|
|
height: 50px;
|
|
border-radius: 50px;
|
|
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
|
|
text-align: center;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
line-height: 50px;
|
|
margin: auto;
|
|
}
|
|
.pintuan1{
|
|
width: 90%;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
display: flex;
|
|
text-align: center;
|
|
margin: auto;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
.pintuan2{
|
|
flex: 1;
|
|
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
|
|
}
|
|
.spec11{
|
|
height: 48px;
|
|
line-height: 48px;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.spec222{
|
|
display: inline-block;
|
|
padding: 0 10px;
|
|
background: #eee;
|
|
color: #777;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
.spec-check{
|
|
display: inline-block;
|
|
padding: 0 10px;
|
|
background: rgba(166, 255, 234, 1);
|
|
height: 36px;
|
|
line-height: 36px;
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
.team1{
|
|
width: 77px;
|
|
height: 83px;
|
|
background: #eee;
|
|
border-radius: 10px;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
float: left;
|
|
margin-right: 20px;
|
|
}
|
|
.team-check{
|
|
width: 77px;
|
|
height: 83px;
|
|
background: rgba(166, 255, 234, 1);
|
|
border-radius: 10px;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
float: left;
|
|
margin-right: 20px;
|
|
}
|
|
.team11{
|
|
margin-top: 10px;
|
|
}
|
|
.goods-team{
|
|
width: 100%;
|
|
min-height: 90px;
|
|
}
|
|
.list-right {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 15px 0 15px 15px;
|
|
flex: 1;
|
|
}
|
|
|
|
.list-right-img {
|
|
height: 40px;
|
|
display: flex;
|
|
|
|
img {
|
|
width: 40px;
|
|
height: 40px;
|
|
z-index: 98;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.list-weipincheng {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #a6ffea;
|
|
border-radius: 40px;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
margin-left: -6rpx;
|
|
z-index: 97;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.goods-center {
|
|
width: 100%;
|
|
margin: 0 auto 10px;
|
|
background: #f5f8f5;
|
|
height: 70px;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
}
|
|
|
|
.list-right-cha {
|
|
margin-left: 10px;
|
|
}
|
|
.list-right-price{
|
|
flex: 1;
|
|
text-align: right;
|
|
line-height: 40px;
|
|
color: red;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.list-btn {
|
|
background: linear-gradient(90deg, #e3ff96, #a6ffea);
|
|
width: 130rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
border-radius: 30px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
margin: 20px;
|
|
}
|
|
.cha11{
|
|
font-size: 11px;
|
|
background: rgba(255, 57, 57, 0.2);
|
|
color: red;
|
|
display: inline-block;
|
|
padding: 3px;
|
|
border-radius: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.menu-list{
|
|
height: 35px;
|
|
width: 100%;
|
|
overflow-x: scroll;
|
|
display: flex;
|
|
overflow-y: hidden;
|
|
}
|
|
.checked-img{
|
|
width: 90px;
|
|
height: 10px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.menu1{
|
|
width: 90px;
|
|
height: 35px;
|
|
position: relative;
|
|
margin-right: 10px;
|
|
line-height: 35px;
|
|
}
|
|
</style>
|