|
@@ -1,649 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="work-pages">
|
|
|
- <u-no-network></u-no-network>
|
|
|
- <!-- 工作控制按钮及进度 -->
|
|
|
- <view class="work-cons flex-center" style="flex-direction: column;">
|
|
|
- <!-- 操作按钮组件 -->
|
|
|
- <view class="work-button-wrap">
|
|
|
- <!-- 按钮 -->
|
|
|
- <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>
|
|
|
- <view class="wrapper left"><view class="circle leftcircle" :style="{ transform: `rotate(${ldeg}deg)` }"></view></view>
|
|
|
- </view>
|
|
|
- <view class="cirle-one"></view>
|
|
|
- <!-- 指针 -->
|
|
|
- <view class="cirle-two flex-center" v-for="item in 60" :key="item">
|
|
|
- <view class="sector" :style="{ transform: `rotate(${item * 6}deg)` }"></view>
|
|
|
- </view>
|
|
|
- <view class="cirle-three flex-center"></view>
|
|
|
- <view class="cirle-free" :class="status == 'working' ? 'w-stop' : 'w-start'"></view>
|
|
|
- <view class="cirle-free-1" :class="status == 'working' ? 'w-stop' : 'w-start'"></view>
|
|
|
- <view class="cirle-free-2" :class="status == 'working' ? 'w-stop' : 'w-start'"></view>
|
|
|
- <view class="cirle-sex flex-center" @tap="startWork">
|
|
|
- {{ status == 'working' ? '紧急停止' : '点击启动' }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 状态提示 -->
|
|
|
- <view class="work-button-tips">
|
|
|
- <u-notice-bar type="error" border-radius="50" color="#fff" bg-color="#666" mode="vertical" :list="[curWorkStutesText,curWorkStutesText]"></u-notice-bar>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 说明提示 -->
|
|
|
- <view class="work-tips">
|
|
|
- <view>
|
|
|
- <view class="work-dtime" v-show="status=='start'||status=='starting'">
|
|
|
- 距离订单强制完成还剩
|
|
|
- <u-count-down
|
|
|
- v-if="timestamp>0"
|
|
|
- @end="endDtime"
|
|
|
- separator="zh"
|
|
|
- font-size="36"
|
|
|
- separator-size="28"
|
|
|
- color="#ff0000"
|
|
|
- :timestamp="timestamp"
|
|
|
- :show-days="false"
|
|
|
- :show-hours="false"
|
|
|
- ></u-count-down>
|
|
|
- </view>
|
|
|
- <view class="work-remarks">
|
|
|
- <view class="title">说明:</view>
|
|
|
- <view v-if="status=='start'||status=='starting'">
|
|
|
- 支付完成后
|
|
|
- <text class="red">请尽快启动洗车服务</text>
|
|
|
- ,否则订单将在5分钟后自动完成。
|
|
|
- </view>
|
|
|
- <view v-else>
|
|
|
- <view>设备启动中请注意安全,如果设备工作中出现故障,请按紧急停止按钮或联系客服。</view>
|
|
|
- <view @click="callPhone">如有疑问,请联系客服:<text>{{kfMobile}}</text> </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 正在启动,归位弹框提示 -->
|
|
|
- <u-popup v-model="showStart" :mask-close-able="false" border-radius="10" mode="center" width="500rpx" height="400rpx">
|
|
|
- <view style="padding: 30rpx;display: flex;justify-content: center;text-align: center;">
|
|
|
- <!-- 启动中 -->
|
|
|
- <view v-if="status == 'starting'">
|
|
|
- <u-image width="216px" height="120px" src="/static/img/start.png"></u-image>
|
|
|
- <view style="padding: 15rpx;">洗车机正在启动...</view>
|
|
|
- </view>
|
|
|
- <!-- 停止中 -->
|
|
|
- <view v-if="status == 'stoping'">
|
|
|
- <u-image width="216px" height="120px" src="/static/img/start.png"></u-image>
|
|
|
- <view style="padding: 15rpx;">洗车机正在停止中...</view>
|
|
|
- </view>
|
|
|
- <!-- 归位中 -->
|
|
|
- <view v-if="status == 'reseting'">
|
|
|
- <u-image width="216px" height="120px" src="/static/img/reset.png"></u-image>
|
|
|
- <view style="padding: 15rpx;">洗车机正在归位中...</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
- <!-- 洗车完成 -->
|
|
|
- <u-modal v-model="showTips" @confirm="confirmFun" :content="content"></u-modal>
|
|
|
- <!-- 急停提示弹框 -->
|
|
|
- <u-popup v-model="showStop" :mask-close-able="false" border-radius="10" mode="center" width="80%">
|
|
|
- <view style="padding: 30rpx;text-align: center;">
|
|
|
- <view>
|
|
|
- <view style="font-weight: bold;">设备提示</view>
|
|
|
- <view style="display: flex;justify-content: center;padding: 10rpx 0;">
|
|
|
- <u-image width="165px" height="138px" src="/static/img/sbts.png"></u-image>
|
|
|
- </view>
|
|
|
- <u-divider>可能原因</u-divider>
|
|
|
- <view style="padding: 15rpx;text-align: left;">
|
|
|
- <view>1、洗车机紧急停止,本次服务结束</view>
|
|
|
- <view>2、因设备故障无法继续为您服务,所支付金额将退至您的支付账户</view>
|
|
|
- <view>3、如需再次服务,请退出车辆重新进入,再扫码支付洗车</view>
|
|
|
- <view>4、如需帮助请联系客服</view>
|
|
|
- </view>
|
|
|
- <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 :disabled="disabledResetBtn" @click="sendCmdRabt('reset')" style="width: 45%;" type="error">洗车机归位</u-button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- timestamp: 0, // 初始情况下5分钟后自动结束
|
|
|
- rdeg: -135, // 进度条初始角度
|
|
|
- ldeg: -135, /// 进度条初始角度
|
|
|
- step: 0, // 进度条增值,共60步
|
|
|
- status: 'linking', // 状态,linking 连接中,start 开始启动, starting 启动中,working 正在工作,stoping 停止中, reset 归位,reseting 归位中, end 洗车完成,error-end 异常结束
|
|
|
- curWorkStutesText: '设备准备就绪', // 当前机器运行的进度提示
|
|
|
- showTips: false, // 错误提示
|
|
|
- content: '', // 消息内容
|
|
|
- confirmFun: function(){}, // 消息确认弹框
|
|
|
- disabledResetBtn: false,
|
|
|
- showStart: false ,// 启动弹框提示
|
|
|
- showStop: false, // 急停提示
|
|
|
- washCarType: '', // 洗车服务类型,不同的类型对应的时间不一样
|
|
|
- washDuration: 7.5, // 机器运行步骤,共8步,等分60
|
|
|
- orderNo: '',// 订单编号
|
|
|
- kfMobile: ''
|
|
|
- };
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- console.log(this.$store.state.vuex_workStatus,"onShow")
|
|
|
- this.kfMobile = this.$store.state.vuex_kfMobile
|
|
|
- },
|
|
|
- onLoad(options) {
|
|
|
- console.log("onLoad")
|
|
|
- // 创建websocket
|
|
|
- this.$store.commit('$webSocket')
|
|
|
- uni.showLoading({
|
|
|
- title: '正在连接...',
|
|
|
- mask: true
|
|
|
- })
|
|
|
-
|
|
|
- // 监听网络状态
|
|
|
- uni.onNetworkStatusChange(function (res) {
|
|
|
- console.log(res.isConnected);
|
|
|
- console.log(res.networkType);
|
|
|
- if(res.isConnected){
|
|
|
- uni.showLoading({
|
|
|
- title: '正在连接...',
|
|
|
- mask: true
|
|
|
- })
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 第一次进入洗车页面
|
|
|
- if(this.$store.state.vuex_orderDjs == 0){
|
|
|
- // 记录当前的时间
|
|
|
- this.$u.vuex('vuex_orderDjs',new Date().getTime())
|
|
|
- }
|
|
|
-
|
|
|
- // 获取用户及订单信息
|
|
|
- this.washCarType = this.$store.state.vuex_itemCode
|
|
|
- this.orderNo = this.$store.state.vuex_orderNo
|
|
|
-
|
|
|
- // 监听消息
|
|
|
- uni.$on('wsMessage', this.watchMessage)
|
|
|
-
|
|
|
- // 更新进度条
|
|
|
- if(this.$store.state.vuex_workStatus == 'working'){
|
|
|
- this.step = this.$store.state.vuex_workStep
|
|
|
- this.loading()
|
|
|
- }
|
|
|
- // 如果是复位状态
|
|
|
- if(this.$store.state.vuex_workStatus == 'rest'){
|
|
|
- this.showReset()
|
|
|
- }
|
|
|
- if(this.$store.state.vuex_workStatus == 'starting'){
|
|
|
- this.status = 'start'
|
|
|
- this.$store.state.vuex_workStatus = 'start'
|
|
|
- // 更新当前倒计时
|
|
|
- this.updateDjs()
|
|
|
- }
|
|
|
- },
|
|
|
- onUnload() {
|
|
|
- // 关闭socket
|
|
|
- this.$store.commit("$closeWebsocket")
|
|
|
- uni.$off('wsMessage', this.watchMessage)
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 提示弹框
|
|
|
- showModal(content, fun){
|
|
|
- this.showTips = true
|
|
|
- this.content = content
|
|
|
- this.confirmFun = fun || function(){
|
|
|
- this.showTips=false
|
|
|
- }
|
|
|
- },
|
|
|
- // 电话客服
|
|
|
- callPhone () {
|
|
|
- uni.makePhoneCall({
|
|
|
- phoneNumber: this.$store.state.vuex_kfMobile
|
|
|
- })
|
|
|
- },
|
|
|
- // 更新当前倒计时
|
|
|
- updateDjs(){
|
|
|
- let od = this.$store.state.vuex_orderDjs
|
|
|
- console.log(od,'od')
|
|
|
- if(od!=0){
|
|
|
- let d = new Date().getTime() - od
|
|
|
- this.timestamp = 300 - d/1000
|
|
|
- if(this.timestamp<=0){
|
|
|
- this.endDtime()
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 倒计时结束时,自动完成洗车订单
|
|
|
- endDtime() {
|
|
|
- console.log('endDtime',this.status)
|
|
|
- if(this.status == 'start'||this.status=='starting'){
|
|
|
- this.washCarSuccess()
|
|
|
- }
|
|
|
- },
|
|
|
- // 监听socket消息
|
|
|
- watchMessage(e){
|
|
|
- if(typeof e == 'string'){
|
|
|
- // 连接成功后
|
|
|
- if(e=='connected'){
|
|
|
- console.log('connected---',this.$store.state.vuex_workStatus)
|
|
|
- uni.hideLoading()
|
|
|
- if(this.$store.state.vuex_workStatus == 'linking'){
|
|
|
- this.status = 'start'
|
|
|
- this.$u.vuex('vuex_workStatus','start')
|
|
|
- }
|
|
|
- }
|
|
|
- // 重连连接打开时发送获取当前状态的命令
|
|
|
- if(e=='connectOpen'){
|
|
|
- console.log('connectOpen---')
|
|
|
- this.sendCmdRabt("order_run_status")
|
|
|
- }
|
|
|
- }
|
|
|
- if(typeof e == 'object' && e.type == 'xcz'){
|
|
|
- console.log(e.data.level,e.data.msgCodeInfo,e.data.msgCodeSrc)
|
|
|
- // 自定义消息,不是机器返回的
|
|
|
- if(e.data.level == 'O'){
|
|
|
- // 启动超时
|
|
|
- if(e.data.msgCode == "PAUSE"){
|
|
|
- this.startWashCarFail(e.data.msgCodeInfo)
|
|
|
- }
|
|
|
- // 停车位置不正确,
|
|
|
- if(e.data.msgCode=="TCWZ_CW"){
|
|
|
- this.startWashCarFail(e.data.msgCodeInfo)
|
|
|
- }
|
|
|
- // 重新进入页面且还未启动洗车时
|
|
|
- if(e.data.msgCode == "PAID"){
|
|
|
- // 更新当前倒计时
|
|
|
- this.updateDjs()
|
|
|
- }
|
|
|
- // 订单异常
|
|
|
- if(e.data.msgCode == "0"){
|
|
|
- // 更新当前倒计时
|
|
|
- this.devError(e.data.msgCodeInfo)
|
|
|
- }
|
|
|
- // 洗车完成
|
|
|
- if(e.data.msgCode=="FINISHED"){
|
|
|
- this.washCarSuccess()
|
|
|
- }
|
|
|
- }
|
|
|
- // 进度消息
|
|
|
- if(e.data.level == 'C'&&this.status!="rest"){
|
|
|
- this.curWorkStutesText= e.data.msgCodeInfo
|
|
|
- if(e.data.msgCodeInfo != '开始洗车'){
|
|
|
- // 启动成功
|
|
|
- this.startWashCarSuccess()
|
|
|
- }
|
|
|
- // 更新进度条
|
|
|
- this.step = e.data.msgCodeSrc?Number(e.data.msgCodeSrc.split('-')[1]):0
|
|
|
- this.$store.state.vuex_workStep = this.step
|
|
|
- this.loading()
|
|
|
- // 洗车完成
|
|
|
- if(e.data.msgCode=="XCWC" && this.status != 'end'){
|
|
|
- this.washCarSuccess()
|
|
|
- }
|
|
|
- }
|
|
|
- // 错误消息
|
|
|
- if(e.data.level == 'F'&&this.status!="rest"){
|
|
|
- this.curWorkStutesText= e.data.msgCodeInfo
|
|
|
- // 启动成功
|
|
|
- this.startWashCarSuccess()
|
|
|
- // 显示复位提示弹框
|
|
|
- this.showReset()
|
|
|
- }
|
|
|
- // 急停
|
|
|
- if(e.data.level == 'A'){
|
|
|
- // 设备急停
|
|
|
- if(e.data.msgCode=="JJTZ"){
|
|
|
- this.devError(e.data.msgCodeInfo)
|
|
|
- }
|
|
|
- // 小程序紧急急停
|
|
|
- else if(e.data.msgCode=="XCX_JJTZ"){
|
|
|
- this.curWorkStutesText= e.data.msgCodeInfo
|
|
|
- // 显示复位提示弹框
|
|
|
- this.showReset()
|
|
|
- }
|
|
|
- else{
|
|
|
- if(this.status == 'working'){
|
|
|
- this.devError()
|
|
|
- }else{
|
|
|
- this.showModal(e.data.msgCodeInfo)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // 复位状态
|
|
|
- if(e.data.level == 'D'){
|
|
|
- // 开始复位中
|
|
|
- if(e.data.msgCode=="FW_START"){
|
|
|
- this.reseting()
|
|
|
- }
|
|
|
- // 复位成功
|
|
|
- else if(e.data.msgCode=="FW_SUCC"){
|
|
|
- this.resetRabtSuccess()
|
|
|
- }
|
|
|
- // 设备离线,设备异常,暂停营业或复位失败,设备使用中
|
|
|
- else if(e.data.msgCode=="PAUSE" || e.data.msgCode == "FW_FAIL" || e.data.msgCode == 'ERROR' || e.data.msgCode == 'SB_SYZ'){
|
|
|
- this.devError(e.data.msgCodeInfo)
|
|
|
- this.disabledResetBtn = false
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 重置到进度条初始状态
|
|
|
- resetLoadingStatus(){
|
|
|
- this.rdeg= -135;
|
|
|
- this.ldeg= -135;
|
|
|
- },
|
|
|
- // 洗车机进度条动画
|
|
|
- loading() {
|
|
|
- if(this.step==16){this.step = 8}
|
|
|
- let second = this.step*this.washDuration
|
|
|
- if (second <= 30) {
|
|
|
- this.rdeg = -135 + 6 * second;
|
|
|
- this.ldeg = -135;
|
|
|
- } else {
|
|
|
- this.rdeg = 45;
|
|
|
- this.ldeg = -135 + 6 * (second - 30);
|
|
|
- }
|
|
|
- },
|
|
|
- // 操作按钮
|
|
|
- startWork() {
|
|
|
- let _this = this
|
|
|
- console.log(this.status)
|
|
|
- // 启动
|
|
|
- if (this.status == 'start') {
|
|
|
- this.sendCmdRabt("start")
|
|
|
- this.starting()
|
|
|
- }
|
|
|
- // 急停
|
|
|
- if (this.status == 'working') {
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '确定紧急停止洗车机?',
|
|
|
- success: function (res) {
|
|
|
- if (res.confirm) {
|
|
|
- _this.sendCmdRabt("stop")
|
|
|
- _this.stoping()
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- // 启动中
|
|
|
- starting(){
|
|
|
- this.showStart = true;
|
|
|
- this.status = 'starting';
|
|
|
- this.$u.vuex('vuex_workStatus','starting')
|
|
|
- this.curWorkStutesText='设备启动中';
|
|
|
- },
|
|
|
- // 启动成功
|
|
|
- startWashCarSuccess(){
|
|
|
- this.showStart = false;
|
|
|
- this.status = 'working';
|
|
|
- this.$u.vuex('vuex_workStatus','working')
|
|
|
- },
|
|
|
- // 启动超时或失败
|
|
|
- startWashCarFail(msg){
|
|
|
- this.showStart = false;
|
|
|
- this.status = 'start';
|
|
|
- this.$u.vuex('vuex_workStatus','start')
|
|
|
- this.curWorkStutesText=msg
|
|
|
- this.showModal(msg)
|
|
|
- },
|
|
|
- // 发送命令,start 启动,stop 急停,reset 归位
|
|
|
- sendCmdRabt(cmdCode){
|
|
|
- // 归位命令
|
|
|
- let cmd = {
|
|
|
- orderNo: this.orderNo, // 订单编号
|
|
|
- operateType: cmdCode, //操作命令
|
|
|
- washType: this.washCarType,// 洗车模式
|
|
|
- }
|
|
|
- this.$store.commit("$sendWebsocket",JSON.stringify(cmd))
|
|
|
-
|
|
|
- // 点击复位后
|
|
|
- if(cmdCode == 'reset'){
|
|
|
- this.disabledResetBtn = true
|
|
|
- }
|
|
|
- },
|
|
|
- // 停止中
|
|
|
- stoping(){
|
|
|
- this.showStart = true;
|
|
|
- this.status = 'stoping';
|
|
|
- this.$u.vuex('vuex_workStatus','stoping')
|
|
|
- this.curWorkStutesText='设备停止中';
|
|
|
- },
|
|
|
- // 停止成功后或有F类错误时,显示复位弹框
|
|
|
- showReset(){
|
|
|
- this.showStart = false;
|
|
|
- this.showStop = true;
|
|
|
- this.status = 'reset';
|
|
|
- this.$u.vuex('vuex_workStatus','reset')
|
|
|
- this.resetLoadingStatus();
|
|
|
- },
|
|
|
- // 归位中
|
|
|
- reseting(){
|
|
|
- this.status = 'reseting';
|
|
|
- this.$u.vuex('vuex_workStatus','reseting')
|
|
|
- this.showStart = true;
|
|
|
- this.showStop = false;
|
|
|
- this.disabledResetBtn = false
|
|
|
- },
|
|
|
- // 归位结束后
|
|
|
- resetRabtSuccess(){
|
|
|
- this.curWorkStutesText='设备已归位';
|
|
|
- this.status = 'end';
|
|
|
- this.$u.vuex('vuex_workStatus','end')
|
|
|
- // 关闭socket
|
|
|
- this.$store.commit("$closeWebsocket");
|
|
|
- // 跳转到复位成功页面
|
|
|
- uni.redirectTo({
|
|
|
- url:"/pages/work/success/success?type=1"
|
|
|
- })
|
|
|
- },
|
|
|
- // 洗车完成
|
|
|
- washCarSuccess(){
|
|
|
- this.status = 'end';
|
|
|
- this.$u.vuex('vuex_workStatus','end')
|
|
|
- this.curWorkStutesText='洗车已结束';
|
|
|
- this.resetLoadingStatus();
|
|
|
- // 显示弹框
|
|
|
- this.showModal('洗车已结束',function(){
|
|
|
- // 跳转到成功页面
|
|
|
- uni.redirectTo({
|
|
|
- url:"/pages/work/success/success?type=0"
|
|
|
- })
|
|
|
- })
|
|
|
- // 关闭socket
|
|
|
- this.$store.commit("$closeWebsocket")
|
|
|
- },
|
|
|
- // 设备异常
|
|
|
- devError(msg){
|
|
|
- this.showStart = false;
|
|
|
- this.showStop = false;
|
|
|
- this.status = "error-end";
|
|
|
- this.$u.vuex('vuex_workStatus','error-end')
|
|
|
- this.resetLoadingStatus();
|
|
|
- // 显示弹框
|
|
|
- this.showModal(msg || '设备异常,请联系客服',function () {
|
|
|
- uni.navigateBack()
|
|
|
- })
|
|
|
- // 关闭socket
|
|
|
- this.$store.commit("$closeWebsocket");
|
|
|
- },
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-// 扇形圆环
|
|
|
-.circle_process {
|
|
|
- position: absolute;
|
|
|
- width: 390rpx;
|
|
|
- height: 390rpx;
|
|
|
-}
|
|
|
-.circle_process .wrapper {
|
|
|
- width: 195rpx;
|
|
|
- height: 390rpx;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-.circle_process .right {
|
|
|
- right: 0;
|
|
|
-}
|
|
|
-.circle_process .left {
|
|
|
- left: 0;
|
|
|
-}
|
|
|
-.circle_process .circle {
|
|
|
- width: 390rpx;
|
|
|
- height: 390rpx;
|
|
|
- border: 20rpx solid transparent;
|
|
|
- border-radius: 50%;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- transform: rotate(-135deg);
|
|
|
-}
|
|
|
-.circle_process .rightcircle {
|
|
|
- border-top: 20rpx solid #4CD964;
|
|
|
- border-right: 20rpx solid #4CD964;
|
|
|
- right: 1px;
|
|
|
-}
|
|
|
-.circle_process .leftcircle {
|
|
|
- border-bottom: 20rpx solid #4CD964;
|
|
|
- border-left: 20rpx solid #4CD964;
|
|
|
- left: 1px;
|
|
|
-}
|
|
|
-// 动画
|
|
|
-@keyframes mymove {
|
|
|
- 0% {
|
|
|
- transform: scale(1); /*开始为原始大小*/
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- 50% {
|
|
|
- transform: scale(1.2); /*放大1.1倍*/
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.work-pages {
|
|
|
- width: 100%;
|
|
|
- .flex-center {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .work-cons {
|
|
|
- height: 50vh;
|
|
|
- background-image: linear-gradient(0deg, #666, #333);
|
|
|
- border-bottom-left-radius: 500rpx 50rpx;
|
|
|
- border-bottom-right-radius: 500rpx 50rpx;
|
|
|
- position: relative;
|
|
|
- // 按钮
|
|
|
- .work-button-wrap {
|
|
|
- width: 400rpx;
|
|
|
- margin-top: -50rpx;
|
|
|
- .work-button {
|
|
|
- background: #666;
|
|
|
- border-radius: 100%;
|
|
|
- width: 390rpx;
|
|
|
- height: 390rpx;
|
|
|
- box-shadow:inset 0rpx 2rpx 10rpx #000;
|
|
|
- .cirle-one {
|
|
|
- background-image: linear-gradient(180deg, #666, #333 30%);
|
|
|
- width: 370rpx;
|
|
|
- height: 370rpx;
|
|
|
- border-radius: 100%;
|
|
|
- position: absolute;
|
|
|
- box-shadow: 0rpx 2rpx 10rpx #333;
|
|
|
- }
|
|
|
- .cirle-two {
|
|
|
- width: 370rpx;
|
|
|
- height: 370rpx;
|
|
|
- border-radius: 100%;
|
|
|
- position: absolute;
|
|
|
- .sector {
|
|
|
- transform-origin: center center;
|
|
|
- width: 350rpx;
|
|
|
- height: 5rpx;
|
|
|
- background: #777;
|
|
|
- }
|
|
|
- }
|
|
|
- .cirle-three {
|
|
|
- background: #444;
|
|
|
- width: 280rpx;
|
|
|
- height: 280rpx;
|
|
|
- border-radius: 100%;
|
|
|
- position: absolute;
|
|
|
- box-shadow: inset 0rpx 3rpx 10rpx #000;
|
|
|
- }
|
|
|
- .cirle-free, .cirle-free-1, .cirle-free-2 {
|
|
|
- width: 230rpx;
|
|
|
- height: 230rpx;
|
|
|
- border-radius: 100%;
|
|
|
- position: absolute;
|
|
|
- animation: mymove 5s infinite;
|
|
|
- }
|
|
|
- .cirle-free-1{
|
|
|
- width: 210rpx;
|
|
|
- height: 210rpx;
|
|
|
- animation: mymove 4.5s infinite;
|
|
|
- }
|
|
|
- .cirle-free-2{
|
|
|
- width: 190rpx;
|
|
|
- height: 190rpx;
|
|
|
- animation: mymove 4s infinite;
|
|
|
- }
|
|
|
- .cirle-sex {
|
|
|
- background-image: linear-gradient(180deg, #888, #333 50%);
|
|
|
- box-shadow: 0rpx 5rpx 10rpx #333;
|
|
|
- width: 210rpx;
|
|
|
- height: 210rpx;
|
|
|
- border-radius: 100%;
|
|
|
- position: absolute;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #eee;
|
|
|
- &:active {
|
|
|
- background-image: linear-gradient(-180deg, #666, #333 80%);
|
|
|
- }
|
|
|
- }
|
|
|
- .w-start {
|
|
|
- background: #ffc800;
|
|
|
- }
|
|
|
- .w-stop {
|
|
|
- background: #ff0000;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .work-button-tips {
|
|
|
- width: 80%;
|
|
|
- color: #eee;
|
|
|
- text-align: center;
|
|
|
- padding-top: 30rpx;
|
|
|
- .u-swiper-item{
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .work-tips {
|
|
|
- padding: 45rpx;
|
|
|
- .work-dtime {
|
|
|
- text-align: center;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 34rpx;
|
|
|
- }
|
|
|
- .work-remarks {
|
|
|
- padding-top: 50rpx;
|
|
|
- .red {
|
|
|
- color: red;
|
|
|
- }
|
|
|
- .title {
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|