index.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. <template>
  2. <view class="work-pages">
  3. <!-- 工作控制按钮及进度 -->
  4. <view class="work-cons flex-center">
  5. <!-- 操作按钮组件 -->
  6. <view class="work-button-wrap">
  7. <!-- 按钮 -->
  8. <view class="work-button flex-center" @click="startWork">
  9. <!-- 扇形 -->
  10. <view class="circle_process">
  11. <view class="wrapper right">
  12. <view class="circle rightcircle"></view>
  13. </view>
  14. <view class="wrapper left">
  15. <view class="circle leftcircle" id="leftcircle"></view>
  16. </view>
  17. </view>
  18. <view class="cirle-one"></view>
  19. <view class="cirle-two flex-center" v-for="item in 60" >
  20. <view class="sector" :style="{transform: `rotate(${item*6}deg)`}"></view>
  21. </view>
  22. <view class="cirle-three flex-center"></view>
  23. <view class="cirle-free w-start"></view>
  24. <view class="cirle-sex flex-center">
  25. 点击启动
  26. </view>
  27. </view>
  28. <!-- 状态提示 -->
  29. <view class="work-button-tips">设备准备就绪</view>
  30. </view>
  31. </view>
  32. <!-- 说明提示 -->
  33. <view class="work-tips">
  34. <view class="work-dtime">
  35. 距离订单强制完成还剩
  36. <u-count-down @change="changeDtime" separator="zh" font-size="36" separator-size="28" color="#ff0000" :timestamp="timestamp" :show-days="false" :show-hours="false"></u-count-down>
  37. </view>
  38. <view class="work-remarks">
  39. <view class="title">说明:</view>
  40. <view>
  41. 支付完成后<text class="red">请尽快启动洗车服务</text>,否则订单将在5分钟后自动完成。
  42. </view>
  43. </view>
  44. </view>
  45. </view>
  46. </template>
  47. <script>
  48. export default {
  49. data() {
  50. return {
  51. timestamp: 300
  52. };
  53. },
  54. methods:{
  55. // 倒计时监听,0 时自动结束订单
  56. changeDtime(time){
  57. console.log(time)
  58. },
  59. // 启动按钮
  60. startWork(){
  61. },
  62. // 进度条动画
  63. loading(){
  64. }
  65. }
  66. }
  67. </script>
  68. <style lang="scss">
  69. // 扇形圆环
  70. .circle_process{
  71. position: absolute;
  72. width: 380rpx;
  73. height : 380rpx;
  74. }
  75. .circle_process .wrapper{
  76. width: 190rpx;
  77. height: 380rpx;
  78. position: absolute;
  79. top:0;
  80. overflow: hidden;
  81. }
  82. .circle_process .right{
  83. right:0;
  84. }
  85. .circle_process .left{
  86. left:0;
  87. }
  88. .circle_process .circle{
  89. width: 380rpx;
  90. height: 380rpx;
  91. border:20rpx solid transparent;
  92. border-radius: 50%;
  93. position: absolute;
  94. top:0;
  95. transform : rotate(-135deg);
  96. }
  97. .circle_process .rightcircle{
  98. border-top:20rpx solid red;
  99. border-right:20rpx solid red;
  100. right:0;
  101. -webkit-animation: circle_right 25s linear infinite;
  102. }
  103. .circle_process .leftcircle{
  104. border-bottom:20rpx solid red;
  105. border-left:20rpx solid red;
  106. left:0;
  107. -webkit-animation: circle_left 25s linear infinite;
  108. }
  109. @-webkit-keyframes circle_right{
  110. 0%{
  111. -webkit-transform: rotate(-135deg);
  112. }
  113. 50%,100%{
  114. -webkit-transform: rotate(45deg);
  115. }
  116. }
  117. @-webkit-keyframes circle_left{
  118. 0%,50%{
  119. -webkit-transform: rotate(-135deg);
  120. }
  121. 100%{
  122. -webkit-transform: rotate(45deg);
  123. }
  124. }
  125. .work-pages{
  126. width: 100%;
  127. .flex-center{
  128. display: flex;
  129. align-items: center;
  130. justify-content: center;
  131. }
  132. .work-cons{
  133. height: 60vh;
  134. background-image: linear-gradient(0deg, #666, #333);
  135. border-bottom-left-radius: 300rpx 30rpx;
  136. border-bottom-right-radius: 300rpx 30rpx;
  137. position: relative;
  138. // 按钮
  139. .work-button-wrap{
  140. width: 400rpx;
  141. margin-top: -50rpx;
  142. .work-button{
  143. background: #aaa;
  144. border-radius: 100%;
  145. width: 380rpx;
  146. height: 380rpx;
  147. cursor: pointer;
  148. .cirle-one{
  149. background: #444;
  150. width: 370rpx;
  151. height: 370rpx;
  152. border-radius: 100%;
  153. position: absolute;
  154. }
  155. .cirle-two{
  156. width: 370rpx;
  157. height: 370rpx;
  158. border-radius: 100%;
  159. position: absolute;
  160. .sector {
  161. transform-origin:center center;
  162. width: 350rpx;
  163. height: 5rpx;
  164. background: #aaa;
  165. }
  166. }
  167. .cirle-three{
  168. background: #444;
  169. width: 280rpx;
  170. height: 280rpx;
  171. border-radius: 100%;
  172. position: absolute;
  173. }
  174. .cirle-free{
  175. width: 230rpx;
  176. height: 230rpx;
  177. border-radius: 100%;
  178. position: absolute;
  179. animation:mymove 5s infinite;
  180. }
  181. @keyframes mymove
  182. {
  183. 0%{
  184. transform: scale(1); /*开始为原始大小*/
  185. opacity:1
  186. }
  187. 25%{
  188. transform: scale(1.1); /*放大1.1倍*/
  189. opacity:0.5
  190. }
  191. 50%{
  192. transform: scale(1);
  193. opacity:1
  194. }
  195. 75%{
  196. transform: scale(1.1);
  197. opacity:0.5
  198. }
  199. }
  200. .cirle-sex{
  201. background-image: linear-gradient(-180deg, #888, #333 80%);
  202. width: 210rpx;
  203. height: 210rpx;
  204. border-radius: 100%;
  205. position: absolute;
  206. color: #FFFFFF;
  207. font-size: 28rpx;
  208. color: #eee;
  209. }
  210. .w-start{
  211. background: #ffcc00;
  212. }
  213. .w-stop{
  214. background: #ff0000;
  215. }
  216. &:active{
  217. .cirle-sex{
  218. background-image: linear-gradient(180deg, #888, #333 80%);
  219. }
  220. }
  221. }
  222. .work-button-tips{
  223. color: #eee;
  224. text-align: center;
  225. padding-top: 30rpx;
  226. }
  227. }
  228. }
  229. .work-tips{
  230. padding: 45rpx;
  231. .work-dtime{
  232. text-align: center;
  233. font-weight: bold;
  234. font-size: 34rpx;
  235. }
  236. .work-remarks{
  237. padding-top: 50rpx;
  238. .red{
  239. color: red;
  240. }
  241. .title{
  242. font-weight: bold;
  243. }
  244. }
  245. }
  246. }
  247. </style>