本文给大家带来的是微信小程序美甲服务详情预订页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container">
<view class="ar_coverpath">
<image src="../../images/banner_02.png" mode="aspectFill"></image>
</view>
<view class="ar_cont">
<text class="ar_cont_h1">秋季自然特价美甲</text>
<text class="ar_cont_price">价格:¥198 </text>
<text>
美甲是一种对指(趾)甲进行装饰美化的工作,又称甲艺设计。美甲是根据客人的手形、甲形、肤质、服装的色彩和要求,对指(趾)甲进行消毒、清洁、护理、保养、修饰美化的过程。具有表现形式多样化的特点。
</text>
<view class="ar_line"></view>
<text class="ar_cont_h1">详情描述</text>
<text>
一、涂指甲油之前要涂上指甲底油
二、不涂面油会让美甲面不堪一击
三、短甲小最好涂深色指甲油
四、美甲颜色要保持协调
五、不要小看修甲工具
</text>
<button class="ar_book" bindtap="bookTap">立即预定</button>
</view>
</view>
|
二、wxss样式文件代码如下:
.container{
background:#fff;
}
.ar_coverpath{
width:100%;
margin:0;
box-sizing:border-box;
}
.ar_coverpath image{
width:100%;
height:390rpx;
}
.ar_cont{
padding:0rpx 60rpx;
font-size:30rpx;
background: #fff;
margin-bottom:40rpx;
line-height: 45rpx;
color:#666666;
}
.ar_cont .ar_cont_h1,
.ar_cont .ar_cont_price{
font-size: 32rpx;
font-weight: 600;
line-height: 64rpx;
color:#000;
}
.ar_cont .ar_cont_price{
color: #e64340;
margin-left:60rpx;
}
.ar_line{
width:100%;
height:1rpx;
content: '';
background: #ddd;
margin:30rpx 0rpx;
}
.ar_book{
background:#d24a58;
font-size: 32rpx;
color:#fff;
border-radius: 0rpx;
margin:40rpx 0rpx 10rpx;
}
|
三、js页面代码如下:
var app = getApp()
Page( {
data: {
},
onLoad: function (options) {
this.setData({
artype:options.artype
})
},
getLocation:function(){
wx.navigateTo({
url:'../location/location'
})
},
bookTap:function(){
wx.navigateTo({
url:'../book/book'
})
}
})
|