This commit is contained in:
parent
d7486dd3c6
commit
4d111e3c95
|
|
@ -1,24 +1,31 @@
|
|||
<template>
|
||||
<view class="box" id="box_minute">
|
||||
<view class="top child text" id="top">{{ topTime }}</view>
|
||||
<view class="flip child" id="flip" :style="{ transform: transformInfo }">
|
||||
<view
|
||||
class="flip_face child text"
|
||||
:style="{ zIndex: faceZindex || 0 }"
|
||||
id="flip_face"
|
||||
>
|
||||
{{ bottomTime }}
|
||||
</view>
|
||||
<view
|
||||
class="flip_back child text"
|
||||
:style="backZindex ? { zIndex: backZindex } : {}"
|
||||
id="flip_back"
|
||||
>
|
||||
{{ topTime }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom child text" id="bottom">{{ bottomTime }}</view>
|
||||
</view>
|
||||
<view style="display: flex;align-items: center;" :class="!isDown?'red':''">
|
||||
<view class="box" id="box_minute" @click="chongzhi()">
|
||||
<view class="top child text" id="top" >{{ Math.floor(topTime / 60) }}</view>
|
||||
<view class="flip child" id="flip" :style="{ transform: transformInfomin?transformInfo:'' }">
|
||||
<view class="flip_face child text" :style="{ zIndex: faceZindexmin || 0 }" id="flip_face" >
|
||||
{{ Math.floor(bottomTime / 60) }}
|
||||
</view>
|
||||
<view class="flip_back child text" :style="backZindex&&transformInfomin ? { zIndex: backZindex } : {}" id="flip_back" >
|
||||
{{ Math.floor(topTime / 60) }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom child text" id="bottom" >{{ Math.floor(bottomTime / 60) }}</view>
|
||||
</view>
|
||||
:
|
||||
<view class="box" id="box_minute" :class="!isDown?'red':''">
|
||||
<view class="top child text" id="top">{{ (topTime % 60)<10?'0'+(topTime % 60) : (topTime % 60) }}</view>
|
||||
<view class="flip child" id="flip" :style="{ transform: transformInfo }" >
|
||||
<view class="flip_face child text" :style="{ zIndex: faceZindex || 0 }" id="flip_face" >
|
||||
{{ (bottomTime % 60)<10? '0'+(bottomTime % 60) : (bottomTime % 60)}}
|
||||
</view>
|
||||
<view class="flip_back child text" :style="backZindex ? { zIndex: backZindex } : {}" id="flip_back" >
|
||||
{{ (topTime % 60)<10?'0'+(topTime % 60) : (topTime % 60) }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom child text" id="bottom">{{ (bottomTime % 60)<10? '0'+(bottomTime % 60) : (bottomTime % 60) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -27,13 +34,13 @@ export default {
|
|||
initTime: {
|
||||
// 初始时间
|
||||
type: Number,
|
||||
default: 60,
|
||||
},
|
||||
isDown: {
|
||||
// 是否是倒计时
|
||||
type: Boolean,
|
||||
default: true,
|
||||
default: 10,
|
||||
},
|
||||
// isDown: {
|
||||
// // 是否是倒计时
|
||||
// type: Boolean,
|
||||
// default: true,
|
||||
// },
|
||||
threshold: {
|
||||
// 阈值
|
||||
type: Number,
|
||||
|
|
@ -47,21 +54,31 @@ export default {
|
|||
faceZindex: 1,
|
||||
backZindex: 0,
|
||||
transformInfo: "perspective(500rpx) rotateX(0deg)",
|
||||
transformInfomin: false,
|
||||
faceZindexmin: 1,
|
||||
backZindexmin: 0,
|
||||
mintime:0,
|
||||
timer: null,
|
||||
timerTwo: null,
|
||||
isDown:true
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.cycle();
|
||||
},
|
||||
methods: {
|
||||
chongzhi(){
|
||||
this.initTime = 185
|
||||
this.cycle();
|
||||
},
|
||||
OneCycle(n) {
|
||||
// 一次翻页的周期
|
||||
let num = 0;
|
||||
this.transformInfo = "perspective(500rpx) rotateX(0deg)";
|
||||
this.faceZindex = 1;
|
||||
this.backZindex = 0;
|
||||
this.bottomTime = n;
|
||||
this.bottomTime = this.isDown? n : n-1;
|
||||
let minutes = Math.floor(n / 60);
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
|
|
@ -74,27 +91,41 @@ export default {
|
|||
}
|
||||
|
||||
if (num === 1) {
|
||||
if (this.isDown) {
|
||||
this.topTime = n - 1 < this.threshold ? n : n - 1; // 60 和 0 在时间里，其实是一样的
|
||||
} else {
|
||||
this.topTime = n + 1 > this.threshold ? n : n + 1; // 60 和 0 在时间里，其实是一样的
|
||||
}
|
||||
}
|
||||
if (this.isDown) {
|
||||
this.topTime = n - 1 < this.threshold ? n : n - 1; // 60 和 0 在时间里，其实是一样的
|
||||
this.mintime = Math.floor(this.topTime / 60)
|
||||
if(minutes != this.mintime ){
|
||||
this.transformInfomin = true;
|
||||
}else{
|
||||
this.transformInfomin = false;
|
||||
}
|
||||
} else {
|
||||
this.topTime = n + 1 > this.threshold ? n : n + 1;
|
||||
if(minutes != this.mintime ){
|
||||
this.transformInfomin = true;
|
||||
}else{
|
||||
this.transformInfomin = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.faceZindex = num <= 25 ? 1 : 0;
|
||||
this.backZindex = num <= 25 ? 0 : 1;
|
||||
|
||||
this.transformInfo = `perspective(500rpx) rotateX(-${(180 * num) /
|
||||
50}deg)`;
|
||||
}, 20); // 将一秒钟分成50份。
|
||||
this.transformInfo = `perspective(500rpx) rotateX(-${(180 * num) / 50}deg)`;
|
||||
|
||||
}, 20); // 将一秒钟分成50份。
|
||||
},
|
||||
cycle() {
|
||||
let minutes = Math.floor(this.initTime / 60);
|
||||
let time = this.initTime;
|
||||
console.log(minutes,time)
|
||||
this.timerTwo = setInterval(() => {
|
||||
const flag = this.isDown ? time - 1 : time + 1;
|
||||
if (flag === this.threshold) {
|
||||
clearInterval(this.timerTwo);
|
||||
clearInterval(this.timer);
|
||||
this.isDown = false
|
||||
// clearInterval(this.timerTwo);
|
||||
// clearInterval(this.timer);
|
||||
}
|
||||
this.OneCycle(time);
|
||||
this.isDown ? time-- : time++;
|
||||
|
|
@ -104,36 +135,27 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
<style scoped lang="less">
|
||||
.red{
|
||||
color: red !important;
|
||||
view{
|
||||
color: red !important;
|
||||
}
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-flow: wrap-reverse;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.box .child {
|
||||
width: 130rpx;
|
||||
height: 100rpx;
|
||||
width: 3.4vw;
|
||||
height: 1.6vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.box > .top {
|
||||
background-color: #333;
|
||||
line-height: 200rpx;
|
||||
background-color: #DCDCDC;
|
||||
line-height: 3.2vw;
|
||||
border-bottom: 2rpx solid #fff;
|
||||
border-radius: 4rpx 4rpx 0 0;
|
||||
}
|
||||
|
|
@ -148,22 +170,22 @@ export default {
|
|||
|
||||
.box .flip .flip_face {
|
||||
position: absolute;
|
||||
background-color: #333;
|
||||
line-height: 200rpx;
|
||||
background-color: #DCDCDC;
|
||||
line-height: 3.2vw;
|
||||
z-index: 1;
|
||||
border-bottom: 2rpx solid #fff;
|
||||
}
|
||||
|
||||
.box .flip .flip_back {
|
||||
position: absolute;
|
||||
background-color: #333;
|
||||
background-color: #DCDCDC;
|
||||
line-height: 0rpx;
|
||||
transform: perspective(500rpx) rotateX(0deg) rotateY(-180deg) rotate(180deg);
|
||||
border-top: 2rpx solid #fff;
|
||||
}
|
||||
|
||||
.box .bottom {
|
||||
background-color: #333;
|
||||
background-color: #DCDCDC;
|
||||
line-height: 0rpx;
|
||||
border-top: 2rpx solid #fff;
|
||||
border-radius: 0 0 4rpx 4rpx;
|
||||
|
|
@ -171,8 +193,8 @@ export default {
|
|||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 100rpx;
|
||||
font-size: 2.2vw;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,18 @@
|
|||
{{qcobj.directiveName}}
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view style="height: 78%;">
|
||||
<view class="big-time">
|
||||
{{qcobj.startTime?.slice(11, 16) }} - {{qcobj.endTime?.slice(11, 16) }}
|
||||
<view>
|
||||
{{qcobj.startTime?.slice(11, 16) }}
|
||||
<!-- - {{qcobj.endTime?.slice(11, 16) }} -->
|
||||
</view>
|
||||
<view>
|
||||
<timeing></timeing>
|
||||
</view>
|
||||
</view>
|
||||
<view class="names">
|
||||
{{ qcobj?.directiveName }}
|
||||
</view>
|
||||
<view class="icon-people">
|
||||
<image class="people-img" src="/static/index/newindex/leftmenu/iconleft.png" />
|
||||
|
|
@ -46,6 +55,7 @@
|
|||
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent,watch } from 'vue';
|
||||
import { queryOrderlist,startDirectiveServe,finishDirectiveServe,queryOrderInfoList } from '@/pages/procurement/api/lunpan.js'
|
||||
import { startOrder,endOrder,editSubPicPath,editSubMp4,queryEmpList,transferOrder,assistOrder} from '@/pages/NursingNew/component/doctorask/api/api.js'
|
||||
import timeing from './newgame/sxy-Timeing.vue'
|
||||
const qcobj = ref({})
|
||||
const openleft = ref(true)
|
||||
const open = ref(0);
|
||||
|
|
@ -179,11 +189,25 @@
|
|||
height: 8vw;
|
||||
}
|
||||
}
|
||||
|
||||
.names{
|
||||
font-weight: 400;
|
||||
font-size: 1.5vw;
|
||||
color: #333333;
|
||||
margin-top: 1.4vw;
|
||||
padding-left: 1vw;
|
||||
}
|
||||
.big-time {
|
||||
font-weight: 600;
|
||||
font-size: 1.8vw;
|
||||
font-size: 2.3vw;
|
||||
padding-left: 1vw;
|
||||
width: 18vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
>view{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-people {
|
||||
|
|
@ -192,6 +216,7 @@
|
|||
color: #555555;
|
||||
width: 18vw;
|
||||
padding-left: 1vw;
|
||||
white-space: nowrap;
|
||||
.people-img {
|
||||
width: 1.5vw;
|
||||
height: 1.5vw;
|
||||
|
|
|
|||
Loading…
Reference in New Issue