ljs-turntable.vue 1.0 KB

1234567891011121314151617181920212223242526272829303132333435
  1. <template>
  2. <view class="ljs-turntable" v-if="show">
  3. <!-- <view class="close" @click="close">
  4. <image class="ico" :src="require('./images/ico_close.png')"></image>
  5. </view> -->
  6. <view class="box">
  7. </view>
  8. <view class="box2">
  9. </view>
  10. <view class="but" @click="go">
  11. <image class="pic" src="../../static/user/prizebtn.png">
  12. </image>
  13. </view>
  14. <view class="rotateBoard" id="rotateBoard" ref="rotateBoard"
  15. :style="transform !== null?'transform:'+ transform:''">
  16. <view v-for="(item, i) in truntableData" :key="i" class="sector"
  17. :style="{'transform': `rotate(${item.start}deg) skewY(${item.scale}deg)`, 'background': color[i]}">
  18. </view>
  19. <view class="name" v-for="(item, i) in truntableData" :key="`t${i}`"
  20. :style="{'transform': `rotate(${item.scaleText}deg)`, 'left': (310 + item.sin) + 'rpx', 'top': (160 - item.cos) +'rpx'}">
  21. {{item.name}}
  22. </view>
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. import index from './index.js'
  28. export default index
  29. </script>
  30. <style lang="scss" scoped>
  31. @import "./style.scss"
  32. </style>