public/electron-egg
1
0
Fork 0
mirror of https://gitee.com/dromara/electron-egg.git synced 2026-05-14 11:52:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

ui

Browse Source
This commit is contained in:
哆啦好梦
2023-09-07 17:47:45 +08:00
parent 99ba0ec588
commit efe9c62d82
5 changed files with 193 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
frontend/index.html
View File

@@ -5,8 +5,100 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
<title></title> <title></title>
<!-- 优化：vue渲染未完成之前，先加一个css动画 -->
<style>
#loadingPage {
background-color: #dedede;
font-size: 12px;
}
.base {
height: 9em;
left: 50%;
margin: -7.5em;
padding: 3em;
position: absolute;
top: 40%;
width: 9em;
transform: rotateX(45deg) rotateZ(45deg);
transform-style: preserve-3d;
}
.cube,
.cube:after,
.cube:before {
content: '';
float: left;
height: 3em;
position: absolute;
width: 3em;
}
/* Top */
.cube {
background-color: #06cf68;
position: relative;
transform: translateZ(3em);
transform-style: preserve-3d;
transition: .25s;
box-shadow: 13em 13em 1.5em rgba(0, 0, 0, 0.1);
animation: anim 1s infinite;
}
.cube:after {
background-color: #05a151;
transform: rotateX(-90deg) translateY(3em);
transform-origin: 100% 100%;
}
.cube:before {
background-color: #026934;
transform: rotateY(90deg) translateX(3em);
transform-origin: 100% 0;
}
.cube:nth-child(1) {
animation-delay: 0.05s;
}
.cube:nth-child(2) {
animation-delay: 0.1s;
}
.cube:nth-child(3) {
animation-delay: 0.15s;
}
.cube:nth-child(4) {
animation-delay: 0.2s;
}
.cube:nth-child(5) {
animation-delay: 0.25s;
}
.cube:nth-child(6) {
animation-delay: 0.3s;
}
.cube:nth-child(7) {
animation-delay: 0.35s;
}
.cube:nth-child(8) {
animation-delay: 0.4s;
}
.cube:nth-child(9) {
animation-delay: 0.45s;
}
@keyframes anim {
50% {
transform: translateZ(0.5em);
}
}
</style>
</head> </head>
<body> <body>
<div id="loadingPage">
<div class='base'>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
</div>
</div>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>

13
frontend/src/App.vue
View File

@@ -1,16 +1,13 @@
<template> <template>
<router-view/> <router-view/>
</template> </template>
<script> <script>
export default { export default {
name: 'App', name: 'App',
components: {}, setup() {
data() { document.getElementById('loadingPage').remove()
return {}; }
},
watch: {},
methods: {}
} }
</script> </script>
<style lang="less"></style> <style lang="less"></style>

2
public/dist/assets/Index-d7469016.js → public/dist/assets/Index-40318c85.js vendored
View File

@@ -1 +1 @@
import{_ as a,o as t,c as s,a as e}from"./index-f45cb953.js";const c={data:()=>({test:""}),methods:{test(){}}},d={id:"hero"},f=[e('<h1 class="tagline" data-v-19ff7cd7><span class="accent" data-v-19ff7cd7>Electron-Egg</span></h1><p class="description" data-v-19ff7cd7> A fast, desktop software development framework </p><p class="actions" data-v-19ff7cd7><a class="setup" href="https://www.kaka996.com/" target="_blank" data-v-19ff7cd7>Get Started</a></p>',3)];const o=a(c,[["render",function(a,e,c,o,n,r){return t(),s("section",d,f)}],["__scopeId","data-v-19ff7cd7"]]);export{o as default}; import{_ as a,o as t,c as s,a as e}from"./index-02b24eb9.js";const c={data:()=>({test:""}),methods:{test(){}}},d={id:"hero"},f=[e('<h1 class="tagline" data-v-19ff7cd7><span class="accent" data-v-19ff7cd7>Electron-Egg</span></h1><p class="description" data-v-19ff7cd7> A fast, desktop software development framework </p><p class="actions" data-v-19ff7cd7><a class="setup" href="https://www.kaka996.com/" target="_blank" data-v-19ff7cd7>Get Started</a></p>',3)];const o=a(c,[["render",function(a,e,c,o,n,r){return t(),s("section",d,f)}],["__scopeId","data-v-19ff7cd7"]]);export{o as default};

4
public/dist/assets/index-f45cb953.js → public/dist/assets/index-02b24eb9.js vendored
View File

File diff suppressed because one or more lines are too long

94
public/dist/index.html vendored
View File

@@ -5,10 +5,102 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
<title></title> <title></title>
<script type="module" crossorigin src="./assets/index-f45cb953.js"></script> <!-- 优化：vue渲染未完成之前，先加一个css动画 -->
<style>
#loadingPage {
background-color: #dedede;
font-size: 12px;
}
.base {
height: 9em;
left: 50%;
margin: -7.5em;
padding: 3em;
position: absolute;
top: 40%;
width: 9em;
transform: rotateX(45deg) rotateZ(45deg);
transform-style: preserve-3d;
}
.cube,
.cube:after,
.cube:before {
content: '';
float: left;
height: 3em;
position: absolute;
width: 3em;
}
/* Top */
.cube {
background-color: #06cf68;
position: relative;
transform: translateZ(3em);
transform-style: preserve-3d;
transition: .25s;
box-shadow: 13em 13em 1.5em rgba(0, 0, 0, 0.1);
animation: anim 1s infinite;
}
.cube:after {
background-color: #05a151;
transform: rotateX(-90deg) translateY(3em);
transform-origin: 100% 100%;
}
.cube:before {
background-color: #026934;
transform: rotateY(90deg) translateX(3em);
transform-origin: 100% 0;
}
.cube:nth-child(1) {
animation-delay: 0.05s;
}
.cube:nth-child(2) {
animation-delay: 0.1s;
}
.cube:nth-child(3) {
animation-delay: 0.15s;
}
.cube:nth-child(4) {
animation-delay: 0.2s;
}
.cube:nth-child(5) {
animation-delay: 0.25s;
}
.cube:nth-child(6) {
animation-delay: 0.3s;
}
.cube:nth-child(7) {
animation-delay: 0.35s;
}
.cube:nth-child(8) {
animation-delay: 0.4s;
}
.cube:nth-child(9) {
animation-delay: 0.45s;
}
@keyframes anim {
50% {
transform: translateZ(0.5em);
}
}
</style>
<script type="module" crossorigin src="./assets/index-02b24eb9.js"></script>
<link rel="stylesheet" href="./assets/index-b7b2ffb7.css"> <link rel="stylesheet" href="./assets/index-b7b2ffb7.css">
</head> </head>
<body> <body>
<div id="loadingPage">
<div class='base'>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
</div>
</div>
<div id="app"></div> <div id="app"></div>
</body> </body>