页面布局分析

首页代码

index.wxml文件代码如下：

<view class="outer"><view class="player" bindtap="play"><image src="../../images/music_icon.png" style="animation-play-state: {{isPlaying}};"></image><image src="../../images/music_play.png" class="player-{{isPlaying=='running'?'play':'pause'}}"></image></view><view class="content"><!-- 顶部的gif图片 --><image class="content-gif" src="../../images/save_the_date.gif"></image><!-- 标题 --><view class="content-title">邀请函</view><view class="content-avatar"><image src="../../images/avatar.png"></image></view><view class="content-info"><!-- 新郎的信息 --><view class="content-name"><image src="/images/tel.png" bindtap="callGroom"></image><view>小张</view><view>新郎</view></view><!-- 放的喜字信息 --><view class="content-wedding"><image src="/images/wedding.png"></image></view><!-- 新娘的信息 --><view class="content-name"><image src="/images/tel.png" bindtap="callBride"></image><view>小李</view><view>新娘</view></view></view><view class="content-address"><view>我们诚邀您来参加我们的婚礼</view><view>时间：2022年12月6日</view><view>地点：四川省泸州市龙马潭区巨洋饭店</view></view></view><image class="bg" src="../../images/bg_1.png"></image>
</view>

 index.wxss页面文件如下：

.outer{width: 100vw;height: 100vh;
}
.bg{width: 100%;height: 100%;z-index: 0;
}
.player{position: fixed;z-index: 4;top: 20rpx;right: 20rpx;
}
.player >image:first-child{width: 80rpx;height: 80rpx;animation: musicRotate 3s linear infinite;
}
@keyframes musicRotate{from{transform: rotate(0deg);}to{transform: rotate(360deg);}
}
.player>image:last-child{width: 20rpx;height: 80rpx;margin-left: -5px;
}
.player-play{/* background: #ff4c91; */animation: musicPlay 1s linear forwards;
}
.player-pause{animation: musicPause 1s linear forwards;
}
@keyframes musicPlay{form{transform: rotate(0deg);}to{transform: rotate(20deg);}
}
@keyframes musicPause{form{transform: rotate(20deg);}
}.content{position: fixed;z-index: 3;width: 100vw;height: 100vh;display: flex;flex-direction: column;align-items: center;}
.content-gif{width: 19vh;height: 18.6vh;margin-bottom: 10rpx;
}
.content-title{font-size: 60rpx;color: #ff4c91;margin-bottom: 10rpx;
}
.content-avatar>image{width: 300rpx;height: 300rpx;border-radius: 50%;border: 3px solid #ff4c91;
}
.content-info{display: flex;flex-direction: row;width: 50vw;align-items: center;margin-top: 20rpx;
}
.content-name{color: #ff4c91;font-size: 2.7vh;font-weight: bold;position: relative;}.content-name>image{width: 30rpx;height: 30rpx;border-radius: 50%;border: 1px solid #ff4c91;position:absolute;top: -1vh;right: -3.6vh;
}
.content-wedding{flex: 1;display: flex;flex-direction: column;align-items: center;}
.content-wedding>image{width: 60rpx;height: 60rpx;
}
.content-address{margin-top: 5vh;font-size: 2.5vh;font-weight: bold;color: #ff4c91;text-align: center;line-height: 4.5vh;
}
.content-address view:first-child{font-size: 3vh;padding-bottom: 2vh;
}

效果图如下：