Browse Source

style(timelineService): 添加成功状态背景样式

在timelineService.vue组件中,为服务日期、宠物列表、上门地址和操作按钮添加了成功状态的背景样式,以增强用户体验和视觉反馈。
master
前端-胡立永 1 month ago
parent
commit
03c7daab67
2 changed files with 14 additions and 6 deletions
  1. +14
    -6
      pages/myOrdersManage/components/timelineService.vue
  2. BIN
      static/images/order/success.png

+ 14
- 6
pages/myOrdersManage/components/timelineService.vue View File

@ -39,7 +39,7 @@
<view class="title-indicator"></view> <view class="title-indicator"></view>
<text>服务日期</text> <text>服务日期</text>
</view> </view>
<view class="section-content date-content">
<view class="section-content date-content" :class="{bgSuccessQ : item.status}">
{{ item.fullDate }} {{ item.fullDate }}
</view> </view>
</view> </view>
@ -53,7 +53,7 @@
{{ petListCollapsed[index] ? '展开' : '收起' }} <text class="arrow" :class="{'arrow-up': !petListCollapsed[index]}"></text> {{ petListCollapsed[index] ? '展开' : '收起' }} <text class="arrow" :class="{'arrow-up': !petListCollapsed[index]}"></text>
</view> </view>
</view> </view>
<view class="section-content pet-list" v-if="!petListCollapsed[index]">
<view class="section-content pet-list" :class="{bgSuccessQ : item.status}" v-if="!petListCollapsed[index]">
<view v-for="(pet, i) in item.petList" :key="i" class="pet-item"> <view v-for="(pet, i) in item.petList" :key="i" class="pet-item">
<view class="pet-avatar"> <view class="pet-avatar">
<image :src="pet.avatar" mode="aspectFill" class="avatar-image"></image> <image :src="pet.avatar" mode="aspectFill" class="avatar-image"></image>
@ -79,16 +79,16 @@
<view class="title-indicator"></view> <view class="title-indicator"></view>
<text>上门地址</text> <text>上门地址</text>
</view> </view>
<view class="section-content address-content">
<view class="section-content address-content" :class="{bgSuccessQ : item.status}">
{{ item.addressDetail }} {{ item.addressDetail }}
</view> </view>
</view> </view>
<!-- 操作按钮 --> <!-- 操作按钮 -->
<view class="action-buttons"> <view class="action-buttons">
<view class="btn btn-clock" @click="handleClock(item)">打卡</view>
<view class="btn btn-clock" @click="handlePetFile(item)">宠物档案</view>
<view class="btn btn-clock" @click="handleServiceFile(item)">服务档案</view>
<view class="btn btn-clock" :class="{bgSuccess : item.status}" @click="handleClock(item)">打卡</view>
<view class="btn btn-clock" :class="{bgSuccess : item.status}" @click="handlePetFile(item)">宠物档案</view>
<view class="btn btn-clock" :class="{bgSuccess : item.status}" @click="handleServiceFile(item)">服务档案</view>
</view> </view>
</view> </view>
</view> </view>
@ -249,6 +249,14 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.bgSuccess{
background-color: #4CD964 !important;
}
.bgSuccessQ{
background-color: #4CD96422 !important;
}
.timeline-container { .timeline-container {
position: relative; position: relative;
padding: 20rpx; padding: 20rpx;


BIN
static/images/order/success.png View File

Before After
Width: 34  |  Height: 37  |  Size: 913 B

Loading…
Cancel
Save