master
271556543@qq.com 3 years ago
parent f0f15a5822
commit dd1775db48

@ -1,12 +1,10 @@
<script>
import {
weixin
} from 'utils/weixin.js';
export default {
onLaunch: function() {
weixin.getOpenidInfo(() => {
}, true)
weixin.getOpenidInfo(() => {}, true)
console.log('App Launch')
const updateManager = uni.getUpdateManager();
@ -52,8 +50,9 @@
/*每个页面公共css */
@import url("./resources/css/common.css");
@import url("./resources/css/iconfont.css");
@import url("./static/iconfont/iconfont.css");
</style>
<style lang="scss">
/* 注意要写在第一行同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
<style lang="scss">
/* 注意要写在第一行同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>

@ -1,79 +1,80 @@
{
"name" : "szyykt",
"appid" : "__UNI__4FFFF4E",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* */
"modules" : {},
/* */
"distribute" : {
/* android */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios */
"ios" : {},
/* SDK */
"sdkConfigs" : {}
}
},
/* */
"quickapp" : {},
/* */
"mp-weixin" : {
"appid" : "wx9b4762770771d98a",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true,
"permission" : {
"scope.userLocation" : {
"desc" : "提供LBS服务"
}
},
"optimization" : {
"subPackages" : true
}
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
}
"name": "szyykt",
"appid": "__UNI__4FFFF4E",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
/* 5+App */
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"compilerVersion": 3,
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
/* */
"modules": {},
/* */
"distribute": {
/* android */
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios */
"ios": {},
/* SDK */
"sdkConfigs": {}
}
},
/* */
"quickapp": {},
/* */
"mp-weixin": {
"appid": "wx9b4762770771d98a",
"setting": {
"urlCheck": false
},
"usingComponents": true,
"permission": {
"scope.userLocation": {
"desc": "提供LBS服务"
}
},
"requiredPrivateInfos": ["getLocation"],
"optimization": {
"subPackages": true
}
},
"mp-alipay": {
"usingComponents": true
},
"mp-baidu": {
"usingComponents": true
},
"mp-toutiao": {
"usingComponents": true
},
"uniStatistics": {
"enable": false
}
}

