yangjun
/
hldy_app_mini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

This commit is contained in:
wangweidong 2026-01-23 17:28:43 +08:00
parent d7486dd3c6
commit 4d111e3c95
2 changed files with 114 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
component/public/newgame/sxy-Timeing.vue
View File

@ -1,24 +1,31 @@
<template> <template>
<view class="box" id="box_minute"> <view style="display: flex;align-items: center;" :class="!isDown?'red':''">
<view class="top child text" id="top">{{ topTime }}</view> <view class="box" id="box_minute" @click="chongzhi()">
<view class="flip child" id="flip" :style="{ transform: transformInfo }"> <view class="top child text" id="top" >{{ Math.floor(topTime / 60) }}</view>
<view <view class="flip child" id="flip" :style="{ transform: transformInfomin?transformInfo:'' }">
class="flip_face child text" <view class="flip_face child text" :style="{ zIndex: faceZindexmin || 0 }" id="flip_face" >
:style="{ zIndex: faceZindex || 0 }" {{ Math.floor(bottomTime / 60) }}
id="flip_face" </view>
> <view class="flip_back child text" :style="backZindex&&transformInfomin ? { zIndex: backZindex } : {}" id="flip_back" >
{{ bottomTime }} {{ Math.floor(topTime / 60) }}
</view> </view>
<view </view>
class="flip_back child text" <view class="bottom child text" id="bottom" >{{ Math.floor(bottomTime / 60) }}</view>
:style="backZindex ? { zIndex: backZindex } : {}" </view>
id="flip_back" :
> <view class="box" id="box_minute" :class="!isDown?'red':''">
{{ topTime }} <view class="top child text" id="top">{{ (topTime % 60)<10?'0'+(topTime % 60) : (topTime % 60) }}</view>
</view> <view class="flip child" id="flip" :style="{ transform: transformInfo }" >
</view> <view class="flip_face child text" :style="{ zIndex: faceZindex || 0 }" id="flip_face" >
<view class="bottom child text" id="bottom">{{ bottomTime }}</view> {{ (bottomTime % 60)<10? '0'+(bottomTime % 60) : (bottomTime % 60)}}
</view> </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> </template>
<script> <script>
@ -27,13 +34,13 @@ export default {
initTime: { initTime: {
// 初始时间 // 初始时间
type: Number, type: Number,
default: 60, default: 10,
},
isDown: {
// 是否是倒计时
type: Boolean,
default: true,
}, },
// isDown: {
// // 是否是倒计时
// type: Boolean,
// default: true,
// },
threshold: { threshold: {
// 阈值 // 阈值
type: Number, type: Number,
@ -47,21 +54,31 @@ export default {
faceZindex: 1, faceZindex: 1,
backZindex: 0, backZindex: 0,
transformInfo: "perspective(500rpx) rotateX(0deg)", transformInfo: "perspective(500rpx) rotateX(0deg)",
transformInfomin: false,
faceZindexmin: 1,
backZindexmin: 0,
mintime:0,
timer: null, timer: null,
timerTwo: null, timerTwo: null,
isDown:true
}; };
}, },
mounted() { mounted() {
this.cycle(); this.cycle();
}, },
methods: { methods: {
chongzhi(){
this.initTime = 185
this.cycle();
},
OneCycle(n) { OneCycle(n) {
// 一次翻页的周期 // 一次翻页的周期
let num = 0; let num = 0;
this.transformInfo = "perspective(500rpx) rotateX(0deg)"; this.transformInfo = "perspective(500rpx) rotateX(0deg)";
this.faceZindex = 1; this.faceZindex = 1;
this.backZindex = 0; this.backZindex = 0;
this.bottomTime = n; this.bottomTime = this.isDown? n : n-1;
let minutes = Math.floor(n / 60);
if (this.timer) { if (this.timer) {
clearInterval(this.timer); clearInterval(this.timer);
} }
@ -74,27 +91,41 @@ export default {
} }
if (num === 1) { if (num === 1) {
if (this.isDown) { if (this.isDown) {
this.topTime = n - 1 < this.threshold ? n : n - 1; // 60 和 0 在时间里，其实是一样的 this.topTime = n - 1 < this.threshold ? n : n - 1; // 60 和 0 在时间里，其实是一样的
} else { this.mintime = Math.floor(this.topTime / 60)
this.topTime = n + 1 > this.threshold ? n : n + 1; // 60 和 0 在时间里，其实是一样的 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.faceZindex = num <= 25 ? 1 : 0;
this.backZindex = num <= 25 ? 0 : 1; this.backZindex = num <= 25 ? 0 : 1;
this.transformInfo = `perspective(500rpx) rotateX(-${(180 * num) / this.transformInfo = `perspective(500rpx) rotateX(-${(180 * num) / 50}deg)`;
50}deg)`;
}, 20); // 将一秒钟分成50份。 }, 20); // 将一秒钟分成50份。
}, },
cycle() { cycle() {
let minutes = Math.floor(this.initTime / 60);
let time = this.initTime; let time = this.initTime;
console.log(minutes,time)
this.timerTwo = setInterval(() => { this.timerTwo = setInterval(() => {
const flag = this.isDown ? time - 1 : time + 1; const flag = this.isDown ? time - 1 : time + 1;
if (flag === this.threshold) { if (flag === this.threshold) {
clearInterval(this.timerTwo); this.isDown = false
clearInterval(this.timer); // clearInterval(this.timerTwo);
// clearInterval(this.timer);
} }
this.OneCycle(time); this.OneCycle(time);
this.isDown ? time-- : time++; this.isDown ? time-- : time++;
@ -104,36 +135,27 @@ export default {
}; };
</script> </script>
<style> <style scoped lang="less">
* { .red{
box-sizing: border-box; color: red !important;
margin: 0; view{
padding: 0; color: red !important;
}
} }
#app {
height: 100%;
font-size: 0;
display: flex;
align-items: center;
justify-content: center;
flex-flow: wrap-reverse;
}
.box { .box {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
} }
.box .child { .box .child {
width: 130rpx; width: 3.4vw;
height: 100rpx; height: 1.6vw;
overflow: hidden; overflow: hidden;
} }
.box > .top { .box > .top {
background-color: #333; background-color: #DCDCDC;
line-height: 200rpx; line-height: 3.2vw;
border-bottom: 2rpx solid #fff; border-bottom: 2rpx solid #fff;
border-radius: 4rpx 4rpx 0 0; border-radius: 4rpx 4rpx 0 0;
} }
@ -148,22 +170,22 @@ export default {
.box .flip .flip_face { .box .flip .flip_face {
position: absolute; position: absolute;
background-color: #333; background-color: #DCDCDC;
line-height: 200rpx; line-height: 3.2vw;
z-index: 1; z-index: 1;
border-bottom: 2rpx solid #fff; border-bottom: 2rpx solid #fff;
} }
.box .flip .flip_back { .box .flip .flip_back {
position: absolute; position: absolute;
background-color: #333; background-color: #DCDCDC;
line-height: 0rpx; line-height: 0rpx;
transform: perspective(500rpx) rotateX(0deg) rotateY(-180deg) rotate(180deg); transform: perspective(500rpx) rotateX(0deg) rotateY(-180deg) rotate(180deg);
border-top: 2rpx solid #fff; border-top: 2rpx solid #fff;
} }
.box .bottom { .box .bottom {
background-color: #333; background-color: #DCDCDC;
line-height: 0rpx; line-height: 0rpx;
border-top: 2rpx solid #fff; border-top: 2rpx solid #fff;
border-radius: 0 0 4rpx 4rpx; border-radius: 0 0 4rpx 4rpx;
@ -171,8 +193,8 @@ export default {
.text { .text {
text-align: center; text-align: center;
font-size: 100rpx; font-size: 2.2vw;
font-weight: 900; font-weight: 900;
color: #fff; color: #666;
} }
</style> </style>

33
component/public/severcard.vue
View File

@ -8,9 +8,18 @@
{{qcobj.directiveName}} {{qcobj.directiveName}}
</view> </view>
</view> </view>
<view> <view style="height: 78%;">
<view class="big-time"> <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>
<view class="icon-people"> <view class="icon-people">
<image class="people-img" src="/static/index/newindex/leftmenu/iconleft.png" /> <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 { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent,watch } from 'vue';
import { queryOrderlist,startDirectiveServe,finishDirectiveServe,queryOrderInfoList } from '@/pages/procurement/api/lunpan.js' 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 { 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 qcobj = ref({})
const openleft = ref(true) const openleft = ref(true)
const open = ref(0); const open = ref(0);
@ -179,11 +189,25 @@
height: 8vw; height: 8vw;
} }
} }
.names{
font-weight: 400;
font-size: 1.5vw;
color: #333333;
margin-top: 1.4vw;
padding-left: 1vw;
}
.big-time { .big-time {
font-weight: 600; font-weight: 600;
font-size: 1.8vw; font-size: 2.3vw;
padding-left: 1vw; padding-left: 1vw;
width: 18vw;
display: flex;
justify-content: space-between;
align-items: center;
>view{
display: flex;
align-items: center;
}
} }
.icon-people { .icon-people {
@ -192,6 +216,7 @@
color: #555555; color: #555555;
width: 18vw; width: 18vw;
padding-left: 1vw; padding-left: 1vw;
white-space: nowrap;
.people-img { .people-img {
width: 1.5vw; width: 1.5vw;
height: 1.5vw; height: 1.5vw;