首页 > 小程序教程 > 微信小程序美甲服务详情立即预定页面样式模板制作设计下载

微信小程序美甲服务详情立即预定页面样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下:
一、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'
    })
  }
})

模板简介:该模板名称为【微信小程序美甲服务详情立即预定页面样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 25,661次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-18
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信模板 自适应 企业网站 Bootstrap html5 微信公众平台 单页式简历模板 表格式简历模板 微信文章 响应式
您可能会喜欢的其他模板