本文给大家带来的是微信小程序绿色背景欢迎进入引导页设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container">
<image class="user-avatar" src="/img/fushi.jpg"></image>
<text class="user-name">hello, XXX</text>
<view class="moto-container" bindtap="onTap">
<text class="moto">欢迎进入</text>
</view>
</view>
|
二、wxss样式文件代码如下:
page {
background-color: #def3d8;
}
.container {
display:flex;
flex-direction:column;
align-items:center;
}
.user-avatar {
width:200rpx;
height:200rpx;
border-radius: 50%;
border:1px solid #000;
margin-top:160rpx;
}
.user-name {
margin-top:100rpx;
font-size:32rpx;
font-weight:bold;
}
.moto {
font-size:24rpx;
letter-spacing:3rpx;
font-weight:bold;
line-height: 80rpx;
}
.moto-container {
margin-top:200rpx;
border:1px solid #69942f;
border-radius: 5px;
width:200rpx;height:80rpx;
text-align: center;
color:#69942f;
}
|
三、js页面代码如下:
// pages/welcome/welcome.js
Page({
onTap:function(event){
wx.switchTab({
url: '../tujian-family/tujian-family'
})
}
})
|