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

1

master
wangfukang 4 weeks ago
parent
643d17730f
commit
6e250d7e0d
1 changed files with 136 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 173
      pages/index/index.vue

173
pages/index/index.vue
View File

@ -22,7 +22,7 @@
<img :src="item.adImage" alt="" /> <img :src="item.adImage" alt="" />
</swiper-item> </swiper-item>
</swiper> </swiper>
<view class="" style="background: #fff;"> <view class="order-notice-wrap">
<view class="order-msg-box" v-if="orderLists.length <= 0"> <view class="order-msg-box" v-if="orderLists.length <= 0">
@ -281,7 +281,7 @@
</view> </view>
</view> </view>
<view @tap="searchOrder('yongjin')" class="sort-member" style="border-radius: 60rpx" <view @tap="searchOrder('yongjin')" class="sort-member" style="border-radius: 60rpx"
:style="{'background':checkYongjin==true?'rgba(138, 255, 67, 0.16)':'rgba(247, 248, 248, 0.6)','border':checkYongjin==true?'1px solid rgba(138, 255, 67, 1)':'0'}"> :style="{'background':checkYongjin==true?'linear-gradient(135deg, rgba(255, 247, 215, 0.95), rgba(166, 255, 234, 0.72))':'rgba(248, 255, 250, 0.86)','border':checkYongjin==true?'1px solid rgba(255, 188, 119, 0.72)':'1px solid rgba(166, 255, 234, 0.46)'}">
佣金 佣金
</view> </view>
</view> </view>
@ -1309,7 +1309,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 28rpx; font-size: 28rpx;
background: #F5F8F5; background: linear-gradient(180deg, #f2fff8 0%, #fffdf4 32%, #f7fbf6 100%);
color: #00231C; color: #00231C;
} }
@ -1317,6 +1317,9 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 28rpx; font-size: 28rpx;
background:
radial-gradient(circle at 12% 12%, rgba(166, 255, 234, 0.34) 0, rgba(166, 255, 234, 0) 240rpx),
radial-gradient(circle at 90% 36%, rgba(255, 216, 168, 0.26) 0, rgba(255, 216, 168, 0) 260rpx);
} }
.swiper-container { .swiper-container {
@ -1342,22 +1345,42 @@
z-index: 99 !important; z-index: 99 !important;
} }
.order-notice-wrap {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(250, 255, 250, 0.72) 100%);
position: relative;
}
.order-msg-box { .order-msg-box {
width: 95%; width: 95%;
height: 146rpx; height: 146rpx;
border-radius: 40rpx; border-radius: 36rpx;
border: 4rpx solid #A6FFEA; border: 1px solid rgba(166, 255, 234, 0.86);
background: #fff; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 255, 250, 0.96) 100%);
box-shadow: 0 18rpx 36rpx rgba(0, 35, 28, 0.08);
z-index: 99; z-index: 99;
position: absolute; position: absolute;
left: 2.5%; left: 2.5%;
bottom: 0; bottom: 0;
display: flex; display: flex;
overflow: hidden;
}
.order-msg-box::after {
content: '';
width: 180rpx;
height: 180rpx;
border-radius: 50%;
background: rgba(255, 216, 168, 0.22);
position: absolute;
right: -72rpx;
top: -96rpx;
} }
.order-msg-left { .order-msg-left {
width: 20%; width: 20%;
height: 100%; height: 100%;
position: relative;
z-index: 1;
} }
.order-msg-left img { .order-msg-left img {
@ -1372,11 +1395,15 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: 5%; padding-left: 5%;
position: relative;
z-index: 1;
} }
.order-msg-right { .order-msg-right {
width: 30%; width: 30%;
height: 100%; height: 100%;
position: relative;
z-index: 1;
} }
.order-msg-right img { .order-msg-right img {
@ -1454,37 +1481,72 @@
} }
.menu-box { .menu-box {
width: 100%; width: 95%;
height: 160rpx; height: 172rpx;
display: flex; display: flex;
margin-top: 40rpx; align-items: center;
background: #F5F8F5; margin: 30rpx auto 0;
padding: 14rpx 10rpx;
box-sizing: border-box;
border-radius: 38rpx;
border: 1px solid rgba(255, 255, 255, 0.9);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 250, 235, 0.92) 48%, rgba(239, 255, 248, 0.96) 100%);
box-shadow: 0 18rpx 42rpx rgba(0, 35, 28, 0.07);
position: relative; position: relative;
z-index: 99 z-index: 99;
overflow: hidden;
}
.menu-box::after {
content: '';
width: 210rpx;
height: 210rpx;
border-radius: 50%;
background: rgba(166, 255, 234, 0.28);
position: absolute;
right: -92rpx;
top: -122rpx;
} }
.menu-list { .menu-list {
flex: 1; flex: 1;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
border-radius: 28rpx;
transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2), background 0.2s ease;
}
.menu-list:active {
background: rgba(255, 255, 255, 0.72);
transform: translateY(-4rpx) scale(0.96);
} }
.menu-list img { .menu-list img {
width: 70%; width: 82rpx;
height: 70%; height: 82rpx;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
filter: drop-shadow(0 10rpx 14rpx rgba(0, 35, 28, 0.08));
} }
.menu-name { .menu-name {
text-align: center; text-align: center;
font-size: 24rpx; font-size: 24rpx;
font-weight: 700; font-weight: 800;
margin-top: 15rpx; margin-top: 12rpx;
color: #40534d;
line-height: 30rpx;
} }
.like-box, .like-box,
.daimai-box { .daimai-box {
width: 95%; width: 95%;
margin: 20rpx auto; margin: 24rpx auto;
} }
.daimai-tab { .daimai-tab {
@ -1636,6 +1698,7 @@
.like-title { .like-title {
width: 218rpx; width: 218rpx;
height: 64rpx; height: 64rpx;
filter: drop-shadow(0 8rpx 10rpx rgba(0, 35, 28, 0.06));
} }
.like-title img { .like-title img {
@ -1650,14 +1713,20 @@
background-size: 100%; background-size: 100%;
margin-top: 20rpx; margin-top: 20rpx;
display: flex; display: flex;
border-radius: 34rpx;
overflow: hidden;
box-shadow: 0 18rpx 42rpx rgba(81, 139, 91, 0.1);
} }
.like-left { .like-left {
width: 45%; width: 45%;
background: #fff; background: rgba(255, 255, 255, 0.92);
border-radius: 20rpx; border: 1px solid rgba(255, 255, 255, 0.86);
border-radius: 26rpx;
height: 340rpx; height: 340rpx;
margin: 50rpx 0 0 3.3%; margin: 50rpx 0 0 3.3%;
box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.05);
overflow: hidden;
} }
.like-content-title { .like-content-title {
@ -1676,6 +1745,11 @@
.content-list { .content-list {
display: flex; display: flex;
margin-bottom: 10rpx; margin-bottom: 10rpx;
transition: transform 0.18s ease;
}
.content-list:active {
transform: scale(0.98);
} }
.list-img { .list-img {
@ -1688,6 +1762,7 @@
.list-img img { .list-img img {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 14rpx;
} }
.list-product { .list-product {
@ -1704,12 +1779,13 @@
display: inline; display: inline;
font-size: 18rpx; font-size: 18rpx;
padding: 4rpx 6rpx; padding: 4rpx 6rpx;
background: #A6FFEA; background: linear-gradient(135deg, #a6ffea 0%, #fff2c6 100%);
border-radius: 5rpx; border-radius: 10rpx;
position: absolute; position: absolute;
top: 10rpx; top: 10rpx;
left: 10rpx; left: 10rpx;
font-weight: 700; font-weight: 700;
box-shadow: 0 4rpx 10rpx rgba(0, 35, 28, 0.08);
} }
.list-text { .list-text {
@ -1732,22 +1808,25 @@
.list-1 { .list-1 {
width: 98%; width: 98%;
max-height: 640rpx; max-height: 640rpx;
background: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(253, 255, 250, 0.96) 100%);
border-radius: 20rpx; border: 1px solid rgba(255, 255, 255, 0.86);
margin: 20rpx auto 0; border-radius: 34rpx;
margin: 22rpx auto 0;
overflow: hidden; overflow: hidden;
box-shadow: 0 16rpx 38rpx rgba(0, 35, 28, 0.07);
} }
.daoda-time { .daoda-time {
width: 242rpx; width: 242rpx;
height: 48rpx; height: 48rpx;
font-size: 24rpx; font-size: 24rpx;
padding-left: 10rpx; padding-left: 14rpx;
font-weight: 700; font-weight: 700;
border-radius: 10rpx; border-radius: 14rpx;
line-height: 48rpx; line-height: 48rpx;
text-align: left; text-align: left;
background: rgba(166, 255, 234, 0.3); background: rgba(166, 255, 234, 0.42);
color: #125e50;
margin: 20rpx 0 20rpx 20rpx; margin: 20rpx 0 20rpx 20rpx;
} }
@ -1778,8 +1857,10 @@
width: 95%; width: 95%;
position: relative; position: relative;
height: 200rpx; height: 200rpx;
border-radius: 40rpx; border-radius: 32rpx;
border: 1px solid #A6FFEA; border: 1px solid rgba(166, 255, 234, 0.78);
background: rgba(255, 255, 255, 0.74);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
margin: 0 auto; margin: 0 auto;
} }
@ -1862,12 +1943,15 @@
flex: 1; flex: 1;
height: 50rpx; height: 50rpx;
line-height: 50rpx; line-height: 50rpx;
color: #40534d;
} }
.qu-left { .qu-left {
width: 80%; width: 80%;
padding-left: 10rpx; padding-left: 10rpx;
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.qu-right { .qu-right {
@ -1884,12 +1968,18 @@
line-height: 50rpx; line-height: 50rpx;
width: 95%; width: 95%;
margin: 20rpx auto; margin: 20rpx auto;
color: #40534d;
} }
.qiangdan-btn { .qiangdan-btn {
width: 95%; width: 95%;
height: 100rpx; height: 100rpx;
margin: 20rpx auto; margin: 20rpx auto;
transition: transform 0.18s ease;
&:active {
transform: scale(0.97);
}
img { img {
width: 100%; width: 100%;
@ -1973,8 +2063,10 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 90; z-index: 90;
background: #fff; background: rgba(255, 255, 255, 0.96);
padding-top: 20rpx; padding: 20rpx 10rpx 0;
box-sizing: border-box;
box-shadow: 0 12rpx 26rpx rgba(0, 35, 28, 0.05);
} }
.sort-text { .sort-text {
@ -1983,17 +2075,23 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 90; z-index: 90;
background: #fff; background: rgba(255, 255, 255, 0.96);
padding: 0 10rpx 4rpx;
box-sizing: border-box;
} }
.sort-member { .sort-member {
height: 60rpx; height: 60rpx;
line-height: 60rpx; line-height: 60rpx;
text-align: center; text-align: center;
background: rgba(247, 248, 248, 0.6); background: rgba(248, 255, 250, 0.86);
width: 24%; width: 24%;
margin-right: 4%; margin-right: 4%;
border-radius: 10rpx; border: 1px solid rgba(166, 255, 234, 0.46);
border-radius: 24rpx;
color: #40534d;
font-weight: 700;
box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.04);
} }
.sort-value { .sort-value {
@ -2001,13 +2099,14 @@
height: auto; height: auto;
max-height: 300rpx; max-height: 300rpx;
overflow: scroll; overflow: scroll;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 35, 28, 0.82);
position: absolute; position: absolute;
top: 145rpx; top: 145rpx;
right: 0; right: 0;
border-radius: 20rpx; border-radius: 24rpx;
color: #fff; color: #fff;
font-size: 22rpx; font-size: 22rpx;
box-shadow: 0 16rpx 34rpx rgba(0, 35, 28, 0.16);
} }
.sort-value1 { .sort-value1 {
@ -2022,7 +2121,7 @@
.qusong1 { .qusong1 {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
background: rgba(0, 35, 28, 1); background: linear-gradient(135deg, #0d4d42 0%, #38d9b8 100%);
color: #fff; color: #fff;
border-radius: 40rpx; border-radius: 40rpx;
text-align: center; text-align: center;
@ -2036,7 +2135,7 @@
font-size: 24rpx; font-size: 24rpx;
line-height: 38rpx; line-height: 38rpx;
text-align: center; text-align: center;
background: rgba(166, 255, 234, 0.5); background: rgba(166, 255, 234, 0.62);
padding: 0 20rpx; padding: 0 20rpx;
margin-left: -10rpx; margin-left: -10rpx;
font-weight: 700; font-weight: 700;

Write Preview
Loading…
Cancel
Save