root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

拼团商家

master
tianyi 3 months ago
parent
01e2ccead3
commit
ff81f20217
4 changed files with 1041 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 329
      package1/goods/goodsDetail.vue
  2. 4
      package1/group/groupBuyDetail.vue
  3. 9
      package1/group/groupBuyList.vue
  4. 702
      package1/group/groupBuySingle.vue

329
package1/goods/goodsDetail.vue
View File

@ -0,0 +1,329 @@
<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>
</view>
<view class="content">
<view class="goods-top">
<view class="goods-content">
<view class="goods-name">
牛仔农庄(医专店)
</view>
<view class="goods-content-center">
<view class="goods-deal1">
<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 class="goods-tag">
月售 <text> 100+</text>
</view>
</view>
</view>
</view>
<view class="goods-center">
<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 class="goods-btn">
拼团
</view>
</view>
<view class="goods-bottom">
<view class="detail1">
商品详情
</view>
<view class="detail2">
老北京鸡肉卷是一款融合传统京味与现代快餐便捷性的经典美食，以薄韧面饼包裹鲜嫩鸡肉与清爽配菜，搭配浓郁甜面酱，层次丰富，咸香适口，是早餐、午餐、下午茶及宵夜的理想选择。肯德基原创经典款已成为国民记忆，市面亦有众多速冻即食版本，满足不同消费场景需求。
门店现制款
单份重量：约 170g
参考价格：15-17 元 / 份
套餐搭配：OK 三件套（含鸡肉卷 + 中薯条 + 中可乐）约 19.9 元，工作日特惠
供应时间：9:15-22:44（具体以门店为准）
</view>
</view>
</view>
<view class="bottom">
<view class="bottom-left">
<view style="position: relative;width: 60rpx;height: 80rpx;margin-top: 20rpx;">
<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">
<view class="bottom-btn" style="border-bottom-left-radius: 50px;border-top-left-radius: 50px;">
直接购买
</view>
<view class="bottom-btn"
style="border-bottom-right-radius: 50px;border-top-right-radius: 50px;background: rgba(0, 35, 28, 1);color: rgba(166, 255, 234, 1);">
拼团买￥15.00
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
menuButtonInfo: {}
}
},
components: {
},
onLoad() {
},
onShow() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
},
methods: {
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;
}
.back-btn {
padding-top: 110rpx;
}
.content {
margin-top: 700rpx;
background: #fff;
overflow: hidden;
height: 100%;
}
.goods-top {
padding: 20rpx;
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-deal1 {
width: 60%;
display: flex;
}
.goods-tag {
margin: 0;
width: 40%;
text-align: right;
}
.pintuan-left-price {
display: inline;
padding: 10rpx;
background: rgba(255, 57, 57, 0.1);
border-radius: 10rpx;
}
.goods-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;
}
.pintuan-right {
display: flex;
width: 30%;
padding: 15px;
flex: 1;
}
.pintuan-right-img {
height: 40px;
display: flex;
img {
width: 40px;
height: 40px;
z-index: 98;
background-size: 100%;
}
}
.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: 95%;
margin: 0 auto 10px;
background: #f5f8f5;
height: 70px;
border-radius: 10px;
overflow: hidden;
display: flex;
}
.pintuan-right-cha {
line-height: 40px;
margin-left: 10px;
}
.goods-bottom {
width: 95%;
margin: 0 auto;
}
.detail1 {
height: 24px;
font-size: 15px;
font-weight: 700;
}
.detail2 {
line-height: 26px;
font-size: 14px;
padding-bottom: 40px;
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 160rpx;
display: flex;
background: #fff;
z-index: 99;
box-shadow: 0 -10px 15px 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;
display: flex;
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;
}
.bottom-btn {
width: 120px;
height: 50px;
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
font-size: 13px;
font-weight: 700;
line-height: 50px;
text-align: center;
}
</style>

4
package1/group/groupBuyDetail.vue
View File

@ -3,7 +3,9 @@
</template> </template>
<script> <script>
</script> </script>
<style> <style lang="scss">
</style> </style>

9
package1/group/groupBuyList.vue
View File

