微信小程序个人技师服务详情介绍页面样式模板制作设计下载

制作好以后效果图如下：

一、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'
    })
  }
})

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