mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-03 13:44:47 +08:00
chore: update @logicflow
This commit is contained in:
xiaoxian521
parent
055296ab53
commit
dc7a50de6f
28
package-lock.json
generated
28
package-lock.json
generated
@ -390,16 +390,20 @@
|
||||
}
|
||||
},
|
||||
"@logicflow/core": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@logicflow/core/-/core-0.3.1.tgz",
|
||||
"integrity": "sha512-PZwwaRGURwOWFf4JVDc6GGfDRZtawvVGY6/3Z4cjulNiEFzxtQnz4RH0Zqzd6qFRxpEctqKnZ+eckLPWX4YFug=="
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@logicflow/core/-/core-0.3.2.tgz",
|
||||
"integrity": "sha512-lKe/N+w1u32wUnTdT1gzW+skPSOo6UDrXsT7Ar3d0iN6XK5i5KVAkEjGUGhvTtd7GgdAvTXpNVLQFSX/9B3EtQ==",
|
||||
"requires": {
|
||||
"mousetrap": "^1.6.5",
|
||||
"preact": "^10.4.8"
|
||||
}
|
||||
},
|
||||
"@logicflow/extension": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@logicflow/extension/-/extension-0.3.1.tgz",
|
||||
"integrity": "sha512-WSPVqwmTvI52e2Go6EQeUEoHs+l6o2h4u47iVuwC39A/cIFcc2skefQ9fTzGJHeWIXjPf7Nl/W5ylrmeVsIJ4Q==",
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@logicflow/extension/-/extension-0.3.2.tgz",
|
||||
"integrity": "sha512-4CPIzSy7LN4rD+hgdc/6nn6ZcrERIrgH8+LWWKPE3MF+xd2LedsZAMeLPYkJ7x+wie7fOKyKDfW/XL50imMzaQ==",
|
||||
"requires": {
|
||||
"@logicflow/core": "^0.3.1",
|
||||
"@logicflow/core": "^0.3.2",
|
||||
"ids": "^1.0.0"
|
||||
}
|
||||
},
|
||||
@ -1432,6 +1436,11 @@
|
||||
"commander": "*"
|
||||
}
|
||||
},
|
||||
"mousetrap": {
|
||||
"version": "1.6.5",
|
||||
"resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
|
||||
"integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.2.tgz?cache=0&sync_timestamp=1607433912031&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.2.tgz",
|
||||
@ -1621,6 +1630,11 @@
|
||||
"integrity": "sha1-RD9qIM7WSBor2k+oUypuVdeJoss=",
|
||||
"dev": true
|
||||
},
|
||||
"preact": {
|
||||
"version": "10.5.13",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.5.13.tgz",
|
||||
"integrity": "sha512-q/vlKIGNwzTLu+jCcvywgGrt+H/1P/oIRSD6mV4ln3hmlC+Aa34C7yfPI4+5bzW8pONyVXYS7SvXosy2dKKtWQ=="
|
||||
},
|
||||
"process": {
|
||||
"version": "0.11.10",
|
||||
"resolved": "https://registry.npm.taobao.org/process/download/process-0.11.10.tgz",
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@logicflow/core": "^0.3.1",
|
||||
"@logicflow/extension": "^0.3.1",
|
||||
"@logicflow/core": "^0.3.2",
|
||||
"@logicflow/extension": "^0.3.2",
|
||||
"@vueuse/core": "^4.8.2",
|
||||
"await-to-js": "^2.1.1",
|
||||
"axios": "^0.21.1",
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="UTF-8" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -31,18 +30,15 @@
|
||||
<div class="btn php php-4">php攻城狮</div>
|
||||
<div class="btn php php-5">php攻城狮</div>
|
||||
|
||||
|
||||
<div class="btn kotlin kotlin-3">kotlin攻城狮</div>
|
||||
<div class="btn kotlin kotlin-1">kotlin攻城狮</div>
|
||||
<div class="btn kotlin kotlin-4">kotlin攻城狮</div>
|
||||
<div class="btn kotlin kotlin-2">kotlin攻城狮</div>
|
||||
<div class="btn kotlin kotlin-5">kotlin攻城狮</div>
|
||||
<div class="btn c">C语言攻城狮</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
<style>
|
||||
|
||||
.text-info {
|
||||
position: absolute;
|
||||
top: calc(50vh - 245px);
|
||||
@ -53,13 +49,12 @@
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
|
||||
.btn {
|
||||
vertical-align: top;
|
||||
margin: 20px;
|
||||
margin: 15px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 160px;
|
||||
width: 122px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
border-radius: 4px;
|
||||
@ -67,36 +62,35 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.java {
|
||||
color: #EB9E05;
|
||||
color: #eb9e05;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
width: 158px;
|
||||
border: 1px solid #EB9E05;
|
||||
width: 120px;
|
||||
border: 1px solid #eb9e05;
|
||||
opacity: 1;
|
||||
transition: all .6s;
|
||||
transition: all 0.6s;
|
||||
}
|
||||
|
||||
.java:hover {
|
||||
background: #EB9E05;
|
||||
background: #eb9e05;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.java:active {
|
||||
opacity: .7;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.c {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
background: #55acee;
|
||||
transition: all .5s;
|
||||
transition: all 0.5s;
|
||||
box-shadow: 0px 5px 0px 0px #3486d5;
|
||||
}
|
||||
|
||||
.c:hover {
|
||||
background-color: #6FC6FF;
|
||||
background-color: #6fc6ff;
|
||||
}
|
||||
|
||||
.c:active {
|
||||
@ -119,9 +113,9 @@
|
||||
vertical-align: top;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
width: 158px;
|
||||
color: #2194E0;
|
||||
border: 1px solid #2194E0;
|
||||
width: 120px;
|
||||
color: #2194e0;
|
||||
border: 1px solid #2194e0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
@ -142,7 +136,7 @@
|
||||
}
|
||||
|
||||
.golang:hover {
|
||||
background-color: #2194E0;
|
||||
background-color: #2194e0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -152,16 +146,16 @@
|
||||
}
|
||||
|
||||
.golang:active {
|
||||
opacity: .8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.js {
|
||||
width: 160px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: #0D6;
|
||||
width: 158px;
|
||||
border: 1px solid #0D6;
|
||||
background: #0d6;
|
||||
width: 120px;
|
||||
border: 1px solid #0d6;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s;
|
||||
opacity: 1;
|
||||
@ -170,13 +164,13 @@
|
||||
.js:hover,
|
||||
.js:active {
|
||||
text-decoration: none;
|
||||
color: #0C5;
|
||||
border-color: #0C5;
|
||||
background: #FFF;
|
||||
color: #0c5;
|
||||
border-color: #0c5;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.js:active {
|
||||
opacity: .8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.js span {
|
||||
@ -187,7 +181,7 @@
|
||||
}
|
||||
|
||||
.js span:after {
|
||||
content: ' ';
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -18px;
|
||||
@ -196,7 +190,7 @@
|
||||
height: 10px;
|
||||
margin-top: -10px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 2px solid #FFF;
|
||||
border: 2px solid #fff;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
transition: opacity 0.5s, top 0.5s, right 0.5s;
|
||||
@ -212,20 +206,20 @@
|
||||
.js:active span:after {
|
||||
transition: opacity 0.5s, top 0.5s, right 0.5s;
|
||||
opacity: 1;
|
||||
border-color: #0C5;
|
||||
border-color: #0c5;
|
||||
right: 0;
|
||||
top: calc(50% + 2.5px);
|
||||
transform: rotate(-140deg);
|
||||
}
|
||||
|
||||
.nodd-ruby {
|
||||
background: #C147E6;
|
||||
background: #c147e6;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
transition: all .3s
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
input[type="checkbox"].toggle {
|
||||
@ -254,13 +248,13 @@
|
||||
|
||||
.anim:before {
|
||||
position: relative;
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
margin-top: 100%;
|
||||
}
|
||||
|
||||
.anim:after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@ -270,7 +264,7 @@
|
||||
}
|
||||
|
||||
.node .toggle:checked + .anim {
|
||||
animation: .75s anim-in;
|
||||
animation: 0.75s anim-in;
|
||||
}
|
||||
|
||||
.node .toggle:checked + .anim:after {
|
||||
@ -290,11 +284,11 @@
|
||||
}
|
||||
|
||||
.node:hover {
|
||||
opacity: .8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.ruby:active {
|
||||
opacity: .8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.ruby:hover > .anim {
|
||||
@ -475,23 +469,48 @@
|
||||
}
|
||||
|
||||
.python-1 {
|
||||
background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#f6d365 0%,
|
||||
#fda085 51%,
|
||||
#f6d365 100%
|
||||
);
|
||||
}
|
||||
|
||||
.python-2 {
|
||||
background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#fbc2eb 0%,
|
||||
#a6c1ee 51%,
|
||||
#fbc2eb 100%
|
||||
);
|
||||
}
|
||||
|
||||
.python-3 {
|
||||
background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#84fab0 0%,
|
||||
#8fd3f4 51%,
|
||||
#84fab0 100%
|
||||
);
|
||||
}
|
||||
|
||||
.python-4 {
|
||||
background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#a1c4fd 0%,
|
||||
#c2e9fb 51%,
|
||||
#a1c4fd 100%
|
||||
);
|
||||
}
|
||||
|
||||
.python-5 {
|
||||
background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 51%, #ffecd2 100%);
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#ffecd2 0%,
|
||||
#fcb69f 51%,
|
||||
#ffecd2 100%
|
||||
);
|
||||
}
|
||||
|
||||
.php,
|
||||
@ -503,9 +522,9 @@
|
||||
}
|
||||
|
||||
.php {
|
||||
border: 1px solid #C147E6;
|
||||
color: #C147E6;
|
||||
width: 158px;
|
||||
border: 1px solid #c147e6;
|
||||
color: #c147e6;
|
||||
width: 120px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
position: relative;
|
||||
@ -519,8 +538,8 @@
|
||||
|
||||
.php::before,
|
||||
.php::after {
|
||||
background: #C147E6;
|
||||
content: '';
|
||||
background: #c147e6;
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
border-radius: 3px;
|
||||
@ -606,7 +625,7 @@
|
||||
.kotlin {
|
||||
background: none;
|
||||
border: 1px solid;
|
||||
width: 158px;
|
||||
width: 120px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
letter-spacing: inherit;
|
||||
@ -620,7 +639,10 @@
|
||||
|
||||
.kotlin-1:hover {
|
||||
animation: halftone 1s forwards;
|
||||
background: radial-gradient(circle, #9c89f7 0.2em, transparent 0.25em) 0 0/1.25em 1.25em, radial-gradient(circle, #9c89f7 0.2em, transparent 0.25em) 6.25em 6.25em/1.25em 1.25em;
|
||||
background: radial-gradient(circle, #9c89f7 0.2em, transparent 0.25em) 0 0/1.25em
|
||||
1.25em,
|
||||
radial-gradient(circle, #9c89f7 0.2em, transparent 0.25em) 6.25em 6.25em/1.25em
|
||||
1.25em;
|
||||
color: #e4f789;
|
||||
}
|
||||
|
||||
@ -636,7 +658,13 @@
|
||||
|
||||
.kotlin-2:hover {
|
||||
animation: stripes-move 0.75s infinite linear;
|
||||
background: repeating-linear-gradient(45deg, #82f6d8 0, #82f6d8 0.25em, transparent 0.25em, transparent 0.5em);
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
#82f6d8 0,
|
||||
#82f6d8 0.25em,
|
||||
transparent 0.25em,
|
||||
transparent 0.5em
|
||||
);
|
||||
color: #f682a0;
|
||||
}
|
||||
|
||||
@ -652,7 +680,9 @@
|
||||
|
||||
.kotlin-3:hover {
|
||||
animation: sawtooth 0.35s infinite linear;
|
||||
background: linear-gradient(45deg, #d3f169 0.5em, transparent 0.5em) 0 0/1em 1em, linear-gradient(-45deg, #d3f169 0.5em, transparent 0.5em) 0 0/1em 1em;
|
||||
background: linear-gradient(45deg, #d3f169 0.5em, transparent 0.5em) 0 0/1em
|
||||
1em,
|
||||
linear-gradient(-45deg, #d3f169 0.5em, transparent 0.5em) 0 0/1em 1em;
|
||||
color: #8769f1;
|
||||
}
|
||||
|
||||
@ -668,7 +698,28 @@
|
||||
|
||||
.kotlin-4:hover {
|
||||
animation: zigzag 1s linear infinite;
|
||||
background: linear-gradient(135deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) -0.5em 0, linear-gradient(225deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) -0.5em 0, linear-gradient(315deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) 0 0, linear-gradient(45deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) 0 0;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(238, 161, 99, 0.25) 0.25em,
|
||||
transparent 0.25em
|
||||
) -0.5em 0,
|
||||
linear-gradient(
|
||||
225deg,
|
||||
rgba(238, 161, 99, 0.25) 0.25em,
|
||||
transparent 0.25em
|
||||
) -0.5em 0,
|
||||
linear-gradient(
|
||||
315deg,
|
||||
rgba(238, 161, 99, 0.25) 0.25em,
|
||||
transparent 0.25em
|
||||
)
|
||||
0 0,
|
||||
linear-gradient(
|
||||
45deg,
|
||||
rgba(238, 161, 99, 0.25) 0.25em,
|
||||
transparent 0.25em
|
||||
)
|
||||
0 0;
|
||||
background-size: 0.75em 0.75em;
|
||||
color: #63b0ee;
|
||||
}
|
||||
@ -685,7 +736,14 @@
|
||||
|
||||
.kotlin-5:hover {
|
||||
animation: pulse 1s ease-in infinite;
|
||||
background: radial-gradient(circle, rgba(249, 135, 155, 0.25) 43%, transparent 50%) 0 0/1em 1em, radial-gradient(circle, rgba(249, 135, 155, 0.25) 43%, transparent 50%) 0.5em 0.5em/2em 2em;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(249, 135, 155, 0.25) 43%,
|
||||
transparent 50%
|
||||
)
|
||||
0 0/1em 1em,
|
||||
radial-gradient(circle, rgba(249, 135, 155, 0.25) 43%, transparent 50%)
|
||||
0.5em 0.5em/2em 2em;
|
||||
color: #0bdcb7;
|
||||
}
|
||||
|
||||
@ -707,17 +765,17 @@
|
||||
|
||||
.vb {
|
||||
position: relative;
|
||||
width: 158px;
|
||||
color: #FA5555;
|
||||
width: 120px;
|
||||
color: #fa5555;
|
||||
height: 40px;
|
||||
line-height: 42px;
|
||||
border: 2px solid #FA5555;
|
||||
border: 2px solid #fa5555;
|
||||
border-radius: 14px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dot {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 32px;
|
||||
@ -728,16 +786,15 @@
|
||||
}
|
||||
|
||||
.dot:after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
background: #FA5555;
|
||||
background: #fa5555;
|
||||
border-radius: 50%;
|
||||
border: 4px solid #FA5555;
|
||||
box-shadow: 0 0 .7em #FFF,
|
||||
0 0 2em #FA5555;
|
||||
border: 4px solid #fa5555;
|
||||
box-shadow: 0 0 0.7em #fff, 0 0 2em #fa5555;
|
||||
}
|
||||
|
||||
.vb:hover .dot,
|
||||
@ -746,18 +803,18 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*calc(160px - 36px) 按钮宽度 - dot宽度 - 边框宽度*/
|
||||
/*calc(122px - 36px) 按钮宽度 - dot宽度 - 边框宽度*/
|
||||
@keyframes atom {
|
||||
0% {
|
||||
transform: translateX(0) rotate(0);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translateX(calc(160px - 36px)) rotate(0);
|
||||
transform: translateX(calc(122px - 36px)) rotate(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(calc(160px - 36px)) rotate(180deg);
|
||||
transform: translateX(calc(122px - 36px)) rotate(180deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
@ -776,16 +833,15 @@
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
left: calc(50vw - 87px);
|
||||
width: 160px;
|
||||
width: 122px;
|
||||
line-height: 44px;
|
||||
color: #fff;
|
||||
background: #2194E0;
|
||||
background: #2194e0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-down:active {
|
||||
opacity: .8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
|
||||
</html>
|
||||
@ -25,7 +25,7 @@
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
import { defineComponent, ref, unref, onMounted } from "vue";
|
||||
import { defineComponent, ref, unref, onMounted, onUnmounted } from "vue";
|
||||
import { templateRef } from "@vueuse/core";
|
||||
|
||||
export default defineComponent({
|
||||
@ -116,6 +116,10 @@ export default defineComponent({
|
||||
});
|
||||
});
|
||||
|
||||
// onUnmounted(() => {
|
||||
// console.log(props.lf);
|
||||
// });
|
||||
|
||||
return {
|
||||
focusIndex,
|
||||
titleLists,
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<div class="main-container">
|
||||
<div :class="{ 'fixed-header': fixedHeader }">
|
||||
<!-- 顶部导航栏 -->
|
||||
<navbar v-if="!containerHiddenSideBar" />
|
||||
<navbar v-show="!containerHiddenSideBar" />
|
||||
<!-- tabs标签页 -->
|
||||
<tag>
|
||||
<i
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
prefix="$"
|
||||
:duration="1000"
|
||||
:color="'#409EFF'"
|
||||
:fontSize="'60px'"
|
||||
:fontSize="'2.3em'"
|
||||
:startVal="1"
|
||||
:endVal="1000"
|
||||
/>
|
||||
@ -19,7 +19,7 @@
|
||||
prefix="$"
|
||||
:duration="2000"
|
||||
:color="'green'"
|
||||
:fontSize="'60px'"
|
||||
:fontSize="'2.3em'"
|
||||
:startVal="1"
|
||||
:endVal="2000"
|
||||
/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user