|
|
- <template>
- <view class="service-remarks-card">
- <view class="card-title">
- <text>服务备注</text>
- </view>
-
- <view class="remarks-content">
- <view class="payment-method">
- <text class="label">付款方式:</text>
- <text class="value">{{remarks.paymentMethod}}</text>
- </view>
-
- <view class="urgent-flag" v-if="remarks.isUrgent">
- <view class="urgent-icon">
- <image src="/static/images/details/girl.svg" style="width: 32rpx; height: 32rpx;"></image>
- </view>
- <text class="urgent-text">是否紧急预约</text>
- </view>
-
- <view class="notes-section" v-if="remarks.notes">
- <text class="notes-text">{{remarks.notes}}</text>
- </view>
- </view>
- </view>
- </template>
-
- <script>
- export default {
- props: {
- remarks: {
- type: Object,
- default: () => ({
- paymentMethod: '',
- isUrgent: false,
- notes: ''
- })
- }
- }
- }
- </script>
-
- <style lang="scss" scoped>
- .service-remarks-card {
- background-color: #FFFFFF;
- border-radius: 20rpx;
- padding: 30rpx;
- margin-bottom: 20rpx;
- box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
- }
-
- .card-title {
- font-size: 32rpx;
- font-weight: bold;
- color: #333;
- margin-bottom: 20rpx;
- display: flex;
- align-items: center;
-
- &::before {
- content: '';
- display: inline-block;
- width: 8rpx;
- height: 32rpx;
- background-color: #FFAA48;
- margin-right: 16rpx;
- border-radius: 4rpx;
- }
- }
-
- .remarks-content {
- .payment-method {
- display: flex;
- align-items: center;
- margin-bottom: 20rpx;
-
- .label {
- font-size: 26rpx;
- color: #666;
- margin-right: 10rpx;
- }
-
- .value {
- font-size: 26rpx;
- color: #333;
- }
- }
-
- .urgent-flag {
- display: flex;
- align-items: center;
- margin-bottom: 20rpx;
-
- .urgent-icon {
- margin-right: 10rpx;
- }
-
- .urgent-text {
- font-size: 26rpx;
- color: #FF5252;
- }
- }
-
- .notes-section {
- padding: 20rpx;
- background-color: #FFF5E6;
- border-radius: 10rpx;
-
- .notes-text {
- font-size: 26rpx;
- color: #A94F20;
- line-height: 1.5;
- white-space: pre-wrap;
- }
- }
- }
- </style>
|