wangfukang 4 days ago
parent
commit
ae5d28240d
  1. 156
      package2/group/studentStoreList.vue

156
package2/group/studentStoreList.vue

@ -12,35 +12,44 @@
</view>
<view class="hero-community">
<view class="hero-community" @tap="goPendingGroup">
<view class="hero-left">
<view class="hand-tag">Campus walk</view>
<view class="hero-title">万能杂货铺
<view class="brand-chip" style="width: 340rpx;">半径里# 点击松鼠立即参团</view>
<view class="brand-chip" style="width: 340rpx;">半径里# 有拼团在等你</view>
</view>
<view class="pending-entry">
<view class="pending-copy">
<view class="pending-title">查看待成团列表</view>
<view class="pending-sub">看看同校还有哪些拼团差人</view>
</view>
<view class="pending-arrow">去看看</view>
</view>
</view>
<view class="squirrel-card" @tap="goPendingGroup">
<view class="squirrel-card">
<image class="squirrel-img" src="/static/images/img/songshu.png" mode="aspectFit"></image>
<view class="squirrel-dialog">点我看看</view>
<view class="squirrel-dialog">待成团入口</view>
<view class="group-pop"></view>
</view>
</view>
</view>
<view class="hot-search-card">
<view class="hot-search-main" @tap="focusSearch">
<view class="hot-search-icon">🔎</view>
<view class="hot-search-copy">
<view class="hot-search-title">大家都在搜</view>
<swiper class="hot-word-swiper" vertical circular autoplay :interval="2300" :duration="420">
<swiper-item v-for="word in hotWords" :key="word">
<view class="hot-word">{{word}}</view>
</swiper-item>
</swiper>
<view class="search-strip-wrap">
<view class="hot-search-card">
<view class="hot-search-main" @tap="focusSearch">
<view class="hot-search-icon">🔎</view>
<view class="hot-search-copy">
<view class="hot-search-title">大家都在搜</view>
<swiper class="hot-word-swiper" vertical circular autoplay :interval="2300" :duration="420">
<swiper-item v-for="word in hotWords" :key="word">
<view class="hot-word">{{word}}</view>
</swiper-item>
</swiper>
</view>
<input class="hot-search-input" type="text" placeholder="输入你想拼的校园快乐" v-model="searchForm.keyWord"
confirm-type="search" @confirm="goSearch" />
<view class="trend-badge" @tap.stop="goSearch">搜索</view>
</view>
<input class="hot-search-input" type="text" placeholder="输入你想拼的校园快乐" v-model="searchForm.keyWord"
confirm-type="search" @confirm="goSearch" />
<view class="trend-badge" @tap.stop="goSearch">搜索</view>
</view>
</view>
@ -56,9 +65,7 @@
</view>
</view>
<view class="sort-strip">
<view class="sort-title">校园拼团雷达</view>
<view class="sort-item" :class="{'active': searchSale}" @tap="searchShop('sale','')">拼单最多</view>
<view class="sort-item" :class="{'active': searchScore}" @tap="searchShop('score','')">同学最爱</view>
</view>
@ -547,14 +554,15 @@
}
.hero {
min-height: 520rpx;
padding: 0 24rpx 28rpx;
min-height: 452rpx;
padding: 0 24rpx 20rpx;
box-sizing: border-box;
color: #fff;
position: relative;
overflow: hidden;
background:
linear-gradient(115deg, rgba(255, 190, 156, 0.96) 0%, rgba(255, 211, 177, 0.9) 46%, rgba(255, 236, 218, 0.82) 100%);
/* background:
linear-gradient(180deg, rgba(255, 190, 156, 0.96) 0%, rgba(255, 210, 176, 0.9) 66%, rgba(255, 247, 239, 0.08) 100%),
linear-gradient(115deg, rgba(255, 190, 156, 0.88) 0%, rgba(255, 211, 177, 0.82) 46%, rgba(255, 236, 218, 0.72) 100%); */
}
.hero::after {
@ -680,16 +688,50 @@
.hero-community {
margin-top: 36rpx;
padding: 22rpx 22rpx 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 2;
border-radius: 40rpx;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 246, 232, 0.2));
border: 1rpx solid rgba(255, 255, 255, 0.58);
box-shadow: 0 24rpx 54rpx rgba(166, 87, 39, 0.16);
backdrop-filter: blur(18rpx);
overflow: hidden;
}
.hero-community::before {
content: '';
width: 260rpx;
height: 260rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.24);
position: absolute;
right: -92rpx;
top: -98rpx;
}
.hero-community::after {
content: '';
width: 100%;
height: 2rpx;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
position: absolute;
left: 0;
top: 0;
}
.hero-community:active {
transform: scale(0.985);
}
.hero-left {
flex: 1;
min-width: 0;
position: relative;
z-index: 1;
}
.hand-tag {
@ -747,6 +789,54 @@
font-weight: 900;
}
.pending-entry {
width: 396rpx;
margin-top: 22rpx;
padding: 12rpx 12rpx 12rpx 16rpx;
border-radius: 24rpx;
background: rgba(255, 255, 255, 0.48);
border: 1rpx solid rgba(255, 255, 255, 0.68);
box-shadow: inset 0 0 0 1rpx rgba(255, 219, 185, 0.18);
display: flex;
align-items: center;
box-sizing: border-box;
}
.pending-copy {
flex: 1;
min-width: 0;
}
.pending-title {
color: #8b4324;
font-size: 24rpx;
font-weight: 900;
line-height: 30rpx;
}
.pending-sub {
margin-top: 4rpx;
color: rgba(108, 58, 32, 0.76);
font-size: 19rpx;
font-weight: 800;
line-height: 26rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pending-arrow {
height: 44rpx;
padding: 0 18rpx;
border-radius: 999rpx;
background: linear-gradient(135deg, #ff7444 0%, #ffae53 100%);
color: #fff;
font-size: 20rpx;
font-weight: 900;
line-height: 44rpx;
box-shadow: 0 10rpx 22rpx rgba(255, 126, 39, 0.22);
}
.squirrel-card {
width: 206rpx;
height: 230rpx;
@ -756,6 +846,7 @@
border: 1rpx solid rgba(255, 255, 255, 0.72);
box-shadow: 0 24rpx 50rpx rgba(187, 93, 35, 0.18);
position: relative;
z-index: 1;
animation: heroFloat 4.2s ease-in-out infinite;
}
@ -922,8 +1013,8 @@
}
.hot-search-card {
width: 94%;
margin: -160rpx auto 18rpx;
width: 100%;
margin: 0;
padding: 16rpx;
border-radius: 34rpx;
background: rgba(255, 255, 255, 0.58);
@ -935,6 +1026,13 @@
backdrop-filter: blur(14rpx);
}
.search-strip-wrap {
width: 94%;
margin: 3rpx auto 12rpx;
position: relative;
z-index: 5;
}
.hot-search-main {
height: 76rpx;
padding: 0 16rpx;
@ -1045,7 +1143,9 @@
.interest-scroll {
width: 94%;
margin: 6rpx auto 18rpx;
margin: 18rpx auto 12rpx;
position: relative;
z-index: 4;
}
.interest-list {
@ -1299,7 +1399,7 @@
.sort-strip {
width: 94%;
margin: 0 auto 14rpx;
margin: -10rpx auto 14rpx;
display: flex;
align-items: center;
flex-wrap: wrap;

Loading…
Cancel
Save