shang/yfs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加特效

Browse Source
This commit is contained in:
zpc 2025-04-08 22:01:53 +08:00
parent dde5816892
commit 107ab36a80
2 changed files with 99 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
pages/infinite/bonus_house_details.vue
View File

@ -47,22 +47,16 @@
</view>
</view>
</view>
<view class="" style="width: 544rpx; height: 500rpx; margin: 0 auto 0;">
<swiper class="swiper-box" :current="currentItemId" :style="{ height: '500rpx' }" :autoplay="false"
<view class="swiper-container">
<swiper class="swiper-box" :current="currentItemId" :autoplay="false"
@change="handleSwiperChange" :indicator-dots="false" :circular="true" :interval="3000">
<swiper-item v-for="(item, index) in goodsList" :key="index" :item-id="item.index">
<view
style="display: flex; justify-content: center; align-items: center; height:75%;margin-top: 10rpx;">
<view
style="background-image: url('https://mh.shhuanmeng.com/flw_bj.png');background-size: 100% 100%; width: 280rpx; height:352rpx; display: flex; justify-content: center; align-items: center;z-index: 2;">
<image :src="item.imgurl_detail" style="width:154rpx; height:166rpx;"></image>
<view class="swiper-item-content">
<view class="item-background">
<image :src="item.imgurl_detail" class="item-image"></image>
</view>
</view>
<view
style="background-image: url('https://mh.shhuanmeng.com/flw_dibu.png');background-size: 100% 100%;width: 100%; height: 122rpx;position: relative;top:-15%;z-index: 1;">
</view>
<view class="item-bottom"></view>
</swiper-item>
</swiper>
</view>
@ -125,10 +119,9 @@
<view class="column align-center"
style="width: 100%; height: 198rpx; background-color: #fff; margin-top: 8rpx;">
<view class="center"
style="width: 340rpx; height: 84rpx; background-color: #D8FD24; border-radius: 16rpx; margin-top: 32rpx;"
<view class="participation-button"
@click="handleButtonClick">
<text style="color: #333333; font-size: 32rpx; font-weight: 600;">{{ buttonText }}</text>
<text class="button-text">{{ buttonText }}</text>
</view>
<text style="color: #8A8A8A; font-size: 20rpx; font-weight: 400; margin-top: 12rpx;">{{ remainingTime
}}</text>
@ -695,4 +688,94 @@ export default {
background-image: url($imgurl + 'checkin/ic_share.png');
background-size: 100% 100%;
}
.swiper-container {
width: 544rpx;
height: 500rpx;
margin: 0 auto;
}
.swiper-box {
height: 500rpx;
}
.swiper-item-content {
display: flex;
justify-content: center;
align-items: center;
height: 75%;
margin-top: 10rpx;
}
.item-background {
background-image: url($baseurl +'flw_bj.png');
background-size: 100% 100%;
width: 280rpx;
height: 352rpx;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.item-image {
width: 154rpx;
height: 166rpx;
}
.item-bottom {
background-image: url($baseurl +'flw_dibu.png');
background-size: 100% 100%;
width: 100%;
height: 122rpx;
position: relative;
top: -15%;
z-index: 1;
}
.participation-button {
display: flex;
justify-content: center;
align-items: center;
width: 340rpx;
height: 84rpx;
background-color: #D8FD24;
border-radius: 16rpx;
margin-top: 32rpx;
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
position: relative;
overflow: hidden;
&:active {
transform: scale(0.95);
background-color: #c5e822;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100rpx;
height: 100rpx;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
transition: all 0.3s ease-out;
}
&:active::after {
transform: translate(-50%, -50%) scale(5);
opacity: 0;
}
}
.button-text {
color: #333333;
font-size: 32rpx;
font-weight: 600;
}
</style>

1
uni.scss
View File

@ -16,6 +16,7 @@
$imgurl:'https://image.zfunbox.cn/static/web/static/';
$iconurl:'https://image.zfunbox.cn/icon/';
$baseurl:'https://image.zfunbox.cn/';
//https://mh.shhuanmeng.com/static/web/static/common/box.png
/* 行为相关颜色 */
$uni-color-primary: #007aff;