mkm/nk-shop2.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

界面阴影增加

Browse Source
This commit is contained in:
jia 2023-09-01 22:29:55 +08:00
parent 91125cfe88
commit 2d9429cfd8
2 changed files with 37 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/zbpSwiper.vue
View File

@ -5,7 +5,7 @@
<img :src="bgColor" alt="">
</view>
<view class="site-box flex_a_c_j_sb" >
<view class="site-box flex_a_c_j_sb" >
<view class="place_wrapper flex_a_c" @click="selectLocation">
<view class="iconfont icon-weizhi"></view>
<view class="town_name">{{street}}</view>

106
pages/supply_chains/supply_chains.vue
View File

@ -3,11 +3,11 @@
<view class="circle_friends_wrapper">
<view class="">
<view v-if='ishshow'>
<view :class="['site-box ','flex_a_c_j_sb',isFshow?'sitbox':'']">
<view :class="['place_wrapper','flex_a_c',isFshow?'sitbox':'']" @click="selectLocation"
style="opacity: 0;">
<view class="iconfont icon-weizhi" style="margin-left: 20rpx;">
<view class="iconfont icon-weizhi" style="margin-left: 20rpx;background-color: transparent;">
</view>
<view class="town_name">{{street}}</view>
</view>
@ -16,14 +16,12 @@
:class="[isFshow?'sitbox':'']">
<view class="iconfont icon-xiaoxi" style="color:#fff;"></view>
</navigator>
</view>
<view class="site-box ','flex_a_c_j_sb'" v-if="ishshow">
<!-- <view class="site-box ','flex_a_c_j_sb'" v-if="ishshow">
<view class="bg-img">
<img :src="bgColor" alt="">
</view>
</view>
</view> -->
</view>
@ -52,8 +50,8 @@
</view>
</view>
<view class="list-title-info" style="color:#3A7331 ;">
<view class="" >
<view class="list-title-info" style="color:#3A7331 ;">
<view class="">
点击查看
</view>
<text class="iconfont icon-xiangyou"></text>
@ -75,7 +73,7 @@
</view>
</view>
<view class="list-title-info" style="color:#3A7331 ;">
<view class="" >
<view class="">
点击查看
</view>
<text class="iconfont icon-xiangyou"></text>
@ -125,7 +123,7 @@
<image src="@/static/images/f4.png" mode=""></image>
</view>
<view class="goodslist">
<WaterfallsFlow :wfList='cateGoods' @itemTap="itemTap" />
<WaterfallsFlow :wfList='cateGoods' />
</view>
<view class="empty_wrapper" v-if="emptyShow">
@ -225,7 +223,7 @@
streeta_id: '',
street: '',
bgColor: '',
ishshow: false,
ishshow: true,
isFshow: false,
}
},
@ -293,15 +291,16 @@
// #ifdef APP-PLUS
onPageScroll(e) {
// this.scrollTop = e.scrollTop;
console.log(e.scrollTop)
// console.log(e.scrollTop)
if (e.scrollTop > 0) {
this.ishshow = true
setTimeout(() => {
this.ishshow = false
this.isFshow = true
}, 3000)
this.isFshow = true
} else if (e.scrollTop == 0) {
this.ishshow = false
this.isFshow = false
} else {
this.ishshow = false
this.isFshow = false
}
@ -650,7 +649,7 @@
}
</script>
<style lang="scss">
<style lang="scss" scoped>
/deep/.color-lump {
display: none;
}
@ -696,54 +695,15 @@
}
.sistbox {
transition: fadenum 3s;
}
@keyframes fadenum {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.bg-img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
/* #ifdef MP || APP-PLUS */
z-index: -100;
/* #endif */
/* #ifdef H5 */
z-index: -100;
/* #endif */
z-index: -100;
filter: blur(0);
overflow: hidden;
img {
width: 100%;
height: 100%;
filter: blur(30rpx);
transform: scale(1.5);
}
}
.sitbox {
opacity: 1 !important;
background: #F84221 !important;
// background: #F84221 !important;
background: linear-gradient(to bottom, #F84221, #F84221);
background-color: #F84221;
}
.site-box {
width: 100%;
/* #ifdef MP || APP-PLUS */
@ -766,9 +726,10 @@
// background-color: #e5e5e5;
// opacity: 0;
/* 初始时设置元素不透明 */
transition: opacity 0.2s ease-in;
backdrop-filter: blur(5px) opacity(0);
transition: opacity 0.2s ease-in-out;
transition-delay: 1.5s;
transition: background 0.2s ease-in;
transition: background 0.2s ease-in-out;
padding-right: 20rpx;
// 位置
@ -777,7 +738,7 @@
margin-right: 24.56rpx;
font-size: 30rpx;
opacity: 0;
transition: opacity 1s ease-in;
transition: opacity 1s ease-in-out;
transition-delay: 1.5s;
.town_name {
@ -910,6 +871,7 @@
width: 356rpx;
height: 235rpx;
position: relative;
background: linear-gradient(180deg, #3B7733 0%, rgba(59, 118, 50, 0.88) 60%, rgba(56, 113, 49, 0) 100%);
.list-title {
display: flex;
@ -930,12 +892,14 @@
color: #F4F7FE;
.titlea {
font-size: 5rpx;
margin-top: 10rpx;
margin-left: 15rpx;
font-size: 12rpx;
font-family: PingFang SC-Semibold, PingFang SC;
}
.titleb {
margin-top: 10rpx;
margin-top: 18rpx;
font-size: 37rpx;
font-family: PingFang SC-Semibold, PingFang SC;
font-weight: 600;
@ -975,7 +939,7 @@
}
.list-title-info {
padding: 2rpx 2rpx;
display: flex;
font-size: 10rpx;
@ -983,8 +947,8 @@
border-radius: 19rpx 19rpx 19rpx 19rpx;
position: absolute;
bottom: 14rpx;
left:100rpx ;
padding-left:15rpx ;
left: 100rpx;
padding-left: 15rpx;
}
image {
@ -1004,6 +968,7 @@
width: 356rpx;
height: 482rpx;
position: relative;
background: linear-gradient(180deg, #3B7733 0%, rgba(59, 118, 50, 0.88) 60%, rgba(56, 113, 49, 0) 100%);
.list-con-title {
position: absolute;
@ -1042,6 +1007,7 @@
width: 356rpx;
height: 235rpx;
position: relative;
background: linear-gradient(180deg, #3B7733 0%, rgba(59, 118, 50, 0.88) 60%, rgba(56, 113, 49, 0) 100%);
.list-con-title {
position: absolute;