step - 副本 (2).vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <view class="step-box">
  3. <movable-area>
  4. <movable-view direction="horizontal" @change="setRate"></movable-view>
  5. </movable-area>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. props:{
  11. width:{
  12. type:Number,
  13. default:0
  14. }
  15. },
  16. data() {
  17. return {
  18. stepRatio: 0,
  19. movePlace: null,
  20. };
  21. },
  22. methods: {
  23. setRate(e){
  24. console.log('setRate = ' , e.detail)
  25. }
  26. // touchStart(e) {
  27. // this.movePlace = e.changedTouches[0].clientX
  28. // },
  29. // touchEnd(e) {
  30. // // console.log('touchEnd = ' , e.changedTouches[0])
  31. // },
  32. // move(e) {
  33. // const PlaceX = e.changedTouches[0].clientX
  34. // console.log('move = ', PlaceX, this.movePlace)
  35. // if (PlaceX < this.movePlace) {
  36. // if (this.stepRatio > 0) {
  37. // this.stepRatio -= 1;
  38. // }
  39. // } else {
  40. // if (this.stepRatio < 100) {
  41. // this.stepRatio += 1;
  42. // }
  43. // }
  44. // this.movePlace = e.changedTouches[0].clientX;
  45. // }
  46. }
  47. }
  48. </script>
  49. <style lang="scss" scoped>
  50. .step-box {
  51. width: 100%;
  52. height: 54rpx;
  53. border-radius: 2rpx;
  54. movable-area {
  55. width: 100%;
  56. height: 100%;
  57. movable-view {
  58. width: 70%;
  59. height: 6rpx;
  60. background: #e6e6e6;
  61. }
  62. }
  63. // .step-link {
  64. // height: 6rpx;
  65. // background: #e6e6e6;
  66. // border-radius: 3rpx;
  67. // position: relative;
  68. // .step-bg {
  69. // position: absolute;
  70. // z-index: 1;
  71. // left: 0;
  72. // top: 0;
  73. // background-color: #05C175;
  74. // border-radius: 3rpx;
  75. // height: 100%;
  76. // }
  77. // .step-node {
  78. // position: absolute;
  79. // z-index: 1;
  80. // width: 100%;
  81. // height: 100%;
  82. // display: flex;
  83. // justify-content: space-between;
  84. // align-items: center;
  85. // .node-item{
  86. // width: 16rpx;
  87. // height: 16rpx;
  88. // background: #ffffff;
  89. // border: 4rpx solid #e6e6e6;
  90. // border-radius: 50%;
  91. // }
  92. // .active-node-item{
  93. // border-color: #05c175;
  94. // }
  95. // .now-node-item{
  96. // width: 22rpx;
  97. // height: 22rpx;
  98. // border: 6rpx solid #05c175;
  99. // }
  100. // }
  101. // }
  102. // .step-node-nums{
  103. // width: 100%;
  104. // display: flex;
  105. // justify-content: space-between;
  106. // padding-top: 10rpx;
  107. // .num-ratio{
  108. // flex: 1;
  109. // font-size: 20rpx;
  110. // font-family: PingFang SC, PingFang SC-Regular;
  111. // font-weight: 400;
  112. // text-align: center;
  113. // color: #808080;
  114. // line-height: 28rpx;
  115. // &:first-child{
  116. // text-align: left;
  117. // }
  118. // &:last-child{
  119. // text-align: right;
  120. // }
  121. // }
  122. // }
  123. }
  124. </style>