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

Merge branch 'master' of http://8.140.253.224:3000/root/school_uni

master
tianyi 3 weeks ago
parent
f75e6a0c86 dbbc26ed20
commit
591c3cf1ec
4 changed files with 853 additions and 3 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. 685
      package2/seckill/seckillGroup.vue
  2. 7
      pages.json
  3. 164
      pages/index/index.vue
  4. BIN
      static/images/img/miaosha.jpg

685
package2/seckill/seckillGroup.vue
View File

@ -0,0 +1,685 @@
<template>
<view class="seckill-page">
<view class="hero">
<image class="hero-bg" src="/static/images/img/miaosha.jpg" mode="scaleToFill"></image>
<view class="top-bar" :style="{'padding-top': menuButtonInfo.top + 'px'}">
<view class="back-btn" @tap="back">
<uni-icons type="left" size="26" color="#fff"></uni-icons>
</view>
<view class="page-title"></view>
<view class="more-dot">...</view>
</view>
<view class="hero-content">
<view class="hero-copy">
<view class="hero-kicker">低价秒杀</view>
<view class="hero-title">团美味 趣露营</view>
<view class="hero-sub">限时开抢 · 拼着更划算</view>
</view>
<view class="hero-card">
<view class="hero-bowl">团</view>
<view class="hero-badge">立即抢</view>
</view>
</view>
</view>
<scroll-view class="tab-scroll" scroll-x>
<view class="tab-list">
<view class="tab-item" :class="{'active': checkedTab === item.key}" v-for="item in tabList" :key="item.key"
@tap="switchTab(item.key)">
{{item.name}}
</view>
</view>
</scroll-view>
<view class="hot-strip">
<view class="hot-pill">爆款推荐</view>
<view class="hot-line"></view>
<view class="search-box">
<uni-icons type="search" size="16" color="#ff6735"></uni-icons>
<input type="text" placeholder="酸辣无骨凤爪" disabled @tap="goSearch" />
<view class="search-btn" @tap="goSearch">搜索</view>
</view>
</view>
<view class="goods-list">
<view class="goods-card" v-for="(item,index) in currentList" :key="item.id" @tap="grabItem(item)">
<view class="goods-img-wrap">
<image class="goods-img" :src="item.image" mode="aspectFill"></image>
<view class="sweet-tag">{{item.tag}}</view>
</view>
<view class="goods-info">
<view class="goods-title">{{item.title}}</view>
<view class="sold-row">
<view class="sold-bar">
<view class="sold-progress" :style="{width: item.progress + '%'}"></view>
</view>
<text>已售{{item.sold}}</text>
</view>
<view class="coupon-row">
<view class="coupon-tag" v-for="coupon in item.coupons" :key="coupon">{{coupon}}</view>
</view>
<view class="price-row">
<view class="price-box">
<text class="price-symbol">¥</text>
<text class="price">{{item.price}}</text>
<text class="price-desc">券后价</text>
</view>
<view class="grab-box">
<view class="save-label">
<text>{{item.save}}元</text>
<text>已优惠</text>
</view>
<view class="grab-btn">抢</view>
</view>
</view>
</view>
<view class="rank-tag">TOP {{index + 1}}</view>
</view>
</view>
<view class="coupon-float">
<view class="coupon-icon">券</view>
<view class="coupon-text">你有2元优惠券待使用 · 剩02:32:17</view>
<view class="coupon-use">去使用</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
menuButtonInfo: {
top: 0
},
checkedTab: 'all',
tabList: [{
name: '精选',
key: 'all'
}, {
name: '团美味趣露营',
key: 'camp'
}, {
name: '食品生鲜',
key: 'fresh'
}, {
name: '纸品清洁',
key: 'clean'
}, {
name: '家居百货',
key: 'home'
}],
seckillList: []
}
},
computed: {
currentList() {
if (this.checkedTab === 'all') {
return this.seckillList
}
return this.seckillList.filter(item => item.category === this.checkedTab)
}
},
onLoad() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.getSeckillList()
},
onShow() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
},
methods: {
getSeckillList() {
this.seckillList = [{
id: 1,
category: 'fresh',
title: '正宗玉菇甜瓜新鲜水果冰淇淋脆',
image: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/e6adc80518c24c488522ab19f036af27.png',
tag: '甜度18+',
sold: '2000+',
progress: 86,
coupons: ['立减2元平台券', '券 立减5元', '坏了包赔'],
price: '17.8',
save: '13.2'
}, {
id: 2,
category: 'camp',
title: '巧面馆麻辣红油泡面川渝宿舍装',
image: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/05d2286ac1be4ae784858409889690d5.png',
tag: '106g*4袋',
sold: '6万+',
progress: 78,
coupons: ['立减2元平台券', '送赠品', '极速退款'],
price: '7.9',
save: '5'
}, {
id: 3,
category: 'clean',
title: '全麦面包纯全麦黑麦低无胆蔗糖',
image: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/d6b53eb217644e74bbf957ff7462c27b.png',
tag: '20袋',
sold: '2万+',
progress: 72,
coupons: ['立减2元平台券', '运费险', '极速退款'],
price: '14.9',
save: '13'
}, {
id: 4,
category: 'home',
title: '贵州酸辣粉宿舍速食夜宵整箱装',
image: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/0ac5e0095a5d4097b338ec450df8d3dd.png',
tag: '爆辣多汁',
sold: '6万+',
progress: 91,
coupons: ['满89件减3元', '运费险', '秒杀价'],
price: '13.9',
save: '9'
}]
},
switchTab(key) {
this.checkedTab = key
},
goSearch() {
uni.showToast({
title: '秒杀搜索即将开放',
icon: 'none'
})
},
grabItem(item) {
uni.showToast({
title: item.title + ' 已加入秒杀提醒',
icon: 'none'
})
},
back() {
uni.navigateBack()
}
}
}
</script>
<style lang="scss" scoped>
.seckill-page {
min-height: 100vh;
padding-bottom: 150rpx;
background: linear-gradient(180deg, #ff6a2a 0%, #fff1df 260rpx, #fff8ee 520rpx, #f7fbf1 100%);
box-sizing: border-box;
}
.hero {
min-height: 372rpx;
padding: 0 22rpx 24rpx;
box-sizing: border-box;
color: #fff;
position: relative;
overflow: hidden;
}
.hero-bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.top-bar {
height: 78rpx;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.back-btn {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
.page-title {
margin-left: 4rpx;
font-size: 34rpx;
font-weight: 900;
letter-spacing: 2rpx;
flex-shrink: 0;
}
.more-dot {
margin-left: auto;
width: 70rpx;
height: 50rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.2);
line-height: 42rpx;
text-align: center;
font-size: 30rpx;
font-weight: 900;
flex-shrink: 0;
}
.search-box {
flex: 1;
height: 46rpx;
padding: 0 8rpx 0 16rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.94);
display: flex;
align-items: center;
position: relative;
z-index: 1;
box-shadow: 0 14rpx 32rpx rgba(180, 40, 0, 0.18);
box-sizing: border-box;
}
.search-box input {
flex: 1;
min-width: 0;
height: 46rpx;
padding-left: 8rpx;
font-size: 22rpx;
color: #6f5b4d;
}
.search-btn {
width: 74rpx;
height: 36rpx;
border-radius: 999rpx;
background: linear-gradient(135deg, #ff5b2e 0%, #ff9f2f 100%);
color: #fff;
font-size: 22rpx;
font-weight: 900;
line-height: 36rpx;
text-align: center;
}
.hero-content {
margin-top: 30rpx;
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
z-index: 1;
}
.hero-copy {
display: none;
}
.hero-kicker {
display: inline-block;
padding: 6rpx 18rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.22);
font-size: 22rpx;
font-weight: 900;
}
.hero-title {
margin-top: 18rpx;
font-size: 58rpx;
font-weight: 900;
line-height: 70rpx;
text-shadow: 0 8rpx 20rpx rgba(169, 40, 0, 0.25);
}
.hero-sub {
margin-top: 12rpx;
font-size: 26rpx;
font-weight: 700;
opacity: 0.92;
}
.hero-card {
width: 230rpx;
height: 210rpx;
position: relative;
animation: heroFloat 3s ease-in-out infinite;
}
.hero-bowl {
width: 138rpx;
height: 138rpx;
margin: 24rpx auto 0;
border-radius: 50%;
background: linear-gradient(145deg, #fff 0%, #ffe8b9 100%);
color: #ff5630;
font-size: 60rpx;
font-weight: 900;
line-height: 138rpx;
text-align: center;
box-shadow: 0 20rpx 34rpx rgba(169, 40, 0, 0.22);
}
.hero-badge {
width: 120rpx;
height: 48rpx;
border-radius: 999rpx;
background: #fff;
color: #ff4b25;
font-size: 24rpx;
font-weight: 900;
line-height: 48rpx;
text-align: center;
position: absolute;
right: 8rpx;
bottom: 14rpx;
box-shadow: 0 10rpx 18rpx rgba(169, 40, 0, 0.18);
animation: badgeBeat 1.4s ease-in-out infinite;
}
.tab-scroll {
width: 100%;
margin-top: -34rpx;
white-space: nowrap;
position: relative;
z-index: 2;
}
.tab-list {
display: inline-flex;
padding: 0 20rpx;
}
.tab-item {
height: 58rpx;
padding: 0 28rpx;
margin-right: 14rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.74);
color: #7a6250;
font-size: 26rpx;
font-weight: 800;
line-height: 58rpx;
box-shadow: 0 10rpx 22rpx rgba(203, 99, 37, 0.08);
}
.tab-item.active {
background: #fff;
color: #ff4b25;
box-shadow: 0 12rpx 24rpx rgba(255, 92, 38, 0.18);
}
.hot-strip {
width: 95%;
height: 64rpx;
margin: 16rpx auto 8rpx;
display: flex;
align-items: center;
}
.hot-pill {
width: 46%;
flex-shrink: 0;
height: 46rpx;
border-radius: 999rpx;
background: rgba(255, 221, 200, 0.72);
color: #f05b32;
font-size: 24rpx;
font-weight: 900;
line-height: 46rpx;
text-align: center;
}
.hot-pill.light {
background: rgba(255, 255, 255, 0.86);
color: #d28a45;
}
.hot-line {
width: 22rpx;
}
.goods-list {
width: 95%;
margin: 0 auto;
}
.goods-card {
min-height: 220rpx;
margin-bottom: 18rpx;
padding: 14rpx 12rpx;
border-radius: 28rpx;
background: rgba(255, 255, 255, 0.96);
display: flex;
position: relative;
box-shadow: 0 12rpx 28rpx rgba(118, 85, 55, 0.08);
overflow: hidden;
}
.goods-card:active {
transform: scale(0.98);
}
.goods-img-wrap {
width: 218rpx;
height: 218rpx;
border-radius: 24rpx;
position: relative;
overflow: hidden;
background: #ffeacf;
}
.goods-img {
width: 100%;
height: 100%;
}
.sweet-tag {
position: absolute;
left: 8rpx;
bottom: 8rpx;
padding: 6rpx 12rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.92);
color: #ff5d30;
font-size: 20rpx;
font-weight: 900;
}
.goods-info {
flex: 1;
min-width: 0;
padding: 4rpx 4rpx 0 18rpx;
box-sizing: border-box;
}
.goods-title {
min-height: 64rpx;
padding-right: 70rpx;
color: #2f2a25;
font-size: 30rpx;
font-weight: 900;
line-height: 36rpx;
}
.sold-row {
height: 32rpx;
display: flex;
align-items: center;
color: #9a8b7d;
font-size: 22rpx;
}
.sold-bar {
width: 120rpx;
height: 14rpx;
margin-right: 12rpx;
border-radius: 999rpx;
background: #ffe2d6;
overflow: hidden;
}
.sold-progress {
height: 100%;
border-radius: 999rpx;
background: linear-gradient(90deg, #ff4027 0%, #ffb33f 100%);
}
.coupon-row {
min-height: 34rpx;
margin-top: 8rpx;
overflow: hidden;
}
.coupon-tag {
display: inline-block;
margin: 0 8rpx 8rpx 0;
padding: 4rpx 8rpx;
border: 1rpx solid #ffbdd0;
border-radius: 8rpx;
color: #d85275;
font-size: 20rpx;
line-height: 24rpx;
background: #fff7f9;
}
.price-row {
margin-top: 2rpx;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.price-box {
color: #f4431f;
font-weight: 900;
}
.price-symbol {
font-size: 28rpx;
}
.price {
font-size: 46rpx;
}
.price-desc {
margin-left: 6rpx;
color: #b56d52;
font-size: 22rpx;
}
.grab-box {
display: flex;
align-items: center;
border-radius: 18rpx;
overflow: hidden;
box-shadow: 0 10rpx 18rpx rgba(255, 83, 34, 0.22);
}
.save-label {
width: 88rpx;
height: 70rpx;
background: linear-gradient(135deg, #fff2a8 0%, #ffd277 100%);
color: #9d5920;
font-size: 20rpx;
font-weight: 900;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 26rpx;
}
.grab-btn {
width: 76rpx;
height: 78rpx;
background: linear-gradient(135deg, #ff6735 0%, #ff2f0e 100%);
color: #fff;
font-size: 40rpx;
font-weight: 900;
line-height: 78rpx;
text-align: center;
animation: badgeBeat 1.4s ease-in-out infinite;
}
.rank-tag {
position: absolute;
top: 14rpx;
right: 16rpx;
padding: 4rpx 10rpx;
border-radius: 999rpx;
background: #fff1cc;
color: #d97928;
font-size: 18rpx;
font-weight: 900;
}
.coupon-float {
width: 92%;
height: 76rpx;
padding: 0 12rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.94);
display: flex;
align-items: center;
position: fixed;
left: 4%;
bottom: 32rpx;
z-index: 10;
box-shadow: 0 14rpx 34rpx rgba(255, 88, 33, 0.18);
box-sizing: border-box;
}
.coupon-icon {
width: 42rpx;
height: 42rpx;
border-radius: 50%;
background: #ff2f6c;
color: #fff;
font-size: 22rpx;
font-weight: 900;
line-height: 42rpx;
text-align: center;
}
.coupon-text {
flex: 1;
padding-left: 12rpx;
color: #704a3c;
font-size: 24rpx;
font-weight: 800;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.coupon-use {
width: 112rpx;
height: 52rpx;
border-radius: 999rpx;
background: linear-gradient(135deg, #ff4b8a 0%, #ff7a55 100%);
color: #fff;
font-size: 24rpx;
font-weight: 900;
line-height: 52rpx;
text-align: center;
}
@keyframes heroFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-12rpx);
}
}
@keyframes badgeBeat {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
</style>

7
pages.json
View File

@ -163,6 +163,13 @@
"navigationBarTitleText": "拼团页",
"navigationStyle": "custom"
}
},{
"path": "seckill/seckillGroup",
"style": {
"navigationBarTitleText": "秒杀团",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},{
"path": "group/searchGroup",
"style": {

164
pages/index/index.vue
View File

@ -121,9 +121,19 @@
</view>
</view>
<view class="like-box">
<view class="like-title">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e0c44bc9b69a46559d3aa4160d3cf4a5.png"
alt="" />
<view class="like-head">
<view class="like-title">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e0c44bc9b69a46559d3aa4160d3cf4a5.png"
alt="" />
</view>
<view class="seckill-entry" @tap="goSeckillGroup">
<view class="seckill-entry-light"></view>
<view class="seckill-entry-info" style="padding-left: 20rpx;">
<view class="seckill-entry-title">秒杀团</view>
<view class="seckill-entry-sub">限时低价 秒杀更划算</view>
</view>
<view class="seckill-entry-btn">秒</view>
</view>
</view>
<view class="like-content-box">
@ -1125,6 +1135,11 @@
url: item.url
})
},
goSeckillGroup() {
uni.navigateTo({
url: '/package2/seckill/seckillGroup'
})
},
goDetail(type) {
let url = ''
switch (type) {
@ -1762,6 +1777,12 @@
}
}
.like-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.like-title {
width: 218rpx;
height: 64rpx;
@ -1774,6 +1795,93 @@
background-size: 100%;
}
.seckill-entry {
width: 280rpx;
height: 76rpx;
padding: 0 12rpx;
box-sizing: border-box;
border-radius: 999rpx;
background: linear-gradient(135deg, #ff4b27 0%, #ff8b18 48%, #ffd257 100%);
box-shadow: 0 16rpx 30rpx rgba(255, 91, 39, 0.22);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
animation: seckillEntryFloat 2.6s ease-in-out infinite;
}
.seckill-entry:active {
transform: scale(0.96);
}
.seckill-entry-light {
width: 190rpx;
height: 120rpx;
background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.76) 46%, rgba(255, 255, 255, 0) 100%);
position: absolute;
top: -20rpx;
left: -220rpx;
transform: rotate(12deg);
animation: seckillEntrySweep 2.8s ease-in-out infinite;
}
.seckill-entry-icon {
width: 54rpx;
height: 54rpx;
margin-right: 10rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: #ff4f24;
font-size: 26rpx;
font-weight: 900;
line-height: 54rpx;
text-align: center;
box-shadow: inset 0 -4rpx 0 rgba(255, 197, 69, 0.38);
position: relative;
z-index: 1;
animation: seckillIconPulse 1.6s ease-in-out infinite;
}
.seckill-entry-info {
flex: 1;
min-width: 0;
position: relative;
z-index: 1;
color: #fff;
}
.seckill-entry-title {
font-size: 28rpx;
font-weight: 900;
line-height: 34rpx;
letter-spacing: 1rpx;
text-shadow: 0 3rpx 8rpx rgba(183, 35, 0, 0.24);
}
.seckill-entry-sub {
margin-top: 2rpx;
font-size: 18rpx;
font-weight: 700;
opacity: 0.92;
white-space: nowrap;
}
.seckill-entry-btn {
width: 54rpx;
height: 54rpx;
border-radius: 50%;
background: #fff;
color: #ff3d18;
font-size: 26rpx;
font-weight: 900;
line-height: 54rpx;
text-align: center;
position: relative;
z-index: 1;
box-shadow: 0 8rpx 18rpx rgba(158, 32, 0, 0.22);
animation: seckillBtnBeat 1.2s ease-in-out infinite;
}
.like-content-box {
height: 400rpx;
background: url("https://jewel-shop.oss-cn-beijing.aliyuncs.com/6d65d349d68f40e7886c978190b6ea33.png") no-repeat;
@ -1957,6 +2065,56 @@
}
}
@keyframes seckillEntryFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-6rpx);
}
}
@keyframes seckillEntrySweep {
0% {
left: -220rpx;
opacity: 0;
}
34% {
opacity: 0.9;
}
72%,
100% {
left: 470rpx;
opacity: 0;
}
}
@keyframes seckillIconPulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
@keyframes seckillBtnBeat {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.12);
}
}
@keyframes groupCardFloat {
0%,
100% {

BIN
static/images/img/miaosha.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

Write Preview
Loading…
Cancel
Save