mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-07 08:57:19 +08:00
feat: add flop plug-in unit
This commit is contained in:
xiaoxian521
parent
2de43ef859
commit
637808f88b
@ -10,6 +10,7 @@
|
|||||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||||
"await-to-js": "^2.1.1",
|
"await-to-js": "^2.1.1",
|
||||||
"axios": "^0.21.1",
|
"axios": "^0.21.1",
|
||||||
|
"dayjs": "^1.10.4",
|
||||||
"dotenv": "^8.2.0",
|
"dotenv": "^8.2.0",
|
||||||
"element-plus": "^1.0.2-beta.36",
|
"element-plus": "^1.0.2-beta.36",
|
||||||
"font-awesome": "^4.7.0",
|
"font-awesome": "^4.7.0",
|
||||||
|
|||||||
280
src/components/flop/flipper.vue
Normal file
280
src/components/flop/flipper.vue
Normal file
@ -0,0 +1,280 @@
|
|||||||
|
<template>
|
||||||
|
<div class="m-flipper" :class="[flipType, {'go': isFlipping}]">
|
||||||
|
<div class="digital front" :class="textClass(frontTextFromData)"></div>
|
||||||
|
<div class="digital back" :class="textClass(backTextFromData)"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang='ts'>
|
||||||
|
import { defineComponent, ref } from "vue";
|
||||||
|
export default defineComponent({
|
||||||
|
props: {
|
||||||
|
// front paper text
|
||||||
|
// 前牌文字
|
||||||
|
frontText: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
// back paper text
|
||||||
|
// 后牌文字
|
||||||
|
backText: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 1,
|
||||||
|
},
|
||||||
|
// flipping duration, please be consistent with the CSS animation-duration value.
|
||||||
|
// 翻牌动画时间，与CSS中设置的animation-duration保持一致
|
||||||
|
duration: {
|
||||||
|
type: Number,
|
||||||
|
default: 600,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
const { frontText, backText, duration } = props;
|
||||||
|
let isFlipping = ref(false);
|
||||||
|
let flipType = ref("down");
|
||||||
|
let frontTextFromData = ref(frontText);
|
||||||
|
let backTextFromData = ref(backText);
|
||||||
|
|
||||||
|
const textClass = (number: string) => {
|
||||||
|
return "number" + number;
|
||||||
|
};
|
||||||
|
|
||||||
|
const flip = (type: string, front: number, back: number) => {
|
||||||
|
// 如果处于翻转中，则不执行
|
||||||
|
if (isFlipping.value) return false;
|
||||||
|
frontTextFromData.value = front;
|
||||||
|
backTextFromData.value = back;
|
||||||
|
// 根据传递过来的type设置翻转方向
|
||||||
|
flipType.value = type;
|
||||||
|
// 设置翻转状态为true
|
||||||
|
isFlipping.value = true;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
// 设置翻转状态为false
|
||||||
|
isFlipping.value = false;
|
||||||
|
frontTextFromData.value = back;
|
||||||
|
}, duration);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 下翻牌
|
||||||
|
const flipDown = (front: any, back: any): void => {
|
||||||
|
flip("down", front, back);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 上翻牌
|
||||||
|
const flipUp = (front: any, back: any): void => {
|
||||||
|
flip("up", front, back);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 设置前牌文字
|
||||||
|
const setFront = (text: number): void => {
|
||||||
|
frontTextFromData.value = text;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 设置后牌文字
|
||||||
|
const setBack = (text: number): void => {
|
||||||
|
backTextFromData.value = text;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
isFlipping,
|
||||||
|
flipType,
|
||||||
|
frontTextFromData,
|
||||||
|
backTextFromData,
|
||||||
|
textClass,
|
||||||
|
flip,
|
||||||
|
flipDown,
|
||||||
|
flipUp,
|
||||||
|
setFront,
|
||||||
|
setBack,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.m-flipper {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 60px;
|
||||||
|
height: 100px;
|
||||||
|
line-height: 100px;
|
||||||
|
border: solid 1px #000;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 66px;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
font-family: "Helvetica Neue";
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper .digital:before,
|
||||||
|
.m-flipper .digital:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: #000;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper .digital:before {
|
||||||
|
top: 0;
|
||||||
|
bottom: 50%;
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
|
border-bottom: solid 1px #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper .digital:after {
|
||||||
|
top: 50%;
|
||||||
|
bottom: 0;
|
||||||
|
border-radius: 0 0 10px 10px;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*向下翻*/
|
||||||
|
.m-flipper.down .front:before {
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper.down .back:after {
|
||||||
|
z-index: 2;
|
||||||
|
transform-origin: 50% 0%;
|
||||||
|
transform: perspective(160px) rotateX(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper.down .front:after,
|
||||||
|
.m-flipper.down .back:before {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper.down.go .front:before {
|
||||||
|
transform-origin: 50% 100%;
|
||||||
|
animation: frontFlipDown 0.6s ease-in-out both;
|
||||||
|
box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
|
||||||
|
backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper.down.go .back:after {
|
||||||
|
animation: backFlipDown 0.6s ease-in-out both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*向上翻*/
|
||||||
|
.m-flipper.up .front:after {
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper.up .back:before {
|
||||||
|
z-index: 2;
|
||||||
|
transform-origin: 50% 100%;
|
||||||
|
transform: perspective(160px) rotateX(-180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper.up .front:before,
|
||||||
|
.m-flipper.up .back:after {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper.up.go .front:after {
|
||||||
|
transform-origin: 50% 0;
|
||||||
|
animation: frontFlipUp 0.6s ease-in-out both;
|
||||||
|
box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);
|
||||||
|
backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper.up.go .back:before {
|
||||||
|
animation: backFlipUp 0.6s ease-in-out both;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes frontFlipDown {
|
||||||
|
0% {
|
||||||
|
transform: perspective(160px) rotateX(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: perspective(160px) rotateX(-180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes backFlipDown {
|
||||||
|
0% {
|
||||||
|
transform: perspective(160px) rotateX(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: perspective(160px) rotateX(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes frontFlipUp {
|
||||||
|
0% {
|
||||||
|
transform: perspective(160px) rotateX(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: perspective(160px) rotateX(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes backFlipUp {
|
||||||
|
0% {
|
||||||
|
transform: perspective(160px) rotateX(-180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: perspective(160px) rotateX(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper .number0:before,
|
||||||
|
.m-flipper .number0:after {
|
||||||
|
content: "0";
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper .number1:before,
|
||||||
|
.m-flipper .number1:after {
|
||||||
|
content: "1";
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper .number2:before,
|
||||||
|
.m-flipper .number2:after {
|
||||||
|
content: "2";
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper .number3:before,
|
||||||
|
.m-flipper .number3:after {
|
||||||
|
content: "3";
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper .number4:before,
|
||||||
|
.m-flipper .number4:after {
|
||||||
|
content: "4";
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper .number5:before,
|
||||||
|
.m-flipper .number5:after {
|
||||||
|
content: "5";
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper .number6:before,
|
||||||
|
.m-flipper .number6:after {
|
||||||
|
content: "6";
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper .number7:before,
|
||||||
|
.m-flipper .number7:after {
|
||||||
|
content: "7";
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper .number8:before,
|
||||||
|
.m-flipper .number8:after {
|
||||||
|
content: "8";
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-flipper .number9:before,
|
||||||
|
.m-flipper .number9:after {
|
||||||
|
content: "9";
|
||||||
|
}
|
||||||
|
</style>
|
||||||
135
src/components/flop/index.vue
Normal file
135
src/components/flop/index.vue
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
<template>
|
||||||
|
<div class="flip-clock">
|
||||||
|
<flippers ref="flipperHour1" />
|
||||||
|
<flippers ref="flipperHour2" />
|
||||||
|
<em>:</em>
|
||||||
|
<flippers ref="flipperMinute1" />
|
||||||
|
<flippers ref="flipperMinute2" />
|
||||||
|
<em>:</em>
|
||||||
|
<flippers ref="flipperSecond1" />
|
||||||
|
<flippers ref="flipperSecond2" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang='ts'>
|
||||||
|
import { ref, onBeforeMount, getCurrentInstance, nextTick } from "vue";
|
||||||
|
import flippers from "./flipper.vue";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
flippers,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
let vm: any;
|
||||||
|
let timer = ref(null);
|
||||||
|
let flipObjs = ref([]);
|
||||||
|
|
||||||
|
// 初始化数字
|
||||||
|
const init = () => {
|
||||||
|
let now = new Date();
|
||||||
|
let nowTimeStr = formatDate(new Date(now.getTime()), "hhiiss");
|
||||||
|
for (let i = 0; i < flipObjs.value.length; i++) {
|
||||||
|
flipObjs.value[i].setFront(nowTimeStr[i]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 开始计时
|
||||||
|
const run = () => {
|
||||||
|
timer.value = setInterval(() => {
|
||||||
|
// 获取当前时间
|
||||||
|
let now = new Date();
|
||||||
|
let nowTimeStr = formatDate(new Date(now.getTime() - 1000), "hhiiss");
|
||||||
|
let nextTimeStr = formatDate(now, "hhiiss");
|
||||||
|
for (let i = 0; i < flipObjs.value.length; i++) {
|
||||||
|
if (nowTimeStr[i] === nextTimeStr[i]) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
flipObjs.value[i].flipDown(nowTimeStr[i], nextTimeStr[i]);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 正则格式化日期
|
||||||
|
const formatDate = (date: Date, dateFormat: string) => {
|
||||||
|
/* 单独格式化年份，根据y的字符数量输出年份
|
||||||
|
* 例如：yyyy => 2019
|
||||||
|
yy => 19
|
||||||
|
y => 9
|
||||||
|
*/
|
||||||
|
if (/(y+)/.test(dateFormat)) {
|
||||||
|
dateFormat = dateFormat.replace(
|
||||||
|
RegExp.$1,
|
||||||
|
(date.getFullYear() + "").substr(4 - RegExp.$1.length)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// 格式化月、日、时、分、秒
|
||||||
|
let o = {
|
||||||
|
"m+": date.getMonth() + 1,
|
||||||
|
"d+": date.getDate(),
|
||||||
|
"h+": date.getHours(),
|
||||||
|
"i+": date.getMinutes(),
|
||||||
|
"s+": date.getSeconds(),
|
||||||
|
};
|
||||||
|
for (let k in o) {
|
||||||
|
if (new RegExp(`(${k})`).test(dateFormat)) {
|
||||||
|
// 取出对应的值
|
||||||
|
let str = o[k] + "";
|
||||||
|
/* 根据设置的格式，输出对应的字符
|
||||||
|
* 例如: 早上8时，hh => 08，h => 8
|
||||||
|
* 但是，当数字>=10时，无论格式为一位还是多位，不做截取，这是与年份格式化不一致的地方
|
||||||
|
* 例如: 下午15时，hh => 15, h => 15
|
||||||
|
*/
|
||||||
|
dateFormat = dateFormat.replace(
|
||||||
|
RegExp.$1,
|
||||||
|
RegExp.$1.length === 1 ? str : padLeftZero(str)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return dateFormat;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 日期时间补零
|
||||||
|
const padLeftZero = (str: string | any[]) => {
|
||||||
|
return ("00" + str).substr(str.length);
|
||||||
|
};
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
vm = getCurrentInstance(); //获取组件实例
|
||||||
|
nextTick(() => {
|
||||||
|
flipObjs.value = [
|
||||||
|
vm.refs.flipperHour1,
|
||||||
|
vm.refs.flipperHour2,
|
||||||
|
vm.refs.flipperMinute1,
|
||||||
|
vm.refs.flipperMinute2,
|
||||||
|
vm.refs.flipperSecond1,
|
||||||
|
vm.refs.flipperSecond2,
|
||||||
|
];
|
||||||
|
|
||||||
|
init();
|
||||||
|
run();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
timer,
|
||||||
|
flipObjs,
|
||||||
|
init,
|
||||||
|
run,
|
||||||
|
formatDate,
|
||||||
|
padLeftZero,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.flip-clock .m-flipper {
|
||||||
|
margin: 0 3px;
|
||||||
|
}
|
||||||
|
.flip-clock em {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 102px;
|
||||||
|
font-size: 66px;
|
||||||
|
font-style: normal;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -28,7 +28,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.app-main {
|
.app-main {
|
||||||
/* min-height: calc(100vh - 50px); */
|
min-height: calc(100vh - 70px);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|||||||
@ -1,112 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="welcome">
|
<div class="welcome">
|
||||||
<a title="欢迎Star" href="https://github.com/xiaoxian521/CURD-TS" target="_blank">点击打开仓库地址</a>
|
<!-- <a title="欢迎Star" href="https://github.com/xiaoxian521/CURD-TS" target="_blank">点击打开仓库地址</a> -->
|
||||||
<Renderer
|
<flop />
|
||||||
ref="renderer"
|
|
||||||
antialias
|
|
||||||
resize
|
|
||||||
:orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }"
|
|
||||||
>
|
|
||||||
<Camera :position="{ x: -0, y: -100, z: 30 }" />
|
|
||||||
<Scene background="#ffffff">
|
|
||||||
<PointLight
|
|
||||||
ref="light1"
|
|
||||||
color="#0E09DC"
|
|
||||||
:intensity="0.85"
|
|
||||||
:position="{ x: 0, y: 0, z: 50 }"
|
|
||||||
/>
|
|
||||||
<PointLight
|
|
||||||
ref="light2"
|
|
||||||
color="#1CD1E1"
|
|
||||||
:intensity="0.85"
|
|
||||||
:position="{ x: 0, y: 0, z: 50 }"
|
|
||||||
/>
|
|
||||||
<PointLight
|
|
||||||
ref="light3"
|
|
||||||
color="#18C02C"
|
|
||||||
:intensity="0.85"
|
|
||||||
:position="{ x: 0, y: 0, z: 50 }"
|
|
||||||
/>
|
|
||||||
<PointLight
|
|
||||||
ref="light4"
|
|
||||||
color="#ee3bcf"
|
|
||||||
:intensity="0.85"
|
|
||||||
:position="{ x: 0, y: 0, z: 50 }"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<NoisyPlane
|
|
||||||
:width="120"
|
|
||||||
:width-segments="120"
|
|
||||||
:height="100"
|
|
||||||
:height-segments="120"
|
|
||||||
:time-coef="0.0003"
|
|
||||||
:noise-coef="5"
|
|
||||||
:displacement-scale="20"
|
|
||||||
:delta-coef="1 / 120"
|
|
||||||
:position="{ x: 0, y: 0, z: 0 }"
|
|
||||||
>
|
|
||||||
<PhysicalMaterial />
|
|
||||||
</NoisyPlane>
|
|
||||||
|
|
||||||
<RefractionMesh ref="mesh" :position="{ x: 0, y: -20, z: 20 }" auto-update>
|
|
||||||
<TorusGeometry :radius="8" :tube="3" :radial-segments="8" :tubular-segments="6" />
|
|
||||||
<StandardMaterial color="#ffffff" :metalness="1" :roughness="0" flat-shading />
|
|
||||||
</RefractionMesh>
|
|
||||||
</Scene>
|
|
||||||
</Renderer>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang='ts'>
|
<script lang='ts'>
|
||||||
import {
|
import flop from "../components/flop/index.vue"
|
||||||
Camera,
|
|
||||||
PhysicalMaterial,
|
|
||||||
PointLight,
|
|
||||||
RefractionMesh,
|
|
||||||
Renderer,
|
|
||||||
Scene,
|
|
||||||
StandardMaterial,
|
|
||||||
TorusGeometry,
|
|
||||||
} from "troisjs";
|
|
||||||
import NoisyPlane from "troisjs/src/components/noisy/NoisyPlane.js";
|
|
||||||
import NoisySphere from "troisjs/src/components/noisy/NoisySphere.js";
|
|
||||||
import NoisyText from "troisjs/src/components/noisy/NoisyText.js";
|
|
||||||
export default {
|
export default {
|
||||||
name: "welcome",
|
name: "welcome",
|
||||||
components: {
|
components: {
|
||||||
Camera,
|
flop
|
||||||
NoisyPlane,
|
|
||||||
NoisySphere,
|
|
||||||
NoisyText,
|
|
||||||
PhysicalMaterial,
|
|
||||||
PointLight,
|
|
||||||
RefractionMesh,
|
|
||||||
Renderer,
|
|
||||||
Scene,
|
|
||||||
StandardMaterial,
|
|
||||||
TorusGeometry,
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const renderer = this.$refs.renderer;
|
|
||||||
const light1 = this.$refs.light1.light;
|
|
||||||
const light2 = this.$refs.light2.light;
|
|
||||||
const light3 = this.$refs.light3.light;
|
|
||||||
const light4 = this.$refs.light4.light;
|
|
||||||
const mesh = this.$refs.mesh.mesh;
|
|
||||||
renderer.onBeforeRender(() => {
|
|
||||||
const time = Date.now() * 0.001;
|
|
||||||
const d = 100;
|
|
||||||
light1.position.x = Math.sin(time * 0.1) * d;
|
|
||||||
light1.position.y = Math.cos(time * 0.2) * d;
|
|
||||||
light2.position.x = Math.cos(time * 0.3) * d;
|
|
||||||
light2.position.y = Math.sin(time * 0.4) * d;
|
|
||||||
light3.position.x = Math.sin(time * 0.5) * d;
|
|
||||||
light3.position.y = Math.sin(time * 0.6) * d;
|
|
||||||
light4.position.x = Math.sin(time * 0.7) * d;
|
|
||||||
light4.position.y = Math.cos(time * 0.8) * d;
|
|
||||||
mesh.rotation.x += 0.02;
|
|
||||||
mesh.rotation.y += 0.01;
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user