首页 > 小程序教程 > 微信小程序美容美甲技师个人详情页面设计制作开发教程

微信小程序美容美甲技师个人详情页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序微信小程序美容美甲技师个人详情页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container">
<view class="ar_coverpath">
    <image src="../../images/skilledt_banner.png" mode="aspectFill"></image>
</view>
<view class="ar_cont">
    <view class="ar_cont_h1">包技师</view>
    <text>高级美容师就是指美容师中技术能力更好,获得了高级美容师资格证的美容师。美容师是一种专业美容领域的职业称谓。
    </text>
    <view class="ar_cont_h2">
    【服务内容】
    </view>

    <view class="ar_sevice_item" style="border-top:1px solid #ddd;">
        <text class="ar_cont_subject">脸部的清洁</text>
        <text class="ar_cont_price">¥600</text>
        <view class="section_book" bindtap="bookTap" data-aid="{{item.id}}">
            <text>预约</text>
        </view>
    </view>

    <view class="ar_sevice_item">
        <text class="ar_cont_subject">保健按摩</text>
        <text class="ar_cont_price">¥800</text>
        <view class="section_book" bindtap="bookTap" data-aid="{{item.id}}">
            <text>预约</text>
        </view>
    </view>

    <view class="ar_sevice_item">
        <text class="ar_cont_subject">药物香薰</text>
        <text class="ar_cont_price">¥900</text>
        <view class="section_book" bindtap="bookTap" data-aid="{{item.id}}">
            <text>预约</text>
        </view>
    </view>
</view>

</view>
 
二、wxss样式文件代码如下:
.container{
    background:#fff;
}
.ar_coverpath{
    width:100%;
    margin:0;
    box-sizing:border-box;
    padding:40rpx 20rpx;
}
.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{
    width:100%;
    font-size: 32rpx;
    font-weight: 600;
    line-height: 64rpx;
    color:#000;
    text-align: center;
}
.ar_cont .ar_cont_h2{
    width:100%;
    font-size: 30rpx;
    font-weight: 600;
    color:#000;
    padding:60rpx 0rpx;
}
.ar_sevice_item{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom:1px solid #ddd;
    padding:10rpx 0rpx;
    vertical-align: middle;
    line-height: 80rpx;
}
.ar_sevice_item  .ar_cont_subject{
    width:280rpx;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ar_sevice_item .ar_cont_price{
    color: #e64340;
    margin-left:60rpx;
}
.ar_sevice_item .section_book{
    width:80rpx;
    height:80rpx;
    font-size:24rpx;
    border-radius:100%;
    background:#d24a58;
    line-height: 80rpx;
    color:#fff;
    text-align: center;
}
三、js页面代码如下:
var app = getApp()
Page( {
  data: {
  },
  onLoad: function () { 
  },
  // 预定
  bookTap:function(){
    wx.navigateTo({
      url:'../book/book'
    })
  }
})

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

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