You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

nav-bg-car1.vue 1.4KB

2 jaren geleden
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <view class="">
  3. <image :src="`${$imgUrl}applyCard/bg-nav.png`" style='height: 353rpx;width: 100%;'></image>
  4. <view class="progress-wrap">
  5. <view class="item-circle">1</view>
  6. <view class="item-line"></view>
  7. <view class="item-circle-no">2</view>
  8. <view class="item-line"></view>
  9. <view class="item-circle-no">3</view>
  10. <view class="item-line"></view>
  11. <view class="item-circle-no">4</view>
  12. <view class="item-line"></view>
  13. <view class="item-circle-no">5</view>
  14. </view>
  15. </view>
  16. <view class="tab">
  17. <view class="img-pos">
  18. <view class="img-flex">
  19. <view class="">
  20. <image class="car-img" :src="`${$imgUrl}applyCard/car.png`"></image>
  21. </view>
  22. <view class="">
  23. <image class="flag-img" :src="`${$imgUrl}applyCard/flag.png`"></image>
  24. </view>
  25. </view>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. </script>
  31. <style lang="scss" scoped>
  32. .tab {
  33. padding-right: 30rpx;
  34. padding-top: -40rpx;
  35. margin-top: -50rpx;
  36. background: #ffffff;
  37. border-radius: 30rpx 30rpx 0rpx 30rpx;
  38. position: relative;
  39. height: 100rpx;
  40. .img-pos {
  41. position: absolute;
  42. left: 52rpx;
  43. top: -38rpx;
  44. right: 50rpx;
  45. .img-flex {
  46. display: flex;
  47. justify-content: space-between;
  48. align-items: center;
  49. .car-img {
  50. width: 86rpx;
  51. height: 42rpx;
  52. }
  53. .flag-img {
  54. width: 30rpx;
  55. height: 35rpx;
  56. }
  57. }
  58. }
  59. }
  60. </style>