@ -76,7 +76,7 @@
<img src="/static/images/img/shangpintu.png" alt=""> <img src="/static/images/img/shangpintu.png" 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%;" /> <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>
<view class="shop-content"> <view class="shop-content" @tap="goDetail('shopDetail')">
<view class="shop-name"> <view class="shop-name">
牛仔农庄(医专店) 牛仔农庄(医专店)
</view> </view>
@ -434,6 +434,13 @@
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
}, },
methods: { methods: {
goDetail(type){
if(type == 'shopDetail'){
uni.navigateTo({
url:'/package1/group/groupBuySingle'
})
}
},
back(){ back(){
uni.navigateBack() uni.navigateBack()
}, },

702
package1/group/groupBuySingle.vue
View File

@ -1,9 +1,709 @@
<template> <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="/static/images/img/shangpintu.png" 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">
牛仔农庄(医专店)
</view>
<view class="shop-content-center">
<view class="shop-rate">
<view class="shop-rate-num">4.3</view>
<uni-rate :disabled="true" size="20" disabledColor="rgba(255, 184, 84, 1)"
:value="4.3" />
</view>
<view class="shop-tag">
<text
style="padding: 4rpx 10rpx;background: rgba(223, 255, 176, 1);color: #777;border-radius: 6rpx;">
炒菜
</text>
</view>
</view>
<view class="shop-content-bottom">
<view class="shop-deal">
已拼<text style="color: red;font-weight: 700;"> 12 </text>单
</view>
<view class="shop-deal1">
月售 <text> 100+</text>
</view>
</view>
</view>
</view>
<view class="shop-bottom">
公告：这里是第三食堂美食top1，好吃不贵，欢迎下好吃不贵，欢迎下单！欢迎下单！
</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-box">
<view class="menu1">
</view>
</view>
<view class="goods-member">
<view class="goods-top">
<view class="goods-img">
<img src="/static/images/img/shangpintu.png" 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="goods-content" @tap="goDetail('shopDetail')">
<view class="goods-name">
牛仔农庄(医专店)
</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="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-bottom">
<view class="goods-btn"
style="background: rgba(166, 255, 234, 0.3);margin-right: 6%;border: 1px solid rgba(166, 255, 234, 0.5);">
直接购买
</view>
<view class="goods-btn">
拼团购买￥15.00
</view>
</view>
</view>
<view class="goods-member">
<view class="goods-top">
<view class="goods-img">
<img src="/static/images/img/shangpintu.png" 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="goods-content" @tap="goDetail('shopDetail')">
<view class="goods-name">
牛仔农庄(医专店)
</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="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-bottom">
<view class="goods-btn"
style="background: rgba(166, 255, 234, 0.3);margin-right: 6%;border: 1px solid rgba(166, 255, 234, 0.5);">
直接购买
</view>
<view class="goods-btn">
拼团购买￥15.00
</view>
</view>
</view>
<view class="goods-member">
<view class="goods-top">
<view class="goods-img">
<img src="/static/images/img/shangpintu.png" 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="goods-content" @tap="goDetail('shopDetail')">
<view class="goods-name">
牛仔农庄(医专店)
</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="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-bottom">
<view class="goods-btn"
style="background: rgba(166, 255, 234, 0.3);margin-right: 6%;border: 1px solid rgba(166, 255, 234, 0.5);">
直接购买
</view>
<view class="goods-btn">
拼团购买￥15.00
</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">
<view class="goods-img">
<img src="/static/images/img/shangpintu.png" 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="goods-content" @tap="goDetail('shopDetail')">
<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 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>
</view>
</view>
</uni-popup>
</view>
</template> </template>
<script> <script>
export default {
data() {
return {
menuButtonInfo: {}
}
},
components: {
},
onLoad() {
},
onShow() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
},
methods: {
openPopup(type){
if(type == 'car'){
this.$refs.carPopup.open('bottom')
}
},
goDetail(type) {
if (type == 'shopDetail') {
uni.navigateTo({
url: '/package1/goods/goodsDetail'
})
}
},
back() {
uni.navigateBack()
}
}
}
</script> </script>
<style> <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-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;
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;
}
.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%;
}
.car-close{
width: 30px;
height: 30px;
position: absolute;
top: -40px;
right: 10px;
}
.car-title{
height: 48px;
line-height: 48px;
width: 95%;
margin: 0 auto;
font-size: 14px;
font-weight: 700;
}
</style> </style>
Write Preview
Loading…
Cancel
Save