zhiyin.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <view class="content">
  3. <view class="content-item">
  4. <view class="item-title">一、点击首页【一键预约】,进入预约下单流程。</view>
  5. <view class="item-img"><image src="/static/stepOne.png" style="width: 230px;height: 200px;"></image></view>
  6. </view>
  7. <view class="content-item">
  8. <view class="item-title">二、录入预约时间、用户信息、预约分类、预估重量等信息,输入完毕点击【立刻下单】,即可提交订单。</view>
  9. <view class="item-img"><image src="/static/stepTwo.png" style="width: 230px;height: 200px;"></image></view>
  10. </view>
  11. <view class="content-item">
  12. <view class="item-title">三、订单提交完成,等待骑手上门。可在【待服务】列表查看待服务订单详情。</view>
  13. <view class="item-img"><image src="/static/stepThree.png" style="width: 230px;height: 200px;"></image></view>
  14. </view>
  15. <view class="content-item">
  16. <view class="item-title">四、骑手上门服务,录入回收品类和重量信息,自动生成应付金额,线下支付给用户。</view>
  17. <view class="item-img"><image src="/static/stepFour.png" style="width: 230px;height: 200px;"></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:not(last-child){
  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. margin-bottom: 60upx;
  39. }
  40. }
  41. }
  42. </style>