@ -80,40 +80,14 @@
:key="index1">{{tag}}</text>
<!-- <text>孕妈</text><text>宝宝成长</text><text class="grayBg">讲座知识</text> -->
</view>
<view class="subInfo flex_between"><text>{{item.address}}</text><text>2.5km</text></view>
<view class="price"><text class="smallIcon"></text><text>30200</text>&nbsp;&nbsp;-&nbsp;&nbsp;
<text class="smallIcon"></text><text>45000</text>
<view class="subInfo flex_between">
<text>{{addressComputed(item.address)}}</text><text>{{distanceComputed(item.distance)}}</text>
</view>
</view>
</view>
<!-- <view class="intro_column" @tap="gotoDetail">
<view class="imgOuter">
<image mode="aspectFill" src="../../static/690x400.jpg"></image>
<view class="i_intro">推荐</view>
</view>
<view class="columnInfo">
<view class="title">孕育邦孕妈妈摄影体验</view>
<view class="tags"><text>孕妈</text><text>宝宝成长</text><text class="grayBg">讲座知识</text></view>
<view class="subInfo flex_between"><text>东方之门/湖滨天地</text><text>2.5km</text></view>
<view class="price"><text class="smallIcon"></text><text>30200</text>&nbsp;&nbsp;-&nbsp;&nbsp;
<text class="smallIcon"></text><text>45000</text>
</view>
</view>
</view>
<view class="intro_column" @tap="gotoDetail">
<view class="imgOuter">
<image mode="aspectFill" src="../../static/690x400.jpg"></image>
<view class="i_intro">推荐</view>
</view>
<view class="columnInfo">
<view class="title">孕育邦孕妈妈摄影体验</view>
<view class="tags"><text>孕妈</text><text>宝宝成长</text><text class="grayBg">讲座知识</text></view>
<view class="subInfo flex_between"><text>东方之门/湖滨天地</text><text>2.5km</text></view>
<view class="price"><text class="smallIcon"></text><text>30200</text>&nbsp;&nbsp;-&nbsp;&nbsp;
<text class="smallIcon"></text><text>45000</text>
</view>
</view>
</view> -->
</view>
</view>
<view v-else class="proBox">
@ -142,7 +116,7 @@
:key="index1">{{tag}}</text>
<!-- <text>孕妈</text><text>宝宝成长</text><text class="grayBg">讲座知识</text> -->
</view>
<view class="subInfo flex_between"><text>{{item.address}}</text><text>2.5km</text></view>
<view class="subInfo flex_between"><text>{{item.service.name}}</text></view>
<view class="price"><text class="smallIcon"></text><text>{{item.price}}</text>
<!-- &nbsp;&nbsp;-&nbsp;&nbsp;
<text class="smallIcon"></text><text>{{item.price}}</text> -->
@ -166,7 +140,9 @@
serviceList: [],
serviceSelect: {
page_size: 10,
page: 1
page: 1,
latitude: 0,
longitude: 0,
},
productList: [],
productSelect: {
@ -263,9 +239,39 @@
})
}
},
computed: {
addressComputed() {
return function(address) {
if (address.length > 12) {
return address.slice(0, 11) + '..'
}
return address
}
},
distanceComputed() {
return function(dis) {
if (dis) {
if (dis.indexOf('km') !== -1) {
return Number(dis.split('km')[0]).toFixed(1) + 'km'
}
if (dis.indexOf('m') !== -1) {
return Number(dis.split('m')[0]).toFixed(1) + 'm'
}
}
}
}
},
mounted() {
this.init()
uni.getLocation().then(res => {
let {
latitude,
longitude
} = res[1]
this.serviceSelect.latitude = latitude
this.serviceSelect.longitude = longitude
this.init()
})
},
onReachBottom() {

@ -1,6 +1,92 @@
<template>
<view>
<view class="product-picture">
<swiper class="product-picture-swiper" :indicator-dots="true"
@change="e => swiperIndex = e.detail.current + 1">
<swiper-item v-for="(img,index) in detail.confinement_picture" :key="index">
<u-image height="100%" width="100%" :src="img.picture" mode="aspectFit">
</u-image>
</swiper-item>
</swiper>
<view class="product-picture-num">
{{swiperIndex}} / {{detail.confinement_picture.length}}
</view>
</view>
<view class="product-price">
<span style="font-size: 34rpx;">{{detail.price}}</span>
</view>
<view class="product-info">
<view class="product-info-name">
{{detail.name}}
</view>
<view class="product-info-label">
<view class="product-info-label-item" v-for="(item,index) in featuredLabelSplit(detail.featured_label)"
:key="index">
{{item}}
</view>
</view>
<view class="product-info-shop">
<view class="product-info-shop-top">
<view class="product-info-shop-top-img">
<u-image :src="detail.service.cover_picture" width="100" height="100" border-radius="100%">
</u-image>
</view>
<view class="product-info-shop-top-name">
<view>{{detail.service.name}}</view>
<view>{{detail.service.subheading}}</view>
</view>
<view class="product-info-shop-top-more" @click="toService(detail.service.id)">
<text>更多</text>
<u-icon name="arrow-right" size="25" color="#A0A0A0"></u-icon>
</view>
</view>
<view class="product-info-shop-bottom">
<view class="product-info-shop-bottom-icon">
<u-image mode="asseptFit" src="/packages/packageCarecenter/static/position.png" height="26"
width="22">
</u-image>
</view>
<view class="product-info-shop-bottom-text">
{{detail.service.address}}
</view>
<view class="product-info-shop-bottom-arrow" @click="toMap">
<u-icon name="arrow-right" size="25" color="#A0A0A0"></u-icon>
</view>
</view>
</view>
</view>
<view class="combo">
<view class="combo-title">
套餐介绍
</view>
<view class="combo-content">
<view class="combo-content-item" v-for="(item,index) in detail.set" :key="index">
<view class="combo-content-item-name">{{item.name}}</view>
<view class="combo-content-item-content">{{item.content}}</view>
</view>
</view>
</view>
<view class="facility">
<view class="facility-title">
设备详情
</view>
<view class="facility-content">
<view class="facility-content-item" v-for="(item,index) in detail.facility" :key="index">
<view class="facility-content-item-icon iconfont" :class="'icon-'+item.remark"></view>
<view class="facility-content-item-name">{{item.value}}</view>
</view>
</view>
</view>
<view v-html="detail.content"></view>
</view>
</template>
@ -11,10 +97,33 @@
export default {
data() {
return {
swiperIndex: 1,
detail: {},
}
},
methods: {
toMap() {
this.$u.throttle(() => {
uni.openLocation({
latitude: Number(this.detail.service.latitude),
longitude: Number(this.detail.service.longitude),
name: this.detail.name
})
})
},
toService(id) {
this.$u.throttle(() => {
uni.navigateTo({
url: `/packages/packageCarecenter/pages/careCenter/serviceDetail?id=${id}`
})
})
},
featuredLabelSplit(res) {
if (res) {
return res.split(",")
}
return []
},
getProductDetail(id) {
weixin.request({
newUrl: true,
@ -23,6 +132,7 @@
id
},
utilSuccess: (res) => {
this.detail = res
console.log(res);
}
})
@ -38,5 +148,240 @@
</script>
<style scoped lang="scss">
.product-picture {
height: 417rpx;
width: 100%;
position: relative;
&-swiper {
width: 100%;
height: 100%;
}
&-num {
color: #fff;
background: #252526;
border-radius: 16rpx;
opacity: 0.3;
padding: 7rpx 20rpx;
position: absolute;
bottom: 20rpx;
right: 27rpx;
}
}
.product-price {
font-weight: 400;
color: #FF578A;
font-size: 24rpx;
background-color: #FFEFF4;
padding: 55rpx 21rpx;
}
.product-info {
background: #fff;
padding-bottom: 41rpx;
&-name {
font-weight: 400;
color: #333333;
font-size: 34rpx;
padding: 46rpx 34rpx 0 34rpx;
}
&-label {
display: flex;
flex-wrap: wrap;
margin-top: 21rpx;
padding: 0 32rpx;
&-item {
background: rgba(255, 87, 138, 0.1);
border-radius: 12rpx;
font-weight: 400;
color: #FF578A;
font-size: 24rpx;
padding: 10rpx 15rpx;
margin-right: 15rpx;
}
}
&-shop {
background: linear-gradient(180deg, #555455 0%, #1F1D1D 100%);
border-radius: 40rpx;
margin: 35rpx 30rpx 0 30rpx;
padding: 0 30rpx 0 36rpx;
&-top {
display: flex;
align-items: center;
padding-top: 23rpx;
&-img {}
&-name {
color: #fff;
flex: 1;
margin-left: 20rpx;
&>view:nth-child(1) {
font-weight: 400;
color: #FFFFFF;
font-size: 30rpx;
}
&>view:nth-child(2) {
display: inline-block;
text-align: center;
border-radius: 12rpx;
font-size: 24rpx;
font-weight: 400;
color: #FFFFFF;
background-color: #FF578A;
padding: 4rpx 11rpx;
margin-top: 10rpx;
}
}
&-more {
font-size: 24rpx;
color: #A0A0A0;
font-weight: 400;
align-self: flex-start;
padding-right: 26rpx;
padding-top: 6rpx;
}
}
&-bottom {
display: flex;
align-items: flex-start;
padding-right: 26rpx;
padding-left: 8rpx;
padding-bottom: 42rpx;
margin-top: 37rpx;
&-text {
flex: 1;
font-weight: 400;
color: #FFFFFF;
font-size: 24rpx;
padding: 0 23rpx 0 10rpx;
}
}
}
}
.combo {
background-color: #fff;
margin-top: 34rpx;
padding: 0 28rpx;
&-title {
font-size: 34rpx;
font-weight: 400;
color: #333333;
padding-top: 51rpx;
padding-left: 6rpx;
padding-bottom: 55rpx;
}
&-content {
display: flex;
flex-wrap: wrap;
&>view:nth-last-child(1) {
margin-right: 0;
}
&-item {
text-align: center;
border: 1px solid #191B1A;
border-radius: 24rpx;
flex-basis: 163rpx;
margin-right: 14rpx;
&-name {
font-size: 30rpx;
font-weight: 400;
color: #333333;
padding: 27rpx 24rpx 18rpx 24rpx;
}
&-content {
background-color: #191B1A;
color: #fff;
border-radius: 0 0 24rpx 24rpx;
padding: 8rpx 0;
}
}
}
}
.facility {
background-color: #fff;
&-title {
padding: 73rpx 0 44rpx 34rpx;
font-weight: 400;
color: #333333;
font-size: 34rpx;
}
&-content {
display: flex;
flex-wrap: wrap;
padding: 44rpx 64rpx 66rpx 64rpx;
&-item {
flex-basis: 25%;
font-size: 24rpx;
font-weight: 400;
color: #333333;
text-align: center;
margin-bottom: 24rpx;
&-icon {
width: 55rpx;
height: 55rpx;
font-size: 55rpx;
margin: auto;
}
&-name {
padding-top: 13rpx;
}
}
}
}
::v-deep .u-image__image {
display: block !important;
}
</style>

@ -4,7 +4,7 @@
<video v-if="showFlag === 0" :src="detail.video_file" play-btn-position="center"></video>
<swiper class="service-show-swiper" :indicator-dots="true" v-if="showFlag === 1">
<swiper-item v-for="(img,index) in detail.confinement_picture" :key="index">
<u-image height="100%" width="100%" :src="img.picture" mode="aspectFit">
<u-image height="100%" width="100%" :src="img.picture" mode="aspectFit" @load="$u.throttle(init)">
</u-image>
</swiper-item>
</swiper>
@ -26,7 +26,8 @@
<view class="service-baseinfo">
<view class="service-baseinfo-top">
<view class="service-baseinfo-top-left">
<u-image :src="detail.cover_picture" height="122rpx" width="122rpx" shape="circle">
<u-image :src="detail.cover_picture" height="122rpx" width="122rpx" shape="circle"
@load="$u.throttle(init)">
</u-image>
</view>
<view class="service-baseinfo-top-right">
@ -54,7 +55,7 @@
<view class="service-baseinfo-center-address__text">
{{detail.address}}
</view>
<view class="service-baseinfo-center-address__icon">
<view class="service-baseinfo-center-address__icon" @click="toMap">
<u-icon name="arrow-right" size="26" color="#9C9C9C"></u-icon>
</view>
</view>
@ -82,8 +83,110 @@
label-color="#fff"></u-icon>
</view>
</view>
<view class="service-baseinfo-center-store">
<u-image :src="detail.cover_picture" mode="aspectFill" height="397" width="100%" border-radius="30"
@load="$u.throttle(init)">
</u-image>
<view class="service-baseinfo-center-store-tag">
<image src="/packages/packageCarecenter/static/huangguan.png"></image>
<view class="service-baseinfo-center-store-tag-text">
孕育帮探店
</view>
</view>
</view>
</view>
</view>
<view class="service-bar" v-if="!barFixed">
<view v-for="(item,index) in bar" :key="index" class="service-bar-item"
:class="{'service-bar-item-active':index === barIndex}" @click="barClick(item,index)">
{{item.label}}
<u-image class="service-bar-item-icon" src="/packages/packageCarecenter/static/img_qiehuan.png"
width="68" height="24" v-show="index === barIndex"></u-image>
</view>
</view>
<view class="service-bar service-bar-fixed" v-else>
<view v-for="(item,index) in bar" :key="index" class="service-bar-item"
:class="{'service-bar-item-active':index === barIndex}" @click="barClick(item,index)">
{{item.label}}
<u-image class="service-bar-item-icon" src="/packages/packageCarecenter/static/img_qiehuan.png"
width="68" height="24" v-show="index === barIndex"></u-image>
</view>
</view>
<view class="service-product">
<view class="service-product-title">
<text>本店商品</text>
<view class="service-product-title-more">
<text>更多</text>
<u-icon name="arrow-right" size="25" color="#333333"></u-icon>
</view>
</view>
<view class="service-product-detail">
<view v-for="(item,index) in detail.confinement_product" :key="index"
class="service-product-detail-item" @click="toProduct(item.id)">
<u-image :src="item.cover_picture" width="330" height="360" border-radius="20rpx 20rpx 0 0 "
@load="$u.throttle(init)">
</u-image>
<view class="service-product-detail-item-name">
{{item.name}}
</view>
<view class="service-product-detail-item-label">
<view class="service-product-detail-item-label-item"
v-for="(label,index1) in featuredLabelSplit(item.featured_label)" :key="index1">{{label}}
</view>
</view>
<view class="service-product-detail-item-price">
<span></span>
<span>{{item.price}}</span>
</view>
</view>
</view>
</view>
<view class="service-activity">
<view class="service-activity-title">
<text>本店活动</text>
<view class="service-activity-title-more">
<text>更多</text>
<u-icon name="arrow-right" size="25" color="#333333"></u-icon>
</view>
</view>
<view style="display: flex;justify-content: center;">
<u-image src="/packages/packageCarecenter/static/banner.png" width="660" height="300"
border-radius="30"></u-image>
</view>
</view>
<view class="service-info">
<view class="service-info-title">
<text>商户简介</text>
<view class="service-info-title-more">
<u-icon name="arrow-right" size="25" color="#333333"></u-icon>
</view>
</view>
<view class="service-info-content">
<view v-for="(item,index) in detail.confinement_services_merchant_item" :key="index"
class="service-info-content-item">
<view class="service-info-content-item-name">{{item.name}}</view>
<view class="service-info-content-item-content">{{item.content}}</view>
</view>
</view>
</view>
<view class="service-imageinfo" v-html="detail.content">
</view>
<view class="bottom-btn">
<u-button :custom-style="btnStyle" shape="circle">预约探店</u-button>
</view>
</view>
</template>
@ -95,10 +198,73 @@
data() {
return {
showFlag: 1,
detail: {}
barIndex: 0,
barTop: 667,
barFixed: false,
bar: [{
label: '本店商品',
height: 0,
class: '.service-product'
}, {
label: '本店活动',
height: 0,
class: '.service-activity'
}, {
label: '商户简介',
height: 0,
class: '.service-info'
}, {
label: '图文详情',
height: 0,
class: '.service-imageinfo'
}],
barHeight: 0,
detail: {},
btnStyle: {
marginRight: '46rpx',
height: '60rpx',
width: '180rpx',
color: '#fff',
background: '#FF578A',
}
}
},
methods: {
init() {
const query = uni.createSelectorQuery().in(this);
query.select(".service-bar").boundingClientRect(res => {
this.barTop = res.top
}).exec();
for (let i = 0; i < this.bar.length; i++) {
query.select(this.bar[i].class).boundingClientRect(res => {
this.bar[i].height = res.top
}).exec();
}
},
toMap() {
this.$u.throttle(() => {
uni.openLocation({
latitude: Number(this.detail.latitude),
longitude: Number(this.detail.longitude),
name: this.detail.name
})
})
},
toProduct(id) {
this.$u.throttle(() => {
uni.navigateTo({
url: `/packages/packageCarecenter/pages/careCenter/productDetail?id=${id}`
})
})
},
barClick(item, index) {
this.barIndex = index
uni.pageScrollTo({
scrollTop: item.height
})
},
featuredLabelSplit(res) {
if (res) {
return res.split(",")
@ -114,7 +280,6 @@
id
},
utilSuccess: (res) => {
console.log(res);
this.detail = res
}
})
@ -125,6 +290,20 @@
},
onLoad(option) {
this.getServiceDetail(option.id)
},
mounted() {
this.$nextTick(() => {
this.init()
})
},
onPageScroll(e) {
this.$u.throttle(() => {
if (e.scrollTop > this.barTop) {
this.barFixed = true
} else {
this.barFixed = false
}
}, 100)
}
}
</script>
@ -158,7 +337,7 @@
color: #fff;
height: 47rpx;
background: #252526;
border-radius: 16px;
border-radius: 16rpx;
opacity: 0.3;
display: flex;
align-items: center;
@ -186,7 +365,7 @@
color: #fff;
height: 47rpx;
background: #252526;
border-radius: 16px;
border-radius: 16rpx;
opacity: 0.3;
display: flex;
align-items: center;
@ -211,10 +390,11 @@
}
.service-baseinfo {
height: 917rpx;
width: 100%;
background: linear-gradient(90deg, #555455 0%, #1F1D1D 100%);
padding-bottom: 38rpx;
&-top {
display: flex;
@ -266,8 +446,8 @@
&__item {
color: #fff;
counter-reset: #fff;
border-radius: 12px;
border: 2px solid #FF578A;
border-radius: 12rpx;
border: 2rpx solid #FF578A;
padding: 10rpx 20rpx;
margin-left: 10rpx;
@ -325,6 +505,243 @@
&__icon {}
}
&-store {
position: relative;
margin-top: 30rpx;
padding: 0 33rpx;
&-tag {
display: flex;
align-items: center;
background: linear-gradient(90deg, #FFFFFF 0%, #FFF0F0 100%);
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
padding: 9rpx 18rpx;
position: absolute;
top: 0;
left: 76rpx;
&>image {
width: 25rpx;
height: 25rpx;
}
&-text {
font-size: 24rpx;
font-weight: 400;
color: #FF578A;
padding-left: 11rpx;
}
}
}
}
}
.service-bar {
display: flex;
align-items: center;
justify-content: space-evenly;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
background: #fff;
margin-top: -20rpx;
&-fixed {
z-index: 4;
position: fixed;
top: 0;
left: 0;
right: 0;
}
&-item {
font-size: 30rpx;
font-weight: 400;
color: #999999;
padding: 40rpx 0 23rpx 0;
position: relative;
&-active {
color: #333333;
}
&-icon {
transform: translateX(-50%);
position: absolute;
top: 72rpx;
left: 50%;
}
}
}
.service-product {
&-title {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 37rpx;
&>text {
color: #333333;
font-size: 34rpx;
padding-left: 32rpx;
}
&-more {
font-size: 24rpx;
color: #333333;
padding-right: 47rpx;
}
}
&-detail {
flex-shrink: 0;
flex-basis: 330rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 36rpx;
padding: 0 32rpx;
&-item {
border-radius: 20rpx;
background: #FFFFFF;
padding-bottom: 21rpx;
&-name {
color: #333333;
font-weight: 400;
font-size: 24rpx;
padding: 0 24rpx;
padding-top: 21rpx;
}
&-label {
display: flex;
flex-wrap: wrap;
padding: 0 24rpx;
margin-top: 13rpx;
&-item {
background: rgba(255, 87, 138, 0.1);
border-radius: 12rpx;
font-size: 24rpx;
font-weight: 400;
color: #FF578A;
margin-right: 10rpx;
padding: 6rpx 15rpx;
}
}
&-price {
font-weight: 400;
color: #FF578A;
font-size: 24rpx;
padding: 0 24rpx;
padding-top: 13rpx;
}
}
}
}
.service-activity {
background: #fff;
margin-top: 34rpx;
padding-bottom: 83rpx;
&-title {
@extend .service-product-title;
padding-bottom: 33rpx;
&-more {
@extend .service-product-title-more;
}
}
}
.service-info {
background-color: #fff;
margin-top: 30rpx;
&-title {
@extend .service-product-title;
padding-bottom: 29rpx;
&-more {
@extend .service-product-title-more;
}
}
&-content {
padding: 0 34rpx 20rpx 40rpx;
&-item {
display: flex;
margin-bottom: 20rpx;
&-name {
font-size: 24rpx;
font-weight: 400;
color: #999999;
flex-basis: 120rpx;
}
&-content {
flex: 1;
font-weight: 400;
color: #333333;
font-size: 24rpx;
margin-left: 18rpx;
}
}
}
}
.service-imageinfo {
padding-bottom: 100rpx;
}
.bottom-btn {
height: 100rpx;
background: #fff;
border-top: 1rpx solid rgba(180, 180, 180, 0.4);
display: flex;
align-items: center;
justify-content: flex-end;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
::v-deep .u-image__image {
display: block !important;
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 971 B

@ -0,0 +1,71 @@
@font-face {
font-family: "iconfont";
/* Project id 3656970 */
src: url('/static/iconfont/iconfont.woff2?t=1663572150648') format('woff2'),
url('/static/iconfont/iconfont.woff?t=1663572150648') format('woff'),
url('/static/iconfont/iconfont.ttf?t=1663572150648') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-lingdang:before {
content: "\e600";
}
.icon-weiyuyongpin:before {
content: "\e68b";
}
.icon-yinshuiji:before {
content: "\e69e";
}
.icon-dianshi:before {
content: "\e707";
}
.icon-bingxiang:before {
content: "\ec4f";
}
.icon-xiyiji:before {
content: "\ec78";
}
.icon-wifi:before {
content: "\e6a4";
}
.icon-jiashiqi:before {
content: "\e61e";
}
.icon-kongtiao:before {
content: "\e680";
}
.icon-chuifengji:before {
content: "\e6b6";
}
.icon-shuangluoxuanxinfengxitong:before {
content: "\e612";
}
.icon-shaoshuihu:before {
content: "\e7f2";
}
.icon-blood:before {
content: "\e918";
}
.icon-liangyijia:before {
content: "\e7a3";
}

Binary file not shown.

Binary file not shown.

Binary file not shown.
Loading…
Cancel
Save