diff --git a/package1/order/orderList.vue b/package1/order/orderList.vue
index 9d64a0c..43a5033 100644
--- a/package1/order/orderList.vue
+++ b/package1/order/orderList.vue
@@ -12,6 +12,17 @@
confirm-type="search" />
+
+
+ ORDER CENTER
+ 我的校园订单
+ 饭团、跑腿、售后进度都在这里一眼看清
+
+
+ {{orderList.length}}
+ 当前订单
+
+
@@ -86,7 +97,12 @@
已售后
-
+
+
+ 单
+ 暂时没有相关订单
+ 换个分类看看，或搜索你记得的商家名称
+
待支付
@@ -568,7 +584,7 @@
width: 100%;
min-height: 100%;
font-size: 24rpx;
- background: #F5F8F5;
+ background: linear-gradient(180deg, #ecfff7 0%, #f7fbf6 42%, #fbfaf5 100%);
color: #00231C;
}
@@ -579,52 +595,136 @@
position: relative;
display: flex;
flex-direction: column;
+ background:
+ radial-gradient(circle at 12% 8%, rgba(166, 255, 234, 0.48) 0, rgba(166, 255, 234, 0) 260rpx),
+ radial-gradient(circle at 92% 20%, rgba(255, 221, 176, 0.28) 0, rgba(255, 221, 176, 0) 320rpx);
}
.title {
flex-shrink: 0;
- background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
- background-size: 100%;
+ background:
+ linear-gradient(135deg, rgba(166, 255, 234, 0.9) 0%, rgba(245, 255, 249, 0.96) 52%, rgba(255, 246, 225, 0.94) 100%);
width: 100%;
height: 400rpx;
padding-bottom: 20rpx;
+ border-bottom-left-radius: 48rpx;
+ border-bottom-right-radius: 48rpx;
+ box-shadow: 0 18rpx 44rpx rgba(0, 35, 28, 0.06);
+ position: relative;
+ overflow: hidden;
+ }
+
+ .title::after {
+ content: '';
+ width: 360rpx;
+ height: 360rpx;
+ border-radius: 50%;
+ background: rgba(255, 221, 176, 0.26);
+ position: absolute;
+ right: -150rpx;
+ top: -120rpx;
}
.title-sreach {
width: 75%;
display: flex;
height: 200rpx;
+ position: relative;
+ z-index: 1;
}
.back-btn {
padding-top: 110rpx;
+ width: 72rpx;
+ text-align: center;
}
.title-search {
margin-top: 110rpx;
display: flex;
- background: #fff;
- height: 54rpx;
+ background: rgba(255, 255, 255, 0.78);
+ height: 64rpx;
margin-left: 20rpx;
- border-radius: 54rpx;
+ border-radius: 999rpx;
width: 380rpx;
flex: 1;
+ box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.08);
+ border: 1px solid rgba(255, 255, 255, 0.88);
input {
- height: 54rpx;
- line-height: 54rpx;
+ height: 64rpx;
+ line-height: 64rpx;
+ font-size: 26rpx;
}
}
+ .order-hero {
+ width: 90%;
+ margin: -6rpx auto 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+ z-index: 1;
+ }
+
+ .hero-eyebrow {
+ color: #0d8d76;
+ font-size: 20rpx;
+ font-weight: 900;
+ letter-spacing: 2rpx;
+ }
+
+ .hero-title {
+ margin-top: 8rpx;
+ color: #173f36;
+ font-size: 44rpx;
+ font-weight: 900;
+ }
+
+ .hero-sub {
+ margin-top: 8rpx;
+ color: #60706c;
+ font-size: 23rpx;
+ }
+
+ .hero-badge {
+ width: 132rpx;
+ height: 132rpx;
+ border-radius: 42rpx;
+ background: rgba(255, 255, 255, 0.82);
+ box-shadow: 0 18rpx 34rpx rgba(0, 35, 28, 0.08);
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .hero-num {
+ color: #0d4d42;
+ font-size: 42rpx;
+ font-weight: 900;
+ }
+
+ .hero-label {
+ color: #7b8883;
+ font-size: 20rpx;
+ font-weight: 800;
+ }
+
.nav-tab {
flex-shrink: 0;
position: absolute;
- top: 200rpx;
+ top: 285rpx;
left: 2.5%;
- background: #fff;
+ background: rgba(255, 255, 255, 0.92);
width: 95%;
- border-radius: 20rpx;
- padding: 20rpx;
+ border-radius: 34rpx;
+ padding: 18rpx;
+ box-shadow: 0 18rpx 42rpx rgba(0, 35, 28, 0.07);
+ box-sizing: border-box;
+ border: 1px solid rgba(255, 255, 255, 0.86);
+ z-index: 3;
}
.content {
@@ -635,20 +735,25 @@
position: absolute;
top: 450rpx;
left: 2.5%;
+ padding-bottom: 50rpx;
+ z-index: 1;
}
.tab1 {
height: 80rpx;
line-height: 80rpx;
display: flex;
+ overflow-x: scroll;
+ white-space: nowrap;
}
.tabs1 {
position: relative;
font-size: 30rpx;
- font-weight: 700;
+ font-weight: 900;
color: #777;
- padding: 0 30rpx;
+ padding: 0 24rpx;
+ flex-shrink: 0;
}
.tab2 {
@@ -656,7 +761,7 @@
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
- margin-top: 20rpx;
+ margin-top: 16rpx;
white-space: nowrap;
}
@@ -665,36 +770,54 @@
height: 70rpx;
line-height: 70rpx;
text-align: center;
- background: rgba(247, 248, 248, 0.6);
- border-radius: 20rpx;
- font-weight: 700;
+ background: rgba(248, 255, 250, 0.88);
+ border: 1px solid rgba(166, 255, 234, 0.4);
+ border-radius: 999rpx;
+ font-weight: 900;
margin-right: 20rpx;
display: inline-block;
-webkit-overflow-scrolling: touch;
+ box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.04);
}
.ziqu-xuanfu {
position: absolute;
top: 0;
right: 0;
- background: rgba(247, 248, 248, 0.6);
- border-top-right-radius: 20rpx;
- border-bottom-left-radius: 20rpx;
- font-weight: 700;
+ background: linear-gradient(135deg, #fff7d7, #a6ffea) !important;
+ border-top-right-radius: 28rpx;
+ border-bottom-left-radius: 28rpx;
+ font-weight: 900;
height: 56rpx;
- width: 120rpx;
+ width: 142rpx;
text-align: center;
line-height: 56rpx;
- color: #777;
+ color: #0d4d42 !important;
+ box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.06);
}
.box1 {
width: 100%;
- margin: 0 auto 20rpx;
- background: #fff;
- border-radius: 20rpx;
- padding: 20rpx;
+ margin: 0 auto 24rpx;
+ background: rgba(255, 255, 255, 0.94);
+ border: 1px solid rgba(255, 255, 255, 0.88);
+ border-radius: 34rpx;
+ padding: 24rpx;
position: relative;
+ box-sizing: border-box;
+ box-shadow: 0 18rpx 42rpx rgba(0, 35, 28, 0.07);
+ overflow: hidden;
+ }
+
+ .box1::before {
+ content: '';
+ width: 180rpx;
+ height: 180rpx;
+ border-radius: 50%;
+ background: rgba(166, 255, 234, 0.08);
+ position: absolute;
+ right: -120rpx;
+ top: -130rpx;
}
.goods-img {
@@ -702,14 +825,16 @@
height: 160rpx;
position: relative;
background: #fff;
- border-radius: 20rpx;
- margin-right: 10px;
+ border-radius: 24rpx;
+ margin-right: 10px;
+ overflow: hidden;
+ box-shadow: 0 12rpx 24rpx rgba(0, 35, 28, 0.08);
img {
width: 160rpx;
background-size: 100%;
height: 100%;
- border-radius: 10px;
+ border-radius: 24rpx;
}
}
@@ -720,25 +845,26 @@
.goods-name {
font-weight: 900;
+ color: #243f38;
}
.goods-content-center {
display: flex;
margin: 16rpx 0;
- color: #777;
+ color: #7b8883;
}
.pintuan-left-price {
width: 55%;
text-align: right;
font-weight: 700;
- color: #000;
+ color: #00231C;
}
.goods-content-bottom {
display: flex;
line-height: 56rpx;
- color: #777;
+ color: #6b7773;
}
.btn1 {
@@ -747,12 +873,14 @@
line-height: 60rpx;
text-align: center;
margin-top: 20rpx;
- background: rgba(247, 248, 248, 0.6);
- border-radius: 60rpx;
- color: #777;
- font-weight: 700;
+ background: rgba(248, 255, 250, 0.9) !important;
+ border: 1px solid rgba(166, 255, 234, 0.42);
+ border-radius: 999rpx;
+ color: #0d4d42 !important;
+ font-weight: 900;
float: right;
margin-left: 20rpx;
+ box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.05);
}
.bottom-btn {
@@ -778,8 +906,48 @@
width: 600rpx;
padding: 20rpx;
overflow: scroll;
- background: #fff;
- border-radius: 20rpx;
+ background: linear-gradient(180deg, #ffffff 0%, #f7fffb 100%);
+ border-radius: 36rpx 36rpx 0 0;
max-height: 1000rpx;
+ box-shadow: 0 -18rpx 44rpx rgba(0, 35, 28, 0.12);
+ }
+
+ .empty-order {
+ width: 100%;
+ min-height: 360rpx;
+ padding: 58rpx 36rpx;
+ box-sizing: border-box;
+ border-radius: 36rpx;
+ background:
+ radial-gradient(circle at 78% 8%, rgba(255, 221, 176, 0.28) 0, rgba(255, 221, 176, 0) 150rpx),
+ linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 255, 251, 0.96) 100%);
+ box-shadow: 0 16rpx 38rpx rgba(0, 35, 28, 0.06);
+ text-align: center;
+ }
+
+ .empty-icon {
+ width: 104rpx;
+ height: 104rpx;
+ margin: 0 auto 22rpx;
+ border-radius: 36rpx;
+ background: linear-gradient(135deg, #fff7d7 0%, #a6ffea 100%);
+ color: #125e50;
+ font-size: 34rpx;
+ font-weight: 900;
+ line-height: 104rpx;
+ box-shadow: 0 14rpx 26rpx rgba(0, 35, 28, 0.08);
+ }
+
+ .empty-title {
+ color: #243f38;
+ font-size: 30rpx;
+ font-weight: 900;
+ }
+
+ .empty-sub {
+ margin-top: 14rpx;
+ color: #74817d;
+ font-size: 24rpx;
+ line-height: 38rpx;
}
\ No newline at end of file