|
@@ -5,7 +5,7 @@
|
|
|
<!-- 操作按钮组件 -->
|
|
|
<view class="work-button-wrap">
|
|
|
<!-- 按钮 -->
|
|
|
- <view class="work-button flex-center" @click="startWork">
|
|
|
+ <view class="work-button flex-center">
|
|
|
<!-- 扇形进度条 -->
|
|
|
<view class="circle_process">
|
|
|
<view class="wrapper right"><view class="circle rightcircle" :style="{ transform: `rotate(${rdeg}deg)` }"></view></view>
|
|
@@ -18,7 +18,9 @@
|
|
|
</view>
|
|
|
<view class="cirle-three flex-center"></view>
|
|
|
<view class="cirle-free" :class="status == 'working' ? 'w-stop' : 'w-start'"></view>
|
|
|
- <view class="cirle-sex flex-center">{{ status == 'working' ? '紧急停止' : '点击启动' }}</view>
|
|
|
+ <view class="cirle-sex flex-center" @tap="startWork">
|
|
|
+ {{ status == 'working' ? '紧急停止' : '点击启动' }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<!-- 状态提示 -->
|
|
|
<view class="work-button-tips">设备准备就绪</view>
|
|
@@ -81,8 +83,8 @@
|
|
|
<view>3、如需再次服务,请退出车辆重新进入,再扫码支付洗车</view>
|
|
|
<view>4、如需帮助请联系客服</view>
|
|
|
</view>
|
|
|
- <view style="display: flex;padding: 20rpx 0;">
|
|
|
- <u-button @click="callPhone" style="width: 45%;border-radius: 0;">联系客服</u-button>
|
|
|
+ <view style="display: flex;padding: 20rpx 0;justify-content: center;">
|
|
|
+ <u-button @click="callPhone" style="width: 45%;border-radius: 0;margin-right: 5%;">联系客服</u-button>
|
|
|
<u-button @click="resetRabt" style="width: 45%;" type="error">洗车机归位</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -183,29 +185,29 @@ export default {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.circle_process .right {
|
|
|
- right: 1px;
|
|
|
+ right: 0;
|
|
|
}
|
|
|
.circle_process .left {
|
|
|
- left: 1px;
|
|
|
+ left: 0;
|
|
|
}
|
|
|
.circle_process .circle {
|
|
|
width: 390rpx;
|
|
|
height: 390rpx;
|
|
|
- border: 40rpx solid transparent;
|
|
|
- border-radius: 100%;
|
|
|
+ border: 20rpx solid transparent;
|
|
|
+ border-radius: 50%;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
transform: rotate(-135deg);
|
|
|
}
|
|
|
.circle_process .rightcircle {
|
|
|
- border-top: 40rpx solid red;
|
|
|
- border-right: 40rpx solid red;
|
|
|
- right: 0;
|
|
|
+ border-top: 20rpx solid red;
|
|
|
+ border-right: 20rpx solid red;
|
|
|
+ right: 1px;
|
|
|
}
|
|
|
.circle_process .leftcircle {
|
|
|
- border-bottom: 40rpx solid red;
|
|
|
- border-left: 40rpx solid red;
|
|
|
- left: 0;
|
|
|
+ border-bottom: 20rpx solid red;
|
|
|
+ border-left: 20rpx solid red;
|
|
|
+ left: 1px;
|
|
|
}
|
|
|
|
|
|
.work-pages {
|
|
@@ -230,7 +232,6 @@ export default {
|
|
|
border-radius: 100%;
|
|
|
width: 390rpx;
|
|
|
height: 390rpx;
|
|
|
- cursor: pointer;
|
|
|
.cirle-one {
|
|
|
background-image: linear-gradient(180deg, #555, #333 20%);
|
|
|
width: 370rpx;
|
|
@@ -291,6 +292,9 @@ export default {
|
|
|
color: #ffffff;
|
|
|
font-size: 28rpx;
|
|
|
color: #eee;
|
|
|
+ &:active {
|
|
|
+ background-image: linear-gradient(180deg, #888, #333 80%);
|
|
|
+ }
|
|
|
}
|
|
|
.w-start {
|
|
|
background: #ffc800;
|
|
@@ -298,11 +302,6 @@ export default {
|
|
|
.w-stop {
|
|
|
background: #ff0000;
|
|
|
}
|
|
|
- &:active {
|
|
|
- .cirle-sex {
|
|
|
- background-image: linear-gradient(180deg, #888, #333 80%);
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
.work-button-tips {
|
|
|
color: #eee;
|