同步

component/public/newgame/sxy-Timeing.vue

@@ -0,0 +1,178 @@
+<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>
+</template>
+
+<script>
+export default {
+  props: {
+    initTime: {
+      // 初始时间
+      type: Number,
+      default: 60,
+    },
+    isDown: {
+      // 是否是倒计时
+      type: Boolean,
+      default: true,
+    },
+    threshold: {
+      // 阈值
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      topTime: this.initTime,
+      bottomTime: this.initTime,
+      faceZindex: 1,
+      backZindex: 0,
+      transformInfo: "perspective(500rpx) rotateX(0deg)",
+      timer: null,
+      timerTwo: null,
+    };
+  },
+  mounted() {
+    this.cycle();
+  },
+  methods: {
+    OneCycle(n) {
+      // 一次翻页的周期
+      let num = 0;
+      this.transformInfo = "perspective(500rpx) rotateX(0deg)";
+      this.faceZindex = 1;
+      this.backZindex = 0;
+      this.bottomTime = n;
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+      this.timer = setInterval(() => {
+        num++;
+        if (num > 50) {
+          num = 0;
+          clearInterval(this.timer);
+          return;
+        }
+
+        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 在时间里，其实是一样的
+          }
+        }
+
+        this.faceZindex = num <= 25 ? 1 : 0;
+        this.backZindex = num <= 25 ? 0 : 1;
+
+        this.transformInfo = `perspective(500rpx) rotateX(-${(180 * num) /
+          50}deg)`;
+      }, 20); // 将一秒钟分成50份。
+    },
+    cycle() {
+      let time = this.initTime;
+      this.timerTwo = setInterval(() => {
+        const flag = this.isDown ? time - 1 : time + 1;
+        if (flag === this.threshold) {
+          clearInterval(this.timerTwo);
+          clearInterval(this.timer);
+        }
+        this.OneCycle(time);
+        this.isDown ? time-- : time++;
+      }, 1000);
+    },
+  },
+};
+</script>
+
+<style>
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+#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;
+  overflow: hidden;
+}
+
+.box > .top {
+  background-color: #333;
+  line-height: 200rpx;
+  border-bottom: 2rpx solid #fff;
+  border-radius: 4rpx 4rpx 0 0;
+}
+
+.box .flip {
+  position: absolute;
+  top: 0rpx;
+  z-index: 1;
+  transform-origin: bottom;
+  border-radius: 4rpx 4rpx 0 0;
+}
+
+.box .flip .flip_face {
+  position: absolute;
+  background-color: #333;
+  line-height: 200rpx;
+  z-index: 1;
+  border-bottom: 2rpx solid #fff;
+}
+
+.box .flip .flip_back {
+  position: absolute;
+  background-color: #333;
+  line-height: 0rpx;
+  transform: perspective(500rpx) rotateX(0deg) rotateY(-180deg) rotate(180deg);
+  border-top: 2rpx solid #fff;
+}
+
+.box .bottom {
+  background-color: #333;
+  line-height: 0rpx;
+  border-top: 2rpx solid #fff;
+  border-radius: 0 0 4rpx 4rpx;
+}
+
+.text {
+  text-align: center;
+  font-size: 100rpx;
+  font-weight: 900;
+  color: #fff;
+}
+</style>

manifest.json

@@ -2,8 +2,8 @@
     "name" : "护理单元",
     "appid" : "__UNI__FB2D473",
     "description" : "护理单元",
-    "versionName" : "1.0.024",
-    "versionCode" : 10024,
+    "versionName" : "1.0.025",
+    "versionCode" : 10025,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {

pages/NursingNew/component/leftcontent/leftcontent.vue

@@ -12,9 +12,9 @@
 				</view>
 				<scroll-view class="cont" :scroll-y="true" :scroll-top="scrolltop" @scroll="scroll"  scroll-with-animation @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower">
 					<view class="items" v-for="(v,i) in list" :key='i' @click="naurl(i);emit('navurl',i,v)">
-						<view class="tm guodu" :class="{'act':i==dexleft}">
-							<image :src="i==dexleft?v.urls:v.url" mode="aspectFill" class="guodu"></image>
-							<text>{{v.name}}</text>
+						<view class="tm guodu" >
+							<image :src="i==dexleft?v.url:v.urls" mode="aspectFill" class="guodu"></image>
+							<text :style="i==dexleft?'color:#0080FC':''">{{v.name}}</text>
 						</view>
 						<!-- <view class="heng guodu" :style="i!=dexleft&&i!=list.length-1?'opacity: 1':'opacity: 0'"></view> -->
 					</view>