|
|
|
@ -3,7 +3,9 @@ |
|
|
|
<view class="carousel"> |
|
|
|
<swiper indicator-dots circular="true" duration="400"> |
|
|
|
<swiper-item class="swiper-item" v-for="(item, index) in small" :key="index"> |
|
|
|
<view class="image-wrapper"><image :src="item" class="loaded" mode="aspectFill"></image></view> |
|
|
|
<view class="image-wrapper"> |
|
|
|
<image :src="item" class="loaded" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
</view> |
|
|
|
@ -12,12 +14,14 @@ |
|
|
|
<text class="title">{{ goods.name }}</text> |
|
|
|
<view class="price-box"> |
|
|
|
<!-- <text class="price-tip">惠农价</text> --> |
|
|
|
<text class="price" v-if="goods.vipPrice && goods.vipPrice > 0">惠农价¥{{ (goods.price * goods.memberRate) / 10 }}</text> |
|
|
|
<text class="price" v-else-if="!goods.vipPrice">惠农价¥{{ goods.originalPrice }}</text> |
|
|
|
<text class="m-price" v-if="!goods.vipPrice">市场价¥{{ goods.price }}</text> |
|
|
|
<text class="m-price" v-else-if="goods.vipPrice && goods.vipPrice > 0">¥{{ goods.price }}</text> |
|
|
|
<!-- <text class="price" |
|
|
|
v-if="goods.vipPrice && goods.vipPrice > 0">惠农价¥{{ (goods.price * goods.memberRate) / 10 }}</text> --> |
|
|
|
<text class="price" >惠农价¥{{ goods.originalPrice }}</text> |
|
|
|
<text class="m-price" >市场价¥{{ goods.price }}</text> |
|
|
|
<!-- <text class="m-price" v-else-if="goods.vipPrice && goods.vipPrice > 0">市场价¥{{ goods.price }}</text> --> |
|
|
|
<text class="price">优惠¥{{ (goods.price - goods.originalPrice) | formatNumber}}</text> |
|
|
|
<text class="coupon-tip" v-if="goods.memberRate && goods.memberRate != 10">会员折扣{{ goods.memberRate }}折</text> |
|
|
|
<!-- <text class="coupon-tip" |
|
|
|
v-if="goods.memberRate && goods.memberRate != 10">会员折扣{{ goods.memberRate }}折</text> --> |
|
|
|
</view> |
|
|
|
<view class="bot-row"> |
|
|
|
<text>销量: {{ goods.sale }}</text> |
|
|
|
@ -25,7 +29,7 @@ |
|
|
|
<text>浏览量: {{ goods.hit }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="share-section" @click="navToTabPageStore(goods.storeId)"> |
|
|
|
<!-- <view class="share-section" @click="navToTabPageStore(goods.storeId)"> |
|
|
|
<view class="share-icon"> |
|
|
|
<text class="yticon icon-xingxing"></text> |
|
|
|
铺 |
|
|
|
@ -39,7 +43,7 @@ |
|
|
|
</view> |
|
|
|
|
|
|
|
<!--分享--> |
|
|
|
<view class="share-section" @click="share"> |
|
|
|
<!-- <view class="share-section" @click="share"> |
|
|
|
<view class="share-icon"> |
|
|
|
<text class="yticon icon-xingxing"></text> |
|
|
|
返 |
|
|
|
@ -50,13 +54,14 @@ |
|
|
|
立即分享 |
|
|
|
<text class="yticon icon-you"></text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<view class="c-list"> |
|
|
|
<view class="c-row b-b" v-if="skuList && skuList.length > 0" @click="toggleSpec"> |
|
|
|
<text class="tit">规格</text> |
|
|
|
<view class="con"> |
|
|
|
<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">{{ sItem.name }}</text> |
|
|
|
<text class="selected-text" v-for="(sItem, sIndex) in specSelected" |
|
|
|
:key="sIndex">{{ sItem.name }}</text> |
|
|
|
</view> |
|
|
|
<text class="yticon icon-you"></text> |
|
|
|
</view> |
|
|
|
@ -124,8 +129,8 @@ |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="action-btn-group"> |
|
|
|
<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy(goods)">立即购买</button> |
|
|
|
<button type="primary" class=" action-btn no-border add-cart-btn" @click="addCart(goods)">加入购物车</button> |
|
|
|
<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy(goods)">立即购买</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
@ -161,21 +166,17 @@ |
|
|
|
<text class="stock">库存：{{ sku.stock }}件</text> |
|
|
|
<view class="selected"> |
|
|
|
已选： |
|
|
|
<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">{{ sItem.name }}</text> |
|
|
|
<text class="selected-text" v-for="(sItem, sIndex) in specSelected" |
|
|
|
:key="sIndex">{{ sItem.name }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-for="(item, index) in specList" :key="index" class="attr-list"> |
|
|
|
<text>{{ item.name }}</text> |
|
|
|
<view class="item-list"> |
|
|
|
<text |
|
|
|
v-for="(childItem, childIndex) in specChildList" |
|
|
|
v-if="childItem.pid === item.id" |
|
|
|
:key="childIndex" |
|
|
|
class="tit" |
|
|
|
:class="{ selected: childItem.selected }" |
|
|
|
@click="selectSpec(childIndex, childItem.pid)" |
|
|
|
> |
|
|
|
<text v-for="(childItem, childIndex) in specChildList" v-if="childItem.pid === item.id" |
|
|
|
:key="childIndex" class="tit" :class="{ selected: childItem.selected }" |
|
|
|
@click="selectSpec(childIndex, childItem.pid)"> |
|
|
|
{{ childItem.name }} |
|
|
|
</text> |
|
|
|
</view> |
|
|
|
@ -192,8 +193,12 @@ |
|
|
|
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue'; |
|
|
|
import Api from '@/common/api'; |
|
|
|
import share from '@/components/share'; |
|
|
|
import { mapState } from 'vuex'; |
|
|
|
import { formatDate } from '@/common/date'; |
|
|
|
import { |
|
|
|
mapState |
|
|
|
} from 'vuex'; |
|
|
|
import { |
|
|
|
formatDate |
|
|
|
} from '@/common/date'; |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
@ -221,8 +226,7 @@ export default { |
|
|
|
general: 0, |
|
|
|
goods: 0 |
|
|
|
}, |
|
|
|
imgList: [ |
|
|
|
{ |
|
|
|
imgList: [{ |
|
|
|
src: 'https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg' |
|
|
|
}, |
|
|
|
{ |
|
|
|
@ -243,7 +247,9 @@ export default { |
|
|
|
let id = ops.id; |
|
|
|
if (id) { |
|
|
|
this.logining = true; |
|
|
|
let params = { id: ops.id }; |
|
|
|
let params = { |
|
|
|
id: ops.id |
|
|
|
}; |
|
|
|
let data = await Api.apiCall('get', Api.goods.goodsDetail, params); |
|
|
|
this.logining = false; |
|
|
|
|
|
|
|
@ -292,10 +298,15 @@ export default { |
|
|
|
}); |
|
|
|
} |
|
|
|
if (this.hasLogin) { |
|
|
|
let params = { goodsId: ops.id, pic: this.goods.pic }; |
|
|
|
let params = { |
|
|
|
goodsId: ops.id, |
|
|
|
pic: this.goods.pic |
|
|
|
}; |
|
|
|
await Api.apiCall('post', Api.goods.addView, params); |
|
|
|
} |
|
|
|
let params1 = { goodsId: ops.id }; |
|
|
|
let params1 = { |
|
|
|
goodsId: ops.id |
|
|
|
}; |
|
|
|
let consoltL = await Api.apiCall('get', Api.goods.consultList, params1); |
|
|
|
this.consultList = consoltL.list; |
|
|
|
this.consultCount = consoltL.count; |
|
|
|
@ -327,7 +338,8 @@ export default { |
|
|
|
if (valuesA.length == 2 && item.sp2 == valuesA[0] && item.sp1 == valuesA[1]) { |
|
|
|
this.sku = item; |
|
|
|
} |
|
|
|
if (valuesA.length == 3 && item.sp3 == valuesA[0] && item.sp2 == valuesA[1] && item.sp1 == valuesA[2]) { |
|
|
|
if (valuesA.length == 3 && item.sp3 == valuesA[0] && item.sp2 == valuesA[1] && item.sp1 == |
|
|
|
valuesA[2]) { |
|
|
|
this.sku = item; |
|
|
|
} |
|
|
|
if (!this.sku.pic) { |
|
|
|
@ -363,11 +375,13 @@ export default { |
|
|
|
return match; |
|
|
|
}); |
|
|
|
newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) { |
|
|
|
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;'); |
|
|
|
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, |
|
|
|
'max-width:100%;'); |
|
|
|
return match; |
|
|
|
}); |
|
|
|
newContent = newContent.replace(/<br[^>]*\/>/gi, ''); |
|
|
|
newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"'); |
|
|
|
newContent = newContent.replace(/\<img/gi, |
|
|
|
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"'); |
|
|
|
return newContent; |
|
|
|
} else { |
|
|
|
return '暂无商品详情'; |
|
|
|
@ -406,7 +420,9 @@ export default { |
|
|
|
title: '请稍后' |
|
|
|
}); |
|
|
|
|
|
|
|
let params = { couponId: index.id }; |
|
|
|
let params = { |
|
|
|
couponId: index.id |
|
|
|
}; |
|
|
|
let data = await Api.apiCall('post', Api.index.acceptCoupon, params); |
|
|
|
console.log(data); |
|
|
|
if (data) { |
|
|
|
@ -459,12 +475,15 @@ export default { |
|
|
|
if (valuesA.length == 2 && item.sp2 == valuesA[0] && item.sp1 == valuesA[1]) { |
|
|
|
this.sku = item; |
|
|
|
} |
|
|
|
if (valuesA.length == 3 && item.sp3 == valuesA[0] && item.sp2 == valuesA[1] && item.sp1 == valuesA[2]) { |
|
|
|
if (valuesA.length == 3 && item.sp3 == valuesA[0] && item.sp2 == valuesA[1] && item.sp1 == |
|
|
|
valuesA[2]) { |
|
|
|
this.sku = item; |
|
|
|
} |
|
|
|
}); |
|
|
|
if (!this.sku) { |
|
|
|
uni.showToast({ title: '商品不存在！' }); |
|
|
|
uni.showToast({ |
|
|
|
title: '商品不存在！' |
|
|
|
}); |
|
|
|
} |
|
|
|
if (!this.sku.pic) { |
|
|
|
this.sku.pic = this.goods.pic; |
|
|
|
@ -494,7 +513,14 @@ export default { |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.favorite = !this.favorite; |
|
|
|
let params = { objId: item.id, type: 1, name: item.name, meno1: item.pic, meno2: item.price, meno3: item.sale }; |
|
|
|
let params = { |
|
|
|
objId: item.id, |
|
|
|
type: 1, |
|
|
|
name: item.name, |
|
|
|
meno1: item.pic, |
|
|
|
meno2: item.price, |
|
|
|
meno3: item.sale |
|
|
|
}; |
|
|
|
Api.apiCall('post', Api.goods.favoriteSave, params); |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -508,7 +534,9 @@ export default { |
|
|
|
} |
|
|
|
let userInfo = uni.getStorageSync('userInfo'); |
|
|
|
if (userInfo && userInfo.storeId && userInfo.storeId == this.goods.storeId) { |
|
|
|
uni.showToast({ title: '不能购买自己店铺的商品！' }); |
|
|
|
uni.showToast({ |
|
|
|
title: '不能购买自己店铺的商品！' |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
let data; |
|
|
|
@ -518,10 +546,15 @@ export default { |
|
|
|
console.log(this.sku); |
|
|
|
console.log(this.sku.stock); |
|
|
|
if (this.sku.stock < 1) { |
|
|
|
uni.showToast({ title: '库存不够！' }); |
|
|
|
uni.showToast({ |
|
|
|
title: '库存不够！' |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
let params = { goodsId: id, skuId: this.sku.id }; |
|
|
|
let params = { |
|
|
|
goodsId: id, |
|
|
|
skuId: this.sku.id |
|
|
|
}; |
|
|
|
// data = await Api.apiCall('post', Api.order.addCart, params); |
|
|
|
let dataJson = {}; |
|
|
|
|
|
|
|
@ -536,10 +569,14 @@ export default { |
|
|
|
}); |
|
|
|
} else { |
|
|
|
if (this.goods.stock < 1) { |
|
|
|
uni.showToast({ title: '库存不够！' }); |
|
|
|
uni.showToast({ |
|
|
|
title: '库存不够！' |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
let params = { goodsId: id }; |
|
|
|
let params = { |
|
|
|
goodsId: id |
|
|
|
}; |
|
|
|
// data = await Api.apiCall('post', Api.order.addCart, params); |
|
|
|
let dataJson = {}; |
|
|
|
|
|
|
|
@ -566,7 +603,9 @@ export default { |
|
|
|
console.log(userInfo); |
|
|
|
console.log(this.goods.storeId); |
|
|
|
if (userInfo && userInfo.storeId && userInfo.storeId == this.goods.storeId) { |
|
|
|
uni.showToast({ title: '不能购买自己店铺的商品！' }); |
|
|
|
uni.showToast({ |
|
|
|
title: '不能购买自己店铺的商品！' |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
let id = item.id; |
|
|
|
@ -574,17 +613,26 @@ export default { |
|
|
|
|
|
|
|
if (this.sku && this.sku.id) { |
|
|
|
if (this.sku.stock < 1) { |
|
|
|
uni.showToast({ title: '库存不够！' }); |
|
|
|
uni.showToast({ |
|
|
|
title: '库存不够！' |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
let params = { goodsId: id, skuId: this.sku.id }; |
|
|
|
let params = { |
|
|
|
goodsId: id, |
|
|
|
skuId: this.sku.id |
|
|
|
}; |
|
|
|
data = await Api.apiCall('post', Api.order.addCart, params); |
|
|
|
} else { |
|
|
|
if (this.goods.stock < 1) { |
|
|
|
uni.showToast({ title: '库存不够！' }); |
|
|
|
uni.showToast({ |
|
|
|
title: '库存不够！' |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
let params = { goodsId: id }; |
|
|
|
let params = { |
|
|
|
goodsId: id |
|
|
|
}; |
|
|
|
data = await Api.apiCall('post', Api.order.addCart, params); |
|
|
|
} |
|
|
|
console.log("data=========:" + data) |
|
|
|
@ -604,26 +652,32 @@ page { |
|
|
|
background: $page-color-base; |
|
|
|
padding-bottom: 160upx; |
|
|
|
} |
|
|
|
|
|
|
|
.icon-you { |
|
|
|
font-size: $font-base + 2upx; |
|
|
|
color: #888; |
|
|
|
} |
|
|
|
|
|
|
|
.carousel { |
|
|
|
height: 722upx; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
swiper { |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.image-wrapper { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.swiper-item { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-content: center; |
|
|
|
height: 750upx; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
@ -642,6 +696,7 @@ page { |
|
|
|
height: 50upx; |
|
|
|
line-height: 50upx; |
|
|
|
} |
|
|
|
|
|
|
|
.price-box { |
|
|
|
display: flex; |
|
|
|
align-items: baseline; |
|
|
|
@ -650,13 +705,16 @@ page { |
|
|
|
font-size: 26upx; |
|
|
|
color: $uni-color-primary; |
|
|
|
} |
|
|
|
|
|
|
|
.price { |
|
|
|
font-size: $font-lg + 2upx; |
|
|
|
} |
|
|
|
|
|
|
|
.m-price { |
|
|
|
margin: 0 12upx; |
|
|
|
color: $font-color-light; |
|
|
|
} |
|
|
|
|
|
|
|
.coupon-tip { |
|
|
|
align-items: center; |
|
|
|
padding: 4upx 10upx; |
|
|
|
@ -667,17 +725,20 @@ page { |
|
|
|
line-height: 1; |
|
|
|
transform: translateY(-4upx); |
|
|
|
} |
|
|
|
|
|
|
|
.bot-row { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
height: 50upx; |
|
|
|
font-size: $font-sm; |
|
|
|
color: $font-color-light; |
|
|
|
|
|
|
|
text { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 分享 */ |
|
|
|
.share-section { |
|
|
|
display: flex; |
|
|
|
@ -685,6 +746,7 @@ page { |
|
|
|
color: $font-color-base; |
|
|
|
background: linear-gradient(left, #fdf5f6, #fbebf6); |
|
|
|
padding: 12upx 30upx; |
|
|
|
|
|
|
|
.share-icon { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
@ -697,6 +759,7 @@ page { |
|
|
|
overflow: hidden; |
|
|
|
font-size: 22upx; |
|
|
|
color: $uni-color-primary; |
|
|
|
|
|
|
|
&:after { |
|
|
|
content: ''; |
|
|
|
width: 50upx; |
|
|
|
@ -708,6 +771,7 @@ page { |
|
|
|
background: $uni-color-primary; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.icon-xingxing { |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
@ -717,21 +781,25 @@ page { |
|
|
|
color: #fff; |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.tit { |
|
|
|
font-size: $font-base; |
|
|
|
margin-left: 10upx; |
|
|
|
} |
|
|
|
|
|
|
|
.icon-bangzhu1 { |
|
|
|
padding: 10upx; |
|
|
|
font-size: 30upx; |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.share-btn { |
|
|
|
flex: 1; |
|
|
|
text-align: right; |
|
|
|
font-size: $font-sm; |
|
|
|
color: $uni-color-primary; |
|
|
|
} |
|
|
|
|
|
|
|
.icon-you { |
|
|
|
font-size: $font-sm; |
|
|
|
margin-left: 4upx; |
|
|
|
@ -743,31 +811,38 @@ page { |
|
|
|
font-size: $font-sm + 2upx; |
|
|
|
color: $font-color-base; |
|
|
|
background: #fff; |
|
|
|
|
|
|
|
.c-row { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 20upx; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.tit { |
|
|
|
width: 140upx; |
|
|
|
} |
|
|
|
|
|
|
|
.con { |
|
|
|
flex: 1; |
|
|
|
color: $font-color-dark; |
|
|
|
|
|
|
|
.selected-text { |
|
|
|
margin-right: 10upx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.bz-list { |
|
|
|
height: 40upx; |
|
|
|
font-size: $font-sm + 2upx; |
|
|
|
color: $font-color-dark; |
|
|
|
|
|
|
|
text { |
|
|
|
display: inline-block; |
|
|
|
margin-right: 30upx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.con-list { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
@ -775,6 +850,7 @@ page { |
|
|
|
color: $font-color-dark; |
|
|
|
line-height: 40upx; |
|
|
|
} |
|
|
|
|
|
|
|
.red { |
|
|
|
color: $uni-color-primary; |
|
|
|
} |
|
|
|
@ -787,35 +863,42 @@ page { |
|
|
|
padding: 20upx; |
|
|
|
background: #fff; |
|
|
|
margin-top: 16upx; |
|
|
|
|
|
|
|
.e-header { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
height: 70upx; |
|
|
|
font-size: $font-sm + 2upx; |
|
|
|
color: $font-color-light; |
|
|
|
|
|
|
|
.tit { |
|
|
|
font-size: $font-base + 2upx; |
|
|
|
color: $font-color-dark; |
|
|
|
margin-right: 4upx; |
|
|
|
} |
|
|
|
|
|
|
|
.tip { |
|
|
|
flex: 1; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
|
|
|
|
.icon-you { |
|
|
|
margin-left: 10upx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.eva-box { |
|
|
|
display: flex; |
|
|
|
padding: 20upx 0; |
|
|
|
|
|
|
|
.portrait { |
|
|
|
flex-shrink: 0; |
|
|
|
width: 80upx; |
|
|
|
height: 80upx; |
|
|
|
border-radius: 100px; |
|
|
|
} |
|
|
|
|
|
|
|
.right { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
@ -823,11 +906,13 @@ page { |
|
|
|
font-size: $font-base; |
|
|
|
color: $font-color-base; |
|
|
|
padding-left: 26upx; |
|
|
|
|
|
|
|
.con { |
|
|
|
font-size: $font-base; |
|
|
|
color: $font-color-dark; |
|
|
|
padding: 20upx 0; |
|
|
|
} |
|
|
|
|
|
|
|
.bot { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
@ -836,11 +921,13 @@ page { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 详情 */ |
|
|
|
.detail-desc { |
|
|
|
background: #fff; |
|
|
|
margin-top: 16upx; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.d-header { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
@ -856,6 +943,7 @@ page { |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
|
|
|
|
&:after { |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|
@ -872,8 +960,10 @@ page { |
|
|
|
/* 规格选择弹窗 */ |
|
|
|
.attr-content { |
|
|
|
padding: 10upx 30upx; |
|
|
|
|
|
|
|
.a-t { |
|
|
|
display: flex; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 170upx; |
|
|
|
height: 170upx; |
|
|
|
@ -881,6 +971,7 @@ page { |
|
|
|
margin-top: -40upx; |
|
|
|
border-radius: 8upx; |
|
|
|
} |
|
|
|
|
|
|
|
.right { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
@ -888,16 +979,19 @@ page { |
|
|
|
font-size: $font-sm + 2upx; |
|
|
|
color: $font-color-base; |
|
|
|
line-height: 42upx; |
|
|
|
|
|
|
|
.price { |
|
|
|
font-size: $font-lg; |
|
|
|
color: $uni-color-primary; |
|
|
|
margin-bottom: 10upx; |
|
|
|
} |
|
|
|
|
|
|
|
.selected-text { |
|
|
|
margin-right: 10upx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.attr-list { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
@ -906,10 +1000,12 @@ page { |
|
|
|
padding-top: 30upx; |
|
|
|
padding-left: 10upx; |
|
|
|
} |
|
|
|
|
|
|
|
.item-list { |
|
|
|
padding: 20upx 0 0; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
text { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
@ -924,6 +1020,7 @@ page { |
|
|
|
font-size: $font-base; |
|
|
|
color: $font-color-dark; |
|
|
|
} |
|
|
|
|
|
|
|
.selected { |
|
|
|
background: #fbebee; |
|
|
|
color: $uni-color-primary; |
|
|
|
@ -942,24 +1039,30 @@ page { |
|
|
|
|
|
|
|
&.show { |
|
|
|
display: block; |
|
|
|
|
|
|
|
.mask { |
|
|
|
animation: showPopup 0.2s linear both; |
|
|
|
} |
|
|
|
|
|
|
|
.layer { |
|
|
|
animation: showLayer 0.2s linear both; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&.hide { |
|
|
|
.mask { |
|
|
|
animation: hidePopup 0.2s linear both; |
|
|
|
} |
|
|
|
|
|
|
|
.layer { |
|
|
|
animation: hideLayer 0.2s linear both; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&.none { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
.mask { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
@ -968,6 +1071,7 @@ page { |
|
|
|
z-index: 1; |
|
|
|
background-color: rgba(0, 0, 0, 0.4); |
|
|
|
} |
|
|
|
|
|
|
|
.layer { |
|
|
|
position: fixed; |
|
|
|
z-index: 99; |
|
|
|
@ -976,6 +1080,7 @@ page { |
|
|
|
min-height: 40vh; |
|
|
|
border-radius: 10upx 10upx 0 0; |
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
.btn { |
|
|
|
height: 66upx; |
|
|
|
line-height: 66upx; |
|
|
|
@ -986,34 +1091,42 @@ page { |
|
|
|
margin: 30upx auto 20upx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes showPopup { |
|
|
|
0% { |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes hidePopup { |
|
|
|
0% { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes showLayer { |
|
|
|
0% { |
|
|
|
transform: translateY(120%); |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
transform: translateY(0%); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes hideLayer { |
|
|
|
0% { |
|
|
|
transform: translateY(0); |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
transform: translateY(120%); |
|
|
|
} |
|
|
|
@ -1044,23 +1157,28 @@ page { |
|
|
|
color: $font-color-base; |
|
|
|
width: 96upx; |
|
|
|
height: 80upx; |
|
|
|
|
|
|
|
.yticon { |
|
|
|
font-size: 40upx; |
|
|
|
line-height: 48upx; |
|
|
|
color: $font-color-light; |
|
|
|
} |
|
|
|
|
|
|
|
&.active, |
|
|
|
&.active .yticon { |
|
|
|
color: $uni-color-primary; |
|
|
|
} |
|
|
|
|
|
|
|
.icon-fenxiang2 { |
|
|
|
font-size: 42upx; |
|
|
|
transform: translateY(-2upx); |
|
|
|
} |
|
|
|
|
|
|
|
.icon-shoucang { |
|
|
|
font-size: 46upx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.action-btn-group { |
|
|
|
display: flex; |
|
|
|
height: 76upx; |
|
|
|
@ -1071,6 +1189,7 @@ page { |
|
|
|
background: linear-gradient(to right, #ffac30, #fa436a, #f56c6c); |
|
|
|
margin-left: 20upx; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
&:after { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
@ -1081,6 +1200,7 @@ page { |
|
|
|
width: 0; |
|
|
|
border-right: 1px solid rgba(255, 255, 255, 0.5); |
|
|
|
} |
|
|
|
|
|
|
|
.action-btn { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
@ -1117,9 +1237,11 @@ page { |
|
|
|
transition: 0.3s; |
|
|
|
overflow-y: scroll; |
|
|
|
} |
|
|
|
|
|
|
|
&.none { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
&.show { |
|
|
|
background: rgba(0, 0, 0, 0.4); |
|
|
|
|
|
|
|
@ -1135,12 +1257,14 @@ page { |
|
|
|
flex-direction: column; |
|
|
|
margin: 20upx 24upx; |
|
|
|
background: #fff; |
|
|
|
|
|
|
|
.con { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
position: relative; |
|
|
|
height: 120upx; |
|
|
|
padding: 0 30upx; |
|
|
|
|
|
|
|
&:after { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
@ -1152,6 +1276,7 @@ page { |
|
|
|
transform: scaleY(50%); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.left { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
@ -1160,15 +1285,18 @@ page { |
|
|
|
overflow: hidden; |
|
|
|
height: 100upx; |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
font-size: 32upx; |
|
|
|
color: $font-color-dark; |
|
|
|
margin-bottom: 10upx; |
|
|
|
} |
|
|
|
|
|
|
|
.time { |
|
|
|
font-size: 24upx; |
|
|
|
color: $font-color-light; |
|
|
|
} |
|
|
|
|
|
|
|
.right { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
@ -1178,20 +1306,24 @@ page { |
|
|
|
color: $font-color-base; |
|
|
|
height: 100upx; |
|
|
|
} |
|
|
|
|
|
|
|
.price { |
|
|
|
font-size: 44upx; |
|
|
|
color: $base-color; |
|
|
|
|
|
|
|
&:before { |
|
|
|
content: '￥'; |
|
|
|
font-size: 34upx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tips { |
|
|
|
font-size: 24upx; |
|
|
|
color: $font-color-light; |
|
|
|
line-height: 60upx; |
|
|
|
padding-left: 30upx; |
|
|
|
} |
|
|
|
|
|
|
|
.circle { |
|
|
|
position: absolute; |
|
|
|
left: -6upx; |
|
|
|
@ -1201,22 +1333,26 @@ page { |
|
|
|
height: 20upx; |
|
|
|
background: #f3f3f3; |
|
|
|
border-radius: 100px; |
|
|
|
|
|
|
|
&.r { |
|
|
|
left: auto; |
|
|
|
right: -6upx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 分类推荐楼层 */ |
|
|
|
.hot-floor { |
|
|
|
width: 100%; |
|
|
|
overflow: hidden; |
|
|
|
margin-bottom: 20upx; |
|
|
|
|
|
|
|
.floor-img-box { |
|
|
|
width: 100%; |
|
|
|
height: 220upx; |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
&:after { |
|
|
|
padding: 10 30upx; |
|
|
|
content: ''; |
|
|
|
@ -1226,15 +1362,18 @@ page { |
|
|
|
background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.name { |
|
|
|
font-size: 30upx; |
|
|
|
color: $font-color-base; |
|
|
|
margin-left: 24upx; |
|
|
|
} |
|
|
|
|
|
|
|
.floor-img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.floor-list { |
|
|
|
white-space: nowrap; |
|
|
|
padding: 20upx; |
|
|
|
@ -1247,25 +1386,30 @@ page { |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.scoll-wrapper { |
|
|
|
display: flex; |
|
|
|
align-items: flex-start; |
|
|
|
} |
|
|
|
|
|
|
|
.floor-item { |
|
|
|
width: 180upx; |
|
|
|
margin-right: 20upx; |
|
|
|
font-size: $font-sm + 2upx; |
|
|
|
color: $font-color-dark; |
|
|
|
line-height: 1.8; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 100upx; |
|
|
|
height: 180upx; |
|
|
|
border-radius: 6upx; |
|
|
|
} |
|
|
|
|
|
|
|
.price { |
|
|
|
color: $uni-color-primary; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.more { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
@ -1278,6 +1422,7 @@ page { |
|
|
|
background: #f3f3f3; |
|
|
|
font-size: $font-base; |
|
|
|
color: $font-color-light; |
|
|
|
|
|
|
|
text:first-child { |
|
|
|
margin-bottom: 4upx; |
|
|
|
} |
|
|
|
|
