婚礼邀请函微信小程序首页开发步骤

最新推荐文章于 2024-09-16 20:39:39 发布

crazy_sir

最新推荐文章于 2024-09-16 20:39:39 发布

阅读量1.5k

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/crazy_sir/article/details/128311084

版权

页面布局分析

首页代码

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;
}

效果图如下：