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

1

master
wangfukang 4 weeks ago
parent
babde4eb2a
commit
6b0ede149b
1 changed files with 697 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 725
      package1/group/groupBuySingle.vue

725
package1/group/groupBuySingle.vue
View File

@ -13,9 +13,19 @@
</view>
</view>
<!-- 背景头图（随页面滚动） -->
<view class="title"></view>
<view class="title">
<view class="hero-spark spark-a"></view>
<view class="hero-spark spark-b"></view>
<view class="hero-spark spark-c"></view>
</view>
<view class="content">
<view class="pintuan">
<view class="pintuan shop-card group-hero-card">
<view class="group-card-glow"></view>
<view class="shop-rally-badge">
<text>有件事你知道吗？</text>
<text class="shop-rally-dot"></text>
<text>拼团和期末不挂科一样重要！</text>
</view>
<view class="shop-top">
<view class="shop-img">
<img :src="shopItem.shopIcon" alt="">
@ -27,6 +37,9 @@
<view class="shop-name">
{{shopItem.shopName}}
</view>
<view class="shop-subtitle">
约上室友同学一起拼，越快成团越快开吃
</view>
<view class="shop-content-center">
<view class="shop-rate">
<view class="shop-rate-num">{{shopItem.shopScore}}</view>
@ -53,16 +66,22 @@
</view>
</view>
<view class="shop-bottom">
公告：{{shopItem.remark}}
<text class="notice-label">公告</text>
<text>{{shopItem.remark}}</text>
</view>
</view>
<view class="pintuan" style="padding: 0;margin-top:20rpx;display: flex;" v-if="orderListWait.length > 0" @tap="openOrderWait('')">
<view class="pintuan group-live-card" style="padding: 0;margin-top:20rpx;display: flex;" v-if="orderListWait.length > 0" @tap="openOrderWait('')">
<view class="live-card-header">
<view>
<view class="live-title">加入队伍，马上省一笔</view>
</view>
<view class="live-pill">去凑团</view>
</view>
<swiper class="zaixian-swiper" vertical circular :autoplay="orderListWait.length > 0"
:interval="onlineWorkerInterval" :duration="onlineWorkerDuration">
<swiper-item v-for="(item,index) in orderListWait" :key="index">
<view style="display: flex;">
<view class="live-swiper-item">
<view class="pintuan-left">
<view class="pintuan-left-img">
<img :src="item.productPicture" alt="">
@ -83,7 +102,7 @@
<view class="weipincheng">+</view>
</view>
<view class="pintuan-right-cha">
差<text style="color: red;">{{item.targetMembers - item.currentMembers}}人</text>拼成
差<text class="missing-count">{{item.targetMembers - item.currentMembers}}人</text>拼成
</view>
</view>
</view>
@ -93,16 +112,18 @@
<!-- 分类栏：移到goods-list外层，position:sticky才能生效 -->
<!-- 占位元素：当container吸顶时保持页面高度不塌缩 -->
<view v-if="isContainerSticky" :style="'height:' + containerHeight + 'px;margin-top:20rpx;'"></view>
<view class="container" :style="containerStyle">
<scroll-view scroll-y id="menuList" style="border-right: 1px solid #eee;font-weight: 700;font-size: 28rpx;height: 100%;width: 160rpx;">
<view class="container goods-panel" :style="containerStyle">
<scroll-view scroll-y id="menuList" class="menu-scroll" style="border-right: 1px solid #eee;font-weight: 700;font-size: 28rpx;height: 100%;width: 160rpx;">
<view class="menu1" @tap="checkTab(index)" v-for="(item,index) in menuList" :key="index"
:style="{'border-top-right-radius':item.checked?'20rpx':'','border-bottom-right-radius':item.checked?'20rpx':'','color':item.checked?'rgba(0, 35, 28, 1)':'#777','background':item.checked?'#fff':''}">
<view class="menu-active-dot" v-if="item.checked"></view>
<view style="width: 160rpx;">{{item.categoryName}}</view>
</view>
</scroll-view>
<scroll-view class="goods-list" scroll-y :scroll-into-view="scrollIntoViewId" :scroll-top="goodsListScrollTop" @scroll="onGoodsListScroll" @scrolltoupper="onGoodsListScrollToTop" :scroll-with-animation="true">
<view class="goods-member" :id="'category-' + item.categoryId" v-for="(item,index) in productItem" :key="index"
<view class="goods-member goods-card" :id="'category-' + item.categoryId" v-for="(item,index) in productItem" :key="index"
@tap="goDetail('product',item)">
<view class="goods-card-shine"></view>
<view @tap.stop="buyingye" v-if="item.status == 1"
style="width: 100%;height:100%;position: absolute;top: 0;background: rgba(0, 0, 0, 0.1);z-index: 999;border-radius: 20rpx;">
</view>
@ -118,6 +139,10 @@
<view class="goods-name">
{{item.productName}}
</view>
<view class="goods-vibe">
<text class="goods-vibe-tag">拼团价更香</text>
<text class="goods-vibe-copy">约人一起下单</text>
</view>
<view class="goods-content-center">
<view class="goods-deal1">
销量 <text> {{item.tailWarn != null ? item.tailWarn : 0}}</text>
@ -139,10 +164,15 @@
</view>
<view class="goods-bottom">
<view v-if="item.productGroupBuyPrices != null && item.isMoreBuy != 1" class="goods-btn" style="margin-left: 6%;" :style="{'float':groupId != ''?'right':''}" @tap="openPopup('xiadan','pintuan',item)">
拼团购买¥{{ getGroupPrice(item) }}
<view v-if="item.productGroupBuyPrices != null && item.isMoreBuy != 1" class="goods-btn group-buy-btn" style="margin-left: 6%;" :style="{'float':groupId != ''?'right':''}" @tap="openPopup('xiadan','pintuan',item)">
<view class="btn-spark">
<view class="spark-dot spark-dot-1"></view>
<view class="spark-dot spark-dot-2"></view>
<view class="spark-dot spark-dot-3"></view>
</view>
<text>拼团购买¥{{ getGroupPrice(item) }}</text>
</view>
<view class="goods-btn" v-if="!groupId" @tap="openPopup('xiadan','dandu',item)"
<view class="goods-btn solo-buy-btn" v-if="!groupId" @tap="openPopup('xiadan','dandu',item)"
style="background: rgba(166, 255, 234, 0.3);border: 1px solid rgba(166, 255, 234, 0.5);height:68rpx;">
直接购买¥{{item.attributeListPrice | sliceMsg}}
</view>
@ -155,17 +185,20 @@
</view>
</view>
<view style="width: 100%;height: 160rpx;"></view>
<view class="bottom">
<view class="bottom checkout-bar">
<view class="bottom-left">
<view style="position: relative;width: 60rpx;height: 80rpx;margin-top: 20rpx;"
<view class="cart-bag-wrap" 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" v-if="cartTotalCount > 0">{{cartTotalCount}}</view>
</view>
<view class="bottom-price">￥{{cartTotalPrice}}</view>
<view class="bottom-price">
<view class="bottom-price-label">已选合计</view>
<view>￥{{cartTotalPrice}}</view>
</view>
</view>
<view class="bottom-right" @tap="submitCartCheckout">
<view class="bottom-right checkout-btn" @tap="submitCartCheckout">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d93d893296ed46ea99cfd0e8e2835eaa.png" alt="" />
</view>
</view>
@ -250,11 +283,14 @@
</uni-popup>
<!-- 拼团和选规格弹窗 -->
<uni-popup ref="pintuanPopup" background-color="#fff">
<view class="car-content">
<view class="car-content group-order-popup">
<view class="car-close" @tap="$refs.pintuanPopup.close()">
<uni-icons type="close" size="30" color="#fff"></uni-icons>
</view>
<view class="goods-top">
<view class="popup-rally-title" v-if="isPintuan">
<view class="popup-rally-main">拼团搭子哪里找-隔壁宿舍全是宝！</view>
</view>
<view class="goods-top popup-product-card">
<view class="goods-img">
<img :src="currentItem.productPicture" alt="" style="border-radius: 20rpx;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png"
@ -271,7 +307,7 @@
</view>
</view>
<view class="goods-content-bottom">
<view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;">
<view class="popup-origin-price" style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;">
￥{{currentItem.attributeListPrice | sliceMsg}}
</view>
</view>
@ -299,7 +335,7 @@
</view>
<view class="goods-team">
<view
:class="selectedGroupRule && selectedGroupRule.groupCount === rule.groupCount ? 'team-check' : 'team1'"
:class="selectedGroupRule && selectedGroupRule.groupCount === rule.groupCount ? 'team-check team-rule-card' : 'team1 team-rule-card'"
v-for="(rule, rIndex) in currentItem.productGroupBuyPrices" :key="rIndex"
@tap="selectGroupRule(rule)">
<view class="team11" style="margin-top: 0;">
@ -350,7 +386,7 @@
</view>
</view>
<!-- 优惠券选择 -->
<view v-if="isPintuan" style="display: flex;height: 80rpx;line-height: 80rpx;border-top: 1px solid #eee;font-size: 28rpx;font-weight: 700; align-items:center; margin-top: 20rpx;" @tap="openCouponPopup">
<view v-if="isPintuan" class="coupon-row" style="display: flex;height: 80rpx;line-height: 80rpx;border-top: 1px solid #eee;font-size: 28rpx;font-weight: 700; align-items:center; margin-top: 20rpx;" @tap="openCouponPopup">
<view style="flex: 1; color: #777;">
优惠券
</view>
@ -367,7 +403,7 @@
</view>
<view style="width: 100%;height: 160rpx;"></view>
</scroll-view>
<view class="bottom" style="padding-bottom: 40rpx;height: 160rpx;z-index: 10;">
<view class="bottom popup-bottom-bar" style="padding-bottom: 40rpx;height: 160rpx;z-index: 10;">
<view v-if="isPintuan" class="pintuan1">
<template v-if="!groupId">
<view class="pintuan2" style="border-bottom-left-radius: 100rpx;border-top-left-radius: 100rpx;"
@ -396,18 +432,19 @@
</uni-popup>
<!-- 拼团和选规格弹窗 -->
<uni-popup ref="pintuanGroupPopup" background-color="#fff">
<view class="car-content">
<view class="car-content join-team-popup">
<view class="car-close" @tap="$refs.pintuanGroupPopup.close()">
<uni-icons type="close" size="30" color="#fff"></uni-icons>
</view>
<view class="goods-top" style="font-size: 28rpx;font-weight: 700;">
快来加入拼团吧！可以选取任意拼团商品下单！
<view class="join-popup-title" style="font-size: 28rpx;font-weight: 700;">
<view class="join-popup-main">快来加入拼团吧！</view>
<view class="join-popup-sub">选一支快成团的队伍，马上省</view>
</view>
<scroll-view scroll-y style="max-height: 50vh;">
<template>
<!-- 占位假数据展示 -->
<view class="">
<view class="goods-center" v-for="(item, index) in orderListWait" :key="index">
<view class="goods-center team-wait-card" v-for="(item, index) in orderListWait" :key="index">
<view class="list-right">
<view class="list-right-img">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
@ -419,7 +456,7 @@
{{item.targetMembers}}人拼
</view>
<view style="line-height: 40rpx;padding-left: 10rpx;">
差<text style="color: red;">{{item.targetMembers - item.currentMembers}}人</text>拼成
差<text class="missing-count">{{item.targetMembers - item.currentMembers}}人</text>拼成
</view>
</view>
</view>
@ -1656,6 +1693,8 @@
width: 100%;
height: 340rpx;
background-size: 100% 100%;
position: relative;
overflow: hidden;
}
/* 固定在顶部的导航栏，覆盖在背景图上 */
@ -2318,4 +2357,634 @@
text-align: center;
line-height: 90rpx;
}
.hero-spark {
position: absolute;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 0 22rpx rgba(255, 244, 183, 0.9);
animation: sparkFloat 3.2s ease-in-out infinite;
}
.spark-a {
width: 18rpx;
height: 18rpx;
top: 120rpx;
left: 80rpx;
}
.spark-b {
width: 24rpx;
height: 24rpx;
top: 190rpx;
right: 110rpx;
animation-delay: 0.6s;
}
.spark-c {
width: 14rpx;
height: 14rpx;
top: 82rpx;
right: 250rpx;
animation-delay: 1.1s;
}
.group-hero-card,
.group-live-card,
.goods-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 18rpx 42rpx rgba(0, 35, 28, 0.08);
}
.group-hero-card {
background:
radial-gradient(circle at 88% 8%, rgba(255, 216, 133, 0.44) 0, rgba(255, 216, 133, 0) 190rpx),
linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 255, 248, 0.95) 48%, rgba(233, 255, 247, 0.98) 100%);
animation: cardFloatIn 0.32s ease both;
}
.group-card-glow,
.goods-card-shine {
position: absolute;
width: 280rpx;
height: 240rpx;
top: -120rpx;
right: -150rpx;
border-radius: 50%;
background: rgba(166, 255, 234, 0.26);
pointer-events: none;
}
.shop-rally-badge {
display: inline-flex;
align-items: center;
height: 42rpx;
margin-bottom: 18rpx;
padding: 0 18rpx;
border-radius: 999rpx;
background: linear-gradient(90deg, #fff2c6 0%, #a6ffea 100%);
color: #123d35;
font-size: 22rpx;
font-weight: 900;
box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.06);
position: relative;
z-index: 1;
}
.shop-rally-dot {
width: 8rpx;
height: 8rpx;
margin: 0 12rpx;
border-radius: 50%;
background: #ff7a4f;
box-shadow: 0 0 16rpx rgba(255, 122, 79, 0.7);
}
.shop-subtitle {
margin-top: 8rpx;
color: #6b7c77;
font-size: 22rpx;
font-weight: 700;
line-height: 32rpx;
}
.notice-label {
display: inline-block;
height: 34rpx;
line-height: 34rpx;
margin-right: 12rpx;
padding: 0 12rpx;
border-radius: 999rpx;
background: rgba(255, 117, 88, 0.12);
color: #ff5b36;
font-size: 20rpx;
font-weight: 900;
}
.group-live-card {
display: block !important;
padding: 12rpx 16rpx !important;
background:
radial-gradient(circle at 92% 0, rgba(166, 255, 234, 0.42) 0, rgba(166, 255, 234, 0) 150rpx),
linear-gradient(135deg, #f8fffb 0%, #fff7dc 48%, #eafff8 100%);
color: #123d35;
border: 1px solid rgba(166, 255, 234, 0.72);
border-radius: 26rpx;
box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.08);
}
.group-live-card::after {
content: '';
position: absolute;
width: 300rpx;
height: 520rpx;
top: -150rpx;
left: -340rpx;
background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 196, 102, 0.28) 46%, rgba(255, 255, 255, 0) 100%);
transform: rotate(18deg);
animation: lightSweep 3.8s ease-in-out infinite;
}
.live-card-header {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
margin-bottom: 6rpx;
}
.live-title {
font-size: 28rpx;
font-weight: 900;
line-height: 34rpx;
}
.live-subtitle {
color: #6d7c77;
font-size: 20rpx;
line-height: 26rpx;
}
.live-pill {
height: 48rpx;
line-height: 48rpx;
padding: 0 22rpx;
border-radius: 999rpx;
background: linear-gradient(90deg, #e3ff96, #a6ffea);
color: #00231c;
font-size: 22rpx;
font-weight: 900;
animation: ctaBreath 1.8s ease-in-out infinite;
}
.live-swiper-item {
display: flex;
align-items: center;
position: relative;
z-index: 1;
height: 92rpx;
border-radius: 22rpx;
background: rgba(255, 255, 255, 0.74);
border: 1px solid rgba(166, 255, 234, 0.46);
}
.group-live-card .pintuan-left {
min-width: 0;
padding: 8rpx 10rpx;
}
.group-live-card .pintuan-right {
width: 214rpx;
flex-shrink: 0;
align-items: center;
justify-content: flex-end;
margin-top: 0;
color: #123d35;
}
.group-live-card .pintuan-left-img {
width: 70rpx;
height: 70rpx;
}
.group-live-card .pintuan-left-name {
margin-bottom: 8rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.group-live-card .pintuan-left-price {
padding: 6rpx 10rpx;
font-size: 20rpx;
}
.group-live-card .pintuan-right-cha {
padding-left: 6rpx;
font-size: 20rpx;
line-height: 34rpx;
white-space: nowrap;
}
.group-live-card .pintuan-right-img {
height: 36rpx;
}
.group-live-card .pintuan-right-img img,
.group-live-card .weipincheng {
width: 36rpx;
height: 36rpx;
}
.group-live-card .weipincheng {
line-height: 36rpx;
font-size: 24rpx;
}
.group-live-card .zaixian-swiper {
height: 92rpx;
}
.missing-count {
color: #ff5938;
font-size: 22rpx;
font-weight: 900;
padding: 0 4rpx;
animation: pricePop 1.5s ease-in-out infinite;
}
.goods-panel {
border-radius: 34rpx 34rpx 0 0;
overflow: hidden;
box-shadow: 0 -8rpx 28rpx rgba(0, 35, 28, 0.04);
}
.menu-scroll {
background: rgba(247, 255, 251, 0.9);
border-right: 0 !important;
}
.menu1 {
font-weight: 900;
transition: transform 0.18s ease, background 0.18s ease;
}
.menu1:active {
transform: scale(0.96);
}
.menu-active-dot {
position: absolute;
left: 14rpx;
top: 36rpx;
width: 14rpx;
height: 14rpx;
border-radius: 50%;
background: #ff7a4f;
box-shadow: 0 0 16rpx rgba(255, 122, 79, 0.65);
}
.goods-card {
width: 96%;
margin: 0 auto 22rpx;
border-radius: 30rpx;
background:
radial-gradient(circle at 92% 6%, rgba(255, 237, 176, 0.34) 0, rgba(255, 237, 176, 0) 150rpx),
#fff;
animation: cardFloatIn 0.28s ease both;
}
.goods-card:active {
transform: scale(0.985);
}
.goods-card .goods-img img:first-child {
box-shadow: 0 12rpx 22rpx rgba(0, 35, 28, 0.1);
}
.goods-vibe {
margin-top: 10rpx;
display: flex;
align-items: center;
}
.goods-vibe-tag {
height: 34rpx;
line-height: 34rpx;
padding: 0 12rpx;
border-radius: 999rpx;
background: linear-gradient(90deg, #fff2c6, #a6ffea);
color: #0f554a;
font-size: 20rpx;
font-weight: 900;
}
.goods-vibe-copy {
margin-left: 10rpx;
color: #88928f;
font-size: 20rpx;
font-weight: 700;
}
.goods-card .goods-deal1 {
color: #71817c;
font-weight: 700;
}
.group-buy-btn {
display: flex;
align-items: center;
justify-content: center;
height: 70rpx;
border-radius: 999rpx;
background: linear-gradient(90deg, #a6ffea 0%, #fff2a8 46%, #ff855d 100%) !important;
color: #0d332c;
box-shadow: 0 12rpx 24rpx rgba(255, 133, 93, 0.24);
animation: ctaBreath 1.35s ease-in-out infinite;
}
.btn-spark {
width: 36rpx;
height: 36rpx;
margin-right: 8rpx;
position: relative;
}
.btn-spark::before {
content: '';
position: absolute;
left: 8rpx;
top: 8rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50% 50% 50% 8rpx;
background: linear-gradient(135deg, #ff4d38 0%, #ffbd49 62%, #fff2a8 100%);
transform: rotate(-35deg);
box-shadow: 0 0 14rpx rgba(255, 120, 56, 0.5);
animation: flamePulse 1.2s ease-in-out infinite;
}
.spark-dot {
position: absolute;
width: 6rpx;
height: 6rpx;
border-radius: 50%;
background: #fff1a6;
box-shadow: 0 0 10rpx rgba(255, 193, 74, 0.8);
animation: sparkBurst 1.1s ease-in-out infinite;
}
.spark-dot-1 {
top: 0;
left: 14rpx;
}
.spark-dot-2 {
top: 10rpx;
right: 0;
animation-delay: 0.22s;
}
.spark-dot-3 {
left: 0;
bottom: 8rpx;
animation-delay: 0.42s;
}
.solo-buy-btn {
border-radius: 999rpx !important;
color: #1f685d;
box-shadow: inset 0 0 0 1px rgba(166, 255, 234, 0.36);
}
.checkout-bar {
left: 2.5%;
bottom: 18rpx;
width: 95%;
border-radius: 42rpx;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 -8rpx 34rpx rgba(0, 35, 28, 0.16);
overflow: hidden;
}
.cart-bag-wrap {
animation: bagBounce 2.2s ease-in-out infinite;
}
.checkout-bar .bottom-left {
align-items: center;
padding: 14rpx 22rpx;
}
.checkout-bar .bottom-price {
margin-left: 28rpx;
line-height: 42rpx;
color: #ff3d2e;
}
.bottom-price-label {
color: #7c8b86;
font-size: 20rpx;
font-weight: 700;
line-height: 26rpx;
}
.checkout-btn:active,
.group-buy-btn:active,
.solo-buy-btn:active,
.list-btn:active,
.pintuan2:active {
transform: scale(0.96);
}
.group-order-popup,
.join-team-popup {
border-top-left-radius: 40rpx;
border-top-right-radius: 40rpx;
background:
radial-gradient(circle at 92% 0, rgba(166, 255, 234, 0.34) 0, rgba(166, 255, 234, 0) 210rpx),
linear-gradient(180deg, #ffffff 0%, #f7fffb 100%);
}
.popup-rally-title,
.join-popup-title {
padding: 8rpx 20rpx 22rpx;
text-align: center;
}
.popup-rally-main,
.join-popup-main {
color: #103a32;
font-size: 36rpx;
font-weight: 900;
line-height: 48rpx;
}
.popup-rally-sub,
.join-popup-sub {
margin-top: 6rpx;
color: #74817d;
font-size: 24rpx;
font-weight: 700;
line-height: 34rpx;
}
.popup-product-card {
margin: 0 0 18rpx;
border-radius: 28rpx;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(166, 255, 234, 0.42);
box-shadow: 0 12rpx 26rpx rgba(0, 35, 28, 0.06);
}
.popup-origin-price {
color: #ff4d38;
font-weight: 900;
}
.team-rule-card {
box-shadow: 0 10rpx 20rpx rgba(0, 35, 28, 0.05);
transition: transform 0.18s ease;
}
.team-check.team-rule-card {
background: linear-gradient(135deg, #fff2c6, #a6ffea);
box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.1);
animation: cardPulse 1.8s ease-in-out infinite;
}
.coupon-row {
margin-top: 28rpx !important;
padding: 0 18rpx;
border: 1px solid rgba(255, 216, 133, 0.44) !important;
border-radius: 22rpx;
background: rgba(255, 248, 224, 0.64);
}
.popup-bottom-bar {
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 -12rpx 28rpx rgba(0, 35, 28, 0.1);
}
.popup-bottom-bar .pintuan2 {
transition: transform 0.18s ease;
}
.popup-bottom-bar .pintuan2:last-child {
box-shadow: 0 12rpx 24rpx rgba(0, 35, 28, 0.18);
animation: ctaBreath 1.9s ease-in-out infinite;
}
.team-wait-card {
height: 156rpx;
border-radius: 30rpx;
background:
radial-gradient(circle at 90% 8%, rgba(255, 226, 142, 0.34) 0, rgba(255, 226, 142, 0) 130rpx),
#fff;
border: 1px solid rgba(166, 255, 234, 0.42);
box-shadow: 0 12rpx 26rpx rgba(0, 35, 28, 0.06);
}
.team-wait-card .list-btn {
background: linear-gradient(90deg, #ff855d, #ffd76d);
color: #fff;
box-shadow: 0 10rpx 18rpx rgba(255, 133, 93, 0.22);
}
@keyframes sparkFloat {
0%,
100% {
opacity: 0.5;
transform: translateY(0) scale(1);
}
50% {
opacity: 1;
transform: translateY(-22rpx) scale(1.25);
}
}
@keyframes lightSweep {
0% {
left: -360rpx;
opacity: 0;
}
28% {
opacity: 1;
}
64%,
100% {
left: 760rpx;
opacity: 0;
}
}
@keyframes ctaBreath {
0%,
100% {
transform: scale(1);
box-shadow: 0 12rpx 24rpx rgba(255, 133, 93, 0.22);
}
50% {
transform: scale(1.075);
box-shadow: 0 18rpx 34rpx rgba(255, 133, 93, 0.42);
}
}
@keyframes pricePop {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.16);
}
}
@keyframes flamePulse {
0%,
100% {
opacity: 0.92;
transform: rotate(-35deg) scale(1);
}
50% {
opacity: 1;
transform: rotate(-30deg) scale(1.14);
}
}
@keyframes sparkBurst {
0%,
100% {
opacity: 0.35;
transform: translateY(0) scale(0.8);
}
50% {
opacity: 1;
transform: translateY(-8rpx) scale(1.2);
}
}
@keyframes bagBounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8rpx);
}
}
@keyframes cardFloatIn {
0% {
opacity: 0;
transform: translateY(16rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes cardPulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.03);
}
}
</style>
Write Preview
Loading…
Cancel
Save