Browse Source

更新结算页面图片样式和布局

pull/3/head
SwTt29 2 months ago
parent
commit
39b5bfea60
  1. 1
      pages/settlement/index.wxml
  2. 71
      pages/settlement/index.wxss

1
pages/settlement/index.wxml

@ -4,6 +4,7 @@
<!-- 引导页 -->
<view class="guide-page" wx:if="{{showGuidePage}}">
<view class="guide-content">
<image class="guide-image" src="/images/立即入驻7.jpg" mode="scaleToFill"></image>
<view class="guide-title">成为供应商</view>
<view class="guide-description">完成入驻后即可发布货源,开展鸡蛋贸易</view>
<button class="guide-button btn btn-primary" bindtap="startSettlement">立即入驻</button>

71
pages/settlement/index.wxss

@ -64,12 +64,45 @@
justify-content: center;
align-items: center;
min-height: 80vh;
padding: 0 40rpx;
padding: 0 20rpx;
}
.guide-content {
text-align: center;
width: 100%;
transform: translateY(-160rpx);
}
.guide-image {
display: block;
width: 800rpx;
height: 550rpx;
border-radius: 24rpx;
margin: 0 auto 48rpx;
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
object-fit: fill;
background-color: #f5f5f5;
transition: all 0.3s ease;
position: relative;
left: 50%;
transform: translateX(-50%) translateY(0);
animation: guideImageSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.guide-image:hover {
transform: translateX(-50%) translateY(-8rpx);
box-shadow: 0 16rpx 50rpx rgba(0, 0, 0, 0.2);
}
@keyframes guideImageSlideIn {
from {
opacity: 0;
transform: translateX(-50%) translateY(40rpx) scale(0.9);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
}
.guide-title {
@ -77,6 +110,7 @@
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
animation: guideTitleSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
}
.guide-description {
@ -84,6 +118,7 @@
color: #666;
margin-bottom: 60rpx;
line-height: 40rpx;
animation: guideDescSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
}
.guide-button {
@ -91,6 +126,40 @@
height: 96rpx;
font-size: 32rpx;
border-radius: 48rpx;
animation: guideButtonSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s backwards;
}
@keyframes guideTitleSlideIn {
from {
opacity: 0;
transform: translateY(20rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes guideDescSlideIn {
from {
opacity: 0;
transform: translateY(20rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes guideButtonSlideIn {
from {
opacity: 0;
transform: translateY(20rpx) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes contentFadeIn {

Loading…
Cancel
Save