修改样式

This commit is contained in:
kbing1981 2024-07-31 16:57:55 +08:00
parent d4b087d6f8
commit 9b15ae34e7
15 changed files with 1087 additions and 907 deletions

View File

@ -1,31 +1,30 @@
<template> <template>
<view class="content"> <view class="content">
<view class="padding-bottom u-skeleton"> <view class="padding-bottom u-skeleton">
<view class="bgImg u-skeleton-fillet" style="padding: 0 29rpx;"> <view class="bgImg">
<view class="head-top"> <view class="head-top">
<view class="pay-title">项目次卡</view> <view class="pay-title">项目次卡</view>
<view class="flex"> <view class="flex">
<view class="detail-view-img"> <view >
<image :src="orderXm.packageImg" <image :src="orderXm.packageImg" class="detail-view-img"></image>
style="width: 100%;height: 100%;border-radius: 19upx;"></image>
</view> </view>
<view class="head-bottom margin-left-sm"> <view class="head-bottom margin-left-sm">
<view class="flex head-title-right"> <view class="flex head-title-right">
<view class="margin-right-xs u-skeleton-fillet head-title"> <view class="margin-right-xs u-skeleton-fillet head-title">
{{orderXm.title}} {{orderXm.title}}
</view> </view>
</view> </view>
<view class="flex align-center"> <view class="flex align-center">
<view style="width: 100%;"> <view style="width: 100%;">
<view class="flex justify-between margin-tb-sm"> <view class="flex justify-between">
<view class="money-pay-zhen"> <view class="money-pay-zhen">
<text class="title-font">次卡价格</text> <text class="title-font">次卡价格</text>
<span></span> <span class="money-pay-zhen-a1"></span>
<span>{{orderXm.price}} / </span> <span class="money-pay-zhen-a2">{{orderXm.price}}</span>
<span class="money-pay-zhen-a1">/</span>
</view> </view>
</view> </view>
<view class="money-pay justify-between margin-tb-sm"> <view class="money-pay justify-between">
<view class="money-pay-zhen"></view> <view class="money-pay-zhen"></view>
<view> <view>
<uni-number-box :width='27' :min="1" @change="changeValue" /> <uni-number-box :width='27' :min="1" @change="changeValue" />
@ -44,7 +43,7 @@
</view> </view>
<view class="detail-foot-mian"> <view class="detail-foot-mian">
<view class="detail-foot-list" v-for="(item,index) in detailData" :key="index" @click="detail(item)"> <view class="detail-foot-list" v-for="(item,index) in detailData" :key="index" @click="detail(item)">
<view class="pay-title"> <view class="detail-foot-list-top">
<span style="margin-right: 5px;">{{item.title}}</span> <span style="margin-right: 5px;">{{item.title}}</span>
<span style="display: none;">详情</span> <span style="display: none;">详情</span>
</view> </view>
@ -53,12 +52,12 @@
<view class="detail-view-mina"> <view class="detail-view-mina">
<view class="header-bottom-money"> <view class="header-bottom-money">
<view class="header-bottom-money-zhen"> <view class="header-bottom-money-zhen">
<span></span> <span class="header-bottom-money-zhen-child1"></span>
<span style="font-size: 36rpx; font-weight: bold;">{{item.packagePrice}}</span> <span class="header-bottom-money-zhen-child2">{{item.packagePrice}}</span>
<span style="margin-left:5px;color: #999;text-decoration: line-through;">{{item.oldPrice}}</span> <span class="header-bottom-money-zhen-child3">{{item.oldPrice}}</span>
</view> </view>
</view> </view>
<view style="color: #019c88;margin: 7px 0px;">服务时长:{{item.duration}}分钟</view> <view class="xiangmu-cont-top-left">服务时长:{{item.duration}}分钟</view>
<view class="tese"> <view class="tese">
<span>项目特色: </span> <span>项目特色: </span>
<span>{{item.jianjie}}</span> <span>{{item.jianjie}}</span>
@ -72,21 +71,18 @@
</view> </view>
</view> </view>
<view class="detail-foot"> <view class="detail-foot">
<view class="detail-foot-nav">
<span class="detail-foot-nav-text">优惠券</span>
<span class="detail-foot-nav-bor2"></span>
</view>
<view class="detail-foot-mian"> <view class="detail-foot-mian">
<view class="padding margin-top-sm header-view" style="width: 95%;margin: 0 auto;"> <view class="detail-foot-youhui">
<view class="liliao" @click="youhuijuan" style="margin-top: 0px;"> <view class="liliao" @click="youhuijuan" style="margin-top: 0px;">
<view class="liliao-top" style="width: 30%;"> <view style="width: 30%;">
<span>平台优惠券</span> <span class="detail-foot-nav-text">优惠券</span>
</view> </view>
<view class="header-bottom-money-zhen"> <view class="header-bottom-money-zhen">
<view v-if="couponDataList" class="value-font" style="margin-right: 5px;"> <view v-if="couponDataList" class="value-font" style="margin-right: 5px;">
<span>-{{couponDataList}}</span> <span>-{{couponDataList}}</span>
</view> </view>
<span v-else class="value-font">选择优惠券</span> <view v-else class="value-font"><span>选择优惠券</span><span class="value-more"></span></view>
<!---<image class="fuwu-img" src="../../static/images/my/jiantou.png" mode=""></image>-->
</view> </view>
</view> </view>
</view> </view>
@ -94,7 +90,7 @@
</view> </view>
<view class="push-button"> <view class="push-button">
<view class="pay_btn" @click="openpay()">去支付</view> <view class="pay_btn" @click="openpay()">去支付</view>
</view> </view>
</view> </view>
<!-- <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton> --> <!-- <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton> -->
<u-popup v-model="showorder" mode="bottom" :closeable="closeable"> <u-popup v-model="showorder" mode="bottom" :closeable="closeable">
@ -1277,18 +1273,18 @@
justify-content: space-around; justify-content: space-around;
} }
.detail-view-img{ .detail-view-img{
width: 80px; width: 74px;
height: 80px; height: 74px;
border-radius: 9px; border-radius: 9px;
} }
.detail-view{ .detail-view{
width: 100%; padding: 0 30rpx 30rpx 30rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} }
.head-bottom{ .head-bottom{
width: 68%; width: 75%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
@ -1308,35 +1304,38 @@
justify-content: space-between; justify-content: space-between;
} }
.head-top{ .head-top{
width: 95%;
margin: 0 auto;
background-color: #ffffff; background-color: #ffffff;
border-radius: 24rpx; border-radius: 24rpx;
padding: 29rpx; padding: 29rpx;
margin-top: 10px; margin-top: 10px;
} }
.pay-title{ .pay-title{
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #333333; color: #333333;
margin-bottom: 12px; padding-bottom: 20rpx;
} }
.header-bottom-money-zhen span{ .header-bottom-money-zhen-child1{
color: #FF1200; font-size: 24rpx;
color: #FF6000;
} }
.header-bottom-money-zhen span:nth-child(1){ .header-bottom-money-zhen-child2{
font-size: 26rpx; font-size:36rpx;
}
.header-bottom-money-zhen span:nth-child(2){
font-size:38rpx;
font-weight: bold; font-weight: bold;
color: #FF6000;
line-height:32rpx;
} }
.header-bottom-money-zhen span:nth-child(3){ .header-bottom-money-zhen-child3{
font-size: 26rpx; margin-left:5px;
color: #999;
text-decoration: line-through;
} }
.header-bottom-money-zhen{ .header-bottom-money-zhen{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: baseline; align-items: flex-end;
} }
.detail-foot-nav-bor{ .detail-foot-nav-bor{
width: 64px; width: 64px;
@ -1357,23 +1356,23 @@
.detail-foot-nav-text{ .detail-foot-nav-text{
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #000000; color: #333;
} }
.detail-foot-nav{ .detail-foot-nav{
width: 90%; width: 90%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
margin: 10px 0; margin: 12px 0;
} }
.detail-foot-title{ .detail-foot-title{
width: 100px; width: 100px;
height:24px; height:24px;
background: linear-gradient(90deg, #ffdf96, #feca76); background: linear-gradient(90deg, #e4f5cd, #ade287);
border-radius: 0 15rpx 0 30rpx; border-radius: 0 15rpx 0 30rpx;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
color: #a13504; color: #5fa933;
text-align: right; text-align: right;
line-height: 24px; line-height: 24px;
padding-right: 18px; padding-right: 18px;
@ -1388,31 +1387,29 @@
align-items: center; align-items: center;
} }
.detail-foot-list{ .detail-foot-list{
width: 95%; width: 100%;
border-radius: 21rpx; border-radius: 21rpx;
position: relative; position: relative;
margin: 6px 0px 5px 0px;
padding: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #fff; background-color: #fff;
margin-bottom: 20rpx;
border: 1px solid #f5f5f5;
} }
.detail-foot{ .detail-foot{
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 15px 0px;
} }
.tese span:nth-child(1){ .tese span:nth-child(1){
font-weight: bold; font-weight: bold;
font-size: 26rpx; font-size: 24rpx;
color: #333333; color: #333333;
} }
.tese span:nth-child(2){ .tese span:nth-child(2){
font-weight: 400; font-weight: 400;
font-size: 26rpx; font-size: 24rpx;
color: #8D9194; color: #8D9194;
} }
.tese{ .tese{
@ -1425,13 +1422,15 @@
} }
.detail-foot-list-top span:nth-child(1){ .detail-foot-list-top span:nth-child(1){
font-weight: bold; font-weight: bold;
font-size: 31rpx; font-size: 30rpx;
color: #3F3F3F; color: #333;
margin-left: 30rpx;
padding: 20rpx 0;
} }
.detail-foot-list-top span:nth-child(2){ .detail-foot-list-top span:nth-child(2){
width: 76rpx; width: 76rpx;
height: 30rpx; height: 33rpx;
line-height: 30rpx; line-height: 33rpx;
text-align: center; text-align: center;
border-radius: 16rpx; border-radius: 16rpx;
border: 1px solid #7D7D7D; border: 1px solid #7D7D7D;
@ -1441,12 +1440,13 @@
margin: 0px 25px 0px 5px; margin: 0px 25px 0px 5px;
} }
.detail-foot-list-top span:nth-child(3){ .detail-foot-list-top span:nth-child(3){
font-size: 30rpx; font-weight: 400;
font-size: 28rpx;
color: #029d88; color: #029d88;
} }
.detail-foot-mian{ .detail-foot-mian{
width: 100%; width: 95%;
margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -1714,12 +1714,6 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.head-top{
width: 100%;
background-color: #ffffff;
border-radius: 24rpx;
padding:24rpx;
}
.d-title{ .d-title{
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
@ -1841,15 +1835,25 @@
text-decoration-line: line-through; text-decoration-line: line-through;
margin-left: 5px; margin-left: 5px;
} }
.money-pay-zhen span{ .money-pay-zhen-a1{
color:#FF1200; font-size: 24rpx;
font-size: 32rpx; color: #FF6000;
}
.money-pay-zhen-a2{
font-size:36rpx;
font-weight: bold; font-weight: bold;
} color: #FF6000;
line-height:30rpx;
}
.money-pay-zhen-a3{
font-size: 24rpx;
color: #FF6000;
}
.money-pay-zhen{ .money-pay-zhen{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: flex-end;
margin-top:4rpx;
} }
.money-pay{ .money-pay{
width: 100%; width: 100%;
@ -2023,17 +2027,17 @@
/* #endif */ /* #endif */
} }
.pay_btn { .pay_btn {
width: 90%; display: inline-block;
margin: 0 auto; width: 92%;
text-align: center; text-align: center;
background: linear-gradient(90deg, #019C88, #28BA92, #35C495); background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
height:80rpx; height: 40px;
border-radius: 80rpx; border-radius: 28px;
color: #ffffff; color: #ffffff;
line-height: 80rpx; line-height: 40px;
font-size: 32rpx; margin-top: 4px;
font-size: 34rpx;
} }
.serverAddress { .serverAddress {
display: flex; display: flex;
@ -2042,25 +2046,55 @@
} }
.head-title{ .head-title{
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 30rpx;
color: #333333; color: #333333;
} }
.push-button{ .push-button{
width: 100%; width: 100%;
height: 48px; height: 48px;
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin: 0 auto; margin: 0 auto;
} }
.title-font{ .title-font{
font-size: 30rpx; font-size:28rpx;
color: #666666; color: #666666;
display: flex;
align-items: flex-end;
} }
.value-font{ .value-font{
font-size: 30rpx; background: #fdeee9;
color: #333333; font-size: 26rpx;
color: #FF6000;
border-radius:30rpx;
height: 50rpx;
line-height: 50rpx;
padding: 0 26rpx;
}
.value-more{
display:inline-block;
border-top:1px solid;
border-right:1px solid;
width: 15rpx;
height: 15rpx;
border-color:#FF6000;
transform:rotate(45deg);
margin-top: 14rpx;
}
.xiangmu-cont-top-left{
font-weight: normal;
font-size:26rpx;
color: #049E89;
margin: 5rpx 0;
}
.detail-foot-youhui{
background: #fff;
padding: 26rpx;
width: 100%;
margin: 0 auto;
border-radius: 21rpx;
} }
</style> </style>

View File

@ -1,31 +1,30 @@
<template> <template>
<view class="content"> <view class="content">
<view class="padding-bottom u-skeleton"> <view class="padding-bottom u-skeleton">
<view class="bgImg u-skeleton-fillet" style="padding: 0 29rpx;"> <view class="bgImg">
<view class="head-top"> <view class="head-top">
<view class="pay-title">服务疗程</view> <view class="pay-title"><span>服务疗程</span></view>
<view class="flex"> <view class="flex">
<view style="width: 160upx;height: 160upx;"> <view>
<image :src="orderXm.packageImg" <image :src="orderXm.packageImg" class="detail-view-img"></image>
style="width: 100%;height: 100%;border-radius: 19upx;"></image>
</view> </view>
<view class="head-bottom margin-left-sm"> <view class="head-bottom margin-left-sm">
<view class="flex head-title-right"> <view class="flex head-title-right">
<view class="margin-right-xs u-skeleton-fillet head-title"> <view class="margin-right-xs u-skeleton-fillet head-title">
{{orderXm.title}} {{orderXm.title}}
</view> </view>
</view> </view>
<view class="flex align-center"> <view class="flex align-center">
<view style="width: 100%;"> <view style="width: 100%;">
<view class="flex justify-between margin-tb-sm"> <view class="flex justify-between">
<view class="money-pay-zhen"> <view class="money-pay-zhen">
<text class="title-font">疗程价格</text> <text class="title-font">疗程价格</text>
<span></span> <view class="money-pay-zhen-a1"></view>
<span>{{orderXm.price}} / {{orderXm.serviceCount}}</span> <view class="money-pay-zhen-a2">{{orderXm.price}} </view>
<view class="money-pay-zhen-a1"> /{{orderXm.serviceCount}}</view>
</view> </view>
</view> </view>
<view class="money-pay justify-between margin-tb-sm"> <view class="money-pay justify-between">
<view class="money-pay-zhen"></view> <view class="money-pay-zhen"></view>
<view> <view>
<uni-number-box :width='27' :min="1" @change="changeValue" /> <uni-number-box :width='27' :min="1" @change="changeValue" />
@ -39,26 +38,27 @@
</view> </view>
<view class="detail-foot"> <view class="detail-foot">
<view class="detail-foot-nav"> <view class="detail-foot-nav">
<span class="detail-foot-nav-text">疗程详情</span> <span class="detail-foot-nav-text">套餐详情</span>
<span class="detail-foot-nav-bor"></span> <span class="detail-foot-nav-bor"></span>
</view> </view>
<view class="detail-foot-mian"> <view class="detail-foot-mian">
<view class="detail-foot-list" v-for="(item,index) in detailData" :key="index" @click="detail(item)"> <view class="detail-foot-list" v-for="(item,index) in detailData" :key="index" @click="detail(item)">
<view class="pay-title"> <view class="detail-foot-list-top">
<span style="margin-right: 5px;">{{item.title}}</span> <span style="margin-right: 5px;">{{item.title}}</span>
<span style="display: none;">详情</span> <span style="display: none;">详情</span>
</view> </view>
<view class="detail-view"> <view class="detail-view">
<image class="detail-view-img" :src="item.massageImg" mode=""></image> <image class="detail-view-img" :src="item.massageImg" mode=""></image>
<view class="detail-view-mina"> <view class="detail-view-mina">
<!--<view class="detail-foot-taititle">{{item.title}}</view>-->
<view class="header-bottom-money" style="justify-content: space-between "> <view class="header-bottom-money" style="justify-content: space-between ">
<view class="header-bottom-money-zhen"> <view class="header-bottom-money-zhen">
<span></span> <view class="header-bottom-money-zhen-child1"></view>
<span style="font-size: 36rpx; font-weight: bold;">{{item.packagePrice}}</span> <view class="header-bottom-money-zhen-child2">{{item.packagePrice}}</view>
<span style="margin-left:5px;color: #999;text-decoration: line-through;">{{item.oldPrice}}</span> <view class="header-bottom-money-zhen-child3">{{item.oldPrice}}</view>
</view> </view>
</view> </view>
<view style="color: #019c88;margin: 7px 0px;">服务时长:{{item.duration}}分钟</view> <view class="xiangmu-cont-top-left">服务时长:{{item.duration}}分钟</view>
<view class="tese"> <view class="tese">
<span>项目特色: </span> <span>项目特色: </span>
<span>{{item.jianjie}}</span> <span>{{item.jianjie}}</span>
@ -72,21 +72,17 @@
</view> </view>
</view> </view>
<view class="detail-foot"> <view class="detail-foot">
<view class="detail-foot-nav">
<span class="detail-foot-nav-text">优惠券</span>
<span class="detail-foot-nav-bor2"></span>
</view>
<view class="detail-foot-mian"> <view class="detail-foot-mian">
<view class="padding margin-top-sm header-view" style="width: 95%;margin: 0 auto;"> <view class="detail-foot-youhui">
<view class="liliao" @click="youhuijuan" style="margin-top: 0px;"> <view class="liliao" @click="youhuijuan" style="margin-top: 0px;">
<view class="liliao-top" style="width: 30%;"> <view style="width: 30%;">
<span>平台优惠券</span> <span class="detail-foot-nav-text">优惠券</span>
</view> </view>
<view class="header-bottom-money-zhen"> <view class="header-bottom-money-zhen">
<view v-if="couponDataList" class="value-font" style="margin-right: 5px;"> <view v-if="couponDataList" class="value-font" style="margin-right: 5px;">
<span>-{{couponDataList}}</span> <span>-{{couponDataList}}</span>
</view> </view>
<span v-else class="value-font">选择优惠券</span> <view v-else class="value-font"><span>选择优惠券</span><span class="value-more"></span></view>
<!---<image class="fuwu-img" src="../../static/images/my/jiantou.png" mode=""></image>--> <!---<image class="fuwu-img" src="../../static/images/my/jiantou.png" mode=""></image>-->
</view> </view>
</view> </view>
@ -1255,6 +1251,11 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.detail-foot-taititle{
font-weight: bold;
font-size: 30rpx;
color: #333333;
}
.push-button{ .push-button{
width: 100%; width: 100%;
height: 48px; height: 48px;
@ -1278,19 +1279,18 @@
justify-content: space-around; justify-content: space-around;
} }
.detail-view-img{ .detail-view-img{
width: 76px; width: 74px;
height: 76px; height: 74px;
border-radius: 9px; border-radius: 9px;
} }
.detail-view{ .detail-view{
width: 100%; padding: 0 30rpx 30rpx 30rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.head-bottom{ .head-bottom{
width: 68%; width: 75%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
@ -1310,27 +1310,46 @@
justify-content: space-between; justify-content: space-between;
} }
.head-top{ .head-top{
width: 95%;
margin: 0 auto;
background-color: #ffffff; background-color: #ffffff;
border-radius: 24rpx; border-radius: 24rpx;
padding: 29rpx; padding: 29rpx;
margin-top: 10px; margin-top: 10px;
} }
.pay-title{ .pay-title{
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #333333; color: #333333;
margin-bottom: 12px; padding-bottom: 20rpx;
}
.pay-title2{
font-weight: bold;
font-size: 32rpx;
color: #333333;
padding: 30rpx 30rpx 10rpx 30rpx;
}
.header-bottom-money-zhen-child1{
font-size: 24rpx;
color: #FF6000;
}
.header-bottom-money-zhen-child2{
font-size:36rpx;
font-weight: bold;
color: #FF6000;
line-height:32rpx;
}
.header-bottom-money-zhen-child3{
margin-left:5px;
color: #999;
text-decoration: line-through;
} }
.header-bottom-money-zhen span{
color: #FF6000 ;
}
.header-bottom-money-zhen{ .header-bottom-money-zhen{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: baseline; align-items: flex-end;
justify-content: space-between; }
}
.detail-foot-nav-bor{ .detail-foot-nav-bor{
width: 64px; width: 64px;
height: 11rpx; height: 11rpx;
@ -1350,30 +1369,29 @@
.detail-foot-nav-text{ .detail-foot-nav-text{
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #000000; color: #333;
} }
.detail-foot-nav{ .detail-foot-nav{
width: 90%; width: 90%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
margin: 10px 0; margin: 12px 0;
} }
.detail-foot-title{ .detail-foot-title{
width: 115px; width: 100px;
height: 32px; height:24px;
background-image: url(../../static/servicePackage/horn.png); background: linear-gradient(90deg, #edf9f6, #97e9dc);
background-repeat: no-repeat; border-radius: 0 15rpx 0 30rpx;
background-size: 100% 100%; font-weight: 400;
font-weight: 400; font-size: 12px;
font-size: 15px; color: #019c88;
color: #FFFFFF; text-align: right;
text-align: right; line-height: 24px;
line-height: 32px; padding-right: 20px;
padding-right: 15px; position: absolute;
position: absolute; right: 0;
right: 0; top: 0;
top: 0;
} }
.detail-foot-list-top{ .detail-foot-list-top{
width: 95%; width: 95%;
@ -1382,31 +1400,29 @@
align-items: center; align-items: center;
} }
.detail-foot-list{ .detail-foot-list{
width: 95%; width: 100%;
border-radius: 21rpx; border-radius: 21rpx;
position: relative; position: relative;
margin: 6px 0px 5px 0px;
padding: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #fff; background-color: #fff;
margin-bottom: 20rpx;
border: 1px solid #f5f5f5;
} }
.detail-foot{ .detail-foot{
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 15px 0px;
} }
.tese span:nth-child(1){ .tese span:nth-child(1){
font-weight: bold; font-weight: bold;
font-size: 22rpx; font-size: 24rpx;
color: #333333; color: #333333;
} }
.tese span:nth-child(2){ .tese span:nth-child(2){
font-weight: 400; font-weight: 400;
font-size: 22rpx; font-size: 24rpx;
color: #8D9194; color: #8D9194;
} }
.tese{ .tese{
@ -1419,8 +1435,10 @@
} }
.detail-foot-list-top span:nth-child(1){ .detail-foot-list-top span:nth-child(1){
font-weight: bold; font-weight: bold;
font-size: 31rpx; font-size: 30rpx;
color: #3F3F3F; color: #333;
margin-left: 30rpx;
padding: 20rpx 0;
} }
.detail-foot-list-top span:nth-child(2){ .detail-foot-list-top span:nth-child(2){
width: 76rpx; width: 76rpx;
@ -1439,14 +1457,21 @@
font-size: 28rpx; font-size: 28rpx;
color: #029d88; color: #029d88;
} }
.detail-foot-mian{ .detail-foot-mian{
width: 100%; width: 95%;
margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.detail-foot-youhui{
background: #fff;
padding: 26rpx;
width: 100%;
margin: 0 auto;
border-radius: 21rpx;
}
/deep/uni-checkbox .uni-checkbox-input{ /deep/uni-checkbox .uni-checkbox-input{
width: 26px; width: 26px;
height: 26px; height: 26px;
@ -1709,12 +1734,6 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.head-top{
width: 100%;
background-color: #ffffff;
border-radius: 24rpx;
padding: 29rpx;
}
.d-title{ .d-title{
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
@ -1836,15 +1855,25 @@
text-decoration-line: line-through; text-decoration-line: line-through;
margin-left: 5px; margin-left: 5px;
} }
.money-pay-zhen span{ .money-pay-zhen-a1{
font-size: 24rpx;
color: #FF6000; color: #FF6000;
font-size: 32rpx; }
.money-pay-zhen-a2{
font-size:36rpx;
font-weight: bold; font-weight: bold;
} color: #FF6000;
line-height:30rpx;
}
.money-pay-zhen-a3{
font-size: 24rpx;
color: #FF6000;
}
.money-pay-zhen{ .money-pay-zhen{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: flex-end;
margin-top:4rpx;
} }
.money-pay{ .money-pay{
width: 100%; width: 100%;
@ -2018,7 +2047,6 @@
/* #endif */ /* #endif */
} }
.pay_btn { .pay_btn {
display: inline-block; display: inline-block;
width: 92%; width: 92%;
@ -2038,15 +2066,38 @@
} }
.head-title{ .head-title{
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 30rpx;
color: #333333; color: #333333;
} }
.title-font{ .title-font{
font-size: 30rpx; font-size:28rpx;
color: #666666; color: #666666;
display: flex;
align-items: flex-end;
} }
.value-font{ .value-font{
font-size: 30rpx; background: #fdeee9;
color: #333333; font-size: 26rpx;
color: #FF6000;
border-radius:30rpx;
height: 50rpx;
line-height: 50rpx;
padding: 0 26rpx;
}
.value-more{
display:inline-block;
border-top:1px solid;
border-right:1px solid;
width: 15rpx;
height: 15rpx;
border-color:#FF6000;
transform:rotate(45deg);
margin-top: 14rpx;
}
.xiangmu-cont-top-left{
font-weight: normal;
font-size:26rpx;
color: #049E89;
margin: 5rpx 0;
} }
</style> </style>

View File

@ -1,15 +1,14 @@
<template> <template>
<view class="content"> <view class="content">
<view class="padding-bottom u-skeleton"> <view class="padding-bottom u-skeleton">
<view class="bgImg u-skeleton-fillet" style="padding: 0 29rpx;"> <view class="bgImg">
<view class="head-top"> <view class="head-top">
<view class="pay-title">服务项目</view> <view class="pay-title">服务项目</view>
<view class="flex"> <view class="flex">
<view style="width: 160upx;height: 160upx;"> <view>
<image :src="orderXm.packageImg" <image :src="orderXm.packageImg" class="detail-view-img"></image>
style="width: 100%;height: 100%;border-radius: 19upx;"></image>
</view> </view>
<view class="head-bottom margin-left-sm"> <view class="head-bottom margin-left-sm">
<view class="flex head-title-right"> <view class="flex head-title-right">
<view class="margin-right-xs u-skeleton-fillet head-title"> <view class="margin-right-xs u-skeleton-fillet head-title">
{{orderXm.title}} {{orderXm.title}}
@ -17,14 +16,14 @@
</view> </view>
<view class="flex align-center"> <view class="flex align-center">
<view style="width: 100%;"> <view style="width: 100%;">
<view class="flex justify-between margin-tb-sm"> <view class="flex justify-between">
<view class="money-pay-zhen"> <view class="money-pay-zhen">
<text class="title-font">秒杀价格</text> <text class="title-font">秒杀价格</text>
<span></span> <span class="money-pay-zhen-a1"></span>
<span>{{orderXm.price}}</span> <span class="money-pay-zhen-a2">{{orderXm.price}}</span>
</view> </view>
</view> </view>
<view class="money-pay justify-between margin-tb-sm"> <view class="money-pay justify-between">
<view class="money-pay-zhen"></view> <view class="money-pay-zhen"></view>
<view> <view>
<uni-number-box :width='27' :min="1" @change="changeValue" /> <uni-number-box :width='27' :min="1" @change="changeValue" />
@ -43,7 +42,7 @@
</view> </view>
<view class="detail-foot-mian"> <view class="detail-foot-mian">
<view class="detail-foot-list" v-for="(item,index) in detailData" :key="index" @click="detail(item)"> <view class="detail-foot-list" v-for="(item,index) in detailData" :key="index" @click="detail(item)">
<view class="pay-title"> <view class="detail-foot-list-top">
<span style="margin-right: 5px;">{{item.title}}</span> <span style="margin-right: 5px;">{{item.title}}</span>
<span style="display: none;">详情</span> <span style="display: none;">详情</span>
</view> </view>
@ -52,12 +51,12 @@
<view class="detail-view-mina"> <view class="detail-view-mina">
<view class="header-bottom-money"> <view class="header-bottom-money">
<view class="header-bottom-money-zhen"> <view class="header-bottom-money-zhen">
<span></span> <span class="header-bottom-money-zhen-child1"></span>
<span style="font-size: 36rpx; font-weight: bold;">{{item.packagePrice}}</span> <span class="header-bottom-money-zhen-child2">{{item.packagePrice}}</span>
<span style="margin-left:5px;color: #999;text-decoration: line-through;">{{item.oldPrice}}</span> <span class="header-bottom-money-zhen-child3">{{item.oldPrice}}</span>
</view> </view>
</view> </view>
<view style="color: #019c88;margin: 7px 0px;">服务时长:{{item.duration}}分钟</view> <view class="xiangmu-cont-top-left">服务时长:{{item.duration}}分钟</view>
<view class="tese"> <view class="tese">
<span>项目特色: </span> <span>项目特色: </span>
<span>{{item.jianjie}}</span> <span>{{item.jianjie}}</span>
@ -71,22 +70,19 @@
</view> </view>
</view> </view>
<view class="detail-foot"> <view class="detail-foot">
<view class="detail-foot-nav">
<span class="detail-foot-nav-text">优惠券</span>
<span class="detail-foot-nav-bor2"></span>
</view>
<view class="detail-foot-mian"> <view class="detail-foot-mian">
<view class="padding margin-top-sm header-view" style="width: 95%;margin: 0 auto;"> <view class="detail-foot-youhui">
<view class="liliao" @click="youhuijuan" style="margin-top: 0px;"> <view class="liliao" @click="youhuijuan" style="margin-top: 0px;">
<view class="liliao-top" style="width: 30%;"> <view style="width: 30%;">
<span>平台优惠券</span> <span class="detail-foot-nav-text">优惠券</span>
</view> </view>
<view class="header-bottom-money-zhen"> <view class="header-bottom-money-zhen">
<view v-if="couponDataList" class="value-font" style="margin-right: 5px;"> <view v-if="couponDataList" class="value-font" style="margin-right: 5px;">
<span>-{{couponDataList}}</span> <span>-{{couponDataList}}</span>
</view> </view>
<span v-else class="value-font">选择优惠券</span> <view v-else class="value-font"><span>选择优惠券</span><span class="value-more"></span></view>
</view> <!---<image class="fuwu-img" src="../../static/images/my/jiantou.png" mode=""></image>-->
</view>
</view> </view>
</view> </view>
</view> </view>
@ -94,7 +90,6 @@
<view class="push-button"> <view class="push-button">
<view class="pay_btn" @click="openpay()">去支付</view> <view class="pay_btn" @click="openpay()">去支付</view>
</view> </view>
</view> </view>
<!-- <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton> --> <!-- <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton> -->
<u-popup v-model="showorder" mode="bottom" :closeable="closeable"> <u-popup v-model="showorder" mode="bottom" :closeable="closeable">
@ -1328,25 +1323,24 @@
align-items: flex-end; align-items: flex-end;
} }
.detail-view-mina{ .detail-view-mina{
width: 73%; width: 74%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
} }
.detail-view-img{ .detail-view-img{
width: 76px; width: 74px;
height: 76px; height: 74px;
border-radius: 9px; border-radius: 9px;
} }
.detail-view{ .detail-view{
width: 100%; padding: 0 30rpx 30rpx 30rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.head-bottom{ .head-bottom{
width: 68%; width: 75%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
@ -1366,7 +1360,8 @@
justify-content: space-between; justify-content: space-between;
} }
.head-top{ .head-top{
width: 100%; width: 95%;
margin: 0 auto;
background-color: #ffffff; background-color: #ffffff;
border-radius: 24rpx; border-radius: 24rpx;
padding: 29rpx; padding: 29rpx;
@ -1376,23 +1371,33 @@
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #333333; color: #333333;
margin-bottom: 12px; padding-bottom: 20rpx;
} }
.header-bottom-money-zhen span{ .header-bottom-money-zhen-child1{
color: #FF6000 ; font-size: 24rpx;
color: #FF6000;
}
.header-bottom-money-zhen-child2{
font-size:36rpx;
font-weight: bold;
color: #FF6000;
line-height:32rpx;
}
.header-bottom-money-zhen-child3{
margin-left:5px;
color: #999;
text-decoration: line-through;
} }
.header-bottom-money-zhen{ .header-bottom-money-zhen{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: baseline; align-items: flex-end;
justify-content: space-between; }
}
.xiangmu-cont-top-left{ .xiangmu-cont-top-left{
font-weight: normal; font-weight: normal;
font-size: 24rpx; font-size: 26rpx;
color: #049E89; color: #049E89;
margin: 5rpx 0; margin: 5rpx 0;
} }
.detail-foot-nav-bor{ .detail-foot-nav-bor{
width: 64px; width: 64px;
@ -1413,30 +1418,29 @@
.detail-foot-nav-text{ .detail-foot-nav-text{
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #000000; color: #333;
} }
.detail-foot-nav{ .detail-foot-nav{
width: 90%; width: 90%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
margin: 10px 0; margin: 12px 0;
} }
.detail-foot-title{ .detail-foot-title{
width: 115px; width: 100px;
height: 32px; height:24px;
background-image: url(../../static/servicePackage/horn.png); background: linear-gradient(90deg, #ff9b8d, #fc705d);
background-repeat: no-repeat; border-radius: 0 15rpx 0 30rpx;
background-size: 100% 100%; font-weight: 400;
font-weight: 400; font-size: 12px;
font-size: 15px; color: #fff;
color: #FFFFFF; text-align: right;
text-align: right; line-height: 24px;
line-height: 32px; padding-right: 20px;
padding-right: 15px; position: absolute;
position: absolute; right: 0;
right: 0; top: 0;
top: 0;
} }
.detail-foot-list-top{ .detail-foot-list-top{
width: 95%; width: 95%;
@ -1445,31 +1449,29 @@
align-items: center; align-items: center;
} }
.detail-foot-list{ .detail-foot-list{
width: 95%; width: 100%;
border-radius: 21rpx; border-radius: 21rpx;
position: relative; position: relative;
margin: 6px 0px 5px 0px;
padding: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #fff; background-color: #fff;
margin-bottom: 20rpx;
border: 1px solid #f5f5f5;
} }
.detail-foot{ .detail-foot{
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 15rpx 0px;
} }
.tese span:nth-child(1){ .tese span:nth-child(1){
font-weight: bold; font-weight: bold;
font-size: 22rpx; font-size: 24rpx;
color: #333333; color: #333333;
} }
.tese span:nth-child(2){ .tese span:nth-child(2){
font-weight: 400; font-weight: 400;
font-size: 22rpx; font-size: 24rpx;
color: #8D9194; color: #8D9194;
} }
.tese{ .tese{
@ -1483,8 +1485,9 @@
.detail-foot-list-top span:nth-child(1){ .detail-foot-list-top span:nth-child(1){
font-weight: bold; font-weight: bold;
font-size: 30rpx; font-size: 30rpx;
color: #3F3F3F; color: #333;
margin-bottom: 10rpx; margin-left: 30rpx;
padding: 20rpx 0;
} }
.detail-foot-list-top span:nth-child(2){ .detail-foot-list-top span:nth-child(2){
width: 76rpx; width: 76rpx;
@ -1503,9 +1506,9 @@
font-size: 28rpx; font-size: 28rpx;
color: #029d88; color: #029d88;
} }
.detail-foot-mian{ .detail-foot-mian{
width: 100%; width: 95%;
margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -1894,15 +1897,25 @@
text-decoration-line: line-through; text-decoration-line: line-through;
margin-left: 5px; margin-left: 5px;
} }
.money-pay-zhen span{ .money-pay-zhen-a1{
font-size: 24rpx;
color: #FF6000; color: #FF6000;
font-size: 32rpx; }
.money-pay-zhen-a2{
font-size: 36rpx;
font-weight: bold; font-weight: bold;
} color: #FF6000;
line-height:30rpx;
}
.money-pay-zhen-a3{
font-size: 24rpx;
color: #FF6000;
}
.money-pay-zhen{ .money-pay-zhen{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: flex-end;
margin-top:4rpx;
} }
.money-pay{ .money-pay{
width: 100%; width: 100%;
@ -2117,18 +2130,44 @@
} }
.head-title{ .head-title{
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 30rpx;
color: #333333; color: #333333;
} }
.zhuangtai{ .zhuangtai{
color: #029D88; color: #029D88;
} }
.title-font{ .title-font{
font-size: 30rpx; font-size:28rpx;
color: #666666; color: #666666;
} }
.value-font{ .value-font{
font-size: 30rpx; font-size: 30rpx;
color: #333333; color: #333333;
} }
.detail-foot-youhui{
background: #fff;
padding: 26rpx;
width: 100%;
margin: 0 auto;
border-radius: 21rpx;
}
.value-font{
background: #fdeee9;
font-size: 26rpx;
color: #FF6000;
border-radius:30rpx;
height: 50rpx;
line-height: 50rpx;
padding: 0 26rpx;
}
.value-more{
display:inline-block;
border-top:1px solid;
border-right:1px solid;
width: 15rpx;
height: 15rpx;
border-color:#FF6000;
transform:rotate(45deg);
margin-top: 14rpx;
}
</style> </style>

View File

@ -8,7 +8,7 @@
<view> <view>
<image :src="orderXm.packageImg" class="detail-view-img"></image> <image :src="orderXm.packageImg" class="detail-view-img"></image>
</view> </view>
<view class="head-bottom margin-left-sm"> <view class="head-bottom margin-left-sm">
<view class="flex head-title-right"> <view class="flex head-title-right">
<view class="margin-right-xs u-skeleton-fillet head-title"> <view class="margin-right-xs u-skeleton-fillet head-title">
{{orderXm.title}} {{orderXm.title}}
@ -17,14 +17,14 @@
</view> </view>
<view class="flex align-center"> <view class="flex align-center">
<view style="width: 100%;"> <view style="width: 100%;">
<view class="flex justify-between margin-tb-sm"> <view class="flex justify-between">
<view class="money-pay-zhen"> <view class="money-pay-zhen">
<text class="title-font">拼团价格</text> <text class="title-font">拼团价格</text>
<span></span> <span class="money-pay-zhen-a1"></span>
<span>{{orderXm.price}}</span> <span class="money-pay-zhen-a2">{{orderXm.price}}</span>
</view> </view>
</view> </view>
<view class="money-pay justify-between margin-tb-sm"> <view class="money-pay justify-between">
<view class="money-pay-zhen"></view> <view class="money-pay-zhen"></view>
<view> <view>
<uni-number-box :width='27' :min="1" @change="changeValue" /> <uni-number-box :width='27' :min="1" @change="changeValue" />
@ -43,7 +43,7 @@
</view> </view>
<view class="detail-foot-mian"> <view class="detail-foot-mian">
<view class="detail-foot-list" v-for="(item,index) in detailData" :key="index" @click="detail(item)"> <view class="detail-foot-list" v-for="(item,index) in detailData" :key="index" @click="detail(item)">
<view class="pay-title"> <view class="detail-foot-list-top">
<span style="margin-right: 5px;">{{item.title}}</span> <span style="margin-right: 5px;">{{item.title}}</span>
<span style="display: none;">详情</span> <span style="display: none;">详情</span>
</view> </view>
@ -52,12 +52,12 @@
<view class="detail-view-mina"> <view class="detail-view-mina">
<view class="header-bottom-money"> <view class="header-bottom-money">
<view class="header-bottom-money-zhen"> <view class="header-bottom-money-zhen">
<span></span> <span class="header-bottom-money-zhen-child1"></span>
<span style="font-size: 36rpx; font-weight: bold;">{{item.packagePrice}}</span> <span class="header-bottom-money-zhen-child2">{{item.packagePrice}}</span>
<span style="margin-left:5px;color: #999;text-decoration: line-through;">{{item.oldPrice}}</span> <span class="header-bottom-money-zhen-child3">{{item.oldPrice}}</span>
</view> </view>
</view> </view>
<view style="color: #019c88;margin:3px 0px;">服务时长:{{item.duration}}分钟</view> <view class="xiangmu-cont-top-left">服务时长:{{item.duration}}分钟</view>
<view class="tese"> <view class="tese">
<span>项目特色: </span> <span>项目特色: </span>
<span>{{item.jianjie}}</span> <span>{{item.jianjie}}</span>
@ -71,22 +71,18 @@
</view> </view>
</view> </view>
<view class="detail-foot"> <view class="detail-foot">
<view class="detail-foot-nav">
<span class="detail-foot-nav-text">优惠券</span>
<span class="detail-foot-nav-bor2"></span>
</view>
<view class="detail-foot-mian"> <view class="detail-foot-mian">
<view class="padding margin-top-sm header-view" style="width: 95%;margin: 0 auto;"> <view class="detail-foot-youhui">
<view class="liliao" @click="youhuijuan" style="margin-top: 0px;"> <view class="liliao" @click="youhuijuan" style="margin-top: 0px;">
<view class="liliao-top" style="width: 30%;"> <view style="width: 30%;">
<span>平台优惠券</span> <span class="detail-foot-nav-text">优惠券</span>
</view> </view>
<view class="header-bottom-money-zhen"> <view class="header-bottom-money-zhen">
<view v-if="couponDataList" class="value-font" style="margin-right: 5px;"> <view v-if="couponDataList" class="value-font" style="margin-right: 5px;">
<span>-{{couponDataList}}</span> <span>-{{couponDataList}}</span>
</view> </view>
<span v-else class="value-font">选择优惠券</span> <view v-else class="value-font"><span>选择优惠券</span><span class="value-more"></span></view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
@ -275,25 +271,24 @@
align-items: flex-end; align-items: flex-end;
} }
.detail-view-mina{ .detail-view-mina{
width: 73%; width: 74%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
} }
.detail-view-img{ .detail-view-img{
width: 80px; width: 74px;
height: 80px; height: 74px;
border-radius: 9px; border-radius: 9px;
} }
.detail-view{ .detail-view{
width: 100%; padding: 0 30rpx 30rpx 30rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.head-bottom{ .head-bottom{
width: 68%; width: 75%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
@ -320,28 +315,37 @@
padding: 29rpx; padding: 29rpx;
margin-top: 10px; margin-top: 10px;
} }
.pay-title{ .pay-title{
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #333333; color: #333333;
margin-bottom: 12px; padding-bottom: 20rpx;
} }
.header-bottom-money-zhen span{ .header-bottom-money-zhen-child1{
color: #FF6000 ; font-size: 24rpx;
color: #FF6000;
}
.header-bottom-money-zhen-child2{
font-size:36rpx;
font-weight: bold;
color: #FF6000;
line-height:32rpx;
}
.header-bottom-money-zhen-child3{
margin-left:5px;
color: #999;
text-decoration: line-through;
} }
.header-bottom-money-zhen{ .header-bottom-money-zhen{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: baseline; align-items: flex-end;
justify-content: space-between; }
}
.xiangmu-cont-top-left{ .xiangmu-cont-top-left{
font-weight: normal; font-weight: normal;
font-size: 24rpx; font-size: 26rpx;
color: #049E89; color: #049E89;
margin: 5rpx 0; margin: 5rpx 0;
} }
.detail-foot-nav-bor{ .detail-foot-nav-bor{
width: 64px; width: 64px;
@ -362,31 +366,30 @@
.detail-foot-nav-text{ .detail-foot-nav-text{
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #000000; color: #333;
} }
.detail-foot-nav{ .detail-foot-nav{
width: 90%; width: 90%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
margin: 10px 0; margin: 12px 0;
} }
.detail-foot-title{ .detail-foot-title{
width: 115px; width: 100px;
height: 32px; height:24px;
background: linear-gradient(90deg, #ff5e40, #fd372e); background: linear-gradient(90deg, #ff7a61, #fd372e);
border-radius: 0 15rpx 0 30rpx; border-radius: 0 15rpx 0 30rpx;
background-repeat: no-repeat; border-radius: 0 15rpx 0 30rpx;
background-size: 100% 100%; font-weight: 400;
font-weight: 400; font-size: 12px;
font-size: 15px; color: #FFFFFF;
color: #FFFFFF; text-align: right;
text-align: right; line-height: 24px;
line-height: 32px; padding-right:34px;
padding-right:37px; position: absolute;
position: absolute; right: 0;
right: 0; top: 0;
top: 0;
} }
.detail-foot-list-top{ .detail-foot-list-top{
width: 95%; width: 95%;
@ -395,31 +398,29 @@
align-items: center; align-items: center;
} }
.detail-foot-list{ .detail-foot-list{
width: 95%; width: 100%;
border-radius: 21rpx; border-radius: 21rpx;
position: relative; position: relative;
margin: 6px 0px 5px 0px;
padding: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #fff; background-color: #fff;
margin-bottom: 20rpx;
border: 1px solid #f5f5f5;
} }
.detail-foot{ .detail-foot{
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 15rpx 0px;
} }
.tese span:nth-child(1){ .tese span:nth-child(1){
font-weight: bold; font-weight: bold;
font-size: 26rpx; font-size: 24rpx;
color: #333333; color: #333333;
} }
.tese span:nth-child(2){ .tese span:nth-child(2){
font-weight: 400; font-weight: 400;
font-size: 26rpx; font-size: 24rpx;
color: #8D9194; color: #8D9194;
} }
.tese{ .tese{
@ -433,8 +434,9 @@
.detail-foot-list-top span:nth-child(1){ .detail-foot-list-top span:nth-child(1){
font-weight: bold; font-weight: bold;
font-size: 30rpx; font-size: 30rpx;
color: #3F3F3F; color: #333;
margin-bottom: 10rpx; margin-left: 30rpx;
padding: 20rpx 0;
} }
.detail-foot-list-top span:nth-child(2){ .detail-foot-list-top span:nth-child(2){
width: 76rpx; width: 76rpx;
@ -453,9 +455,9 @@
font-size: 28rpx; font-size: 28rpx;
color: #029d88; color: #029d88;
} }
.detail-foot-mian{ .detail-foot-mian{
width: 100%; width: 95%;
margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -846,15 +848,25 @@
text-decoration-line: line-through; text-decoration-line: line-through;
margin-left: 5px; margin-left: 5px;
} }
.money-pay-zhen span{ .money-pay-zhen-a1{
font-size: 24rpx;
color: #FF6000; color: #FF6000;
font-size: 32rpx; }
.money-pay-zhen-a2{
font-size:36rpx;
font-weight: bold; font-weight: bold;
} color: #FF6000;
line-height:30rpx;
}
.money-pay-zhen-a3{
font-size: 24rpx;
color: #FF6000;
}
.money-pay-zhen{ .money-pay-zhen{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: flex-end;
margin-top:4rpx;
} }
.money-pay{ .money-pay{
width: 100%; width: 100%;
@ -1069,18 +1081,40 @@
} }
.head-title{ .head-title{
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 30rpx;
color: #333333; color: #333333;
} }
.zhuangtai{ .zhuangtai{
color: #029D88; color: #029D88;
} }
.title-font{ .title-font{
font-size: 30rpx; font-size:28rpx;
color: #666666; color: #666666;
} }
.value-font{ .detail-foot-youhui{
font-size: 30rpx; background: #fff;
color: #333333; padding: 26rpx;
width: 100%;
margin: 0 auto;
border-radius: 21rpx;
} }
.value-font{
background: #fdeee9;
font-size: 26rpx;
color: #FF6000;
border-radius:30rpx;
height: 50rpx;
line-height: 50rpx;
padding: 0 26rpx;
}
.value-more{
display:inline-block;
border-top:1px solid;
border-right:1px solid;
width: 15rpx;
height: 15rpx;
border-color:#FF6000;
transform:rotate(45deg);
margin-top: 14rpx;
}
</style> </style>

View File

@ -5,9 +5,8 @@
<view class="head-top"> <view class="head-top">
<view class="pay-title">{{orderXm.type=='104'?'服务套餐':orderXm.type=='105'?'项目次卡':'服务疗程'}}</view> <view class="pay-title">{{orderXm.type=='104'?'服务套餐':orderXm.type=='105'?'项目次卡':'服务疗程'}}</view>
<view class="flex"> <view class="flex">
<view style="width: 160upx;height: 160upx;"> <view>
<image :src="orderXm.packageImg" <image :src="orderXm.packageImg" class="detail-view-img"></image>
style="width: 100%;height: 100%;border-radius: 19upx;"></image>
</view> </view>
<view class="head-bottom margin-left-sm"> <view class="head-bottom margin-left-sm">
<view class="flex head-title-right"> <view class="flex head-title-right">
@ -18,14 +17,15 @@
</view> </view>
<view class="flex align-center"> <view class="flex align-center">
<view style="width: 100%;"> <view style="width: 100%;">
<view class="flex justify-between margin-tb-sm"> <view class="flex justify-between ">
<view class="money-pay-zhen"> <view class="money-pay-zhen">
<text class="title-font">套餐价格</text> <text class="title-font">套餐价格</text>
<span></span> <span class="money-pay-zhen-a1"></span>
<span>{{orderXm.price}} / </span> <span class="money-pay-zhen-a2">{{orderXm.price}} </span>
<span class="money-pay-zhen-a1">/</span>
</view> </view>
</view> </view>
<view class="money-pay justify-between margin-tb-sm"> <view class="money-pay justify-between">
<view class="money-pay-zhen"></view> <view class="money-pay-zhen"></view>
<view> <view>
<uni-number-box :width='27' :min="1" @change="changeValue" /> <uni-number-box :width='27' :min="1" @change="changeValue" />
@ -54,9 +54,9 @@
<view class="detail-view-mina"> <view class="detail-view-mina">
<view class="header-bottom-money" style="justify-content: space-between "> <view class="header-bottom-money" style="justify-content: space-between ">
<view class="header-bottom-money-zhen"> <view class="header-bottom-money-zhen">
<span></span> <span class="header-bottom-money-zhen-child1"></span>
<span>{{item.packagePrice}}</span> <span class="header-bottom-money-zhen-child2">{{item.packagePrice}}</span>
<span style="margin-left:5px;color: #999;text-decoration: line-through;">{{item.oldPrice}}</span> <span class="header-bottom-money-zhen-child3">{{item.oldPrice}}</span>
</view> </view>
</view> </view>
<view class="xiangmu-cont-top-left">服务时长:{{item.duration}}分钟</view> <view class="xiangmu-cont-top-left">服务时长:{{item.duration}}分钟</view>
@ -74,7 +74,7 @@
</view> </view>
</view> </view>
<view class="detail-foot"> <view class="detail-foot">
<view class="detail-foot-nav"> <!--<view class="detail-foot-nav">
<span class="detail-foot-nav-text">优惠券</span> <span class="detail-foot-nav-text">优惠券</span>
<span class="detail-foot-nav-bor2"></span> <span class="detail-foot-nav-bor2"></span>
</view> </view>
@ -93,6 +93,22 @@
</view> </view>
</view> </view>
</view> </view>
</view>-->
<view class="detail-foot-mian">
<view class="detail-foot-youhui">
<view class="liliao" @click="youhuijuan" style="margin-top: 0px;">
<view style="width: 30%;">
<span class="detail-foot-nav-text">优惠券</span>
</view>
<view class="header-bottom-money-zhen">
<view v-if="couponDataList" class="value-font" style="margin-right: 5px;">
<span>-{{couponDataList}}</span>
</view>
<view v-else class="value-font"><span>选择优惠券</span><span class="value-more"></span></view>
<!---<image class="fuwu-img" src="../../static/images/my/jiantou.png" mode=""></image>-->
</view>
</view>
</view>
</view> </view>
</view> </view>
<view class="push-button"> <view class="push-button">
@ -1317,10 +1333,16 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.detail-foot-youhui{
background: #fff;
padding: 26rpx;
width: 100%;
margin: 0 auto;
border-radius: 21rpx;
}
.ske-padding{ .ske-padding{
padding: 5rpx 30rpx 36rpx 30rpx; padding: 5rpx 30rpx 36rpx 30rpx;
} }
.header-bottom-money{ .header-bottom-money{
width: 100%; width: 100%;
display: flex; display: flex;
@ -1328,25 +1350,24 @@
align-items: flex-end; align-items: flex-end;
} }
.detail-view-mina{ .detail-view-mina{
width: 73%; width: 74%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
} }
.detail-view-img{ .detail-view-img{
width: 76px; width:74px;
height: 76px; height:74px;
border-radius: 9px; border-radius: 9px;
} }
.detail-view{ .detail-view{
width: 100%; padding: 0 30rpx 30rpx 30rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.head-bottom{ .head-bottom{
width: 68%; width: 75%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
@ -1373,34 +1394,37 @@
padding: 29rpx; padding: 29rpx;
margin-top: 10px; margin-top: 10px;
} }
.pay-title{ .pay-title{
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #333333; color: #333333;
margin-bottom: 12px; margin-bottom: 10px;
} }
.header-bottom-money-zhen span:nth-child(1){ .header-bottom-money-zhen-child1{
font-size: 24rpx; font-size: 24rpx;
color: #FF1200; color: #FF6000;
} }
.header-bottom-money-zhen span:nth-child(2){ .header-bottom-money-zhen-child2{
font-size: 32rpx; font-size:36rpx;
font-weight: bold; font-weight: bold;
color: #FF1200; color: #FF6000;
line-height:32rpx;
}
.header-bottom-money-zhen-child3{
margin-left:5px;
color: #999;
text-decoration: line-through;
} }
.header-bottom-money-zhen{ .header-bottom-money-zhen{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: baseline; align-items: flex-end;
} }
.xiangmu-cont-top-left{ .xiangmu-cont-top-left{
font-weight: normal; font-weight: normal;
font-size:26rpx; font-size:26rpx;
color: #049E89; color: #049E89;
margin: 5rpx 0; margin: 5rpx 0;
} }
.detail-foot-nav-bor{ .detail-foot-nav-bor{
width: 64px; width: 64px;
@ -1421,14 +1445,14 @@
.detail-foot-nav-text{ .detail-foot-nav-text{
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #000000; color: #333;
} }
.detail-foot-nav{ .detail-foot-nav{
width: 90%; width: 90%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
margin: 10px 0; margin: 12px 0;
} }
.detail-foot-title{ .detail-foot-title{
width: 100px; width: 100px;
@ -1452,30 +1476,29 @@
align-items: center; align-items: center;
} }
.detail-foot-list{ .detail-foot-list{
width: 95%; width: 100%;
border-radius: 21rpx; border-radius: 21rpx;
position: relative; position: relative;
margin: 6px 0px 5px 0px;
padding: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #fff; background-color: #fff;
margin-bottom: 20rpx;
border: 1px solid #f5f5f5;
} }
.detail-foot{ .detail-foot{
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 15rpx 0px;
} }
.tese span:nth-child(1){ .tese span:nth-child(1){
font-weight: bold; font-weight: bold;
font-size: 26rpx; font-size: 24rpx;
color: #666; color: #333333;
} }
.tese span:nth-child(2){ .tese span:nth-child(2){
font-size: 26rpx; font-weight: 400;
font-size: 24rpx;
color: #8D9194; color: #8D9194;
} }
.tese{ .tese{
@ -1485,13 +1508,13 @@
-webkit-line-clamp: 2; /* 显示的行数,可以根据需要修改 */ -webkit-line-clamp: 2; /* 显示的行数,可以根据需要修改 */
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-top: 4rpx;
} }
.detail-foot-list-top span:nth-child(1){ .detail-foot-list-top span:nth-child(1){
font-weight: bold; font-weight: bold;
font-size: 30rpx; font-size: 30rpx;
color: #3F3F3F; color: #333;
margin-bottom: 10rpx; margin-left: 30rpx;
padding: 20rpx 0;
} }
.detail-foot-list-top span:nth-child(2){ .detail-foot-list-top span:nth-child(2){
width: 76rpx; width: 76rpx;
@ -1510,9 +1533,9 @@
font-size: 28rpx; font-size: 28rpx;
color: #029d88; color: #029d88;
} }
.detail-foot-mian{ .detail-foot-mian{
width: 100%; width: 95%;
margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -1901,15 +1924,25 @@
text-decoration-line: line-through; text-decoration-line: line-through;
margin-left: 5px; margin-left: 5px;
} }
.money-pay-zhen span{ .money-pay-zhen-a1{
font-size: 24rpx;
color: #FF6000; color: #FF6000;
font-size: 32rpx; }
.money-pay-zhen-a2{
font-size:36rpx;
font-weight: bold; font-weight: bold;
} color: #FF6000;
line-height:30rpx;
}
.money-pay-zhen-a3{
font-size: 24rpx;
color: #FF6000;
}
.money-pay-zhen{ .money-pay-zhen{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: flex-end;
margin-top:4rpx;
} }
.money-pay{ .money-pay{
width: 100%; width: 100%;
@ -2124,18 +2157,33 @@
} }
.head-title{ .head-title{
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 30rpx;
color: #333333; color: #333333;
} }
.zhuangtai{ .zhuangtai{
color: #029D88; color: #029D88;
} }
.title-font{ .title-font{
font-size: 30rpx; font-size:28rpx;
color: #666666; color: #666666;
} }
.value-font{ .value-font{
font-size: 30rpx; background: #fdeee9;
color: #333333; font-size: 26rpx;
color: #FF6000;
border-radius:30rpx;
height: 50rpx;
line-height: 50rpx;
padding: 0 26rpx;
} }
.value-more{
display:inline-block;
border-top:1px solid;
border-right:1px solid;
width: 15rpx;
height: 15rpx;
border-color:#FF6000;
transform:rotate(45deg);
margin-top: 14rpx;
}
</style> </style>

View File

@ -15,7 +15,8 @@
@clear="clear"> @clear="clear">
</uni-search-bar> </uni-search-bar>
<view class="search-btn" @click="searchBtn"> <view class="search-btn" @click="searchBtn">
搜索 <image style="width:30rpx; height:30rpx; margin-right: 10rpx;" src="../../static/search.png"></image>
搜索
</view> </view>
</view> </view>
</view> </view>
@ -182,7 +183,7 @@
.shop_label{ .shop_label{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 10rpx; margin-top: 4rpx;
} }
.shop_label span{ .shop_label span{
background: linear-gradient(90deg, #ffefde, #fff7ef); background: linear-gradient(90deg, #ffefde, #fff7ef);
@ -195,7 +196,6 @@
margin-bottom: 8rpx; margin-bottom: 8rpx;
color: #f68607; color: #f68607;
} }
.item-view-bottom-btn{ .item-view-bottom-btn{
text-align: center; text-align: center;
width: 131rpx; width: 131rpx;
@ -209,35 +209,33 @@
} }
.item-view-bottom-qian span:nth-child(5){ .item-view-bottom-qian span:nth-child(5){
font-size: 28rpx; font-size: 28rpx;
color: #848484; color: #848484;
text-decoration-line: line-through; text-decoration-line: line-through;
} }
.item-view-bottom-qian span:nth-child(4){ .item-view-bottom-qian span:nth-child(4){
font-size: 28rpx; font-size: 26rpx;
color: #848484; color: #848484;
text-decoration-line: line-through; text-decoration-line: line-through;
margin-left: 5px; margin-left: 5px;
} }
.item-view-bottom-qian span:nth-child(3){ .item-view-bottom-qian span:nth-child(3){
font-weight: 400; font-size: 28rpx;
font-size: 28rpx; color: #FF6000;
color: #FF1200; }
.item-view-bottom-qian span:nth-child(2){
font-weight: bold;
font-size: 36.81rpx;
color: #FF6000;
}
.item-view-bottom-qian span:nth-child(1){
font-weight: 400;
font-size: 26rpx;
color: #FF6000;
}
.item-view-bottom-qian{
margin-top: 2px;
} }
.item-view-bottom-qian span:nth-child(2){
font-weight: bold;
font-size: 36.81rpx;
color: #FF1200;
}
.item-view-bottom-qian span:nth-child(1){
font-weight: 400;
font-size: 28rpx;
color: #FF1200;
}
.item-view-bottom-qian{
margin-top: 5px;
}
.item-view-bottom{ .item-view-bottom{
width: 100%; width: 100%;
display: flex; display: flex;
@ -277,47 +275,46 @@
color: #ff8600; color: #ff8600;
} }
.item-view-xiangmu span:nth-child(2){ .item-view-xiangmu span:nth-child(2){
font-weight: normal; font-weight: normal;
color: #333333; color: #333333;
font-size: 30rpx; font-size: 30rpx;
} }
.item-view-xiangmu span:nth-child(1){ .item-view-xiangmu span:nth-child(1){
font-weight: normal; font-weight: normal;
color: #666666; color: #666666;
margin-right: 5rpx; margin-right: 5rpx;
font-size: 30rpx; font-size: 30rpx;
} }
.item-view-xiangmu{ .item-view-xiangmu{
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-weight: 400; font-weight: 400;
font-size: 25rpx; font-size: 25rpx;
align-items: flex-end; align-items: flex-end;
} }
.item-view-title{ .item-view-title{
width: 76%;
font-weight: bold; font-weight: bold;
font-size: 31rpx; font-size: 32rpx;
color: #333333; color: #333333;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.item-view{ .item-view{
width:59%; width:60%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
justify-content: space-between; justify-content: space-between;
padding:5rpx 0; padding:5rpx 0;
} }
.item-img{ .item-img{
width: 246rpx; width: 240rpx;
height: 206rpx; height: 200rpx;
border-radius: 14rpx; border-radius: 14rpx;
position: relative; position: relative;
} }
.item-img img{ .item-img img{
border-radius: 14rpx; border-radius: 14rpx;
@ -341,19 +338,18 @@
border-radius: 14rpx; border-radius: 14rpx;
} }
.item { .item {
width: 96%; width: 100%;
margin: 0 auto; margin: 0 auto ;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
height: 140px; /*height: 140px;*/
background: #FFFFFF; background: #FFFFFF;
border-radius: 21rpx; border-radius: 21rpx;
margin-top:10px; margin-top:10px;
align-items: center; align-items: center;
padding: 12px; padding:20rpx;
} }
.item-detail { .item-detail {
padding: 5rpx 15rpx; padding: 5rpx 15rpx;
border-radius: 10rpx; border-radius: 10rpx;
@ -375,7 +371,7 @@
width:100%; width:100%;
} }
/deep/.zp-paging-container-content{ /deep/.zp-paging-container-content{
width: 100%; width: 95%;
margin: 0 auto; margin: 0 auto;
} }
.fenlei{ .fenlei{
@ -408,15 +404,12 @@
display: none; display: none;
} }
/deep/.uni-searchbar__box-icon-search,.search-btn{ /deep/.uni-searchbar__box-icon-search,.search-btn{
width: 110rpx; width: 110rpx;
height: 50rpx; height: 50rpx;
background: #18A689;
border-radius: 31rpx;
} }
/deep/.uni-searchbar__box{ /deep/.uni-searchbar__box{
height: 30px; height:34px;
border-radius: 30px !important; border-radius: 30px !important;
background-color: #fff !important; background-color: #fff !important;
border: 1px solid #09a28a; border: 1px solid #09a28a;
@ -426,18 +419,20 @@
position: relative; position: relative;
} }
/deep/.uni-searchbar{ /deep/.uni-searchbar{
width: 230px; width:250px;
border-radius: 31rpx; border-radius: 31rpx;
margin-right: 20rpx; padding-right: 24rpx;
} }
.search-btn{ .search-btn{
text-align: center; text-align: center;
line-height: 56rpx; color: #019c88;
color: #fff; font-weight: bold;
position: absolute; position: absolute;
right:30rpx; right:40rpx;
top: 22rpx; top: 20rpx;
height: 56rpx !important; font-size: 30rpx;
display: flex;
align-items: center;
} }
.service-head-top-left image{ .service-head-top-left image{
width: 20px; width: 20px;
@ -462,14 +457,11 @@
justify-content: space-between; justify-content: space-between;
} }
.service-head-top{ .service-head-top{
width: 100%; height:90rpx;
height: 100rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: linear-gradient(60deg,rgba(115, 212, 183, 0.2),rgba(227, 251, 244, 0.1),rgba(193, 236, 223, 0.35));
border-bottom:1rpx solid #c4ede1;
} }
.view-cata{ .view-cata{
display: flex; display: flex;

View File

@ -244,17 +244,17 @@
} }
.item-view-bottom-qian span:nth-child(3){ .item-view-bottom-qian span:nth-child(3){
font-size: 28rpx; font-size: 28rpx;
color: #FF1200; color: #FF6000;
} }
.item-view-bottom-qian span:nth-child(2){ .item-view-bottom-qian span:nth-child(2){
font-weight: bold; font-weight: bold;
font-size: 36.81rpx; font-size: 36.81rpx;
color: #FF1200; color: #FF6000;
} }
.item-view-bottom-qian span:nth-child(1){ .item-view-bottom-qian span:nth-child(1){
font-weight: 400; font-weight: 400;
font-size: 28rpx; font-size: 28rpx;
color: #F95900; color: #FF6000;
} }
.item-view-bottom-qian{ .item-view-bottom-qian{
margin-top:2px; margin-top:2px;

View File

@ -15,6 +15,7 @@
@clear="clear"> @clear="clear">
</uni-search-bar> </uni-search-bar>
<view class="search-btn" @click="searchBtn"> <view class="search-btn" @click="searchBtn">
<image style="width:30rpx; height:30rpx; margin-right: 10rpx;" src="../../static/search.png"></image>
搜索 搜索
</view> </view>
</view> </view>
@ -184,7 +185,7 @@
.shop_label{ .shop_label{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 10rpx; margin-top: 4rpx;
} }
.shop_label span{ .shop_label span{
background: linear-gradient(90deg, #ffefde, #fff7ef); background: linear-gradient(90deg, #ffefde, #fff7ef);
@ -197,7 +198,6 @@
margin-bottom: 8rpx; margin-bottom: 8rpx;
color: #f68607; color: #f68607;
} }
.item-view-bottom-btn{ .item-view-bottom-btn{
text-align: center; text-align: center;
width: 131rpx; width: 131rpx;
@ -209,34 +209,33 @@
color: #FFFFFF; color: #FFFFFF;
} }
.item-view-bottom-qian span:nth-child(5){ .item-view-bottom-qian span:nth-child(5){
font-size: 28rpx; font-size: 28rpx;
color: #848484; color: #848484;
text-decoration-line: line-through; text-decoration-line: line-through;
} }
.item-view-bottom-qian span:nth-child(4){ .item-view-bottom-qian span:nth-child(4){
font-size: 28rpx; font-size: 26rpx;
color: #848484; color: #848484;
text-decoration-line: line-through; text-decoration-line: line-through;
margin-left: 5px; margin-left: 5px;
} }
.item-view-bottom-qian span:nth-child(3){ .item-view-bottom-qian span:nth-child(3){
font-weight: 400; font-size: 28rpx;
font-size: 28rpx; color: #FF6000;
color: #FF1200; }
.item-view-bottom-qian span:nth-child(2){
font-weight: bold;
font-size: 36.81rpx;
color: #FF6000;
}
.item-view-bottom-qian span:nth-child(1){
font-weight: 400;
font-size: 26rpx;
color: #FF6000;
}
.item-view-bottom-qian{
margin-top: 2px;
} }
.item-view-bottom-qian span:nth-child(2){
font-weight: bold;
font-size: 36.81rpx;
color: #FF1200;
}
.item-view-bottom-qian span:nth-child(1){
font-weight: 400;
font-size: 28rpx;
color: #FF1200;
}
.item-view-bottom-qian{
margin-top: 5px;
}
.item-view-bottom{ .item-view-bottom{
width: 100%; width: 100%;
display: flex; display: flex;
@ -275,48 +274,47 @@
background-color:#fcf3da; background-color:#fcf3da;
color: #ff8600; color: #ff8600;
} }
.item-view-xiangmu span:nth-child(2){ .item-view-xiangmu span:nth-child(2){
font-weight: normal; font-weight: normal;
color: #333333; color: #333333;
font-size: 30rpx; font-size: 30rpx;
} }
.item-view-xiangmu span:nth-child(1){ .item-view-xiangmu span:nth-child(1){
font-weight: normal; font-weight: normal;
color: #666666; color: #666666;
margin-right: 5rpx; margin-right: 5rpx;
font-size: 30rpx; font-size: 30rpx;
} }
.item-view-xiangmu{ .item-view-xiangmu{
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-weight: 400; font-weight: 400;
font-size: 25rpx; font-size: 25rpx;
align-items: flex-end; align-items: flex-end;
} }
.item-view-title{ .item-view-title{
width: 76%;
font-weight: bold; font-weight: bold;
font-size: 31rpx; font-size: 32rpx;
color: #333333; color: #333333;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.item-view{ .item-view{
width:59%; width:60%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
justify-content: space-between; justify-content: space-between;
padding:5rpx 0; padding:5rpx 0;
} }
.item-img{ .item-img{
width: 246rpx; width: 240rpx;
height: 206rpx; height: 200rpx;
border-radius: 14rpx; border-radius: 14rpx;
position: relative; position: relative;
} }
.img-span{ .img-span{
padding: 2px 5px; padding: 2px 5px;
@ -337,19 +335,18 @@
border-radius: 14rpx; border-radius: 14rpx;
} }
.item { .item {
width: 96%; width: 100%;
margin: 0 auto; margin: 0 auto ;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
height: 140px; /*height: 140px;*/
background: #FFFFFF; background: #FFFFFF;
border-radius: 21rpx; border-radius: 21rpx;
margin-top:10px; margin-top:10px;
align-items: center; align-items: center;
padding: 12px; padding:20rpx;
} }
.item-detail { .item-detail {
padding: 5rpx 15rpx; padding: 5rpx 15rpx;
border-radius: 10rpx; border-radius: 10rpx;
@ -371,7 +368,7 @@
width:100%; width:100%;
} }
/deep/.zp-paging-container-content{ /deep/.zp-paging-container-content{
width: 100%; width: 95%;
margin: 0 auto; margin: 0 auto;
} }
.fenlei{ .fenlei{
@ -405,21 +402,21 @@
} }
.search-btn{ .search-btn{
text-align: center; text-align: center;
line-height: 56rpx; color: #019c88;
color: #fff; font-weight: bold;
position: absolute; position: absolute;
right:30rpx; right:40rpx;
top: 22rpx; top: 20rpx;
height: 56rpx !important; font-size: 30rpx;
display: flex;
align-items: center;
} }
/deep/.uni-searchbar__box-icon-search,.search-btn{ /deep/.uni-searchbar__box-icon-search,.search-btn{
width: 110rpx; width: 110rpx;
height: 50rpx; height: 50rpx;
background: #18A689;
border-radius: 31rpx;
} }
/deep/.uni-searchbar__box{ /deep/.uni-searchbar__box{
height: 30px; height:34px;
border-radius: 30px !important; border-radius: 30px !important;
background-color: #fff !important; background-color: #fff !important;
border: 1px solid #09a28a; border: 1px solid #09a28a;
@ -429,9 +426,9 @@
position: relative; position: relative;
} }
/deep/.uni-searchbar{ /deep/.uni-searchbar{
width: 230px; width:250px;
border-radius: 31rpx; border-radius: 31rpx;
margin-right: 20rpx; padding-right: 24rpx;
} }
.service-head-top-left image{ .service-head-top-left image{
width: 20px; width: 20px;
@ -456,14 +453,11 @@
justify-content: space-between; justify-content: space-between;
} }
.service-head-top{ .service-head-top{
width: 100%; height:90rpx;
height: 100rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: linear-gradient(60deg,rgba(115, 212, 183, 0.2),rgba(227, 251, 244, 0.1),rgba(193, 236, 223, 0.35));
border-bottom:1rpx solid #c4ede1;
} }
.view-cata{ .view-cata{
display: flex; display: flex;

View File

@ -1,65 +1,64 @@
<!-- 自定义下拉刷新与上拉加载演示(vue) --> <!-- 自定义下拉刷新与上拉加载演示(vue) -->
<template> <template>
<view class="content-view"> <view class="content-view">
<z-paging ref="paging" v-model="dataList" @query="queryList"> <z-paging ref="paging" v-model="dataList" @query="queryList">
<template #top> <template #top>
<view class="service-head-top"> <view class="service-head-top">
<view class="service-head-top-left"> <view class="service-head-top-left">
<image @click="backImg" src="../../static/fanhui.png" mode="widthFix"></image> <image @click="backImg" src="../../static/fanhui.png" mode="widthFix"></image>
<span>服务项目</span> <span>服务项目</span>
</view> </view>
<view> <view>
<uni-search-bar @service="serviceTrue" @confirm="search" :cancelext="'取消'" v-model="searchValue" @input="input" <uni-search-bar @service="serviceTrue" @confirm="search" :cancelext="'取消'" v-model="searchValue" @input="input" @clear="clear">
@clear="clear"> </uni-search-bar>
</uni-search-bar> <view class="search-btn" @click="searchBtn">
<view class="search-btn" @click="searchBtn"> <image style="width:30rpx; height:30rpx; margin-right: 10rpx;" src="../../static/search.png"></image>
搜索 搜索
</view> </view>
</view> </view>
</view> </view>
<view class="fenlei"> <view class="fenlei">
<z-tabs class="z-tabs-fenlei" :list="tabList" @change="tabChange" @changeClick="changeClick"/> <z-tabs class="z-tabs-fenlei" :list="tabList" @change="tabChange" @changeClick="changeClick"/>
</view> </view>
</template> </template>
<template #loadingMoreNoMore > <template #loadingMoreNoMore >
<custom-nomore /> <custom-nomore />
</template> </template>
<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)"> <view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
<view class="item-img"> <view class="item-img">
<image :src="item.massageImg" mode=""></image> <image :src="item.massageImg" mode=""></image>
</view> </view>
<view class="item-view"> <view class="item-view">
<view class="view-cata"> <view class="view-cata">
<span class="item-view-title">{{item.title}}</span> <span class="item-view-title">{{item.title}}</span>
<!-- <span class="xiaoer item-view-biao">{{item.classifyName}}</span> --> <!-- <span class="xiaoer item-view-biao">{{item.classifyName}}</span> -->
</view> </view>
<view class="item-view-bottom-qian"> <view class="item-view-bottom-qian">
<span></span> <span></span>
<span>{{item.price}}</span> <span>{{item.price}}</span>
<span>{{item.oldPrice}}</span> <span>{{item.oldPrice}}</span>
</view> </view>
<view class="flex" style="margin-top: 10rpx;"> <view class="flex" style="margin-top: 10rpx;">
<view class="shop_label" v-if="item.tagsData!=''"> <view class="shop_label" v-if="item.tagsData!=''">
<span v-for="tag in item.tagsData" :key="tag">{{tag}}</span> <span v-for="tag in item.tagsData" :key="tag">{{tag}}</span>
</view> </view>
<view class="shop_label" v-else> <view class="shop_label" v-else>
<span>助眠解压</span> <span>助眠解压</span>
</view> </view>
</view> </view>
<view class="item-view-bottom"> <view class="item-view-bottom">
<view class="item-view-xiangmu"> <view class="item-view-xiangmu">
<span>已售</span><span>{{item.sales}} <!-- | 好评{{item.esteemRate}}% --></span> <span>已售</span><span>{{item.sales}} <!-- | 好评{{item.esteemRate}}% --></span>
</view> </view>
<view class="item-view-bottom-btn"> <view class="item-view-bottom-btn">
查看 查看
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</z-paging> </z-paging>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
@ -261,12 +260,12 @@
.item-view-bottom-qian span:nth-child(2){ .item-view-bottom-qian span:nth-child(2){
font-weight: bold !important; font-weight: bold !important;
font-size: 36.81rpx !important; font-size: 36.81rpx !important;
color: #FF1200 !important; color: #FF6000 !important;
} }
.item-view-bottom-qian span:nth-child(1){ .item-view-bottom-qian span:nth-child(1){
font-weight: 400; font-weight: 400;
font-size: 28rpx; font-size: 28rpx;
color: #FF1200; color: #FF6000;
} }
.item-view-bottom-qian{ .item-view-bottom-qian{
margin-top: 2px; margin-top: 2px;

View File

@ -167,7 +167,7 @@
<view class="prompt-text">-当你累了 想起盛安到家-</view> <view class="prompt-text">-当你累了 想起盛安到家-</view>
<view class="kefu" @click="goMsg"> <view class="kefu" @click="goMsg">
<image src="../../static/kefu.png" mode=""></image> <image src="../../static/kefu.png" mode=""></image>
<span>联系客服</span> <!--<span>联系客服</span>-->
</view> </view>
</view> </view>
@ -697,13 +697,11 @@
bottom: 0; bottom: 0;
margin-bottom: 20%; margin-bottom: 20%;
margin-right: 20px; margin-right: 20px;
background-color: #fff;
border-radius: 5px;
} }
.shop_label{ .shop_label{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 10rpx; margin-top: 4rpx;
} }
.shop_label span{ .shop_label span{
background: linear-gradient(90deg, #ffefde, #fff7ef); background: linear-gradient(90deg, #ffefde, #fff7ef);
@ -716,92 +714,91 @@
margin-bottom: 8rpx; margin-bottom: 8rpx;
color: #f68607; color: #f68607;
} }
.item-view-xiangmu span:nth-child(2){ .item-view-xiangmu span:nth-child(2){
font-weight: normal; font-weight: normal;
color: #333333; color: #333333;
font-size: 30rpx; font-size: 30rpx;
} }
.item-view-xiangmu span:nth-child(1){ .item-view-xiangmu span:nth-child(1){
font-weight: normal; font-weight: normal;
color: #666666; color: #666666;
margin-right: 5rpx; margin-right: 5rpx;
font-size: 30rpx; font-size: 30rpx;
} }
.item-view-xiangmu{ .item-view-xiangmu{
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-weight: 400; font-weight: 400;
font-size: 25rpx; font-size: 25rpx;
align-items: flex-end; align-items: flex-end;
} }
.item-view-title{ .item-view-title{
font-weight: bold; font-weight: bold;
font-size: 33rpx; font-size: 32rpx;
color: #333333; color: #333333;
} overflow: hidden;
.item-view{ text-overflow: ellipsis;
width:59%; white-space: nowrap;
height: 100%; }
display: flex; .item-view{
flex-direction: column; width:60%;
justify-content: center; height: 100%;
justify-content: space-between; display: flex;
padding:5rpx 0; flex-direction: column;
} justify-content: center;
.item-img{ justify-content: space-between;
width: 246rpx; padding:6rpx 0;
height: 206rpx; }
border-radius: 14rpx; .item-img{
position: relative; width: 240rpx;
} height: 200rpx;
.img-span{ border-radius: 14rpx;
padding: 2px 5px; position: relative;
font-weight: 400; }
font-size: 8px; .item-img img{
color: #FFFFFF; border-radius: 14rpx;
background: linear-gradient(-90deg, #FF6F48, #FF9E69); }
border-radius: 7px 0px 7px 0px; .img-span{
position: absolute; padding: 2px 5px;
bottom: 0px; font-weight: 400;
right: 0; font-size: 8px;
margin-bottom: 5px; color: #FFFFFF;
margin-right: 5px; background: linear-gradient(-90deg, #FF6F48, #FF9E69);
} border-radius: 7px 0px 7px 0px;
.item-img image{ position: absolute;
width: 100%; bottom: 0px;
height: 100%; right: 0;
} margin-bottom: 5px;
.item { margin-right: 5px;
width: 96%; }
margin: 0 auto; .item {
display: flex; width: 96%;
flex-direction: row; margin: 0 auto;
justify-content: space-between; display: flex;
height: 140px; flex-direction: row;
background: #FFFFFF; justify-content: space-between;
border-radius: 21rpx; background: #FFFFFF;
margin-top:10px; border-radius: 21rpx;
align-items: center; margin-top:10px;
padding: 12px; align-items: center;
} padding: 12px;
}
.item-detail { .item-detail {
padding: 5rpx 15rpx; padding: 5rpx 15rpx;
border-radius: 10rpx; border-radius: 10rpx;
font-size: 28rpx; font-size: 28rpx;
color: white; color: white;
background-color: #007AFF; background-color: #007AFF;
} }
.item-line {
.item-line { position: absolute;
position: absolute; bottom: 0rpx;
bottom: 0rpx; left: 0rpx;
left: 0rpx; height: 1px;
height: 1px; width: 100%;
width: 100%; background-color: #eeeeee;
background-color: #eeeeee; }
}
.item-view-bottom-btn{ .item-view-bottom-btn{
text-align: center; text-align: center;
width: 131rpx; width: 131rpx;
@ -814,40 +811,35 @@
color: #FFFFFF; color: #FFFFFF;
margin-top: 8rpx; margin-top: 8rpx;
} }
.item-view-bottom-qian span:nth-child(5){ .item-view-bottom-qian span:nth-child(4){
font-size: 28rpx; font-size: 26rpx;
color: #848484; color: #848484;
text-decoration-line: line-through; text-decoration-line: line-through;
} margin-left: 5px;
.item-view-bottom-qian span:nth-child(4){ }
font-size: 28rpx; .item-view-bottom-qian span:nth-child(3){
color: #848484; font-size: 28rpx;
text-decoration-line: line-through; color: #FF6000;
margin-left: 5px; }
} .item-view-bottom-qian span:nth-child(2){
.item-view-bottom-qian span:nth-child(3){ font-weight: bold;
font-size: 28rpx; font-size: 36.81rpx;
color: #FF1200; color: #FF6000;
} }
.item-view-bottom-qian span:nth-child(2){ .item-view-bottom-qian span:nth-child(1){
font-weight: bold; font-weight: 400;
font-size: 36.81rpx; font-size: 26rpx;
color: #FF1200; color: #FF6000;
} }
.item-view-bottom-qian span:nth-child(1){ .item-view-bottom-qian{
font-weight: 400; margin-top: 2px;
font-size: 28rpx; }
color: #F95900;
}
.item-view-bottom-qian{
margin-top: 5px;
}
.item-view-bottom{ .item-view-bottom{
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.item-view-jianjie{ .item-view-jianjie{
font-weight: 400; font-weight: 400;

View File

@ -237,7 +237,6 @@
margin-bottom: 8rpx; margin-bottom: 8rpx;
color: #f68607; color: #f68607;
} }
/deep/.refresh-body .content{ /deep/.refresh-body .content{
} }
/deep/.refresh-body{ /deep/.refresh-body{
@ -263,34 +262,34 @@
font-size: 28rpx; font-size: 28rpx;
color: #FFFFFF; color: #FFFFFF;
} }
.item-view-bottom-qian span:nth-child(5){ .item-view-bottom-qian span:nth-child(5){
font-size: 28rpx; font-size: 28rpx;
color: #848484; color: #848484;
text-decoration-line: line-through; text-decoration-line: line-through;
} }
.item-view-bottom-qian span:nth-child(4){ .item-view-bottom-qian span:nth-child(4){
font-size: 26rpx; font-size: 26rpx;
color: #848484; color: #848484;
text-decoration-line: line-through; text-decoration-line: line-through;
margin-left: 5px; margin-left: 5px;
} }
.item-view-bottom-qian span:nth-child(3){ .item-view-bottom-qian span:nth-child(3){
font-size: 28rpx; font-size: 28rpx;
color: #FF1200; color: #FF6000;
}
.item-view-bottom-qian span:nth-child(2){
font-weight: bold;
font-size: 36.81rpx;
color: #FF6000;
}
.item-view-bottom-qian span:nth-child(1){
font-weight: 400;
font-size: 26rpx;
color: #FF6000;
}
.item-view-bottom-qian{
margin-top: 2px;
} }
.item-view-bottom-qian span:nth-child(2){
font-weight: bold;
font-size: 36.81rpx;
color: #FF1200;
}
.item-view-bottom-qian span:nth-child(1){
font-weight: 400;
font-size: 26rpx;
color: #FF1200;
}
.item-view-bottom-qian{
margin-top: 2px;
}
.item-view-bottom{ .item-view-bottom{
width: 100%; width: 100%;
display: flex; display: flex;
@ -330,15 +329,15 @@
color: #ff8600; color: #ff8600;
} }
.item-view-xiangmu span:nth-child(2){ .item-view-xiangmu span:nth-child(2){
font-weight: normal; font-weight: normal;
color: #333333; color: #333333;
font-size: 30rpx; font-size: 30rpx;
} }
.item-view-xiangmu span:nth-child(1){ .item-view-xiangmu span:nth-child(1){
font-weight: normal; font-weight: normal;
color: #666666; color: #666666;
margin-right: 5rpx; margin-right: 5rpx;
font-size: 30rpx; font-size: 30rpx;
} }
.item-view-xiangmu{ .item-view-xiangmu{
width: 100%; width: 100%;
@ -400,7 +399,7 @@
/*height: 140px;*/ /*height: 140px;*/
background: #FFFFFF; background: #FFFFFF;
border-radius: 21rpx; border-radius: 21rpx;
margin-top:10px; margin-bottom:10px;
align-items: center; align-items: center;
padding:20rpx; padding:20rpx;
} }
@ -428,7 +427,6 @@
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
} }
.index-fenl-title{ .index-fenl-title{
width: 81rpx; width: 81rpx;
text-align: center; text-align: center;

View File

@ -15,8 +15,8 @@
@clear="clear"> @clear="clear">
</uni-search-bar> </uni-search-bar>
<view class="search-btn" @click="searchBtn"> <view class="search-btn" @click="searchBtn">
<image style="width:30rpx; height:30rpx; margin-right: 10rpx;" src="../../static/search.png"></image> <image style="width:30rpx; height:30rpx; margin-right: 10rpx;" src="../../static/search.png"></image>
搜索 搜索
</view> </view>
</view> </view>
</view> </view>
@ -241,7 +241,7 @@
.shop_label{ .shop_label{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 10rpx; margin-top: 4rpx;
} }
.shop_label span{ .shop_label span{
background: linear-gradient(90deg, #ffefde, #fff7ef); background: linear-gradient(90deg, #ffefde, #fff7ef);
@ -335,8 +335,6 @@
color: #fff; color: #fff;
font-size:26rpx; font-size:26rpx;
} }
.item-view-bottom-qian{
}
.item-view-bottom-btn{ .item-view-bottom-btn{
text-align: center; text-align: center;
width: 131rpx; width: 131rpx;
@ -348,28 +346,29 @@
font-size: 28rpx; font-size: 28rpx;
color: #FFFFFF; color: #FFFFFF;
} }
.item-view-bottom-qian span:nth-child(5){ .item-view-bottom-qian span:nth-child(4){
font-size: 28rpx; font-size: 26rpx;
color: #848484; color: #848484;
text-decoration-line: line-through; text-decoration-line: line-through;
} margin-left: 5px;
.item-view-bottom-qian span:nth-child(3){
font-size: 28rpx;
color: #848484;
text-decoration-line: line-through;
margin-left: 5px;
} }
.item-view-bottom-qian span:nth-child(1){ .item-view-bottom-qian span:nth-child(3){
font-weight: 400; font-size: 28rpx;
font-size: 25rpx; color: #FF6000;
color: #FF1200;
} }
.item-view-bottom-qian span:nth-child(2){ .item-view-bottom-qian span:nth-child(2){
font-weight: bold; font-weight: bold;
font-size: 36.81rpx; font-size: 36.81rpx;
color: #FF1200; color: #FF6000;
}
.item-view-bottom-qian span:nth-child(1){
font-weight: 400;
font-size: 26rpx;
color: #FF6000;
}
.item-view-bottom-qian{
margin-top: 2px;
} }
.item-view-bottom{ .item-view-bottom{
width: 100%; width: 100%;
display: flex; display: flex;
@ -409,15 +408,15 @@
color: #ff8600; color: #ff8600;
} }
.item-view-xiangmu span:nth-child(2){ .item-view-xiangmu span:nth-child(2){
font-weight: normal; font-weight: normal;
color: #333333; color: #333333;
font-size: 30rpx; font-size: 30rpx;
} }
.item-view-xiangmu span:nth-child(1){ .item-view-xiangmu span:nth-child(1){
font-weight: normal; font-weight: normal;
color: #666666; color: #666666;
margin-right: 5rpx; margin-right: 5rpx;
font-size: 30rpx; font-size: 30rpx;
} }
.item-view-xiangmu{ .item-view-xiangmu{
width: 100%; width: 100%;
@ -445,10 +444,13 @@
padding:5rpx 0; padding:5rpx 0;
} }
.item-img{ .item-img{
width: 240rpx; width: 240rpx;
height: 200rpx; height: 200rpx;
border-radius: 14rpx; border-radius: 14rpx;
position: relative; position: relative;
}
.item-img img{
border-radius: 14rpx;
} }
.img-span{ .img-span{
padding: 2px 5px; padding: 2px 5px;
@ -469,19 +471,18 @@
border-radius: 14rpx; border-radius: 14rpx;
} }
.item { .item {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto ;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
height: 140px; /*height: 140px;*/
background: #FFFFFF; background: #FFFFFF;
border-radius: 21rpx; border-radius: 21rpx;
margin-top:10px; margin-top:10px;
align-items: center; align-items: center;
padding: 12px; padding:20rpx;
} }
.item-detail { .item-detail {
padding: 5rpx 15rpx; padding: 5rpx 15rpx;
border-radius: 10rpx; border-radius: 10rpx;

View File

@ -310,7 +310,7 @@
width: 131rpx; width: 131rpx;
height: 55rpx; height: 55rpx;
line-height: 55rpx; line-height: 55rpx;
background: linear-gradient(90deg, #019C88, #0FA78B, #35C495); background: linear-gradient(90deg, #fe725f, #f45e4b, #ec4c39);
border-radius: 10rpx; border-radius: 10rpx;
font-weight: bold; font-weight: bold;
font-size: 28rpx; font-size: 28rpx;
@ -341,12 +341,12 @@
.item-view-bottom-qian span:nth-child(2){ .item-view-bottom-qian span:nth-child(2){
font-weight: bold; font-weight: bold;
font-size: 36.81rpx; font-size: 36.81rpx;
color: #FF1200; color: #FF6000;
} }
.item-view-bottom-qian span:nth-child(1){ .item-view-bottom-qian span:nth-child(1){
font-weight: 400; font-weight: 400;
font-size: 25rpx; font-size: 25rpx;
color: #FF1200; color: #FF6000;
} }
.item-view-bottom-qian{ .item-view-bottom-qian{
margin-top: 2px; margin-top: 2px;
@ -478,7 +478,7 @@
/*height: 140px;*/ /*height: 140px;*/
background: #FFFFFF; background: #FFFFFF;
border-radius: 21rpx; border-radius: 21rpx;
margin-top:10px; margin-bottom:10px;
align-items: center; align-items: center;
padding:20rpx; padding:20rpx;
} }
@ -504,7 +504,7 @@
} }
/deep/.zp-paging-container-content{ /deep/.zp-paging-container-content{
width: 95%; width: 95%;
margin: 0px auto 0px auto; margin: 0 auto;
} }
.fenlei{ .fenlei{
display: flex; display: flex;

View File

@ -1401,7 +1401,7 @@
font-size: 24rpx; font-size: 24rpx;
} }
.group-buy-right span:nth-child(2){ .group-buy-right span:nth-child(2){
background: linear-gradient(90deg, #ff451f, #f40613); background: linear-gradient(90deg, #ff451f, #f33e29);
border-radius: 30rpx; border-radius: 30rpx;
padding: 10rpx 20rpx; padding: 10rpx 20rpx;
color: #fff; color: #fff;

View File

@ -15,7 +15,8 @@
@clear="clear"> @clear="clear">
</uni-search-bar> </uni-search-bar>
<view class="search-btn" @click="searchBtn"> <view class="search-btn" @click="searchBtn">
搜索 <image style="width:30rpx; height:30rpx; margin-right: 10rpx;" src="../../static/search.png"></image>
搜索
</view> </view>
</view> </view>
</view> </view>
@ -181,22 +182,22 @@
</script> </script>
<style scoped> <style scoped>
.shop_label{ .shop_label{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 10rpx; margin-top: 4rpx;
} }
.shop_label span{ .shop_label span{
background: linear-gradient(90deg, #ffefde, #fff7ef); background: linear-gradient(90deg, #ffefde, #fff7ef);
height: 34rpx; height: 34rpx;
line-height: 34rpx; line-height: 34rpx;
border-radius: 8rpx; border-radius: 8rpx;
padding: 0 10rpx; padding: 0 10rpx;
font-size: 22rpx; font-size: 22rpx;
margin-right: 8rpx; margin-right: 8rpx;
margin-bottom: 8rpx; margin-bottom: 8rpx;
color: #f68607; color: #f68607;
} }
.img-span{ .img-span{
padding: 2px 5px; padding: 2px 5px;
font-weight: 400; font-weight: 400;
@ -222,31 +223,33 @@
color: #FFFFFF; color: #FFFFFF;
} }
.item-view-bottom-qian span:nth-child(5){ .item-view-bottom-qian span:nth-child(5){
font-size: 28rpx; font-size: 28rpx;
color: #848484; color: #848484;
text-decoration-line: line-through; text-decoration-line: line-through;
} }
.item-view-bottom-qian span:nth-child(4){ .item-view-bottom-qian span:nth-child(4){
font-size: 28rpx; font-size: 26rpx;
color: #848484; color: #848484;
text-decoration-line: line-through; text-decoration-line: line-through;
margin-left: 5px; margin-left: 5px;
} }
.item-view-bottom-qian span:nth-child(3){ .item-view-bottom-qian span:nth-child(3){
font-weight: 400; font-size: 28rpx;
font-size: 28rpx; color: #FF6000;
color: #FF1200; }
.item-view-bottom-qian span:nth-child(2){
font-weight: bold;
font-size: 36.81rpx;
color: #FF6000;
}
.item-view-bottom-qian span:nth-child(1){
font-weight: 400;
font-size: 26rpx;
color: #FF6000;
}
.item-view-bottom-qian{
margin-top: 2px;
} }
.item-view-bottom-qian span:nth-child(2){
font-weight: bold;
font-size: 36.81rpx;
color: #FF1200;
}
.item-view-bottom-qian span:nth-child(1){
font-weight: 400;
font-size: 28rpx;
color: #FF1200;
}
.item-view-bottom{ .item-view-bottom{
width: 100%; width: 100%;
display: flex; display: flex;
@ -286,47 +289,46 @@
color: #ff8600; color: #ff8600;
} }
.item-view-xiangmu span:nth-child(2){ .item-view-xiangmu span:nth-child(2){
font-weight: normal; font-weight: normal;
color: #333333; color: #333333;
font-size: 30rpx; font-size: 30rpx;
} }
.item-view-xiangmu span:nth-child(1){ .item-view-xiangmu span:nth-child(1){
font-weight: normal; font-weight: normal;
color: #666666; color: #666666;
margin-right: 5rpx; margin-right: 5rpx;
font-size: 30rpx; font-size: 30rpx;
} }
.item-view-xiangmu{ .item-view-xiangmu{
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-weight: 400; font-weight: 400;
font-size: 25rpx; font-size: 25rpx;
align-items: flex-end; align-items: flex-end;
} }
.item-view-title{ .item-view-title{
width: 76%; font-weight: bold;
font-weight: bold; font-size: 32rpx;
font-size: 31rpx; color: #333333;
color: #333333; overflow: hidden;
overflow: hidden; text-overflow: ellipsis;
text-overflow: ellipsis; white-space: nowrap;
white-space: nowrap;
} }
.item-view{ .item-view{
width:59%; width:60%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
justify-content: space-between; justify-content: space-between;
padding:5rpx 0; padding:5rpx 0;
} }
.item-img{ .item-img{
width: 246rpx; width: 240rpx;
height: 206rpx; height: 200rpx;
border-radius: 14rpx; border-radius: 14rpx;
position: relative; position: relative;
} }
.item-img image{ .item-img image{
width: 100%; width: 100%;
@ -334,19 +336,18 @@
border-radius: 14rpx; border-radius: 14rpx;
} }
.item { .item {
width: 96%; width: 100%;
margin: 0 auto; margin: 0 auto ;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
height: 140px; /*height: 140px;*/
background: #FFFFFF; background: #FFFFFF;
border-radius: 21rpx; border-radius: 21rpx;
margin-top:10px; margin-top:10px;
align-items: center; align-items: center;
padding: 12px; padding:20rpx;
} }
.item-detail { .item-detail {
padding: 5rpx 15rpx; padding: 5rpx 15rpx;
border-radius: 10rpx; border-radius: 10rpx;
@ -368,7 +369,7 @@
width:100%; width:100%;
} }
/deep/.zp-paging-container-content{ /deep/.zp-paging-container-content{
width: 100%; width: 95%;
margin: 0 auto; margin: 0 auto;
} }
.fenlei{ .fenlei{
@ -402,21 +403,21 @@
} }
.search-btn{ .search-btn{
text-align: center; text-align: center;
line-height: 56rpx; color: #019c88;
color: #fff; font-weight: bold;
position: absolute; position: absolute;
right:30rpx; right:40rpx;
top: 22rpx; top: 20rpx;
height: 56rpx !important; font-size: 30rpx;
display: flex;
align-items: center;
} }
/deep/.uni-searchbar__box-icon-search,.search-btn{ /deep/.uni-searchbar__box-icon-search,.search-btn{
width: 110rpx; width: 110rpx;
height: 50rpx; height: 50rpx;
background: #18A689;
border-radius: 31rpx;
} }
/deep/.uni-searchbar__box{ /deep/.uni-searchbar__box{
height: 30px; height:34px;
border-radius: 30px !important; border-radius: 30px !important;
background-color: #fff !important; background-color: #fff !important;
border: 1px solid #09a28a; border: 1px solid #09a28a;
@ -426,9 +427,9 @@
position: relative; position: relative;
} }
/deep/.uni-searchbar{ /deep/.uni-searchbar{
width: 230px; width:250px;
border-radius: 31rpx; border-radius: 31rpx;
margin-right: 20rpx; padding-right: 24rpx;
} }
.service-head-top-left image{ .service-head-top-left image{
width: 20px; width: 20px;
@ -453,15 +454,12 @@
justify-content: space-between; justify-content: space-between;
} }
.service-head-top{ .service-head-top{
width: 100%; height:90rpx;
height: 100rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: linear-gradient(60deg,rgba(115, 212, 183, 0.2),rgba(227, 251, 244, 0.1),rgba(193, 236, 223, 0.35)); }
border-bottom:1rpx solid #c4ede1;
}
.view-cata{ .view-cata{
display: flex; display: flex;
flex-direction: row; flex-direction: row;