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

1

master
wangfukang 3 weeks ago
parent
f7d91248fa
commit
f7292d3dea
1 changed files with 158 additions and 365 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. 523
      pages/index/index.vue

523
pages/index/index.vue
View File

@ -141,7 +141,7 @@
<text>爆款指数 ↑</text> <text>爆款指数 ↑</text>
<text>拼团王在线</text> <text>拼团王在线</text>
</view> </view>
<view class="seckill-entry seckill-entry--in-card" @tap="goSeckillGroup" style="margin-bottom: 10rpx;"> <view class="seckill-entry seckill-entry--in-card" @tap="goSeckillGroup">
<view class="heat-dot heat-dot-a"></view> <view class="heat-dot heat-dot-a"></view>
<view class="heat-dot heat-dot-b"></view> <view class="heat-dot heat-dot-b"></view>
<view class="seckill-entry-light"></view> <view class="seckill-entry-light"></view>
@ -150,103 +150,57 @@
</view> </view>
<view class="seckill-entry-btn">抢</view> <view class="seckill-entry-btn">抢</view>
</view> </view>
<view class="group-orbit group-orbit-a"></view> <view class="group-flat-row">
<view class="group-orbit group-orbit-b"></view> <view class="flat-card" v-if="item.position == 'home_center_left_top' "
<view class="like-left like-world-left"> v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
<view class="like-content-title"> <view class="flat-card-img">
<view style="width: 100%;font-weight: 700;">食堂星球热拼</view> <img :src="item.adDisplayImage" alt="">
<image class="like-hot-gif" src="/static/images/img/loading.gif" mode="aspectFit"></image> <view class="flat-card-tag">🔥 正在拼</view>
</view>
<!-- <img src="/static/images/img/yousanjiao.png" alt="" <view class="flat-card-name">{{item.title}}</view>
style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;padding-bottom: 10rpx;"> --> <view class="flat-card-price">￥{{item.productList[0].groupPrice}}</view>
<view class="flat-card-foot">
<text>{{item.productList[0].groupMembers}}人团</text>
<view class="flat-card-btn">去拼</view>
</view>
</view> </view>
<view class="like-content"> <view class="flat-card" v-if="item.position == 'home_center_left_bottom' "
<view class="content-list" v-if="item.position == 'home_center_left_top' " v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)"> <view class="flat-card-img">
<view class="list-img"> <img :src="item.adDisplayImage" alt="">
<img :src="item.adDisplayImage" alt=""> <view class="flat-card-tag">🔥 正在拼</view>
<view class="list-type">正在拼</view>
</view>
<view class="list-product">
<view class="list-name">
<view class="list-text">{{item.title}}</view>
</view>
<view class="list-price" style="color: #00231C;">
￥{{item.productList[0].groupPrice}}</view>
<view class="list-total">
<text style="color: red;">{{item.productList[0].groupMembers}}人团</text>
<view class="group-cta" style="margin-left: 14rpx;">去拼</view>
</view>
</view>
</view> </view>
<view class="content-list" v-if="item.position == 'home_center_left_bottom' " <view class="flat-card-name">{{item.title}}</view>
v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)"> <view class="flat-card-price">￥{{item.productList[0].groupPrice}}</view>
<view class="list-img"> <view class="flat-card-foot">
<img :src="item.adDisplayImage" alt=""> <text>{{item.productList[0].groupMembers}}人团</text>
<view class="list-type">正在拼</view> <view class="flat-card-btn">去拼</view>
</view>
<view class="list-product">
<view class="list-name">
<view class="list-text">{{item.title}}</view>
</view>
<view class="list-price" style="color: #00231C;">
￥{{item.productList[0].groupPrice}}</view>
<view class="list-total">
<text style="color: red;">{{item.productList[0].groupMembers}}人团</text>
<view class="group-cta" style="margin-left: 14rpx;">去拼</view>
</view>
</view>
</view> </view>
</view> </view>
</view> <view class="flat-card" v-if="item.position == 'home_center_right_top' "
<view class="like-left like-world-right"> v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
<view class="like-content-title"> <view class="flat-card-img">
<view style="font-weight: 700;">宿舍搭子开团</view> <img :src="item.adDisplayImage" alt="">
<image class="like-hot-gif" src="/static/images/img/loading.gif" mode="aspectFit"></image> <view class="flat-card-tag">🔥 正在拼</view>
</view>
<!-- <img src="/static/images/img/yousanjiao.png" alt="" <view class="flat-card-name">{{item.title}}</view>
style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;padding-bottom: 10rpx;"> --> <view class="flat-card-price">￥{{item.productList[0].groupPrice}}</view>
<view class="flat-card-foot">
<text>{{item.productList[0].groupMembers}}人团</text>
<view class="flat-card-btn">去拼</view>
</view>
</view> </view>
<view class="like-content"> <view class="flat-card" v-if="item.position == 'home_center_right_bottom' "
<view class="content-list" v-if="item.position == 'home_center_right_top' " v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)"> <view class="flat-card-img">
<view class="list-img"> <img :src="item.adDisplayImage" alt="">
<img :src="item.adDisplayImage" alt=""> <view class="flat-card-tag">🔥 正在拼</view>
<view class="list-type">正在拼</view>
</view>
<view class="list-product">
<view class="list-name">
<view class="list-text">{{item.title}}</view>
</view>
<view class="list-price" style="color: #00231C;">
￥{{item.productList[0].groupPrice}}</view>
<view class="list-total">
<text style="color: red;">{{item.productList[0].groupMembers}}人团</text>
<view class="group-cta" style="margin-left: 14rpx;">去拼</view>
</view>
</view>
</view> </view>
<view class="content-list" v-if="item.position == 'home_center_right_bottom' " <view class="flat-card-name">{{item.title}}</view>
v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)"> <view class="flat-card-price">￥{{item.productList[0].groupPrice}}</view>
<view class="list-img"> <view class="flat-card-foot">
<img :src="item.adDisplayImage" alt=""> <text>{{item.productList[0].groupMembers}}人团</text>
<view class="list-type">正在拼</view> <view class="flat-card-btn">去拼</view>
</view>
<view class="list-product">
<view class="list-name">
<view class="list-text">{{item.title}}</view>
</view>
<view class="list-price" style="color: #00231C;">
￥{{item.productList[0].groupPrice}}</view>
<view class="list-total">
<text style="color: red;">{{item.productList[0].groupMembers}}人团</text>
<view class="group-cta" style="margin-left: 14rpx;">去拼</view>
</view>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -255,8 +209,10 @@
<view class="daimai-box" style="padding-bottom:180rpx;"> <view class="daimai-box" style="padding-bottom:180rpx;">
<view class="earn-guide"> <view class="earn-guide">
<view class="earn-guide-light"></view> <view class="earn-guide-light"></view>
<view class="earn-guide-icon">🛵</view>
<text class="earn-guide-main">顺路送几单，挣点零花钱</text> <text class="earn-guide-main">顺路送几单，挣点零花钱</text>
<text class="earn-guide-tag">接受直接购买指派单额外有佣金哦</text> <text class="earn-guide-tag">接直接购买指派单额外有佣金</text>
<!-- <view class="earn-guide-arrow">›</view> -->
</view> </view>
<view class="daimai-tab" id="menuList" :class="{'daimai-tab--sticky': lastScrollTop>stickyTrigger}" <view class="daimai-tab" id="menuList" :class="{'daimai-tab--sticky': lastScrollTop>stickyTrigger}"
:style="{'top': (navBarHeight+46) + 'px'}"> :style="{'top': (navBarHeight+46) + 'px'}">
@ -1994,12 +1950,6 @@
} }
/* 吸顶后上方区域不可见，暂停所有 infinite 动画，降低主线程合成压力 */ /* 吸顶后上方区域不可见，暂停所有 infinite 动画，降低主线程合成压力 */
.page1.is-sticky .like-content-box::before,
.page1.is-sticky .like-left,
.page1.is-sticky .like-hot-gif,
.page1.is-sticky .list-type,
.page1.is-sticky .list-total text,
.page1.is-sticky .group-cta,
.page1.is-sticky .hero-particle, .page1.is-sticky .hero-particle,
.page1.is-sticky .life-ip, .page1.is-sticky .life-ip,
.page1.is-sticky .life-progress-bar, .page1.is-sticky .life-progress-bar,
@ -2728,14 +2678,14 @@
.earn-guide { .earn-guide {
height: 64rpx; height: 64rpx;
margin: 0 8rpx 8rpx; margin: 0 8rpx 8rpx;
padding: 0 20rpx; padding: 0 12rpx 0 18rpx;
box-sizing: border-box; box-sizing: border-box;
border-radius: 28rpx; border-radius: 16rpx;
background: background:
radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0) 72rpx), radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0) 74rpx),
linear-gradient(135deg, rgba(231, 255, 245, 0.96) 0%, rgba(255, 247, 224, 0.96) 58%, rgba(255, 233, 212, 0.96) 100%); linear-gradient(90deg, rgba(236, 255, 248, 0.98) 0%, rgba(255, 252, 237, 0.98) 58%, rgba(255, 238, 226, 0.98) 100%);
border: 1px solid rgba(255, 255, 255, 0.88); border: 1px solid rgba(255, 255, 255, 0.88);
box-shadow: 0 14rpx 32rpx rgba(74, 151, 111, 0.12), inset 0 1rpx 0 rgba(255, 255, 255, 0.9); box-shadow: 0 10rpx 24rpx rgba(74, 151, 111, 0.08), inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
@ -2753,27 +2703,59 @@
animation: seckillEntrySweep 5.2s ease-in-out infinite; animation: seckillEntrySweep 5.2s ease-in-out infinite;
} }
.earn-guide-icon {
width: 48rpx;
height: 48rpx;
margin-right: 12rpx;
display: flex;
align-items: center;
justify-content: center;
color: #139c7d;
font-size: 31rpx;
line-height: 1;
position: relative;
z-index: 1;
}
.earn-guide-main { .earn-guide-main {
color: #0c6b58; color: #0c6958;
font-size: 24rpx; font-size: 26rpx;
font-weight: 900; font-weight: 900;
letter-spacing: 1rpx; letter-spacing: 1rpx;
position: relative; position: relative;
z-index: 1; z-index: 1;
white-space: nowrap;
} }
.earn-guide-tag { .earn-guide-tag {
height: 36rpx; height: 36rpx;
margin-left: auto; margin-left: auto;
padding: 0 14rpx; padding: 0 12rpx;
border-radius: 999rpx; border-radius: 999rpx;
/* background: rgba(255, 117, 88, 0.14); */ /* background: rgba(255, 117, 88, 0.14); */
color: #ff6a42; color: #ff7a3f;
font-size: 20rpx; font-size: 22rpx;
font-weight: 900; font-weight: 900;
line-height: 36rpx; line-height: 36rpx;
position: relative; position: relative;
z-index: 1; z-index: 1;
white-space: nowrap;
}
.earn-guide-arrow {
width: 38rpx;
height: 38rpx;
margin-left: 8rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.88);
color: #ffb079;
font-size: 36rpx;
font-weight: 900;
line-height: 34rpx;
text-align: center;
box-shadow: 0 4rpx 12rpx rgba(255, 152, 82, 0.12);
position: relative;
z-index: 1;
} }
.daimai-tab--sticky { .daimai-tab--sticky {
@ -2946,8 +2928,8 @@
.seckill-entry--in-card { .seckill-entry--in-card {
position: absolute; position: absolute;
top: 4rpx; top: 16rpx;
right: 18rpx; right: 20rpx;
z-index: 4; z-index: 4;
} }
@ -3054,42 +3036,12 @@
position: relative; position: relative;
} }
.like-content-box::before {
content: '';
width: 560rpx;
height: 260rpx;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.34) 1px, transparent 1px),
linear-gradient(0deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
background-size: 42rpx 42rpx;
position: absolute;
left: 84rpx;
bottom: -130rpx;
transform: perspective(360rpx) rotateX(62deg);
animation: none;
z-index: 1;
opacity: 0.62;
}
.like-content-box::after {
content: '';
position: absolute;
left: 34rpx;
right: 34rpx;
bottom: 18rpx;
height: 18rpx;
border-radius: 50%;
background: rgba(19, 128, 102, 0.08);
box-shadow: 0 0 22rpx rgba(19, 128, 102, 0.08);
z-index: 1;
}
.brand-memory-strip { .brand-memory-strip {
position: absolute; position: absolute;
left: 18rpx; left: 20rpx;
right: 286rpx; right: 240rpx;
top: 20rpx; top: 26rpx;
height: 32rpx; height: 36rpx;
display: flex; display: flex;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
@ -3111,286 +3063,127 @@
box-shadow: 0 6rpx 14rpx rgba(0, 35, 28, 0.06); box-shadow: 0 6rpx 14rpx rgba(0, 35, 28, 0.06);
} }
.like-left { .group-flat-row {
width: 45%;
background:
radial-gradient(circle at 86% 4%, rgba(166, 255, 234, 0.36) 0, rgba(166, 255, 234, 0) 92rpx),
linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(249, 255, 251, 0.78) 100%);
border: 1px solid rgba(255, 255, 255, 0.88);
border-radius: 30rpx;
height: 330rpx;
margin: 70rpx 0 0 3.3%;
box-shadow: 0 18rpx 34rpx rgba(0, 35, 28, 0.08), inset 0 1rpx 0 rgba(255, 255, 255, 0.92);
overflow: hidden;
position: relative;
z-index: 2;
animation: none;
}
.like-world-right {
background:
radial-gradient(circle at 8% 4%, rgba(255, 225, 154, 0.34) 0, rgba(255, 225, 154, 0) 98rpx),
linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 255, 250, 0.78) 100%);
}
.like-left::before {
content: '';
position: absolute;
left: 18rpx;
right: 18rpx;
top: 50rpx;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(27, 191, 156, 0.4), transparent);
z-index: 2;
}
.like-left::after {
content: '';
position: absolute; position: absolute;
right: -38rpx; left: 8rpx;
top: -28rpx; right: 8rpx;
width: 118rpx; top: 84rpx;
height: 118rpx; bottom: 20rpx;
border-radius: 50%; display: flex;
border: 20rpx solid rgba(166, 255, 234, 0.2);
z-index: 1;
}
.like-content-title {
width: 100%;
height: 54rpx;
position: relative;
line-height: 54rpx;
padding: 0 14rpx;
color: #173f36;
font-size: 23rpx;
letter-spacing: 1rpx;
text-shadow: 0 1rpx 0 rgba(255, 255, 255, 0.86);
box-sizing: border-box;
z-index: 3; z-index: 3;
} }
.like-hot-gif { .flat-card {
width: 34rpx; flex: 1;
height: 34rpx; min-width: 0;
position: absolute; margin: 0 6rpx;
top: 10rpx; padding: 12rpx 12rpx 16rpx;
right: 22rpx; box-sizing: border-box;
animation: none;
}
.like-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
.content-list {
display: flex;
height: 128rpx;
margin: 0 10rpx 10rpx;
border-radius: 26rpx; border-radius: 26rpx;
background: background: rgba(255, 255, 255, 0.9);
linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 255, 251, 0.84) 100%); border: 1px solid rgba(255, 255, 255, 0.88);
border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 12rpx 26rpx rgba(0, 35, 28, 0.06);
box-shadow: 0 12rpx 24rpx rgba(0, 35, 28, 0.07);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.24), box-shadow 0.18s ease; transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.content-list::before {
content: '';
position: absolute;
left: 84rpx;
right: 18rpx;
bottom: 12rpx;
height: 8rpx;
border-radius: 999rpx;
/* background: linear-gradient(90deg, rgba(27, 191, 156, 0.42) 0%, rgba(255, 220, 120, 0.64) 58%, rgba(255, 255, 255, 0.24) 100%); */
z-index: 1;
} }
.content-list:active { .flat-card:active {
box-shadow: 0 16rpx 30rpx rgba(0, 35, 28, 0.1); box-shadow: 0 16rpx 30rpx rgba(0, 35, 28, 0.1);
transform: scale(0.98) translateY(-4rpx); transform: scale(0.97);
} }
.list-img { .flat-card-img {
width: 122rpx; width: 100%;
height: 128rpx; height: 140rpx;
padding: 10rpx 0 10rpx 10rpx;
position: relative; position: relative;
box-sizing: border-box;
z-index: 2;
} }
.list-img img { .flat-card-img img {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 24rpx; border-radius: 20rpx;
box-shadow: 0 12rpx 20rpx rgba(0, 35, 28, 0.12);
object-fit: cover; object-fit: cover;
box-shadow: 0 8rpx 16rpx rgba(0, 35, 28, 0.08);
} }
.list-product { .flat-card-tag {
flex: 1;
min-width: 0;
padding: 12rpx 10rpx 0 12rpx;
box-sizing: border-box;
position: relative;
z-index: 3;
}
.list-name {
height: 30rpx;
line-height: 30rpx;
overflow: hidden;
}
.list-type {
display: inline-block;
font-size: 17rpx;
padding: 4rpx 8rpx;
background: linear-gradient(135deg, rgba(166, 255, 234, 0.98) 0%, rgba(255, 251, 205, 0.98) 100%);
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 999rpx;
position: absolute; position: absolute;
top: 14rpx; top: 1rpx;
left: 12rpx; left: 0;
height: 32rpx;
padding: 0 14rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.94);
color: #ff6a23;
font-size: 17rpx;
font-weight: 900; font-weight: 900;
color: #125e50; line-height: 32rpx;
box-shadow: 0 6rpx 14rpx rgba(0, 35, 28, 0.1); box-shadow: 0 6rpx 14rpx rgba(255, 110, 36, 0.14);
transform: rotate(-5deg);
animation: none;
} }
.list-text { .flat-card-name {
display: block; margin-top: 12rpx;
font-size: 21rpx; height: 34rpx;
line-height: 34rpx;
font-size: 23rpx;
font-weight: 900; font-weight: 900;
color: #173f36; color: #173f36;
text-align: left;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.list-price { .flat-card-price {
color: #ff4b35 !important; height: 40rpx;
height: 34rpx; line-height: 40rpx;
margin-top: 5rpx; margin-top: 4rpx;
font-size: 27rpx; font-size: 27rpx;
font-weight: 900; font-weight: 900;
line-height: 34rpx; color: #ff6a23;
text-decoration: none; text-align: left;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 4rpx 10rpx rgba(255, 75, 53, 0.14);
} }
.list-total { .flat-card-foot {
font-size: 20rpx; margin-top: auto;
font-weight: 800;
color: #5f4a24;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-top: 4rpx;
min-width: 0; min-width: 0;
} }
.list-total text { .flat-card-foot text {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
font-size: 17rpx; font-size: 19rpx;
font-weight: 800; font-weight: 800;
color: rgba(18, 73, 63, 0.58) !important; color: rgba(18, 73, 63, 0.55);
animation: none;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.group-cta { .flat-card-btn {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex: 0 0 56rpx; flex: 0 0 60rpx;
width: 56rpx; width: 60rpx;
height: 32rpx; height: 36rpx;
line-height: 1; margin-left: 8rpx;
margin-left: 6rpx;
padding: 0;
box-sizing: border-box;
border-radius: 999rpx; border-radius: 999rpx;
border: 1px solid rgba(255, 255, 255, 0.72); border: 1px solid rgba(165, 255, 226, 0.9);
background: linear-gradient(135deg, #12c99e 0%, #8fffe0 100%); background: linear-gradient(135deg, #7be8c8 0%, #e4fff4 100%);
color: #0d5d4e; color: #16866d;
font-size: 18rpx; font-size: 18rpx;
font-weight: 900; font-weight: 900;
text-align: center;
white-space: nowrap; white-space: nowrap;
box-shadow: 0 7rpx 14rpx rgba(27, 191, 156, 0.2); box-shadow: 0 6rpx 14rpx rgba(27, 191, 156, 0.14);
animation: none;
}
.group-scene-mark {
position: absolute;
right: 24rpx;
top: 48rpx;
height: 34rpx;
padding: 0 14rpx;
border-radius: 999rpx;
background: rgba(10, 66, 54, 0.82);
color: rgba(255, 255, 255, 0.94);
font-size: 18rpx;
font-weight: 900;
line-height: 34rpx;
z-index: 4;
box-shadow: 0 10rpx 22rpx rgba(0, 35, 28, 0.14);
}
.group-orbit {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.58);
z-index: 1;
}
.group-orbit-a {
width: 220rpx;
height: 220rpx;
left: -74rpx;
top: 88rpx;
}
.group-orbit-b {
width: 280rpx;
height: 280rpx;
right: -120rpx;
top: 38rpx;
border-color: rgba(166, 255, 234, 0.48);
}
@keyframes groupLightSweep {
0% {
left: -380rpx;
opacity: 0;
}
24% {
opacity: 1;
}
64% {
left: 760rpx;
opacity: 0;
}
100% {
left: 760rpx;
opacity: 0;
}
} }
@keyframes seckillEntryFloat { @keyframes seckillEntryFloat {

Write Preview
Loading…
Cancel
Save