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

1

master
wangfukang 4 weeks ago
parent
c1de93ca6c
commit
b26776071e
1 changed files with 175 additions and 73 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. 248
      pages/index/index.vue

248
pages/index/index.vue
View File

@ -164,13 +164,15 @@
<text>爆款指数 ↑</text>
<text>拼团王在线</text>
</view>
<view class="like-left">
<view class="group-orbit group-orbit-a"></view>
<view class="group-orbit group-orbit-b"></view>
<view class="like-left like-world-left">
<view class="like-content-title">
<view style="width: 100%;font-weight: 700;">同学都在拼 · </view>
<view style="width: 100%;font-weight: 700;">食堂星球热拼</view>
<image class="like-hot-gif" src="/static/images/img/loading.gif" mode="aspectFit"></image>
<img src="/static/images/img/yousanjiao.png" alt=""
style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;">
style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;padding-bottom: 10rpx;">
</view>
<view class="like-content">
<view class="content-list" v-if="item.position == 'home_center_left_top' "
@ -188,7 +190,7 @@
￥{{item.productList[0].groupPrice}}</view>
<view class="list-total">
<text style="color: red;">{{item.productList[0].groupMembers}}人团</text>
<view class="group-cta">去拼</view>
<view class="group-cta" style="margin-left: 14rpx;">去拼</view>
</view>
</view>
</view>
@ -207,19 +209,19 @@
￥{{item.productList[0].groupPrice}}</view>
<view class="list-total">
<text style="color: red;">{{item.productList[0].groupMembers}}人团</text>
<view class="group-cta">去拼</view>
<view class="group-cta" style="margin-left: 14rpx;">去拼</view>
</view>
</view>
</view>
</view>
</view>
<view class="like-left">
<view class="like-left like-world-right">
<view class="like-content-title">
<view style="font-weight: 700;">同学都在拼 · </view>
<view style="font-weight: 700;">宿舍搭子开团</view>
<image class="like-hot-gif" src="/static/images/img/loading.gif" mode="aspectFit"></image>
<img src="/static/images/img/yousanjiao.png" alt=""
style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;">
style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;padding-bottom: 10rpx;">
</view>
<view class="like-content">
<view class="content-list" v-if="item.position == 'home_center_right_top' "
@ -237,7 +239,7 @@
￥{{item.productList[0].groupPrice}}</view>
<view class="list-total">
<text style="color: red;">{{item.productList[0].groupMembers}}人团</text>
<view class="group-cta">去拼</view>
<view class="group-cta" style="margin-left: 14rpx;">去拼</view>
</view>
</view>
</view>
@ -256,7 +258,7 @@
￥{{item.productList[0].groupPrice}}</view>
<view class="list-total">
<text style="color: red;">{{item.productList[0].groupMembers}}人团</text>
<view class="group-cta">去拼</view>
<view class="group-cta" style="margin-left: 14rpx;">去拼</view>
</view>
</view>
</view>
@ -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;
}

Write Preview
Loading…
Cancel
Save