Skip to content

严立 / mini-shimao

Go to a project
Commit 12631291 by wjw
Options

ww-项目服务详情SPA修改

parent 3e7bef2e
Inline Side-by-side
Showing with 241 additions and 5 deletions
pages/play/service-sell/service-sell.js
Page({
data: {
bannerIndex: 0,
bannerStyle: 1,
banner: [
{
id: 0,
img: ''
},
{
id: 1,
img: ''
},
{
id: 2,
img: ''
}
],
serviceInfo: {
name: '竹子热油放松SPA',
time: '90 mins',
address: '元养水韵SPA',
content: '适合肌肉酸痛，容易疲乏、忧郁症、运动型等人群。竹子是生命能量的一种象征，此疗程是结合ADS舒压芳香精油特殊的气体对人体进行一种温暖放松的理疗，通过竹子在人体肌肉上的滚动，压按，深层反射肌肉，舒缓神经，有效改善睡眠，提高健康质量。',
priceSpecial: '880',
price: '890',
}
},
onLoad: function (options) {
},
onLocation: function () {
console.log('点了位置')
}
})
\ No newline at end of file
pages/play/service-sell/service-sell.wxml
<!--pages/home/home/home.wxml-->
<text>pages/home/home/home.wxml</text>
<navigation class="navigation" titleText="服务详情" color="#ffffff"></navigation>
<view class="container">
<view class="banner">
<swiper autoplay circular class="banner-swiper" indicator-dots="{{false}}" interval="5000" duration="500" bindchange="onSwiperChange">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item class="banner-swiper-item" data-item="{{item}}" bindtap="bannerClick">
{{item.id}}
<image class="banner-swiper-image" src="{{item.img}}"></image>
</swiper-item>
</block>
</swiper>
<view class="banner-swiper-point">
<swiper-point bannerActiveIndex="{{bannerIndex}}" bannerStyle="{{bannerStyle}}"></swiper-point>
</view>
<view class="banner-wave">
<image src="/image/ornament-2.png" mode="widthFix"></image>
</view>
</view>
<view class="service-wrapper">
<view class="service-name">
<text>{{serviceInfo.name}}</text>
</view>
<view class="time-address-wrapper row align-c">
<view class="service-icon">
<image src="/image/icon/g-time.png"></image>
</view>
<view class="time-address-title">
<text>时长</text>
</view>
<view class="time-address">
<text>{{serviceInfo.time}}</text>
</view>
</view>
<view class="time-address-wrapper row align-c" bindtap="onLocation">
<view class="service-icon">
<image src="/image/icon/g-location.png"></image>
</view>
<view class="time-address-title">
<text>地址</text>
</view>
<view class="time-address row con-b">
<text>{{serviceInfo.address}}</text>
<image class="service-icon" src="/image/more.png"></image>
</view>
</view>
</view>
<view class="service-content">
<text>{{serviceInfo.content}}</text>
</view>
<view class="footer-wrapper row align-c">
<view class="special-msg">
<text>业主价</text>
</view>
<view class="price-special">
<text class="price-special-symbol">￥</text>
<text>{{serviceInfo.priceSpecial}}</text>
</view>
<view class="price-special-unit">
<text>/人</text>
</view>
<view class="price-old">
<text>{{'￥' + serviceInfo.price}}</text>
<text class="price-old-unit">/人 </text>
</view>
<view class="footer-btn">
<text>立即购买</text>
</view>
</view>
</view>
pages/play/service-sell/service-sell.wxss
/* pages/home/home/home.wxss */
\ No newline at end of file
.container {
padding-bottom: 196rpx;
}
.banner {
z-index: 9;
position: relative;
width: 750rpx;
height: 814rpx;
background-color: #ccc;
}
.banner-swiper,
.banner-swiper-item,
.banner-swiper-image {
position: absolute;
top: 0 !important;
left: 0 !important;
width: 750rpx;
height: 800rpx;
}
.banner-swiper-point {
position: relative;
top: 702rpx;
left: 0;
}
.banner-wave {
position: absolute;
top: 754rpx;
left: 0;
width: 750rpx;
height: 60rpx;
}
.service-wrapper {
width: 670rpx;
margin-top: 50rpx;
padding-bottom: 36rpx;
border-bottom: 1px solid #E2E7EF;
}
.service-name {
height: 120rpx;
color: #15191F;
font-size: 54rpx;
font-weight: 600;
}
.time-address-wrapper {
height: 82rpx;
font-size: 30rpx;
}
.time-address-title {
margin-left: 8rpx;
color: #959DA9;
}
.time-address {
flex: 1;
margin-left: 25rpx;
color: #000000;
}
.service-icon {
width: 40rpx;
height: 40rpx;
}
.service-content {
width: 670rpx;
margin: 56rpx 0;
color: #15191F;
font-size: 30rpx;
line-height: 50rpx;
font-weight: 300;
}
.footer-wrapper {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 196rpx;
padding: 32rpx 40rpx 68rpx;
background-color: #fff;
border-top: 1px solid #E2E7EF;
}
.special-msg {
width: 78rpx;
height: 36rpx;
margin-right: 12rpx;
color: #E8D0AF;
font-size: 18rpx;
line-height: 36rpx;
text-align: center;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx;
}
.price-special {
color: #15191F;
font-size: 38rpx;
}
.price-special-symbol {
font-size: 26rpx;
}
.price-special-unit {
margin-left: 4rpx;
color: #15191F;
font-size: 26rpx;
}
.price-old {
margin-left: 16rpx;
color: #C2C7CF;
font-size: 30rpx;
text-decoration: line-through;
}
.price-old-unit {
font-size: 26rpx;
}
.footer-btn {
position: absolute;
right: 40rpx;
width: 200rpx;
height: 96rpx;
color: #fff;
font-size: 30rpx;
line-height: 96rpx;
text-align: center;
background-color: #86C5E1;
border-radius: 4rpx;
}
image {
width: 100%;
height: 100%;
}
\ No newline at end of file
project.config.json
......@@ -144,6 +144,13 @@
"pathName": "pages/commodity/project-detail/project-detail",
"query": "",
"scene": null
},
{
"id": -1,
"name": "pages/play/service-sell/service-sell",
"pathName": "pages/play/service-sell/service-sell",
"query": "",
"scene": null
}
]
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment