zhywpt-sp/subpackage/after-sale/work-order/add-work-list.vue

<template>
   <view class="content">
	   <view class="list">
	   	  <view class="title" :style="{'--bgimg':`url(${$imgUrl}etcbg.png)`}">
			  <view class="title_left">
				  <image :src="`${$imgUrl}etc.png`" mode=""></image>
				  <text class="question">ETC使用问题</text>
			  </view>
			  <text class="statusdcl">待处理</text>
		  </view>
		  <view class="bot">
			  <view class="details">
				  <view><text>工单号码：</text><view>0921793812311110</view></view>
				  <view><text>发生日期：</text><view>2025-03-05</view></view>
				  <view><text>客户诉求：</text><view>这是客户诉求详情这是客户诉求详情，这是 客户诉求详情。</view></view>
			  </view>
			  <view class="time">2025.03.06 10:21:09</view>
		  </view>

	   </view>
   </view>
   <image class="add" :src="`${$imgUrl}etcadd.png`" mode="" @click="add()"></image>
</template>

<script setup lang="ts">
	import {navTo} from "@/utils/utils";
  const add=()=>{
	  navTo(`/subpackage/after-sale/work-order/add-work-order`)
  }
</script>

<style lang="scss" scoped>
	.content{
		padding-top: 30rpx;
		box-sizing: border-box;
	}
  .list{
	  background: #FFFFFF;
	  border-radius: 12rpx;
	  border: 1px solid #FFFFFF;
	  width: 90%;
	  margin: 0 auto;
	  font-weight: 400;
	  .title{
		  padding: 0 20rpx;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  height: 80rpx;
		  background-image: var(--bgimg);
		  background-size: 100% 100%;
		  background-repeat: no-repeat;
		  .title_left{
			  display: flex;
			  align-items: center;
		  }
		  image{
			  width: 50rpx;
			  height: 50rpx;
			 
		  }
		  .question{
			  font-size: 30rpx;
			  color: #01243A;
			  margin-left: 10rpx;
		  }
		  // 待处理
		  .statusdcl{
			 font-size: 24rpx;
			 color: #1458E5;
			 background: #E3ECFF;
			 border-radius: 6rpx;
			 border: 1px solid #1458E5;
			 padding: 4rpx 6rpx;
		  }
		  // 待补充
		  .statusdbc{
			 font-size: 24rpx;
			 color: #42D175;
			 background:#E6FFEF;
			 border-radius: 6rpx;
			 border: 1px solid #42D175;
			 padding: 4rpx 6rpx;
		  }
		  // 已结束
		  .statusyjs{
			 font-size: 24rpx;
			 color: #839AB4;
			 background: #DCEFFC;
			 border-radius: 6rpx;
			 border: 1px solid #839AB4;
			 padding: 4rpx 6rpx;
		  }
	  }
	  .bot{
		  padding: 0 20rpx;
		  .details{
			  font-size: 26rpx;
			  padding: 10rpx 0 5rpx 0;
			  view{
				  display: flex;
				  margin-bottom: 5rpx;
				  text{
					  color: #999999;
					  width: 21%;
				  }
				  view{
					  color: #002025;
					  width: 79%;
				  }
			  }
		  }
		  .time{
		  		  font-size: 24rpx;
		  		  color: #999999;
		  		  padding:20rpx 0;
		  		  border-top: 1rpx solid #DCDCDC;
		  }
	  }
	 
  }
  .add{
	  position: fixed;
	  z-index: 999;
	  bottom: 20rpx;
	  right: 0rpx;
	  width: 174rpx;
	  height: 174rpx;
  }
</style>