From b26776071ee108ccfb8417deca976adb2ae50c3a Mon Sep 17 00:00:00 2001
From: wangfukang <15630117759@163.com>
Date: Sat, 16 May 2026 14:50:19 +0800
Subject: [PATCH] 1
---
pages/index/index.vue | 248 +++++++++++++++++++++++++++++-------------
1 file changed, 175 insertions(+), 73 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index bf42288..56020ee 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -164,13 +164,15 @@
爆款指数 ↑
拼团王在线
-
+
+
+
- 同学都在拼 ·
+ 食堂星球热拼
+ style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;padding-bottom: 10rpx;">
{{item.productList[0].groupMembers}}人团
- 去拼
+ 去拼
@@ -207,19 +209,19 @@
￥{{item.productList[0].groupPrice}}
{{item.productList[0].groupMembers}}人团
- 去拼
+ 去拼
-
+
- 同学都在拼 ·
+ 宿舍搭子开团
+ style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;padding-bottom: 10rpx;">
{{item.productList[0].groupMembers}}人团
- 去拼
+ 去拼
@@ -256,7 +258,7 @@
￥{{item.productList[0].groupPrice}}
{{item.productList[0].groupMembers}}人团
- 去拼
+ 去拼
@@ -2332,70 +2334,114 @@
.like-content-box {
height: 400rpx;
background:
- radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.78) 0, rgba(255, 255, 255, 0) 120rpx),
- linear-gradient(135deg, rgba(224, 255, 246, 0.9) 0%, rgba(255, 250, 226, 0.82) 52%, rgba(232, 255, 249, 0.9) 100%),
+ radial-gradient(circle at 8% 12%, rgba(255, 255, 255, 0.92) 0, rgba(255, 255, 255, 0) 118rpx),
+ radial-gradient(circle at 86% 88%, rgba(116, 255, 216, 0.36) 0, rgba(116, 255, 216, 0) 150rpx),
+ linear-gradient(135deg, rgba(229, 255, 247, 0.96) 0%, rgba(255, 250, 226, 0.9) 46%, rgba(221, 255, 246, 0.96) 100%),
url("https://jewel-shop.oss-cn-beijing.aliyuncs.com/6d65d349d68f40e7886c978190b6ea33.png") no-repeat;
- background-size: 100%, 100%, 100%;
+ background-size: 100%, 100%, 100%, 100%;
margin-top: 10rpx;
display: flex;
border-radius: 34rpx;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.82);
- box-shadow: 0 20rpx 48rpx rgba(81, 139, 91, 0.12), inset 0 1rpx 0 rgba(255, 255, 255, 0.84);
+ box-shadow: 0 22rpx 52rpx rgba(50, 137, 95, 0.14), inset 0 1rpx 0 rgba(255, 255, 255, 0.88);
position: relative;
}
.like-content-box::before {
content: '';
- width: 320rpx;
- height: 520rpx;
- background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 251, 205, 0.66) 45%, rgba(166, 255, 234, 0.36) 58%, rgba(255, 255, 255, 0) 100%);
+ 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;
- top: -60rpx;
- left: -360rpx;
- transform: rotate(16deg);
+ 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;
}
.like-left {
width: 45%;
background:
- radial-gradient(circle at 92% 0%, rgba(166, 255, 234, 0.22) 0, rgba(166, 255, 234, 0) 90rpx),
- rgba(255, 255, 255, 0.82);
- border: 1px solid rgba(255, 255, 255, 0.76);
- border-radius: 26rpx;
- height: 340rpx;
- margin: 50rpx 0 0 3.3%;
- box-shadow: 0 14rpx 32rpx rgba(0, 35, 28, 0.07), inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
+ 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: 58rpx 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-left:nth-child(2) {
- animation-delay: 0.45s;
+ .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;
+ right: -38rpx;
+ top: -38rpx;
+ width: 118rpx;
+ height: 118rpx;
+ border-radius: 50%;
+ border: 20rpx solid rgba(166, 255, 234, 0.2);
+ z-index: 1;
}
.like-content-title {
width: 100%;
- height: 58rpx;
+ height: 54rpx;
position: relative;
- line-height: 58rpx;
- padding: 0 12rpx;
+ line-height: 54rpx;
+ padding: 0 14rpx;
color: #173f36;
- font-size: 24rpx;
+ font-size: 23rpx;
letter-spacing: 1rpx;
text-shadow: 0 1rpx 0 rgba(255, 255, 255, 0.86);
box-sizing: border-box;
+ z-index: 3;
}
.like-hot-gif {
- width: 42rpx;
- height: 42rpx;
+ width: 34rpx;
+ height: 34rpx;
position: absolute;
- top: 8rpx;
+ top: 10rpx;
right: 42rpx;
animation: none;
}
@@ -2407,69 +2453,87 @@
.content-list {
display: flex;
- margin: 0 8rpx 9rpx;
- border-radius: 22rpx;
- background: rgba(255, 255, 255, 0.52);
- border: 1px solid rgba(255, 255, 255, 0.58);
- box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.04);
+ height: 128rpx;
+ margin: 0 10rpx 10rpx;
+ border-radius: 26rpx;
+ background:
+ 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.9);
+ box-shadow: 0 12rpx 24rpx rgba(0, 35, 28, 0.07);
overflow: hidden;
- transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.24), background 0.18s ease, box-shadow 0.18s ease;
+ position: relative;
+ transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.24), 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 {
- background: rgba(255, 247, 215, 0.52);
- box-shadow: 0 12rpx 24rpx rgba(0, 35, 28, 0.07);
- transform: scale(0.98) translateY(-3rpx);
+ box-shadow: 0 16rpx 30rpx rgba(0, 35, 28, 0.1);
+ transform: scale(0.98) translateY(-4rpx);
}
.list-img {
- width: 132rpx;
- height: 132rpx;
- padding: 8rpx 4rpx 8rpx 8rpx;
+ width: 122rpx;
+ height: 128rpx;
+ padding: 10rpx 0 10rpx 10rpx;
position: relative;
box-sizing: border-box;
+ z-index: 2;
}
.list-img img {
width: 100%;
height: 100%;
- border-radius: 18rpx;
- box-shadow: 0 8rpx 16rpx rgba(0, 35, 28, 0.09);
+ border-radius: 24rpx;
+ box-shadow: 0 12rpx 20rpx rgba(0, 35, 28, 0.12);
object-fit: cover;
}
.list-product {
- width: 52%;
- padding: 9rpx 8rpx 0 10rpx;
+ flex: 1;
+ min-width: 0;
+ padding: 12rpx 10rpx 0 12rpx;
box-sizing: border-box;
+ position: relative;
+ z-index: 3;
}
.list-name {
- height: 34rpx;
- line-height: 34rpx;
+ height: 30rpx;
+ line-height: 30rpx;
overflow: hidden;
}
.list-type {
display: inline-block;
- font-size: 18rpx;
- padding: 4rpx 9rpx;
- background: linear-gradient(135deg, rgba(166, 255, 234, 0.96) 0%, rgba(255, 242, 198, 0.96) 100%);
+ 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;
- top: 10rpx;
- left: 10rpx;
+ top: 14rpx;
+ left: 12rpx;
font-weight: 900;
color: #125e50;
box-shadow: 0 6rpx 14rpx rgba(0, 35, 28, 0.1);
- transform: rotate(-4deg);
+ transform: rotate(-5deg);
animation: none;
}
.list-text {
display: block;
- font-size: 22rpx;
+ font-size: 21rpx;
font-weight: 900;
color: #173f36;
overflow: hidden;
@@ -2479,11 +2543,11 @@
.list-price {
color: #ff4b35 !important;
- height: 38rpx;
- margin-top: 6rpx;
- font-size: 28rpx;
+ height: 34rpx;
+ margin-top: 5rpx;
+ font-size: 27rpx;
font-weight: 900;
- line-height: 38rpx;
+ line-height: 34rpx;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
@@ -2498,14 +2562,14 @@
display: flex;
align-items: center;
justify-content: space-between;
- margin-top: 3rpx;
+ margin-top: 4rpx;
min-width: 0;
}
.list-total text {
flex: 1;
min-width: 0;
- font-size: 18rpx;
+ font-size: 17rpx;
font-weight: 800;
color: rgba(18, 73, 63, 0.58) !important;
animation: none;
@@ -2518,16 +2582,16 @@
display: flex;
align-items: center;
justify-content: center;
- flex: 0 0 58rpx;
- width: 58rpx;
- height: 34rpx;
+ flex: 0 0 56rpx;
+ width: 56rpx;
+ height: 32rpx;
line-height: 1;
margin-left: 6rpx;
padding: 0;
box-sizing: border-box;
border-radius: 999rpx;
border: 1px solid rgba(255, 255, 255, 0.72);
- background: linear-gradient(135deg, #1ed0a9 0%, #9effe7 100%);
+ background: linear-gradient(135deg, #12c99e 0%, #8fffe0 100%);
color: #0d5d4e;
font-size: 18rpx;
font-weight: 900;
@@ -2541,7 +2605,7 @@
position: absolute;
left: 18rpx;
right: 18rpx;
- top: 10rpx;
+ top: 9rpx;
height: 32rpx;
display: flex;
align-items: center;
@@ -2556,7 +2620,7 @@
margin-right: 10rpx;
padding: 0 12rpx;
border-radius: 999rpx;
- background: rgba(255, 255, 255, 0.68);
+ background: rgba(255, 255, 255, 0.78);
color: #0f695b;
font-size: 18rpx;
font-weight: 900;
@@ -2565,6 +2629,44 @@
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);
+ }
+
.brand-memory-strip text:nth-child(2) {
animation-delay: 0.4s;
}