zhiyin.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <view class="content">
  3. <view class="content-item">
  4. <view class="item-title">一、点击首页【一键预约】,进入预约 下单流程。</view>
  5. <view class="item-img"><u-image src="/static/stepOne.png" width="460rpx" height="400rpx"></u-image></view>
  6. </view>
  7. <view class="content-item">
  8. <view class="item-title">二、录入预约时间、用户信息、预约分 类、预估重量等信息,输入完毕点击【 立刻下单】,即可提交订单。</view>
  9. <view class="item-img"><u-image src="/static/stepTwo.png" width="460rpx" height="400rpx"></u-image></view>
  10. </view>
  11. <view class="content-item">
  12. <view class="item-title">三、订单提交完成,等待骑手上门。 可在【待服务】列表查看待服务订单 详情。</view>
  13. <view class="item-img"><u-image src="/static/stepThree.png" width="460rpx" height="400rpx"></u-image></view>
  14. </view>
  15. <view class="content-item">
  16. <view class="item-title">四、骑手上门服务,录入回收品类和 重量信息,自动生成应付金额,线下 支付给用户。</view>
  17. <view class="item-img"><u-image src="/static/stepFour.png" width="460rpx" height="400rpx"></u-image></view>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. </script>
  23. <style lang="less">
  24. .content{
  25. width: 100%;
  26. height: 100vh;
  27. padding: 60upx;
  28. display: flex;
  29. flex-direction: column;
  30. .content-item{
  31. text-align: center;
  32. margin-bottom: 120upx;
  33. .item-title{
  34. font-size: 18px;
  35. font-family: PingFang SC;
  36. font-weight: 500;
  37. color: #191919;
  38. .item-img{
  39. margin: 60upx auto 120upx;
  40. // display: flex;
  41. // justify-content: center;
  42. .img{
  43. // width: 100%;
  44. // height: 100%;
  45. }
  46. }
  47. }
  48. }
  49. }
  50. </style>